詳解在vue-cli項目下簡單使用mockjs模擬數(shù)據(jù)
更新時間：2018年10月19日 10:09:39 作者：liaojin1
這篇文章主要介紹了詳解在vue-cli項目下簡單使用mockjs模擬數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
為什么要用mockjs
實際開發(fā)中，前后端分離，前端需要后端的接口去完成頁面的渲染，但是并不能等到后端成員寫完接口再開始進行測試。大部分情況下，前后端需要同時進行開發(fā)。因此便需要mockjs制造隨機數(shù)據(jù)來進行后端接口模擬。
看了官方文檔之后一臉懵逼，這些都是什么鬼？？？？？因此總結了一篇文章，來介紹mockjs的簡單使用。
首先搭建一個vue項目
不介紹了
安裝mockjs
npm install mockjs --save-dev
啟動項目
npm run dev
創(chuàng)建mock.js文件
在src路徑下創(chuàng)建mock.js文件
在main.js引入mock.js文件
mock.js使用
在mock.js文件中寫入測試代碼
此處箭頭函數(shù)中的代碼可以根據(jù)mock的Git官網來進行修改隨機數(shù)據(jù)及屬性名稱
//引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對象
const Random = Mock.Random;
//使用mockjs模擬數(shù)據(jù)
Mock.mock('/api/data', (req, res) => {//當post或get請求到/api/data路由時Mock會攔截請求并返回上面的數(shù)據(jù)
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),//返回一個隨機的整數(shù)。
photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
}
list.push(listObject);
}
return {
data: list
}
})
在xxxxx.vue文件中使用axios獲取mock.js中的隨機數(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:{
}
}
<template></template>結構
效果展示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd?vue中,在form表單中的自定義組件使用v-decorator問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue3源碼系列通過render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue2.0系列之過濾器的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇關于為什么要使用Vuex的介紹，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
本文主要介紹了Vue打包后頁面出現(xiàn)空白解決辦法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了LogicFlow內置菜單插件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了js數(shù)組的 entries() 獲取迭代方法，entries() 方法返回一個數(shù)組的迭代對象，該對象包含數(shù)組的鍵值對 (key/value)。下面來詳細介紹該neural,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue的路由及路由鉤子函數(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07