mockjs打开新世界——再也不用担心没有后端接口怎么办了

什么是mockjs

用于拦截Ajax请求,模拟数据返回。当后端接口还没开发完成时,可以手动模拟后端接口。使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查。在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

mockjs的用法

1、创建一个js文件
2、在文件中引入mockjs

const Mock = require('mockjs')

3、 用Mock.mock()生成随机变量的用法

  • 随机生成一个id变量
let id = Mock.mock('@id')
console.log(id)
  • 随机生成一个对象
let obj = Mock.mock({
    id: "@id()",    //随机id
    name: "@cname()",  //随机生成名字
    data:  "@date()",  //随机生成日期2020-08-05
    avatar: "@image('100x100', 'red', '#fff', 'avatar')",  //随机获取图片地址,(size,background,font-color,text)
    description: "@paragraph()",    //随机生成英文描述
    ip: '@ip()',    //随机ip地址
    email: "@email()"   //随机生成email地址

})

4、用mockjs拦截ajax请求,并返回随机数据(vue实例)

  1. 创建一个json文件,封装需要返回的随机数据
{
    id: "@id()",   
    name: "@cname()", 
    data:  "@date()", 
    avatar: "@image('100x100', 'red', '#fff', 'avatar')", 
    description: "@paragraph()", 
    ip: '@ip()',   
    email: "@email()"   

}

注意:json的格式是不允许有注释的,如果想要保存注释,可以把json文件改成json5文件,然后通过JSON5.parse();对json5文件进行解析。

  1. 在根目录下创建vue.config.js文件,设置请求拦截
module.exports = {
    devServer: {
        before: require('./mock/index.js') //这个文件内容在下面
    }
}

注:devServer.before
function (app, server, compiler)
提供在服务器内部在所有其他中间件之前执行自定义中间件的功能。这可以用于定义自定义处理程序,例如:
webpack.config.js
module.exports = {
//…
devServer: {
before: function(app, server, compiler) {
app.get(’/some/path’, function(req, res) {
res.json({ custom: ‘response’ });
});
}
}
};

  1. ./mock/index.js内容,定义发送get请求’/user/userInfo’时返回的内容
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
//const JSON5 = require('json5');

//读取json文件
function getJsonFile(filePath){
    var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
    //解析并放回
   // return JSON5.parse(json);
   return json;
}

//饭回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userInfo', function(rep,res){
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何获取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json');

        //将json传入Mock.mock 方法中,生成的数据返回给浏览器
        res.json(Mock.mock(json));
    })
}

在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。

  1. 在vue中发送ajax请求,返回了mockjs随机生成的对象
 mounted() {
    axios.get('/user/userInfo').then(res=>{
      console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })
  }
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页