小程序的发展史_vue+mockjs模仿数据完成前后端别离

vue+mockjs模拟数据实现前后端分离开发的实例代码       本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，具有一定的参考价值，有兴趣的可以了解一下

本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。

在项目中尝试了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 br cd mockjs br 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'

这里我添加了额一个常用的时间整理过滤器 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: ame(), // ame() 随机生成一个常见的中文姓名
 date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
 articles.push(newArticleObject)

9.所有代码可以查看我的github：  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。