項目
該項目使用了node中的express+mockjs實作了動态模拟接口，已封裝，可多處使用。
Mock.js官方定義生成随機資料，攔截 Ajax 請求。
目錄結構
我這裡用的是vue-cli3建立的新項目，然後在目錄下建立了mock檔案夾，用來存放模拟資料的代碼，在其中建立了一個serve.js檔案。
首先安裝express
npm install -save express
在serve.js裡寫一個簡單的express服務：
let express = require('express');
let app = express();
app.get('/',function (req,res) {
res.send(`<h1>Hello, World</h1>`)
})
app.listen(8081,function(){
console.log('伺服器已啟動')
})
然後啟動項目
我是在test整個項目下直接啟動的serve.js，是以帶了mock這個檔案夾名字，如出現上圖的效果，說明啟動成功。
然後在浏覽器輸入http://localhost:8081就可以看到頁面加載出來了
啟動的話也可以在項目的package.json中的scripts裡加上
"mock": "node api/app.js"
這樣我們就可以
npm run mock
啟動這個檔案了，也可以實作同樣的效果。
上面的實作了效果之後，接下來我們先引入mockjs
npm install --save-dev mockjs
然後修改servr.js:
let express = require('express');
let app = express();
let Mock = require('mockjs');
app.get('/',function (req,res) {
res.send(`<h1>Hello, World</h1>`)
});
app.use('/api/test/project',function(req,res){
res.json(Mock.mock({
'code':200,
'data|1-9':[{
'id|+1':1
}]
}))
});
app.listen(8081,function(){
console.log('伺服器已啟動')
})
重新啟動serve.js，在浏覽器輸入http://localhost:8081/api/test/project，就可以看到傳回的資料：
在vue中使用
簡單的在app.vue中寫一個axios請求
mounted(){
axios.get('/api/test/project').then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err)
})
}
記得先引入axios，
import axios from 'axios'
。
啟動vue項目後會發現
因為我們vue項目的端口是8080，而serve.js端口号是8081，端口号不同，跨域了，需要我們配置下Vue.config.js
module.exports={
devServer:{
proxy:{//反向代理
'/api':{
target:'http://localhost:8081/',
}
}
}
}
重新啟動vue項目，重新整理頁面，請求成功
可是這樣serve.js的複用性不是很高，我們可以把代碼再封裝下，在mock檔案夾下再建一個test.js檔案。代碼如下：
let express = require('express');
let router = express.Router();
let Mock = require('mockjs');
router.get('/project',function (req,res) {
let data = Mock.mock({
'code':200,
'data|1-9':[{
'id|+1':1
}]
});
return res.json(data);
})
module.exports = router;
然後再把serve.js修改下
let express = require('express');
let app = express();
let Mock = require('mockjs');
let router = express.Router();
app.get('/',function (req,res) {
res.send(`<h1>Hello, World</h1>`)
});
router.use('/test',require('./test'));
app.use('/api',router)
app.listen(8081,function(){
console.log('伺服器已啟動')
})
重新開機下serve.js；重新整理下頁面
請求成功，修改成功，這樣我們以後增加接口和修改資料隻需修改test.js檔案即可。
小知識點
- req.query: 解析url中的querystring，如?name=haha，req.query 的值為{name: ‘haha’}
- req.params: 解析 url 中的占位符，如/:name，通路/haha，req.params 的值為{name: ‘haha’};
-
req.body: 解析後請求體，需使用相關的子產品，如 body-parser，請求體為{“name”: “haha”}，則 req.body 為 {name: ‘haha’};
可以根據請求方式列印出來具體的參數檢視是否傳參成功。
- app.use(path,callback)中的callback既可以是router對象又可以是函數
- app.get(path,callback)中的callback隻能是函數。
- npm i --save ==dependencies 項目（運作時，釋出到生産環境時）依賴
- npm i --save-dev ==devDependencies 工程建構（開發時，打包時）依賴；
如有不足，請大家及時指出。