當(dāng)前端工程師需要獨(dú)立于后端并行開發(fā)時(shí),后端接口還沒(méi)有完成,那么前端怎么獲取數(shù)據(jù)？

這時(shí)可以考慮前端搭建web server自己模擬假數(shù)據(jù),這里我們選第三方庫(kù)mockjs用來(lái)生成隨機(jī)數(shù)據(jù),攔截 Ajax 請(qǐng)求。

特點(diǎn)：前后端分離，增加了單元測(cè)試的真實(shí)性，用法簡(jiǎn)單，方便擴(kuò)展

示例：在jquery中使用mock

1.新建文件，引入jquery.js和mock.js

<script src="https://cdn./jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn./Mock.js/1.0.0/mock-min.js"></script>

2.新建mock文件，里面新建index.js文件并且引入。

Mock.mock('/user/userinfo','get',{
    id: "@id()",//得到隨機(jī)的id,對(duì)象
    username: "@cname()",//隨機(jī)生成中文名字
    date: "@date()",//隨機(jī)生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成圖片,參數(shù):size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})

3.使用jquery發(fā)送ajax請(qǐng)求

$.ajax({
    url: '/user/userinfo',
    dataType: 'json',
    success: (data)=>{
        console.log(data)
    }
})

4.移除mock

4.1直接移除就可以了。注釋。

4.2通過(guò)添加全局變量ENV來(lái)判斷

index.html頁(yè)面添加<script>MOCK = 'true'</script>

然后index.js文件里面進(jìn)行判斷。

if(window.ENV == 'true'){
    Mock.mock('/user/userinfo','get',{
        id: "@id()",//得到隨機(jī)的id,對(duì)象
        username: "@cname()",//隨機(jī)生成中文名字
        date: "@date()",//隨機(jī)生成日期
        avatar: "@image('200x200','red','#fff','avatar')",//生成圖片,參數(shù):size, background, foreground, text
        description: "@paragraph()",//描述
        ip: "@ip()",//IP地址
        email: "@email()"//email
    })
}

案例1：todolist,這里只寫mock代碼

if(MOCK == 'true'){
    Mock.mock('/todo/task','get', function(options){
        let a = []
        for (let i = 0; i < 5; i  ) {
           let o = Mock.mock({
            _id: "@id()",
            title: '@string("lower", 5)',
            completed: "@boolean"
           }) 
           a.push(o)
        }
        return a
    })
    Mock.mock('/todo/addTask','post', function(options){
        return Mock.mock({
            _id: "@id()",
            title: o.title,
            complete: false
        })
    })
    Mock.mock(/^\/todo\/deleteTask/,'get', function(options){
        let o = JSON.parse(options.body)
        return o
    })
    Mock.mock('/todo/modifyTask','post', function(options){
        let o = JSON.parse(options.body)
        return o
    })
}

vue中如何使用mock呢？

1.創(chuàng)建項(xiàng)目，安裝依賴

# 使用axios發(fā)送ajax
cnpm install axios --save
# 使用mockjs產(chǎn)生隨機(jī)數(shù)據(jù)
cnpm install mockjs --save-dev
# 使用json5解決json文件,無(wú)法添加注釋問(wèn)題
cnpm install json5 --save-dev

2.mock基礎(chǔ)語(yǔ)法，新建mock文件夾,新建testMockjs.js

const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊
var id = Mock.mock('@id')//得到隨機(jī)的id,字符串
console.log(Mock.mock('@id'), typeof id)

var obj = Mock.mock({
    id: "@id()",//得到隨機(jī)的id,對(duì)象
    username: "@cname()",//隨機(jī)生成中文名字
    date: "@date()",//隨機(jī)生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成圖片,參數(shù):size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})
console.log(obj)

3.使用json5,vscode有json5的擴(kuò)展插件哦。（json文件,中如果說(shuō)存在注釋文件和編輯器都會(huì)報(bào)錯(cuò),我們采用json5格式來(lái)讓json格式可以存在注釋）

const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊
var id = Mock.mock('@id')//得到隨機(jī)的id,字符串
console.log(Mock.mock('@id'), typeof id)

var obj = Mock.mock({
    id: "@id()",//得到隨機(jī)的id,對(duì)象
    username: "@cname()",//隨機(jī)生成中文名字
    date: "@date()",//隨機(jī)生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成圖片,參數(shù):size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})
console.log(obj)

4.引入json5庫(kù)來(lái)解析json5格式，在mock文件夾下,新建testJSON5.js

const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//讀取json文件
function getJsonFile(filePath) {
    //讀取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json)

5.mock和vue-cli結(jié)合，在mock文件夾下,新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊
const JSON5 = require('json5');
//讀取json文件
function getJsonFile(filePath) {
    //讀取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一個(gè)函數(shù)
module.exports = function(app){
    //監(jiān)聽http請(qǐng)求
    app.get('/user/userinfo', function (rep, res) {
        //每次響應(yīng)請(qǐng)求時(shí)讀取mock data的json文件
        //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對(duì)象
        var json = getJsonFile('./userInfo.json5');
        //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
        res.json(Mock.mock(json));
    });
}

6.在項(xiàng)目根目錄下新建vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

7.發(fā)送ajax,在src\components\HelloWorld.vue中發(fā)送aja請(qǐng)求

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    axios.get('/user/userinfo')
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.error(err); 
    })
  }
}

8.如果調(diào)用真實(shí)數(shù)據(jù)的時(shí)候如何移除mock.

在項(xiàng)目根路徑新建.env.development,書寫MOCK=true，并且完善mock\index.js

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //監(jiān)聽http請(qǐng)求
        app.get('/user/userinfo', function (rep, res) {
            //每次響應(yīng)請(qǐng)求時(shí)讀取mock data的json文件
            //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對(duì)象
            var json = getJsonFile('./userInfo.json5');
            //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
            res.json(Mock.mock(json));
        });
    }
}