前端虚拟接口mockJs的接入

标签（空格分隔）： 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规则：

这里规则摘自网络哈

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

• 在需要的组件汇总访问数据

 axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
这里的：
url:'/news/index', 
params:'type=xxx&key=xxx'

完毕！

参考链接

mockJS官网

-----喜欢就动动小手哈。-----
-----你的支持是洒家-麦壳-macrolam前进的动力-----