> 文档中心 > 【Vue3+Express实战-3】实现新增课程接口

【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进行测试。

测试结果欧克!

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

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

【Vue3+Express实战-3】实现新增课程接口 阅读世界,共赴山海 【Vue3+Express实战-3】实现新增课程接口 423全民读书节,邀你共读