1.什么是Mock.js?
生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求。
通過隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景；不需要修改既有代碼，就可以攔截 Ajax 請(qǐng)求，返回模擬的響應(yīng)數(shù)據(jù)；支持生成隨機(jī)的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等；支持支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。
優(yōu)點(diǎn)是非常簡(jiǎn)單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型.
2.安裝
npm install mockjs --save-dev
3.安裝好之后新建一個(gè)mock文件用于引入文件
import?Mock?from?'mockjs'
4.然后在main.js 導(dǎo)入mock文件?
//?引入mock
import?'./mock/index.js'
5.mock語法
? ? ? ? 01 .生成指定次數(shù)的文本?長度字符串??
? ??????????????????const?data?=?Mock.mock?({
? ? ? ? ? ? ? ? ? ? ? ? "string":"hello?world"
? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? 02 生成指定范圍的長度字符串??
? ??????????????????const?data?=?Mock.mock?({
??????????????????????????"string|1-6":"hello?world"? //生成1-6隨機(jī)次數(shù)的 hello?world
????????????????????})
? ??????? 02 生成文本
? ? ? ? ? ? ? ? 生成隨機(jī)的字符串
? ? ? ? ? ? ? ? ? const?data?=?Mock.mock?({
? ? ? ? ? ? ? ? ? ? ? ? ? ? "string":"@cword()"? // 括號(hào)中可以設(shè)置文字的數(shù)量以及文字?jǐn)?shù)量的區(qū)間
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? 03 生成指定范圍的標(biāo)題和句子
? ??????????????const data = Mock.mock({
? ? ????????????? ?title: "@ctitle(5,8)",
? ? ????????????????sentence: '@csentence(50,100)'
????????????????})
? ? ? ? ? ?04?隨機(jī)生成段落?
? ??????????????const data = Mock.mock({
? ????????????????????? content: '@cparagraph()'
????????????????})
? ? ? ? ? ? 05?生成范圍數(shù)字?
? ??????????????const data = Mock.mock({
? ? ????????????????????"number|1-999": 1
????????????????})
? ? ? ? ? ?06 生成增量id?
? ??????????????const data = Mock.mock({
? ????????????????????? id: '@increment()'
????????????????})
? ? ? ? ? ? 07?隨機(jī)生成姓名-地址-身份證號(hào)
? ??????????????const data = Mock.mock({
? ????????????????? name: '@cname()',
? ? ????????????????idCard: '@id()',
? ? ????????????????address: '@city(true)' // 如果@city(),只會(huì)生成市，如果@city(true)會(huì)生成省和市
????????????????})
? ? ? ? ? ? 08?隨機(jī)生成圖片?生成圖片參數(shù)1：圖片可選大小? 參數(shù)2：圖片背景色 參數(shù)3：圖片前景色
????????????????參數(shù)4：圖片格式? 參數(shù)5：圖片文字
? ?????????????????? const data = Mock.mock({
? ? ????????????????????? image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
????????????????????? })
? ? ? ? ? ? ? ?10?生成時(shí)間? ?@Date? ?---? 生成指定格式時(shí)間：@date(yyyy-MM-dd hh:mm:ss
? ??????????????????const time = Mock.mock({
? ????????????????????????? time1: '@date()', // 只有年月日
? ????????????????????????? time2: '@date(yyyy-MM-dd hh:mm:ss)'
????????????????????})
? ? ? ? ? ? ? ? 11.定數(shù)組返回的條數(shù)? --?指定長度：'data|5'? ? ?指定范圍：'data|5-10'
? ??????????????????????const data = Mock.mock({
? ? ? ? ? ? ? ? ? ? ? ? ? ?'list|50-99':[
? ? ? ? ? ? ? ? ? ? ? ? ? ?????{
? ? ? ? ? ????????????????????????????? name: '@cname()',
? ? ? ????????????????????????????? ? ? address: '@city(true)',
? ? ? ? ? ????????????????????????????? id: '@increment(1)' // 每次都增加1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
????????????????????????})
mock攔截請(qǐng)求
在項(xiàng)目中安裝axios? ---? npm install axios
在 main.js 文件引入 ------?import axios from 'axios'
在mock文件夾的index.js文件中寫mock語法
定義不攜帶參數(shù)的get請(qǐng)求
Mock.mock('/api/get/user','get',()=>{
? ? return {
? ? ? ? status: 200,
? ? ? ? message: '獲取新聞列表數(shù)據(jù)成功'
? ? }
})
在目標(biāo)組件中
export default {
? created() {
? ? ? ? axios.get('/api/get/user')
? ? ? ? ? .then(function (response) {
? ? ? ? ? console.log(response);
? ? ? })
? ? }
}
