九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

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

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

特點：前后端分離，增加了單元測試的真實性，用法簡單，方便擴展

示例：在jquery中使用mock

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

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

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

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

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

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

4.移除mock

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

4.2通過添加全局變量ENV來判斷

index.html頁面添加<script>MOCK = 'true'</script>

然后index.js文件里面進行判斷。

if(window.ENV == 'true'){    Mock.mock('/user/userinfo','get',{        id: "@id()",//得到隨機的id,對象        username: "@cname()",//隨機生成中文名字        date: "@date()",//隨機生成日期        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)建項目，安裝依賴

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

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

const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊var id = Mock.mock('@id')//得到隨機的id,字符串console.log(Mock.mock('@id'), typeof id)var obj = Mock.mock({    id: "@id()",//得到隨機的id,對象    username: "@cname()",//隨機生成中文名字    date: "@date()",//隨機生成日期    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的擴展插件哦。（json文件,中如果說存在注釋文件和編輯器都會報錯,我們采用json5格式來讓json格式可以存在注釋）

const Mock = require('mockjs');//mockjs 導(dǎo)入依賴模塊var id = Mock.mock('@id')//得到隨機的id,字符串console.log(Mock.mock('@id'), typeof id)var obj = Mock.mock({    id: "@id()",//得到隨機的id,對象    username: "@cname()",//隨機生成中文名字    date: "@date()",//隨機生成日期    avatar: "@image('200x200','red','#fff','avatar')",//生成圖片,參數(shù):size, background, foreground, text    description: "@paragraph()",//描述    ip: "@ip()",//IP地址    email: "@email()"//email})console.log(obj)

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

6.在項目根目錄下新建vue.config.js

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

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

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ù)據(jù)的時候如何移除mock.

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

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