Vue---mock.js 使用

mockjs 概述

在我們的生產實際中，后端的接口往往是較晚才會出來，并且還要寫接口文檔，于是我們的前端的許多開發都要等到接口給我們才能進行，這樣對于我們前端來說顯得十分的被動，于是有沒有可以制造假數據來模擬后端接口呢，答案是肯定的。應該有人通過編寫json文件來模擬后臺數據，但是很局限，比如增刪改查這些接口怎么實現呢，于是今天我們來介紹一款非常強大的插件Mock.js，可以非常方便的模擬后端的數據，也可以輕松的實現增刪改查這些操作。

?

mock.js官網

引入mockjs

npm install mockjs

安裝完成之后去查看?package.json 如果?"mockjs": "^1.0.1-beta3" 說明安裝成功

?

在src目錄下 新建一個mock.js文件

?

簡單使用

（1）、首先在mock.js文件下

const Mock = require('mockjs')const Random = Mock.Randomconst produceNewsData = function(){let articles = []for(let i = 0;i<100;i++){let data = {id:i,name:Random.first(),age:Random.integer(20, 100),sex:'M',birthday:Random.date()}articles.push(data)}return{articles:articles}
}const getChange = function(){return{articles:{resCode:0,errmsg:'你好呀'}}
}Mock.mock('/api/getList','get',produceNewsData)
Mock.mock('/api/getChange','get',getChange)

?

（2）、在main.js中引入

require('./mock')

?

?（3）、新建一個頁面

<template><div><h1>主頁</h1><el-button type="primary" @click="export_Excel">生成表格</el-button><el-table :data="tableData" border fit highlight-current-row style="width: 100%;text-align: center;"><el-table-column prop="id" label="ID" width="180" align="center"><template slot-scope="scope"><span v-if="scope.row.id==1">停用</span><span v-else-if="scope.row.id==2">過期</span><span v-else-if="scope.row.id==3">作廢</span><span v-else="scope.row.id>3">{{scope.row.id}}</span></template></el-table-column><el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column><el-table-column prop="age" label="年齡" width="180" align="center"></el-table-column><el-table-column prop="sex" label="性別" width="180" align="center"></el-table-column><el-table-column prop="birthday" label="生日" width="180" align="center"></el-table-column><el-table-column label="編輯" align="center"><template slot-scope="scope"><el-button>編輯</el-button><el-button @click="cli">點擊</el-button></template></el-table-column></el-table></div></template><script>export default {data() {return {tableData: null}},methods: {cli() {this.axios.get('/api/getChange').then((response) => {console.log(response.data.articles);})}},created() { this.axios.get('/api/getList').then((response) => {console.log(response.data.articles);this.tableData = response.data.articles;})}}
</script><style></style>

?

?運行結果

?