一、安裝

簡(jiǎn)單粗暴
npm install mockjs

二、引入

CommonJS引入

let Mock = require('mockjs') let userInfo = Mock.mock({data: {responseCode: 200,responseMessage: 'success',userMessage: {name: "@cname",email: "@email",msg: '@cparagraph(2)'}} })

或者ES6的引入方式

import Mock from 'mockjs'

三、使用

3.1 單獨(dú)寫(xiě)一個(gè)mockData.js文件

mockData.js

let Mock = require('mockjs') let userInfo = Mock.mock({data: {responseCode: 200,responseMessage: 'success',userMessage: {name: "@cname",email: "@email",msg: '@cparagraph(2)'}} })let mockData = {userInfo: userInfo }export default mockData

在頁(yè)面中import數(shù)據(jù)使用

3.2 使用vuex去控制是否使用mockData.js的數(shù)據(jù)

store.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);const state = {//使用模擬數(shù)據(jù), 只是開(kāi)發(fā)時(shí)使用, 如果不是開(kāi)發(fā)時(shí), 請(qǐng)務(wù)必設(shè)置為falseuseMock: true }export default new Vuex.Store({state })

在HelloWorld.vue里

created() {if (this.$store.state.useMock) {//使用延時(shí)器模擬異步window.setTimeout(() => {let arr = [];arr.push(mockData.userInfo.data.userMessage);this.tableData = arrconsole.log(mockData);//業(yè)務(wù)邏輯}, 1000);return;}// 若不使用剛剛mockData.js中的數(shù)據(jù)，走下面這個(gè)方式，發(fā)起請(qǐng)求axios.get("http://localhost:8090/test.action").then((res) => {console.log(res)this.tableData = res.data.userInfo}).catch(function(error) {console.log(error)})},

3.3 express+mockjs寫(xiě)一個(gè)后臺(tái)

前端的代碼進(jìn)入聯(lián)調(diào)階段只需要修改一個(gè)basePath，所有的接口名字都可以和約定好的路徑保持一致，可以測(cè)試post請(qǐng)求，模擬網(wǎng)絡(luò)環(huán)境
先裝expressnpm install express

MockServer.js

let express = require('express'); //引入express let Mock = require('mockjs'); //引入mocklet app = express(); //實(shí)例化express/*為app添加中間件處理跨域請(qǐng)求*/ app.use(function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');next(); });app.all('/test.action', function(req, res) { //指定路徑res.json(Mock.mock({"status": 200,"userInfo|10": [{name: "@cname",email: "@email",msg: '@cparagraph(2)'}]})); });app.listen('8090', () => {console.log('監(jiān)聽(tīng)端口 8090') })

package.json

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","mock": "node ./src/components/MockServer" 這里路徑要寫(xiě)對(duì)},

這樣就可以在根目錄下使用npm run mock來(lái)啟動(dòng)后臺(tái)了，在http://localhost:8090/test.action看到模擬的數(shù)據(jù)

前端頁(yè)面顯示

總結(jié)

以上是生活随笔為你收集整理的使用mockjs模拟数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。