【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函数。在这个函数中,我们要做三件事。
- 解析请求传递的数据
- 将数据保存到数据库
- 往前台返回操作的结果,也就是响应!
所以这个接口会接受两个参数,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进行测试。
测试结果欧克!
阅读世界,共赴山海 423全民读书节,邀你共读