vue+mockjs模擬數據實現前后端分離開發的實例代碼

npm install --global vue-cli 

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

npm install mockjs --save-dev 

// 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];

}) 

// 引入mockjs

const 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); 

<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> 

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);

 }

} 

<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>