跟我一起学Express之安装、入口分析、接口实现

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都为我们做了什么吧！