1.jpg
什么是Express
Express是一套基于NodeJS的框架，见官网https://www.expressjs.com.cn/
如前端框架一样，他对一些底层的东西做了封装，我们在开发的时候可以把主要精力放在业务代码上，而不用像之前我们原生NodeJS那样去处理cookie、session、postData、日志、等等一些比较通用的功能，带来的高效开发，让我们在工作中更加高效。
现在我们已经有了NodeJS原生基础，那接下来就走进express的世界吧！
安装
我们就像前端需要安装脚手架一样，同样，express也是需要安装一个脚手架的。
yarn add express-generator -g
我们在全局安装完脚手架后，就可以用他来生成项目了
express blog-express
在某一项目目录下执行上面的代码， 我们就生成了一个项目，然后看/bin/www.js，我们发现其监听的是3000端口，在浏览器上输入localhost:3000看看吧！
和我们不依赖框架做开发一样，我们还需要为其引入nodemon和cross-env来达到一个自动化的目的。
yarn add nodemon cross-env -D
"scripts": {
"start": "node ./bin/www",
"dev": "cross-env NODE_ENV=dev nodemon ./bin/www"
},
现在我们通过yarn run dev来启动吧！
入口
我们已经通过脚手架生成完项目，下面我将简单通过代码注释的形式，为大家解读一下入口文件的各行代码的含义，大家只需要明白其原理即可，不必太深究细节，这里我们先不考虑源码探索
var createError = require('http-errors');//用来处理异常，见下方，传入404，即可自动处理404情况，可在现有项目中输入404路径实验
var express = require('express');// 框架实例，我们所依赖的框架核心
var path = require('path');// 处理路径，这个应该不陌生吧
var cookieParser = require('cookie-parser');//用来解析cookie的，通过其处理后，可直接在req中获取cookie
var logger = require('morgan');//日志记录插件
var indexRouter = require('./routes/index');// 引入的路由
var usersRouter = require('./routes/users');//同上
var app = express();//插件引入完成，我们需要实例化一个app
// // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//上面两行代码是生成前端页面用的，这里不需要考虑，因为express是一套面向全栈的框架，这里我们只考虑web server。
app.use(logger('dev'));//日志打印
app.use(express.json());//处理postData为json格式的数据
app.use(express.urlencoded({ extended: false }));//同上，处理postData为urlencoded格式的数据
app.use(cookieParser());//解析cookie
app.use(express.static(path.join(__dirname, 'public')));//不用管，也是做前端渲染用的，这里不考虑
app.use('/', indexRouter);// 引入路由，由此可进入子路由
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});//处理异常
// error handler
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') === 'dev' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});//处理错误
module.exports = app;
大家理解完上面的代码后，可以对比我们之使用原生写的入口，会更加深对其的理解，但建议现阶段不必深究其细节
GET和POST接口
通过上面对入口的分析，和对express生成项目中模板的观察，我们已经发现，其做了大量的封装，我们在处理接口时，不再像之前处理原生那样去处理cookie,处理session,处理postData等，这就简单了许多，我们只把精力放在业务代码上就好了，好，废话不多说，下面就一起看看示例吧
GET接口
var express = require('express');
var router = express.Router();
router.get('/list', function(req, res, next) {
res.json({
errno: 0,
data: [1, 2, 3]
})
});
router.get('/detail', function(req, res, next) {
res.json({
errno: 0,
data: 'ok'
})
});
module.exports = router;
// app.js
const blogRouter = require('./routes/blog');
app.use('/api/blog', blogRouter);
其中的res.json就是将我们的返回数据转换为json。其他的都不需要多关注。
POST接口
var express = require('express');
var router = express.Router();
router.post('/login', function(req, res, next) {
const { username, password } = req.body
res.json({
errno: 0,
data: {
username,
password,
}
})
});
module.exports = router;
// app.js
const userRouter = require('./routes/user')
app.use('/api/user', userRouter);
可以看到，对于post请求，我们和get的处理方式几乎一样，不再需要特殊处理postData，直接在req.body中就可获取。这样是不是简单多了呢？
写在最后
可以看到，express为我们做了大量的封装，对于接口，我们只需要在app.js引入对应的路由，然后用几乎相似的手段去处理不同的请求，并且，我们还可以设置一类路由的统一前缀，方便维护修改等，这样一来，我们就可以把心思放在业务代码上了，好了，用你的浏览器和postman测试一下吧！也可以对比之前我们用原生写的代码，来看看express都为我们做了什么吧！
网友评论