溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
為什么要用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>結構
效果展示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
