【Vue3+Express实战-3】实现新增课程接口

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识！点我探索新世界！

【Vue3+Express实战-3】实现新增课程接口

在上一节课程中，我们成功的连接mysql数据库，并创建了一张tutorial表，有了这些最基本的条件，本节课程我们实现我们的第一个接口-新增课程接口！

对于一个新增课程的接口，我们在前台是通过发送post方式请求的，所以对于我们的后台也是一个post接口！

创建一个新的课程，我们需要包含title，description等关键信息。

有了这两个基础条件，我们开始正式编码！

controller层

作为一个程序员，相信大家都听过MVC解构，MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。。controller层，介于model层和View层之间，主要接收view层的指令，获取model的数据，并传递给view层。

我们在app下，创建controller文件夹，并定义一个tutorial.controller.js 文件。这个文件，主要定义我们所有的对model的操作。既然是对model的操作，我们首先要引入db和Tutorial模型实例。

const db = require("../models");
const Tutorial = db.tutorials;

三件事

下面我们定义一个create函数。在这个函数中，我们要做三件事。

1. 解析请求传递的数据
2. 将数据保存到数据库
3. 往前台返回操作的结果，也就是响应！

所以这个接口会接受两个参数，requset(请求体)和respnonse（响应体）。

exports.create = (req, res) => {

}

body-pasrser

下面我们第一步是解析post请求的参数，但是很遗憾，Express无法直接解析，我们这里需要借助一个第三方依赖来解析-body-parser，这个插件我们在第一节中已经安装好了，下面就是使用了。

这个插件使用很简单。我们在server.js中直接引入，然后直接通过Express的实例调用use方法就可以了，我们这里使用了解析json和urlencoded的功能，基本上已经覆盖了大部分的使用场景！

使用这个插件之后，我们就可以通过req.body来获取到数据啦！！！

更多细节可以直接访问官网：http://expressjs.com/en/resources/middleware/body-parser.html

const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

判断title是否存在

对于一个课程来说，title肯定是必须的，所以我们最开始要先判断title是否存在。直接判断req.body.title存不存在，

  if (!req.body.title) {
      res.status(400).send({
        message: "课程名称不能为空"
      });
      return;
    }

解析数据

创建临时变量存储数据

  **const** tutorial = {

   title: req.body.title,

   description: req.body.description,

   published: req.body.published ,

  };

保存数据，并响应

在Sequlize中，模型是 Sequelize 的本质. 模型是代表数据库中表的抽象. 在 Sequelize 中,它是一个 Model 的扩展类。通过define定义的模型，会绑定很多方法。例如create方法。

通过模型调用ceeate方法，可以不用写sql，保存数据。

 Tutorial.create(tutorial)
      .then(data => {
        res.send(data);
      })
      .catch(err => {
        res.status(500).send({
          message:
            err.message || "创建课程出错"
        });
      });

路由

我们已经有个controller层，可以操作数据库了！但是我们该如何来调用这个controller方法呢？就像是你去走亲戚，你肯定是要先找到亲戚家的大门，然后才能进去，进入之后，才能把带的礼品给亲戚啊！这个门，在Express中，我们称之为路由！

在Express的官方文档中，你可以看到，这样的定义路由的方式。这里的斜杠就相当于门，前台访问“/”这扇门，会调用后面的方法。

app.get('/', function (req, res) {
  res.send('root');
});

所以说，我们想要访问create方法，必须定义一个create路由。

那么我们是不是可以这样写。

const tutorials = require("../controllers/tutorial.controller.js");
app.get('/create',  tutorials.create(req,res));

但是我们这样写会带来另一个问题，假设我们有一个学生模型，他也有一个create接口，下面这样写是不是会直接冲突。

app.get('/create',  tutorials.create(req,res));
app.get('/create',  student.create(req,res));

所以我们需要加上一个前缀来区分

app.get('/tutorials/create',  tutorials.create(req,res));
app.get('/tutorials/create',  student.create(req,res));

当然了，这种方法还不是最优雅的，Express给我们提供了 express.Router 类来创建可安装的模块化路由处理程序。也就是按模块来定义路由。

这样的话，我们的代码就可以修改成：

module.exports = app => {
    const tutorials = require("../controllers/tutorial.controller.js");
    var router = require("express").Router();
    router.post("/", tutorials.create);
    app.use('/api/tutorials', router);
}

app.use(‘/api/tutorials’, router); 这句我们，定义了课程接口的前缀是api/tutorials，所以我们访问接口的时候，访问的地址就是：http://localhost:3000/api/tutorials

为啥，这里定义的是一个函数，你也可以不是函数，直接参考官网的写法也是可以的。

https://expressjs.com/zh-cn/guide/routing.html

我这样的好处，就是在server.js直接require就可以了。

require("./app/routes/turorial.routes")(app);

测试

上面我们定义了路由和controller，下面我们直接测试！因为还没有编写前台页面，我们直接使用psotman进行测试。

测试结果欧克！