Node和axios的前后端通信
前端axios的使用
- 首先在mian.js里面引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
- 在router路由里面設(shè)置路徑,children :[這里是二級路由是在admin下的路由]
{
path: '/login',
name: 'Login',
component: ()=> import('@/views/Login.vue')
},
{
path: '/admin',
name: 'Admin',
component: ()=> import('@/views/Admin.vue'),
children : [
// 當(dāng)點擊職位編輯的時候，會給當(dāng)前頁面的url后面添加上postedit 然后在這里 根據(jù)path進(jìn)行匹配路由勤众，根據(jù)指定的路由進(jìn)入指定頁面
{ path : 'postedit' , component : ()=> import('@/views/Admin_postedit.vue')} ,
]
},
]
- 寫配置文件vue.config.js
module.exports = {
devServer : {
proxy : {
//在vue的axios中只有/api開頭的路由; 就會全部拼接到target的URL的后面
'/api' : {
target : 'http://localhost:3000',
changeOrigin : true
}
}
},
};
- axios設(shè)置URL
//這里設(shè)置的URL去和后端的接口匹配今瀑，匹配成功則進(jìn)行通信
this.$axios.post('/api/post/add' , param ,
}).then((res)=>{
}).catch(()=>{
})
},
后端nodejs的接口
- 連接服務(wù)器并啟動服務(wù)器
var express = require('express');
var app = express();
//這里的URL和端口，要和前端里的配置文件相匹配
app.listen(3000 , 'localhost',(err)=>{
if(err){
console.log('服務(wù)器啟動失敗');
return;
}
console.log('服務(wù)器啟動成功');
});
- 設(shè)置一級路徑, 當(dāng)前端的請求過來時痹届，會先經(jīng)過一級路由進(jìn)行匹配幸撕；然后在進(jìn)行路由的匹配
//引入在router文件下面的post路由蹬蚁；
var postRouter = require('./routes/post')
//一級路由
app.use('/api/post',postRouter)
- 匹配路由：設(shè)置造一級路由引入的路由函數(shù)
//把第一個參數(shù)直接拼接到 /api/post 的后面 恃泪，
router.post('/add', (req,res,next)=>{
//獲取前端發(fā)來的數(shù)據(jù)
//post請求要使用req.body 請求數(shù)據(jù)
//get請求要使用req.query 請求數(shù)據(jù)
var page = req.query.page;
var count = 10;
//對數(shù)據(jù)庫進(jìn)行查詢，并且用res發(fā)給前端請求的數(shù)據(jù)
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 :'',
});
})
}));
