為什么要用mockjs
十年的開化網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整開化建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“開化網(wǎng)站設(shè)計(jì)”,“開化網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
實(shí)際開發(fā)中,前后端分離,前端需要后端的接口去完成頁(yè)面的渲染,但是并不能等到后端成員寫完接口再開始進(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:{ } }
結(jié)構(gòu)
效果展示
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。