在vue-cli項目下簡單使用mockjs模擬數據

爲什麼要用mockjs

實際開發中，前後端分離，前端需要後端的接口去完成頁面的渲染，但是並不能等到後端成員寫完接口再開始進行測試。大部分情況下，前後端需要同時進行開發。因此便需要mockjs製造隨機數據來進行後端接口模擬。
看了官方文檔之後一臉懵逼，這些都是什麼鬼？？？？？因此總結了一篇文章，來介紹mockjs的簡單使用。

首先搭建一個vue項目

不介紹了

安裝mockjs

npm install mockjs --save-dev

啓動項目

npm run dev

創建mock.js文件

• 在src路徑下創建mock.js文件
• 在main.js引入mock.js文件

mock.js使用

• 在mock.js文件中寫入測試代碼

此處箭頭函數中的代碼可以根據mock的Git官網來進行修改隨機數據及屬性名稱

//引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對象
const Random = Mock.Random;
//使用mockjs模擬數據
Mock.mock('/api/data', (req, res) => {//當post或get請求到/api/data路由時Mock會攔截請求並返回上面的數據
    let list = [];
    for(let i = 0; i < 30; i++) {
        let listObject = {
            title: Random.csentence(5, 10),//隨機生成一段中文文本。
            company: Random.csentence(5, 10),
            attention_degree: Random.integer(100, 9999),//返回一個隨機的整數。
            photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
        }
        list.push(listObject);
    }
    return {
        data: list
    }
})

• 在xxxxx.vue文件中使用axios獲取mock.js中的隨機數據

import axios from 'axios'

export default {
      data() {
        return {
          data:[]
        }
      },
      mounted:function() {
        axios.get('/api/data').then(res => {//get()中的參數要與mock.js文件中的Mock.mock()配置的路由保持一致
          this.data = res.data.data;
          console.log(res.data);//在console中看到數據
        }).catch(res => {
          alert('wrong');
        })
      },
      methods:{
          
      }
}

• <template></template>結構

• 效果展示