标签（空格分隔）： mockjs 模拟接口数据 前后端分离开发
序
前端模拟接口数据的方式，大概分为以下几种：
在代码里硬编码：
说白点 就是直接把模拟数据写死在代码中，简单粗暴，但是没解决问题，顶多起个占位作用调一调样式，和代码的耦合度太高，意义不大。本地json文件：
这种方式我目前常用，可以通过ajax来访问，前提必须是get方式，json里存放的就是后台的接口数据，这里你起码可以正常发送ajax请求，字段写在模板里，避免了方式一中的耦和问题。抓包的工具的使用
比如：青花瓷Charles 和 fiddler等对网络请求的拦截，找个你想要的数据，不符合的可以替换下，真实感受了下网络请求状况，但是这个时间成本就相对高了。而且对于开发一个系统来说，不方便统一配置。Mock-sever
最到位的方式无非是自己搭建独立的Mock-Server，开发的前期阶段，所有的接口都会指向这个Mock-Server。但是成本啊！外加你除了紧紧巴巴的开发周期外有空有心思搞这个吗？阿里妈妈推出了一道小菜-RAP ，是一个可视化接口管理工具，将所有的接口开发定义以其要求的格式进行管理，并能根据这些定义来产生Mock数据，提供给消费者。RAP为我们提供Mock-Server服务，那么我们下一步欠缺的就是如何让代码中的网络请求能直接访问到RAP上。还支持以函数的形式动态返还Mock数据，大大提升了Mock数据生成的能力，为了更加真实的接近真实的网络请求，还可以配置网络延时等。你说贴心不。话题打住，今天要说的是前的前辈：mockJs
简介
关于mockjs，官网描述的是
1.前后端分离
2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据，模拟各种场景。
vue项目中接入mockJs步骤：
安装到项目
npm install mockjs --save-dev
在入口js中引入
image.png
项目目录：
image.png
在mock.js中写入你mock规则：
这里规则摘自网络哈
// 引入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);在需要的组件汇总访问数据
axios.post(url, params)
.then(response => {
resolve(response.data);
})
这里的：
url:'/news/index',
params:'type=xxx&key=xxx'完毕！
参考链接
mockJS官网
简书
-----喜欢就动动小手哈。-----
-----你的支持是洒家-麦壳-macrolam前进的动力-----
作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/1dc17f41e5ed