前情回顧：

vue-element-admin項目學習筆記（1）安裝、配置、啟動項目
vue-element-admin項目學習筆記（2）main.js
文件分析
vue-element-admin項目學習筆記（3）路由分析一:靜態(tài)路由
vue-element-admin項目學習筆記（4）路由分析二:動態(tài)路由及permission.js
vue-element-admin項目學習筆記（5）路由分析三:動態(tài)路由匹配邏輯
Vue-Element-Admin項目學習筆記（6）Vuex狀態(tài)管理

大家都知道，我們使用Vue做的很多項目，都是前后端分離的架構(gòu)。

但是很多小伙伴并沒有后端開發(fā)經(jīng)驗或者基礎(chǔ)。

為了能讓Vue-Element-Admin這個項目聯(lián)調(diào)順利進行，今天發(fā)一篇簡單利用node.js實現(xiàn)后端接口的文檔，希望能夠幫到大家。

1、安裝環(huán)境

前提是，你的計算機上安裝了node.js，終端（命令行）執(zhí)行命令node -v如果能看到版本號，就是安裝了。否則，先去安裝。

然后，在任意目錄下，新建目錄，如：test

然后終端（命令行）進入目錄，執(zhí)行：

npm install express --save

這一步是安裝所需要的模塊。

執(zhí)行完，可見test文件夾中，多了如上文件和目錄，安裝成功。

2、新建入口文件

在test文件夾中，新建一個文件：index.js

該文件，就是我們的核心文件了。

3、實現(xiàn)代碼

將下列代碼復(fù)制、粘貼進剛剛我們新建的index.js文件中。

具體接口，按自己的需求調(diào)整就行。

注釋寫的很詳細。

// 導(dǎo)入依賴包
const express = require('express');
// 導(dǎo)入express 賦給 app變量 后面使用
const app = express();
// 導(dǎo)入依賴包，用于將請求參數(shù)轉(zhuǎn)化為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:'我是一個碼農(nóng)啊',
		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();
});
 

// 實現(xiàn)了一個post監(jiān)聽的接口，接口路徑 /api/user/login
//req 請求來的參數(shù)
//res  用于響應(yīng)
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: '用戶名或密碼不正確'});
	}
});


// 實現(xiàn)了一個post監(jiān)聽的接口，接口路徑 /api/user/logout
//req 請求來的參數(shù)
//res  用于響應(yīng)
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'});
 
});


// 實現(xiàn)了一個監(jiān)聽的接口，接口路徑 /api/user/info
//req 請求來的參數(shù)
//res  用于響應(yīng)
app.get('/api/user/info', (req, res) => {  
	console.log('token校驗成功！')
	res.send(userInfo); 
});


// 監(jiān)聽9900端口
app.listen(9900, () => {
	console.log('服務(wù)器運行在9900');
});

4、運行接口程序

在test目錄下執(zhí)行：node index.js

此時，可以通過POSTMAN等方式訪問接口了
也可以自己寫一寫業(yè)務(wù)邏輯。文章來源地址http://www.zghlxwxcb.cn/news/detail-486512.html

到了這里，關(guān)于Vue-Element-Admin項目學習筆記（7）用Node.js寫一個簡單后端接口的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！