项目组织及脚手架安装

步骤
1. npm install express-generator -g 全局安装脚手架
2.express-h 生成帮助信息
3. cd 到文件夹
4. express --view=ejs app.js 创建项目
5. cd app.js
6. npm install 安装依赖
7. set DEBUG=* npm start
8. npm start 等价于node ./bin/www 启动项目(***重点)

项目组织

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

引题

前面几节express小项目我们已经学习了express基础情况,养成了基本到项目的习惯,例如html放到views,静态文件放到static.
学习了路由,传参数、模板渲染,集成数据库,debug日志。
但随着项目复杂,发现一些缺点和不便;

  1. 每次新项目都要重新安装第三方依赖。express debug body-parser mongodb ,每次安装还需要想一想需要哪些库,漏安装。
    2)每个程序员对项目组织理解和起名习惯不一样,A程序员把html放到’views’文件夹下,静态文件放到’static’。B程序员,‘www’,‘public’。C等。
    3)逻辑越来越多,app.js可能有两三千行,难以维护,可以nodejs模块化export和require,但跟上条问题一样,每个程序员的划分标准不一样。
    4)跟上一条类似,有些代码 例如数据库代码(连接、异常、切换库)非常重要。 想把重复代码抽离出来。
    5) 运行不方便,需要cd、设置DEBUG环境变量。

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

脚手架

脚手架: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:\users\xxx\appData\roming\npm)是否在环境变量中

创建项目
cd 想创建项目文件夹的父目录下
express --view=ejs [myapp]
安装依赖
cd [myapp]
npm install 就会自动根据同级目录下到package.json中依赖描述安装所有包。
启动项目
普通运行:npm start 但仍然会很多日志,一般用这个就可以。
debug级别日志:cmd set DEBUG=mpapp:* ; 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/http-morgan
  1. 运行程序
    之前运行 node xxx.js
    原理在package.json中script属性里配置
    'npm start’等于 ‘node ./bin/www’
    作用是用更简短易于理解的npm命令代替node xxx.js。
    有的人可能觉得并没有简洁什么,但后期命令可能比较长
    node app.js -logpath C:\log\xx.log --view=ejs --DEBUG=*
    还可能有多种命令 正常运行,debug运行,编译的。
    npm 不只是包管理工具,还是node命令管理工具。
  2. 项目入口
    app.js 里主要是express创建app实例,进行基础配置,导出app.
    bin/www 引入app对象,开启http server监听服务。
    相当于原来app.js里到内容 运行服务器到代码抽离了出来。
    最终入口 bin/www
  3. 路由
    跟级别路由再app.js中,导入了router/xxx.js的子路由
    // 跟级别路由
    // 把项目按逻辑大模块划分跟清晰。例如users包括注册、登录;
    // 支付模块包括支付宝、微信。
    // 子路由 route/xxx.js 被注入到了总对象app中。
    优点,划分功能逻辑,适合大型项目开发。
    http://www.expressjs.com.cn/4x/api.html#router.route
  4. 报错
    主要看报错结论Error: xxx 和报错栈跟自己写的代码相关的。
    如果信息不足百度’express Errorxxx’
    如果想检查逻辑和变量信息,建议打断点的debug,但是vscode总会启动错误路径的其它的js文件,无法正常debug。需要手动编辑vscode的debug文件。目录右键拷贝入口js文件的绝对路径,修改到配置文件的program值里面。
  5. 框架提供了基本架构,但是自己的业务逻辑可能需要其它包。在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值