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 // 引入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];}) 

// 引入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); 

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