在vue-lic腳手架中安裝mockjs,實現前後端分離開發
阿新 • • 發佈:2019-01-21
創建 uri 圖片編碼 處理 exp 學會 spl rom component
在項目開發前期,前端開發中,頁面布局基本開發完畢,但是後臺還接口還沒有開發完,等待後臺開發完接口,在進行接口聯調,浪費了等待時間,也壓縮的測試的時間。所以實現請求攔截,前端模擬後臺請求數據就是一個很不錯的處理方式。
mockjs
mockjs可以生成隨機數據,攔截 Ajax 請求,讓前端攻城師獨立於後端進行開發。並且支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
使用方法
mockjs 可以很方便的添加到以webpack為管理的項目中,以vue-cli腳手架生成的項目為例。vue-cli的搭建不過多贅述,直接進入安裝插件過程。
用axios進行請求數據 所以安裝axios 和 mockjs 兩個包
npm install axios --save
npm install mockjs --save-dev
在src中創建一個mock文件夾 並創建一個mock.js文件
// mock.js
// 引入mockjs
const Mock = require(‘mockjs‘);
// 創建模擬數據
let testData = {
testData: ‘測試mock‘
}
// Mock.mock( url, post/get , 返回的數據);
Mock.mock( ‘/getMockData‘, ‘get‘ , testData)
在main.js中引入
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import ‘lib-flexible‘ import axios from ‘axios‘ // 引入mockjs require(‘./mock/mock.js‘) // axios引入全局 Vue.prototype.$http = axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘ })
在組件中使用
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>mockjs測試</h2> <div class="adbox"> <div class="wrapper" v-if="hideType" id=‘mydiv‘ ref = ‘mydiv‘> </div> </div> </div> </template> <script> export default { name: ‘HelloWorld‘, data () { return { msg: ‘Welcome to Your Vue.js App‘, hideType: true, } }, mounted() { this.getInfo() }, methods: { getInfo() { this.$http.get(‘/getMockData‘) .then((res) => { console.log(res) }) .catch(function (error) { console.log(error); }); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less" scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; li { display: inline-block; padding: 0 10px; margin: 0 10px; /*no*/ } } a { color: #42b983; font-size: 14px; } .adbox { position: relative; } .wrapper { position: absolute; top: 0; bottom: 0; background: #cccccc; margin: 0; width: 100%; opacity: 0.5; pointer-events: none; z-index: -10; } li:active { a:active { color: red; } } .hide { pointer-events: none; } </style>
在控制臺輸出數據 可以看到 請求被攔截 並且返回了自己寫的測試數據
mockjs 隨機數據功能
剛才介紹了怎麽使用mockjs攔截數據,接下來說下mockjs另一個核心內容,隨機生成數據
mockjs 支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
我們現在來改造下剛才的模擬數據
// mock.js
// 引入mockjs
const Mock = require(‘mockjs‘);
// 獲取 mock.Random 對象
const Random = Mock.Random;
// 創建模擬數據
let testData = function() {
let dataList = [];
for (let i = 0; i < 10; i++) {
let obj = {
title: Random.csentence(10, 20), // Random.csentence( min, max ) 隨機生成一段10-20長度的漢字字符串
picture: Random.dataImage(‘100x100‘, ‘測試圖片‘), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
}
dataList.push(obj)
}
return {
dataList: dataList
}
}
Mock.mock( ‘/getMockData‘, ‘get‘ , testData)
// Mock.mock( url, post/get , 返回的數據);
最終生成的數據
結語
mockjs官網中有很多的例子,可以隨機生成多種數據,學會基本使用之後,可以到官網中查看各種類型數據的隨機生成方法官網地址 http://mockjs.com/。
在vue-lic腳手架中安裝mockjs,實現前後端分離開發