Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口

前情回顾:

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

这一步是安装所需要的模块。

Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口_第1张图片
执行完,可见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等方式访问接口了
也可以自己写一写业务逻辑。

你可能感兴趣的:(vue,node.js,vue.js,学习,笔记,node.js)