VueJS中使用前端虛擬接口Mock.js一、簡介二、上手使用1. 創建一個Vue項目2. 安裝依賴3. 新建一個mockjs文件，輸入代碼：4. 其它文件內容App.vuemain.js三、運行測試

發布時間：2023-07-03 11:56:02 作者：網友整理

一、簡介

Mock.js是一個基于NodeJS的用來模擬API的工具，可以方便讓前端開發人員在開發過程中用來模擬API接口，方便與后端的聯調工作，尤其方便在Vue項目中使用。

官網地址：
http://mockjs.com/
代碼托管地址：
https://github.com/nuysoft/Mock

二、上手使用

1. 創建一個Vue項目

可使用腳手架生成，這里為了方便直接使用HBuilderX創建了一個 element-ui 項目。

2. 安裝依賴

npm install vue-resource
npm install mockjs

3. 新建一個mockjs文件，輸入代碼：

import Mock from 'mockjs';
export default Mock.mock('http://g.cn', {
    'name': '@name',
    'age|1-100': 100,
    'color': '@color'
});

這里@稱為占位符。

4. 其它文件內容

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>
<script>
    
    import Vue from 'vue'
export default {
  methods: {
    startHacking () {
        Vue.http.get('http://mysite.com').then(
            (successData) => {console.log(successData.body);},
            (fileData) => {console.log(fileData);}
      )
    }
  }
}
</script>
<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import VueResource from 'vue-resource'
require('./mock')
Vue.use(ElementUI)Vue.use(VueResource)new Vue({
  el: '#app',
  render: h => h(App)
})

項目目錄如下：

三、運行測試

npm run dev

每次點擊按鈕，在控制臺都會顯示隨機的結果出來。

四、其它一些常用語法

1. 占位符

占位符類型占位符方法Basicboolean, natural, integer, float, character, string, range, date, time, datetime, nowImageimage, dataImageColorcolorTextparagraph, sentence, word, title, cparagraph, csentence, cword, ctitleNamefirst, last, name, cfirst, clast, cnameWeburl, domain, email, ip, tldAddressarea, regionHelpercapitalize, upper, lower, pick, shuffleMiscellaneousguid, id

占位符不滿足使用的時候還可以進行擴展。

2. 模板

// 生成隨機長度字符
Mock.mock({  "string|1-10": "★"
})// 生成固定長度字符Mock.mock({  "string|3": "★★★"
})// 生成1-100之間的隨機數字Mock.mock({  "number|1-100": 100
})// 生成隨機小數Mock.mock({  "number|1-100.1-10": 1
})// 生成隨機布爾值Mock.mock({  "boolean|1": true
})// 從鍵值對里隨機取兩個值Mock.mock({  "object|2": {
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省"
  }})// 從數組里隨機取一個值Mock.mock({  "array|1": [
    "AMD",
    "CMD",
    "UMD"
  ]})

更多示例可到官網： http://mockjs.com/examples.html 查看。

分享到：

標簽：接口虛擬