Nodejs和axios的前后端通信
前端axios的使用
- 首先在mian.js里面引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
- 在router路由里面设置路径,children :[这里是二级路由是在admin下的路由]
{
path: '/login',
name: 'Login',
component: ()=> import('@/views/Login.vue')
},
{
path: '/admin',
name: 'Admin',
component: ()=> import('@/views/Admin.vue'),
children : [
{ path : 'postedit' , component : ()=> import('@/views/Admin_postedit.vue')} ,
]
},
]
- 写配置文件vue.config.js
module.exports = {
devServer : {
proxy : {
'/api' : {
target : 'http://localhost:3000',
changeOrigin : true
}
}
},
};
- axios设置URL
this.$axios.post('/api/post/add' , param ,
}).then((res)=>{
}).catch(()=>{
})
},
后端nodejs的接口
- 连接服务器并启动服务器
var express = require('express');
var app = express();
app.listen(3000 , 'localhost',(err)=>{
if(err){
console.log('服务器启动失败');
return;
}
console.log('服务器启动成功');
});
- 设置一级路径, 当前端的请求过来时,会先经过一级路由进行匹配;然后在进行路由的匹配
var postRouter = require('./routes/post')
app.use('/api/post',postRouter)
- 匹配路由:设置造一级路由引入的路由函数
router.post('/add', (req,res,next)=>{
var page = req.query.page;
var count = 10;
PostModel.find().then((infos)=>{
if(infos.length){
res.json({
code : 0,
errmsg : 'ok',
infos : infos,
})
}
else{
res.json({
code : -1 ,
errmsg : 'nothing',
infos :'',
})
}
}).catch((err)=>{
res.json({
code : -1,
errmsg : 'nothing',
infos :'',
});
})
}));