前情回顾:
vue-element-admin项目学习笔记(1)安装、配置、启动项目
vue-element-admin项目学习笔记(2)main.js
文件分析
vue-element-admin项目学习笔记(3)路由分析一:静态路由
vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js
vue-element-admin项目学习笔记(5)路由分析三:动态路由匹配逻辑
Vue-Element-Admin项目学习笔记(6)Vuex状态管理
大家都知道,我们使用Vue做的很多项目,都是前后端分离的架构。
但是很多小伙伴并没有后端开发经验或者基础。
为了能让Vue-Element-Admin这个项目联调顺利进行,今天发一篇简单利用node.js实现后端接口的文档,希望能够帮到大家。
1、安装环境
前提是,你的计算机上安装了node.js,终端(命令行)执行命令node -v
如果能看到版本号,就是安装了。否则,先去安装。
然后,在任意目录下,新建目录,如:test
然后终端(命令行)进入目录,执行:
npm install express --save
这一步是安装所需要的模块。
执行完,可见test
文件夹中,多了如上文件和目录,安装成功。
2、新建入口文件
在test
文件夹中,新建一个文件:index.js
该文件,就是我们的核心文件了。
3、实现代码
将下列代码复制、粘贴进刚刚我们新建的index.js
文件中。
具体接口,按自己的需求调整就行。
注释写的很详细。
// 导入依赖包
const express = require('express');
// 导入express 赋给 app变量 后面使用
const app = express();
// 导入依赖包,用于将请求参数转化为json
const parser = require('body-parser');
app.use(parser.json());
// 定义一个返回json
const userInfo = {
code: 200,
msg: 'success',
data: {
name:'admin',
avatar:'http://img.duoziwang.com/2021/04/07242259901688.jpg',
introduction:'我是一个码农啊',
roles:['admin']
}
};
// 为app添加中间件处理跨域请求
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
// 实现了一个post监听的接口,接口路径 /api/user/login
//req 请求来的参数
//res 用于响应
app.post('/api/user/login', (req, res) => {
console.log(req.query);
console.log(req.body);
if (req.body['username']==='admin' && req.body['password']==='123456') {
res.send({ code: 200, msg: 'success', data: { token: 'fangdong-test-token' }});
} else {
res.send({ code: 201, msg: '用户名或密码不正确'});
}
});
// 实现了一个post监听的接口,接口路径 /api/user/logout
//req 请求来的参数
//res 用于响应
app.post('/api/user/logout', (req, res) => {
console.log('----------------------------------------');
console.log('POST:-> /api/user/logout');
console.log(req.query);
console.log(req.body);
console.log('----------------------------------------');
res.send({ code: 200, msg: 'logout success'});
});
// 实现了一个监听的接口,接口路径 /api/user/info
//req 请求来的参数
//res 用于响应
app.get('/api/user/info', (req, res) => {
console.log('token校验成功!')
res.send(userInfo);
});
// 监听9900端口
app.listen(9900, () => {
console.log('服务器运行在9900');
});
4、运行接口程序
在test
目录下执行:node index.js
此时,可以通过POSTMAN等方式访问接口了
也可以自己写一写业务逻辑。