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=20req.body：post请求参数 {name:xl,age20}req.params: 匹配动态路由参数 /login/:idreq.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 layoutblock contenth1= titlep Welcome to #{title}

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

doctype html
htmlheadtitle= titlelink(rel='stylesheet', href='/stylesheets/style.css')bodyblock 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 developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});module.exports = app;