vue+mockjs類比資料實現前後端分離開發的執行個體代碼，vuemockjs

vue+mockjs類比資料實現前後端分離開發的執行個體代碼，vuemockjs

本文介紹了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<br>cd mockjs<br>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: '<App/>',  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資料

<template> <div class="index">  <div v-for="(item, key) in newsListShow">   <news-cell   :newsDate="item"   :key="key"   ></news-cell>  </div> </div></template> <script>import api from './../axios/api.js'import NewsCell from './NewsCell.vue' export default { name: 'index', data () {  return {   newsListShow: [],  } }, components: {  NewsCell }, created() {  this.setNewsApi(); }, methods:{  setNewsApi: function() {   api.JH_news('/news/index', 'type=top&key=123456')   .then(res => {    console.log(res);    this.newsListShow = res.articles;   });  }, }}</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.topNav{ width: 100%; background: #ED4040; position: fixed; top:0rem; left: 0; z-index: 10;}.simpleNav{ width: 100%; line-height: 1rem; overflow: hidden; overflow-x: auto; text-align: center; font-size: 0; font-family: '微軟雅黑'; white-space: nowrap;}.simpleNav::-webkit-scrollbar{height:0px}.simpleNavBar{ display: inline-block; width: 1.2rem; color:#fff; font-size:0.3rem;}.navActive{ color: #000; border-bottom: 0.05rem solid #000;}.placeholder{ width:100%; height: 1rem;}</style> 

 注意：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展示資料

<template> <section class="financial-list">  <section class="collect" @click="jumpPage">   <aside>    <h2>{{newsDate.title}}</h2>    <section class="Cleft clearfix">     <img class="fl" src="./../assets/icon/eyes.png" style="width:0.24rem;height:0.2rem;">     <span class="fl">{{newsDate.author_name}}</span>    </section>    <section class="Cright">     <img src="./../assets/icon/clock.png" style="width:0.2rem;height:0.2rem;">     <span>{{newsDate.date | getYMD}}</span>    </section>    <div style="clear: both"></div>   </aside>   <aside>    <img :src="newsDate.thumbnail_pic_s" style="border-radius: 0.2rem;">   </aside>   <div style="clear: both"></div>  </section> </section></template> <script>export default { name: 'NewsCell', props: {  newsDate: Object }, data () {  return {  } }, computed: { }, methods: {  jumpPage: function () {   window.location.href = this.newsDate.url  } }}</script> <style scoped>.financial-list { width: 100%; height: 100%; background-color: white; padding: 0.28rem 0; border-bottom: 1px solid #ccc;} .financial-list .collect { width: 92%; margin: 0 auto;} .financial-list .collect aside:nth-of-type(1) { width: 63%; float: left;} .financial-list .collect aside:nth-of-type(2) { width: 32%; height: 2rem; float: left; margin-left: 0.3rem;} .financial-list .collect h2 { width: 100%; height: 0.96rem; font-size: 0.32rem; color: #333333; line-height: 0.48rem; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;} .financial-list .collect aside:nth-of-type(2) img { width: 100%; height: 100%;} .financial-list .collect aside .Cleft { width: 45%; float: left; margin-top: 0.66rem;} .financial-list .collect aside .Cleft span{ display: block; width: 1.4rem; margin-left: 0.05rem; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;} .financial-list .collect aside .Cright { width: 55%; float: right; margin-top: 0.66rem;}.financial-list .collect aside .Cright span{ display: inline-block; margin: 0.04rem 0 0 0.05rem;}.financial-list .collect aside span { font-size: 0.2rem; color: #999999;} .financial-list .collect aside .Cleft img,.financial-list .collect aside .Cright img { width: 0.18rem; height: 0.24rem; margin-top: 0.09rem;}</style> 

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。