node.js express框架开发入门教程

---

前言

node.js express框架开发入门教程，包括express-generator生成器、nodemon、基础路由、中间件、模版引擎介绍、app.js解读等

---

一、Express 生成器（express-generator）

使用express-generator，能快速创建应用程序骨架，类似vue脚手架帮我们搭建项目结构，并在基础上进行开发调试运行。

二、快速安装

1.express框架+express-generator生成器安装

npm install express express-generator -g

需要注意express必须全局-g安装才能识别后面的express命令

2.使用pug视图引擎创建项目,projectName 为项目名称自定义

express projectName  --view=pug

也可以使用其他模版引擎例如jade、mustache、dust、ejs等，不加--view=pug默认jade引擎，官方已弃用，现在推荐用pug。

模版引擎主要用来服务端渲染HTML，在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件

cd projectName  

加载依赖

npm install

启动项目

npm start

端口号默认3000，浏览器输入http://localhost:3000出现如下界面即可表示项目启动成功

三、安装热更新插件 nodemon

生成器默认修改代码保存后不更新需要安装nodemon插件来支持热更新

安装插件

npm install nodemon --save

修改启动配置
package.json：

  "scripts": {
    "start": "nodemon ./bin/www"
  },

重新 npm start 启动生效

四、目录结构

├── app.js  ---初始化入口
├── bin   
│   └── www  ---运行文件
├── package.json ---配置
├── public   ---静态资源
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes  ---路由
│   ├── index.js
│   └── users.js
└── views  ---模版引擎，生成html页面
    ├── error.pug
    ├── index.pug
    └── layout.pug

1. public文件夹

public 静态资源文件夹,放置图片、js脚本或css资源文件等，在app.js通过设置

app.use(express.static(path.join(__dirname, 'public')));

可以直接访问服务器静态资源，例如:http://localhost:3000/images/a.jpg

可以自定义路径前缀

app.use('/static',express.static(path.join(__dirname, 'public')));

访问地址变为

http://localhost:3000/static/images/a.jpg

需要注意的express.static 内置中间件函数需要在路由设置前面执行才能生效

2.routes路由

routes文件夹放置所有路由文件，并在app.js引入。项目默认内置routers/index.js、routers/user.js2个路由文件，可按 需添加例如， 新建demo.js文件

写入

var express = require('express');
var router = express.Router();

//get请求
router.get('/login', function(req, res, next) {
  res.send('login')
});

//post请求
router.post('/login', function(req, res, next) {
  res.send({
     code:200,
     msg:'success'
  })
});

module.exports = router;

通过app.use(url,router)在app.js引入使用

app.use('/demo',demoRouter)

访问:http://localhost:3000/demo/login

其他请求方式：

router.post(),
router.put(),
router.delete()
router.all()

router.all()将匹配所有的请求方式，例如定义了router.all(‘/login’,(req,res,next)=>{}),
客户端不管是用get或者post或put请求/login接口都将匹配all执行相应响应逻辑

入参

function(req, res, next){
}

req：请求对象/请求体

常见属性：
       req.query：get请求参数  /login?name=xl&age=20
       req.body：post请求参数 {name:xl,age20}
       req.params: 匹配动态路由参数 /login/:id
       req.method: 请求方式
       req.url :请求路由
       req.get 获取指定的请求头字段   req.get('content-type')

res：响应对象/响应体

常见属性：
       res.set：设置响应头字段  res.set('Content-Type', 'text/plain')
       res.status 设置响应状态码 res.status(403）
       res.json 向客户端发送json数据类型  res.json({data:true})
       res.send 向客户端发送任何数据类型
       res.sendFile 向客户端发送文件 res.sendFile(path [, options] [, fn])
       res.render view模版文件 HTML 字符串发送到客户端 res.render(view [, locals] [, callback])

next：进入下个中间件回调,没有执行任何响应（res.sendxxxx或res.json）且没调用next(),请求将被挂起。调用了next(),代码将进入下一个中间件

3. view 模版引擎

模版引擎作用是通过模版语法把代码转换为html字符串返回给客户端渲染出html页面

在app.js可以看到如下代码：

var indexRouter = require('./routes/index');
.....
.....
app.set('views', path.join(__dirname, 'views'));//设置模版引擎文件夹
app.set('view engine', 'pug');//设置pug为模版引擎
.....
......
app.use('/', indexRouter);

指定了模版文件夹views和使用pug作为引擎，当浏览器访问http://localhost:3000，匹配路由/加载
routes/index.js：

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

通过res.render返回views/index.pug 模版给客户端渲染，传入动态值title=‘Express’

views/index.pug代码如下 ：

extends layout

block content
  h1= title
  p Welcome to #{title}

extends layout继承了views/layout.pug 模版内容

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

并在body添加了h1标签内容为title，p标签内容为Welcome to #{title}
转换为html就是

<h1>Express</h1>
<p>Welcome to Express</p>

浏览器访问http://localhost:3000将显示如下界面：

至于模版引擎语法对应查看相应官方文档

4.app.js

app.js为项目入口文件，初始化执行。

var app = express();

通过express（）生成实例

app实例常用方法：

1.app.set(name,value)
将设置 name 分配给 value ,例如

app.set('views', path.join(__dirname, 'views'));// 设置模版文件夹
app.set('view engine', 'pug');//  设置模版引擎

2.app.use([path,] callback [, callback…])
在指定路径挂载指定的中间件函数或函数：当请求路径的基数与 path 匹配时执行中间件函数。

app.use((req, res, next) => {
  console.log('Time: %d', Date.now())
  next()
})

3.app.listen(path, [callback])
绑定并监听指定主机和端口上的连接。此方法与 Node 的 http.Server.listen() 相同

app.listen(3000,()=>{
  console.log('访问地址http://localhost:3000')
})

express常见方法：

方法	描述
express.json	使用 JSON 有效负载解析传入请求，并且基于 body-parser
express.static	提供静态文件
express.Router	创建一个新的 router 对象
express.urlencoded	使用 urlencoded 有效负载解析传入的请求，并且基于 body-parser。

例如：
1、设置解析请求传参编码格式为’content-type’:‘application/json’

var app = express();
app.use(express.json());//请求参数为json格式，通过res.body能获取到参数，如果不设置将获取到undefined

2、设置解析请求传参编码格式为’ application/x-www-form-urlencoded’

var app = express();
app.use(express.urlencoded({ extended: false }));//请求参数为query参数?a=1&b=2

extended设置false和true区别为：
false:采用querystring库解析参数，value是string类型无法解析嵌套多层
true:采用qs库解析参数，value是任意数据类型可以解析嵌套多层

3.设置静态文件

var app = express();
app.use(express.static('public'))
app.use(express.static('static'))

4.使用路由

var router = express.Router();
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

ps:1-3点都必须在使用路由前调用才会生效，也即中间件需要在路由匹配前使用，因为一旦路由路径匹配到如果不调用next(),直接给客户端作出响应后面代码就不执行了

五、app.js内部代码解读

//引入第三方模块
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

//引入路由文件模块
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//生成express实例
var app = express();

// 设置模版引擎目录，指定模版引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));//使用运行日志中间件
app.use(express.json());//解析json格式参数
app.use(express.urlencoded({ extended: false }));//解析query形式参数
app.use(cookieParser());//使用cookie中间件
app.use(express.static(path.join(__dirname, 'public')));//设置public为静态文件目录

app.use('/', indexRouter);//注册路由
app.use('/users', usersRouter);//注册路由

// 404中间件
app.use(function(req, res, next) {
  next(createError(404));
});

// 处理错误中间件
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;