快速构建express项目

2022-10-29 18:32:49

构建node项目

github地址

https://github.com/haoyongliang/quickly-create-node-project.git

创建最基本的node项目

1.全局安装express

  1. npm install -g express

2.全局安装express-generator

  1. npm install -g express-generator

(输入express –help 测试是否安装成功)

3.进入到工程父目录

  1. cd [工程父目录名]

4.快速创建工程结构

  1. express -t [模板引擎名：ejs/jade] [工程名]

我一般是用express -e mypro

5.修改package.json,将里面的ejs依赖删除

6.安装node_modules

执行命令 node install

或者执行 npm install--production,只安装dependencies,不安装devdependencies

7. 安装supervisor

项目代码修改或者down机需要重启服务器，我使用的是supervisor，还可以用nodemon

  1. npm install --save supervisor

修改package.json

  1. "start": "supervisor ./bin/www"

8. 模板引擎和模板的修改

  1. 安装nunjucks模板引擎
  1. npm install --save nunjucks
  1. 在项目根目录添加config.js,内容如下
    

  1. var path = require('path')
    2. 

    3. 

  3. module.exports = {
    4. 

  4.   viewPath: path.join(__dirname, 'views')
    5. 

  5. }
    6.
  1. 替换app.js中的模板引擎，将ejs修改为nunjucks
    

  1. var nunjucks = require('art-template');
    2. 

  2. // 配置使用 NunJucks 模板引擎
    3. 

  3. nunjucks.configure(config.viewPath, {
    4. 

  4.   autoescape: true,
    5. 

  5.   express: app,
    6. 

  6.   watch: true,
    7. 

  7.   noCache: false
    8. 

  8. })
    9.

  1. 修改模板文件

    • 找到文件：views/index.ejs, views/error.ejs
    • 将文件后缀ejs修改为html
    • 将模板文件里面的<%= xx %>替换成{{ xxx}}

  2. 修改涉及到模板渲染的js:app.js,router/index.js

    • 将其中的render("xxx")加后缀修改成render("xxx.html")

9. 修改路由

  1. 在项目根目录(app.js所在目录)添加controllers目录，并在目录下添加index.js,用于存放路由的具体业务逻辑
    

  1. module.exports.homePage = (req, res, next) => { 
    2. 

  2.     res.render('index.html',{title:'Express'});
    3. 

  3. }
    4.
  1. 修改routes/indexs.js路由，引用controllers/index.js
    

  1. var express = require('express');
    2. 

  2. var router = express.Router();
    3. 

  3. var handler = require('../controllers/index')
    4. 

  4. /* GET home page. */
    5. 

  5. router.get('/', handler.homePage);
    6. 

  6. module.exports = router;
    7.
  1. 去掉路由中的重复路径

    在routes目录下有个user.js路由，该路由的配置信息可能是
    

  1. route.use('/user/add', xxxHandler);
    2. 

  2. route.use('/user/edit', xxxHandler);
    3.

通过观察发现，每行都有'/user' 比较麻烦，为了简化配置

我们需要修改路由

  1. 在app.js中添加如下信息
    

  1. var user = require('./routes/user');
    2. 

  2. // 挂载用户路由
    3. 

  3. // 加上前缀，这样的话，user 中的路由就都必须是以 /user开头才行
    4. 

  4. app.use('/user',user);
    5.
  1. 修改routes/user.js
    

  1. var express = require('express');
    2. 

  2. var router = express.Router();
    3. 

  3. route.use('/add', xxxHandler);
    4. 

  4. route.use('/edit', function(req, res, next) {
    5. 

  5.   res.send('add student');
    6. 

  6. });
    7. 

  7. module.exports = router;
    8.

10. 测试是否可以正常运行

访问 http://localhost:3000/users/add

升级node项目：代码规范，托管

1. 添加代码规范

项目根目录新建文件.editorconfig,内容如下

    

  1. # http://editorconfig.org
    2. 

    3. 

  3. root = true
    4. 

    5. 

  5. # 对所有文件生效 
    6. 

  6. [*] 
    7. 

  7. charset = utf-8 
    8. 

  8. # 缩进类型 可选值，space，tab 
    9. 

  9. indent_style = space
    10. 

    11. 

  11. # 缩进数量 
    12. 

  12. indent_size = 2
    13. 

    14. 

  14. # 换行符格式 
    15. 

  15. end_of_line = lf
    16. 

    17. 

  17. # 是否在最后一行添加换行 
    18. 

  18. insert_final_newline = true 
    19. 

  19. trim_trailing_whitespace = true
    20. 

    21. 

  21. # 对后缀名为 md 的文件生效 
    22. 

  22. [*.md] 
    23. 

  23. trim_trailing_whitespace = false
    24.

使用github托管

  • 新建.gitignore文件，将不需要托管的文件或文件夹添加进去，下面是我的配置信息
    • node_modules
    • .idea
    • dist
  • git init
  • git add .
  • git commit -m "第一次代码提交"
  • git remote add origin gitUrl
  • git push origin master

添加babel ES6转码器

1.安装ES6转码规则

  1. npm install --save-dev babel-preset-es2015

2.在项目根目录添加.babelrc配置文件，内容如下

    

  1.   {
    2. 

  2.     "presets": [
    3. 

  3.       "es2015"
    4. 

  4.     ],
    5. 

  5.     "plugins": []
    6. 

  6.   }
    7.

3.在项目中添加babel-cli工具，用于命令行转码

注意：只能使用npm,别使用npm install 安装包依赖，会报丢失模块错误,如果要使用cnpm安装，请全局安装babel-cli工具(参见阮一峰ES6)

  1. npm install --save-dev babel-cli

4.修改package.json

    

  1. {
    2. 

  2.   "devDependencies": {
    3. 

  3.     "babel-cli": "^6.0.0"
    4. 

  4.   },
    5. 

  5.   "scripts": {
    6. 

  6.     "build": "babel ./src -d ./dist"
    7. 

  7.   },
    8. 

  8. }
    9.

5.在项目跟目录新建src和dist目录，将bin,controllers,routers文件夹和app.js,config.js文件放入src目录,修改bin/www 添加后缀bin/www.js

6.运行 命令进行转码,测试安装是否顺利

  1. npm run build

7.安装babel-register

  • 安装
  1. npm install --save-dev babel-register

8.在项目根目录新建index.js,内容如下

    

  1. require('babel-register')
    2. 

  2. require('./src/bin/www')
    3.

9.配置package.json 中的scripts(执行命令)

  • "prebuild","prestart" 可以不配置，如果网非常差，前提node_module安装完美
    

  1.     "prebuild": "npm install"
    2. 

  2.     "build": "babel ./src -d ./dist",
    3. 

    4. 

  4.     "predev": "npm install",
    5. 

  5.     "dev": "supervisor ./index",
    6. 

    7. 

  7.     "prestart": "npm run build",
    8. 

  8.     "start": "supervisor ./dist/bin/www"
    9.

  • 开发环境

    • npm install 安装依赖包
    • npm run build 编译代码
    • npm run dev 通过babel-register改写require命令

  • 生成环境

    • npm install -production 安装依赖包
    • npm run build 编译代码
    • npm start 直接执行app.js不需要改写babel-register命令

10.修改src/app.js src/config.js

  • 修改config.js代码如下
    

  1. viewPath: path.join(__dirname, './../views'),
    2. 

  2. publicPath:path.join(__dirname,'./../public'),
    3. 

  3. staticPath:path.join(__dirname,'./../static'),
    4. 

  4. node_modulesPath:path.join(__dirname,'./../node_modules'),
    5.
  • 修改app.js中静态资源配置信息为
    

  1. app.use('/public',express.static(config.publicPath));
    2. 

  2. app.use('/node_modules',express.static(config.node_modulesPath));
    3. 

  3. app.use('/static',express.static(config.staticPath));
    4.

11.使用ES6语法更新js代码

  • 常用的语法有
    • var http = require('http') –> import http from 'http';//全部导入
    • var path = require('path') –> import { join } from 'path';//导入指定方法
    • var myModel = require('./myModel') –> import * as myModel from './myModel';//导入自定义模块
    • export function methodName(){}//在自定义模块中创建一个方法
    • export default methodName/objName;//使用export default 命令
    • 通过 const 定义常量
    • 通过 let 定义变量
    • 使用模板字符串
    • 通过class 定义类
    • 直接函数名(){..}定义函数，无需通过function关键字
上一篇：MySQL学习笔记 -- 数据表的基本操作


下一篇：eclipse中不能找到dubbo.xsd解决方法