真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

為什么要用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文件

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

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
  }
})

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

在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:{
     
   }
}

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

結(jié)構(gòu)

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

效果展示

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


網(wǎng)站標(biāo)題:詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)
本文網(wǎng)址:http://weahome.cn/article/pesdcg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部