vue+mockjs 類比資料，實現前後端分離開發

在專案中嘗試了mockjs， mock資料， 實現前後端分離開發。

關於mockjs， 官網描述的是

1.前後端分離

2.不需要修改既有代碼， 就可以攔截 Ajax 請求， 返回類比的回應資料。

3.資料類型豐富

4.通過亂數據， 模擬各種場景。

等等優點。

總結起來就是在後端介面沒有開發完成之前， 前端可以用已有的介面文檔， 在真實的請求上攔截ajax， 並根據mockjs的mock資料的規則， 類比真實介面返回的資料， 並將隨機的類比資料返回參與相應的資料交互處理， 這樣真正實現了前後臺的分離開發。

與以往的自己類比的假資料不同， mockjs可以帶給我們的是：在後臺介面未開發完成之前類比資料，

並返回， 完成前臺的交互；在後臺資料完成之後， 你所做的只是去掉mockjs：停止攔截真實的ajax， 僅此而已。

下面一步步的來實現vue-cli創建項目並添加一條新聞類的資料類比介面：

1.安裝vue-cli全域腳手架

npm install --global vue-cli

2.創建vue項目

vue init webpack mockjs
cd mockjs
npm install axios --save

3.安裝mockjs

npm install mockjs --save-dev

4.專案目錄

axios/api 用來封裝axios

Hello.vue 頁面首頁

NeswCell.vue 新聞群組件

router/index.js 路由

main.js 入口js

mock.js mockjs檔

在來看下完成後的效果

5.在入口js（main.js）裡引入mockjs

// 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'Vue.config.productionTip = false// 引入mockjsrequire('./mock.js')/* eslint-disable no-new */new Vue({el: '#app',router,template: '',components: {App}})Vue.filter('getYMD', function(input) {return input.split(' ')[0];})

這裡我添加了額一個常用的時間整理篩檢程式 getYMD

6. 添加一個mock規則（mock.js）

// 引入mockjsconst Mock = require('mockjs');// 獲取 mock.Random 對象const Random = Mock.Random;// mock一組數據const produceNewsData = function {let articles = ;for (let i = 0; i < 100; i++) {let newArticleObject = {title: Random.csentence(5, 30), // Random.csentence( min, max )thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼author_name: Random.cname, // Random.cname 隨機生成一個常見的中文姓名date: Random.date + ' ' + Random.time // Random.date指示生成的日期字串的格式,預設為yyyy-MM-dd；Random.time 返回一個隨機的時間字串}articles.push(newArticleObject)}return {articles: articles}}// Mock.mock( url, post/get , 返回的資料)；Mock.mock('/news/index', 'post', produceNewsData);

7.在Hello.vue 中請求文檔介面，

並接收mock資料

注意：api.JH_news是我封裝的axios函數

axios/api.js如下

import axios from 'axios'import vue from 'vue'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'// 請求攔截器axios.interceptors.request.use(function(config) { return config; }, function(error) { return Promise.reject(error); }) // 回應攔截器axios.interceptors.response.use(function(response) { return response;}, function(error) { return Promise.reject(error);})// 封裝axios的post請求export function fetch(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response.data); }) .catch((error) => { reject(error); }) })}export default { JH_news(url, params) { return fetch(url, params); }}

8.在NewsCell.vue展示數據

完成

9.所有代碼可以查看我的github： https://github.com/Jasonwang911/vue_mockjs