vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼

更新時(shí)間：2017年08月08日 10:13:20 作者：Jason齊齊

本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

本文介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼，分享給大家，也給自己留個(gè)筆記。

在項(xiàng)目中嘗試了mockjs，mock數(shù)據(jù)，實(shí)現(xiàn)前后端分離開(kāi)發(fā)。

關(guān)于mockjs，官網(wǎng)描述的是

1.前后端分離

2.不需要修改既有代碼，就可以攔截 Ajax 請(qǐng)求，返回模擬的響應(yīng)數(shù)據(jù)。

3.數(shù)據(jù)類型豐富

4.通過(guò)隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景。

等等優(yōu)點(diǎn)。

總結(jié)起來(lái)就是在后端接口沒(méi)有開(kāi)發(fā)完成之前，前端可以用已有的接口文檔，在真實(shí)的請(qǐng)求上攔截ajax，并根據(jù)mockjs的mock數(shù)據(jù)的規(guī)則，模擬真實(shí)接口返回的數(shù)據(jù)，并將隨機(jī)的模擬數(shù)據(jù)返回參與相應(yīng)的數(shù)據(jù)交互處理，這樣真正實(shí)現(xiàn)了前后臺(tái)的分離開(kāi)發(fā)。

與以往的自己模擬的假數(shù)據(jù)不同，mockjs可以帶給我們的是：在后臺(tái)接口未開(kāi)發(fā)完成之前模擬數(shù)據(jù)，并返回，完成前臺(tái)的交互；在后臺(tái)數(shù)據(jù)完成之后，你所做的只是去掉mockjs：停止攔截真實(shí)的ajax，僅此而已。

下面一步步的來(lái)實(shí)現(xiàn)vue-cli創(chuàng)建項(xiàng)目并添加一條新聞?lì)惖臄?shù)據(jù)模擬接口：

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

npm install --global vue-cli

2.創(chuàng)建vue項(xiàng)目

vue init webpack mockjs<br>cd mockjs<br>npm install axios --save

3.安裝mockjs

npm install mockjs --save-dev

4.項(xiàng)目目錄

axios/api 用來(lái)封裝axios

Hello.vue 頁(yè)面首頁(yè)

NeswCell.vue 新聞組件

router/index.js 路由

main.js 入口js

mock.js mockjs文件

在來(lái)看下完成后的效果

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

 

// 引入mockjs

require('./mock.js')

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: {

    App

  }

})

 

Vue.filter('getYMD', function(input) {

  return input.split(' ')[0];

})

這里我添加了額一個(gè)常用的時(shí)間整理過(guò)濾器 getYMD

6. 添加一個(gè)mock規(guī)則（mock.js）

// 引入mockjs

const Mock = require('mockjs');

// 獲取 mock.Random 對(duì)象

const Random = Mock.Random;

// mock一組數(shù)據(jù)

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 ) 生成一段隨機(jī)的 Base64 圖片編碼

      author_name: Random.cname(), // Random.cname() 隨機(jī)生成一個(gè)常見(jiàn)的中文姓名

      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；Random.time() 返回一個(gè)隨機(jī)的時(shí)間字符串

    }

    articles.push(newArticleObject)

  }

 

  return {

    articles: articles

  }

}

 

// Mock.mock( url, post/get , 返回的數(shù)據(jù))；

Mock.mock('/news/index', 'post', produceNewsData);

7.在Hello.vue 中請(qǐng)求文檔接口，并接收mock數(shù)據(jù)

<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函數(shù)

axios/api.js如下

import axios from 'axios'

import vue from 'vue'

 

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

 

// 請(qǐng)求攔截器

axios.interceptors.request.use(function(config) {

  return config;

 }, function(error) {

  return Promise.reject(error);

 })

 // 響應(yīng)攔截器

axios.interceptors.response.use(function(response) {

 return response;

}, function(error) {

 return Promise.reject(error);

})

 

// 封裝axios的post請(qǐng)求

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展示數(shù)據(jù)

<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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: