• 改善项目组织


    项目组织
    ===
    项目组织:项目文件、目录如何放置。  

    ## 引题
    前面几节express小项目我们已经学习了express基础知识, 养着了基本到项目组织习惯,例如html放到views,静态文件放到static。
    学习了路由,传参数,模板渲染,集成数据库,debug日志。
    但随着项目变复杂,发现一些缺点和不便:
    1)每次新项目都要重复安装第三方依赖。 express  debug  body-parser  mongodb  ejs,每次安装还需要想一想需要哪些库,漏安装。
    2)每个程序员对项目组织理解和起名习惯不一样。  A程序员把html放到'views'文件夹下,静态文件放到'static'。B程序员,'www' ,'public'。C等。
    3)逻辑越来越多,app.js可能两三千行,难以维护。 可以nodejs模块化export和require,但跟上条问题一样,每个程序员但划分标准不一样。
    4)跟上一条类似,有些代码  例如数据库代码(连接、异常、切换库)非常重复。 想把重复但代码抽离出来。
    5)运行不方便,需要cd、设置DEBUG环境变量。

    这时我们想,有没有一个架构师把express相关常用的包整理好,项目组织整理好,搭建好项目框架,封装好,供其它普通程序员使用。

    ## 脚手架
    脚手架:scaffold , 基于核心内容加上相关生态,帮用户做一些自动操作。
    express-generator: express生成器,是express生态的脚手架项目,帮助我们更方便生成项目,适合中大型项目和公司协作开发。

    安装脚手架 `npm install express-generator -g`    。注意--global全局安装,安装之后可以在终端生成express命令。
    完成`express -h` 可以看到帮助信息即为成功。 
    可能的报错:
    1)如果报错没有permission权限,打开管理员权限终端再运行。  windows点击开始-cmd-右键以管理员权限打开。
    2)如果vscode里的终端不生效,到系统原生cmd powershell中试试。
    3)安装成功,终端无法调用。原因,win7用户的早版本powershell有bug试试cmd。没反应的试试重启终端。还不行的检查上图目录下有没有express.cmd和全局npm包路径(c:usersxxxappData oming pm)是否在环境变量中。

    1. 创建项目
    `cd 想创建项目文件夹的父目录下`
    `express --view=ejs [myapp]`
    2. 安装依赖
    `cd [myapp]`
    `npm install`   就会自动根据同级目录下到package.json中依赖描述安装所有包。
    3. 启动项目
    普通运行:`npm start`      但仍然会很多日志,一般用这个就可以。
    debug级别日志: cmd`set DEBUG=myapp:* ; npm start`  简写 `set DEBUG=* ; npm start`  ps`$env:DEBUG='*' & npm start`


    ## 脚手架生成项目组织的理解
    1. bin/www    项目'访问入口'。这个文件实质是js脚本。
    2. public     静态文件目录。因为css没一个页面都可以引用,所以'公共的'
    3. router     路由和视图函数(项目逻辑)
    4. views      模板
    5. app.js     项目'代码的入口'
    6. package.json   依赖描述。内置常用包,其它包如数据库包仍需自己安装。

    ### 细节理解
    1. package.json 依赖 ,除了之前学过的:
    - cookie-parser 操作cookie  
    - http-errors  返回封装好的http错误响应。https://www.npmjs.com/package/http-errors  
    - morgan   http日志库,debug日志库负责跟express框架相关,morgan跟http相关的日志。
    https://www.npmjs.com/package/morgan
    2. 运行程序
    之前运行 node xxx.js。
    原理在package.json中script属性里配置
    'npm start' 等于 'node ./bin/www'
    作用,用更简短易于理解的npm命令取代node xxx.js。
    有的人可能觉得并没有简洁什么,但后期命令可能比较长
    假设`node app.js -logpath C:logxx.log --view=ejs --DEBUG=*  `
    还可能有多种命令 正常运行,debug运行,编译的。 
    npm不只是包管理工具,还是node命令管理工具。
    3. 项目入口
    app.js  里主要是express创建app实例,进行基础配置,导出app。
    bin/www  引入app对象,开启http server监听服务。
    相当于原来app.js里到内容 运行服务器到代码抽离了出来。
    最终入口 bin/www
    4. 路由
    根级别路由在app.js中,导入了router/xxx.js的子路由。
    // 根级路由。 
    // 把项目逻辑按大模块划分更清晰。例如users包括注册、登陆;
    // 支付模块包括支付宝、微信。
    // 子路由 route/xxx.js 被注入到了总对象app中。
    优点,划分功能逻辑,适合大型项目开发。
    http://www.expressjs.com.cn/4x/api.html#router.route
    5. 报错
    主要看报错结论Error: xxx  和报错栈跟自己写的代码相关的。
    如果信息不足百度' express Errorxxx'

    如果想检查逻辑和变量信息,简易大断点的debug,但是vscode总会启动错误路径的其它的js文件,无法正常debug。需要手动编辑vscode的debug文件。目录右键拷贝入口js文件的绝对路径,修改到配置文件的program值里面。
    6. 框架提供了基本架构,但是自己的业务逻辑可能需要其它包。


    ## 可能的报错
    node find modules  未安装依赖
    报了一堆错 properbly not npm failt , 原因 win7的powershell运行node xxx.js有问题
    显示成功,但项目文件夹内无内容。 原因,系统问题文件没创建成功,尝试再次运行。
    访问不到局域网投屏地址




  • 相关阅读:
    android异步更新UI的方法
    android中不同acitity之间进行数据传递(或者数据保存)
    android post数据到服务器端工具类(包括postjson字符串、键值对)
    android GestureDetector
    android实现圆角矩形
    android调用图库获取图片显示在img中
    (转)Http上传 vs Ftp上传
    (转)[VSTS] 让ADO.NET Entity Framework支持Oracle数据库
    (转)网站设计常用技巧收集
    (转)有了jQuery.Jcrop,选取美女的哪个部位你说了算
  • 原文地址:https://www.cnblogs.com/5254kghhgkj/p/11880326.html
Copyright © 2020-2023  润新知