快捷導(dǎo)航

詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)

更新時(shí)間：2018年10月19日 10:09:39 作者：liaojin1

這篇文章主要介紹了詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

為什么要用mockjs

實(shí)際開發(fā)中，前后端分離，前端需要后端的接口去完成頁面的渲染，但是并不能等到后端成員寫完接口再開始進(jìn)行測(cè)試。大部分情況下，前后端需要同時(shí)進(jìn)行開發(fā)。因此便需要mockjs制造隨機(jī)數(shù)據(jù)來進(jìn)行后端接口模擬。

看了官方文檔之后一臉懵逼，這些都是什么鬼？？？？？因此總結(jié)了一篇文章，來介紹mockjs的簡(jiǎn)單使用。

首先搭建一個(gè)vue項(xiàng)目

不介紹了

安裝mockjs

npm install mockjs --save-dev

啟動(dòng)項(xiàng)目

npm run dev

創(chuàng)建mock.js文件

在src路徑下創(chuàng)建mock.js文件

在main.js引入mock.js文件

mock.js使用

在mock.js文件中寫入測(cè)試代碼

此處箭頭函數(shù)中的代碼可以根據(jù)mock的Git官網(wǎng)來進(jìn)行修改隨機(jī)數(shù)據(jù)及屬性名稱

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

在xxxxx.vue文件中使用axios獲取mock.js中的隨機(jī)數(shù)據(jù)

import axios from 'axios'

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