mockjs

391 阅读1分钟

1.什么是mockjs

只要和后端确立好数据类型,mockjs 使得前端开发无须等待,可以自己拦截、模拟 ajax 请求,节约了开发时间。

2.mockjs的由来

mock有“愚弄、欺骗”之意,在前端领域,mock可以理解为我们前端开发人员制造的假数据。也就是说不是由后台真实制造,而是由我们其他一些方式模拟的数据,例如借mock.js。 通过这种方式,我们能在一定程度上实现前后端分离的开发流程。因为如果前端开发人员能够自己模拟数据的话,就不必等着拿到后端的接口才能完成剩下的工作,使得前端人员独立开发的能力增强, 在此基础上做到前端后台各自独立的开发(当然这个前提是有写好详细地公共数据接口的文档)最后对接的工作是前后端联调数据,因为前端mock的辅助,我们尽可能地减少了前后端对接过程中的效率 损耗

3.mockjs的安装和使用

1.npm install mockjs去安装mock.js模块

2.简单配置
在src目录下创建mock文件,建立index.js文件。在index.js文件简单的写一点模拟的数据
const Mock=require(‘mockjs‘);
var template={
‘data|1-4‘:[{
‘title‘:‘@title‘,
‘article‘:‘@article‘
}]
}
Mock.mock(‘/api/data‘,template);
3.在mai.js文件中引入index.js文件 
4.在组建中用axios请求接口
  mounted(){
     this.$http({
       url:‘/api/data‘,
       type:‘POST‘,
       dataType:‘json‘
     }).then(res=>{
       console.log(res)
     })
  }
}
5.请求结果
    {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}config:
    {adapter: ?, transformRequest: {…}, 
    transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}data: {data:
    Array(1)}headers: {}request: MockXMLHttpRequest 
    {custom: {…}, match: true, readyState: 4, timeout: 0, onreadystatechange: ?,
    …}status: 200statusText: "OK"__proto__: Object