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

標籤：cell   rip   UI   orm   web   space   page   參與   oca   

在項目中嘗試了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: ‘<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

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