vue項目結合Mock+Express模擬後臺假數據

項目
該項目使用了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 工程構建（開發時，打包時）依賴；

如有不足，請大家及時指出。