node版本:14.18.0
node框架:express
前端:vue
测试的接口地址为node中routes下的文件名,例如
export const getUserInfo = (data={})=>{
return request.get("/users",data)
}
中的users对应为这个文件
需在本地启动数据库,我选择的工具为PHPstudy,数据库工具为Navicat
/routes/user.js
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost', //域名
user : 'marshall', //数据库用户名
password : '123456', // 数据库密码
port: '3306', // 端口
database: 'nodeBackend' // 数据库名
});
connection.connect();
没有数据库的话,可以通过phpstudy新建一个数据库
首页可设置启动端口
完成后,前端通过axios发送请求,请求链接为http://localhost:3001/users,nodejs后端对应的代码为/routes/user.js下的router.get('/',function(req, res, next) {})。若需写多个请求,则在/routes/user.js中新写一个router.get('/userList', function(req, res, next) {}),则前端请求地址为http://localhost:3001/users/userList,以此类推。
node.js解决跨域:
app.js中加入以下代码:
app.all('*', 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');
res.header('Access-Control-Allow-Headers', 'mytoken');
next();
});
最后前端测试接口通过,附上完整代码
前端:
node.js:
写在最后:node.js新手学习,文章若有出入,欢迎指出探讨。