vue+mockjs模拟数据如何实现前后端分离开发

这篇文章主要介绍了vue+mockjs模拟数据如何实现前后端分离开发，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专注于企业全网整合营销推广、网站重做改版、贺州网站定制设计、自适应品牌网站建设、H5页面制作、商城网站定制开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为贺州等各大城市提供网站开发制作服务。

在项目中尝试了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

 

// 引入mockjs

require('./mock.js')

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '',

  components: {

    App

  }

})

 

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

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

})

这里我添加了额一个常用的时间整理过滤器 getYMD

6. 添加一个mock规则（mock.js）

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

7.在Hello.vue 中请求文档接口，并接收mock数据

 



 





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

}

 注意：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展示数据

 



 



.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 h3 {

 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;

}

感谢你能够认真阅读完这篇文章，希望小编分享的“vue+mockjs模拟数据如何实现前后端分离开发”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!