vue踩坑筆記 十.使用vue進行數據mock

安裝依賴

npm install --save-dev mockjs
npm install --save axios

建立mock文件

src目錄下創建mock文件夾，創建index.js文件

mock樣例代碼

import Mock from 'mockjs'
 
const data={ 
    "id":"@guid",
    "name":"@cname",
};
 
Mock.mock('/api/test', 'post', data)
 
export default Mock;

全局引用mock

在main.js中填入這些代碼

import Mock from '@/mock'
import axiox from 'axios'

Vue.use(Mock)
Vue.prototype.$axios = axiox

全部代碼

在組件中使用

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <span>{{$t("global.test")}}</span>
    <button @click="testReq">測試請求</button>
    <router-view/>
  </div>
</template>
 
<script>
import Cookie from './util/cookie'
import Axios from 'axios'
 
export default {
  name: 'App',
  methods:{
    testReq:function(){
         Axios.post('/api/test').then((res) => {
              console.log(res)
          }).catch((err) => {
              console.log(err)
          })
    }
  }
}
 
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

常見用法

//數據佔位符使用
{
  "integer": "@integer(10, 30)",  //隨機生成一個10～30之間的正整數
  "float": "@float(60, 100, 2, 2)",  //隨機生成浮點數，參數分別爲整數部分最小值和最大值、小數部分保留最小位數和最大位數
  "boolean": "@boolean",       //隨機生成boolean
  "string|1-2": "@string",     //隨機生成字符串
  "name":"@cname",             //隨機生成名字
 
  "date": "@date(yyyy-MM-dd)", //按照格式隨機生成時間
  "datetime": "@datetime",     //隨機生成時間
  "now": "@now",               //當前時間
 
  "id": "@id",                 //隨機生成一個 18 位身份證
  "guid": "@guid",             //隨機生成一個 GUID
  "url": "@url",               //隨機生成url字符串
  "email": "@email",           //隨機生成郵箱
  "image": "@image(200x200)",  //隨機生成一個大小爲200x200的圖片鏈接
  "title": "@title",           //隨機生成一句標題，其中每個單詞的首字母大寫
  "upper": "@upper(@title)",   //把生隨機成的標題全部轉爲大寫
  "cparagraph": "@cparagraph", //隨機生成一段中文文本
  "csentence": "@csentence",   //隨機生成一段中文文本
  "range": "@range(2, 10)" ,   //返回一個內容從2開始到9的整型數組
 
  "region": "@region",         //隨機生成地區 華中
  "province": "@province",     //隨機生成省會 省
  "city": "@city",             //隨機生成城市 市
  "county": "@county",         //隨機生成一個（中國）縣
}

用法

import Mock from 'mockjs'

const Random = Mock.Random

function getHomeData () {
	let res = {}
	// 生成一箇中國人名
	res["name"] = Random.cname()
	// 生成一個id
	res["id"] = Random.integer(0)
}

Mock.mock('/api/getHomeData', 'post', getHomeData)

export default Mock