美文网首页实用前端WEB前端程序开发
前端虚拟接口mockJs的接入

前端虚拟接口mockJs的接入

作者: 麦壳儿UIandFE2 | 来源:发表于2018-02-19 18:26 被阅读92次

标签(空格分隔): 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前进的动力-----

相关文章

  • 前端虚拟接口mockJs的接入

    标签(空格分隔): mockjs 模拟接口数据 前后端分离开发 序 前端模拟接口数据的方式,大概分为以下...

  • 前端虚拟接口mockjs的使用

    最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写...

  • Mock.js使用

    一、介绍 Mock.js[http://mockjs.com/]是用来模拟产生一些虚拟的数据,可以让前端在后端接口...

  • (Vue-cli)十一、mockjs(两个功能:1.生成随机数据

    Mock.js[http://mockjs.com/]是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发...

  • 小程序中使用Mock数据

    介绍 Mock.js生成随机数据,拦截 Ajax 请求 前端使用mockjs后,对后端接口进行请求时,mockjs...

  • Vue中使用mockjs

    介绍 Mock.js生成随机数据,拦截 Ajax 请求 前端使用mockjs后,对后端接口进行请求时,mockjs...

  • Mockjs ( 模拟数据 ) 快速入门

    mockjs 根据规则生成随机数据, 通过拦截ajax 请求实现 模拟前端数据接口 安装 主要模块 mock根据数...

  • [技术探索]前端实现后端数据模拟的几种方法

    1.0 MockJs Mock官网案例 用法简单:符合直觉的接口。 前后端分离:让前端攻城师独立于后端进行开发。 ...

  • mockjs使用总结

    mockjs的下载使用官网可以参考这里,它的功能主要是前端开发者可以不用等待后台开发提供了现成的接口,才进行前端开...

  • mockjs

    Mockjs 无侵入性的、生成拟真数据、请求拦截,可以帮助前端不依赖后端的接口进行并行开发。 安装依赖 生成模拟数...

网友评论

    本文标题:前端虚拟接口mockJs的接入

    本文链接:https://www.haomeiwen.com/subject/hftwtftx.html