mockjs在vue中的使用

mockjs在vue中的使用

前后端分工協作是一個非常高效的做法，但是有時前后端分離不徹底會很痛苦。前后端應該是異步進行的，進度互不影響，但是在沒有mock的時候，前端卻嚴重依賴后端的接口，總會苦苦等待后端接口出來才能繼續開發。為了解決這個問題，大神就造了一個輪子，供大家使用–mock.js

關于mock.js，官網描述：

1.前后端分離

2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據

3.數據類型豐富

4.通過隨機數據，模擬各種場景

npm install mockjs

//或 在開發環境中引入

npm install mockjs --save-dev

在src路徑下創建mock.js文件

在main.js引入mock.js文件

在剛剛創建的mock.js文件中寫入測試代碼

//引入mockjs

const Mock = require('mockjs') //安裝的mockjs，并不是創建的mock.js

// 獲取 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

}

})

在xxx.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:{

}

}

結構

效果展示

mockjs在vue中的使用相關教程

vue3 - composition api

vue3 - composition api Vue3中提出的一個新 概念 , 作用: 聚合代碼 邏輯重用 Vue的組件化做的相當出色, 幫助我們更好的拆分代碼和約束代碼, 增加可讀性, 但是2.x有幾個問題也是開發者們時刻在關注的 代碼邏輯不夠聚合, 比較分散, 如果我們的組件代碼量一多,

Gradle中的project

Gradle中的project Gradle的執行流程 Initialization初始化階段 (解析整個工程中的所有Project,構建所有的Project對應的project對象) Configuration配置階段 (解析所有projects對象中的task,構建好所有task的拓撲圖(有向無環圖)) Execution執行階段(執

Web - JS掌握JavaScript中的數組、循環、函數等技術的使用(網頁

Web - JS掌握JavaScript中的數組、循環、函數等技術的使用(網頁輪播圖) 完成網頁輪播圖效果，配套的還有隨機點名器訓練。 代碼寫得有一些亂，其中有些問題的解決方案也不算好，勉勉強強的自己完成了這個任務訓練，0.0~ 代碼如下 !DOCTYPE htmlhtml lang=enhea

Web - JS當中的數組、循環、隨機數和定時器的使用訓練(隨機點名

Web - JS當中的數組、循環、隨機數和定時器的使用訓練(隨機點名器) 隨機點名器訓練，配套的還有網頁輪播圖訓練。 做出來的效果: 代碼如下 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1

了解JAVA中的裝箱與拆箱

了解JAVA中的裝箱與拆箱 Java為每種基本數據類型都提供了對應的包裝器類型，int對應Integer、boolean對應Boolean。。。 所以，裝箱就是將基本數據類型轉換為包裝器類型；拆箱就是將包裝器類型轉換為基本數據類型。那自動裝箱與自動拆箱也很好理解了，就是我們

vue3.0+ts集成jquery、bootstrap、jquery.dataTable插件、echart

vue3.0+ts集成jquery、bootstrap、jquery.dataTable插件、echart 先看運行效果： 1、首先查看開發環境，IDE使用的是vscode，如下圖所示： 2、然后根據使用vue創建項目，如下命令： vue create myweb 如下圖所示： 3、然后選擇Manually select features，表示

java中的加密與解密算法

java中的加密與解密算法 對稱加密、非對稱加密、摘要算法的區別在哪里? 一、對稱加密技術 對稱加密特點是加密和解密的過程使用相同的密鑰(也叫做key)，也就是說加密的時候使用的秘鑰，在解密的時候也要用這個密鑰，這種方法在密碼學中叫做 對稱加密算法 ，

結合自己的理解解釋一下vue的工作流程及運行機制

結合自己的理解解釋一下vue的工作流程及運行機制 本文主要從以前幾個方面來探討vue.js的設計思想及一些原理，在代碼的編寫上不會過多闡述，重點講解其思想： 1.Vue.js的響應式原理，理解為什么修改數據視圖會自動更新；怪臉2.虛擬DOM的概念與原理；3.模板編譯

總結

以上是生活随笔為你收集整理的mockjs vue ajax,mockjs在vue中的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。