mock在项目中的使用

阅读目录

• 1.下载
• 2.代码配置
• 参考链接：

回到顶部

1.下载

npm i mockjs axios -D;

回到顶部

2.代码配置

2.1 mock文件夹index.js文件

// 配置 mock 文件
// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

2.2 在app.js或main.js主文件中引入mock文件

import "../mock";

2.3 mock文件夹下创建mock1.js

const Mock = require('mockjs');
var Random = Mock.Random
let data=Mock.mock({
    'rows|8': [{ //模拟每页有多少条数据。 每页8条。
        key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
        name: '@cname',  //前缀加 c 的意思为随机生成中文，否则是英文
        'age|1-70': 56,  
        address: '@csentence',
        'tags|1-2': ['@name'] 
    }]
})
let data2=Mock.mock({
    'rows|4': [{ //模拟每页有多少条数据。 每页8条。
        key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
        name: '@cname',  //前缀加 c 的意思为随机生成中文，否则是英文
        'age|1-70': 56,  
        address: Random.csentence(),
        'tags|1-2': ['@name'] 
    }]
})
let articleList = {
    code: 200,
    msg: 'success',
    data: { //数据
        total: 100, //模拟数据的页数，分页功能。 100条
        rows:data.rows
    }
};
let List = {
    code: 200,
    msg: 'ss',
    data: { //数据
        total: 10, //模拟数据的页数，分页功能。 100条
        rows:data2.rows
    }
};

export default {//前面键是请求方式与请求地址，后边值是返回的数据
    'get|/article/list': articleList,
    'get|/article2/list': List,

}

2.4 mock文件夹下创建mock2.js

const Mock = require('mockjs') //   这个是引用库
 
const Random = Mock.Random    // 生成随机数
 
let Result = {
    code: 200,
    msg: '操作成功',
    data: null
}
 
// mock.mock的目的就是拦截目的，这样axios的访问，就可以被拦截了。但是一定要记得， 在main.js当中引入，只有引入了才生效。
Mock.mock('/captcha', 'get', () => {
 
    Result.data = {
        token: Random.string(32),
        captchaImg: Random.dataImage('120x40', 'p7n5w')
    }
    return Result
})
 
export default Mock.mock('/login', 'post', () => {
 
    // 无法在header中传入数jwt
 
    // Result.code = 400
    // Result.msg = "验证码错误"
 
    return Result
})
Mock.mock('/sys/userInfo', 'get', () => {
 
    Result.data = {
        id: "1",
        username: "test",
        avatar: "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg"
    }
 
    return Result
})
 
Mock.mock('/logout', 'post', () => {
 
    return Result
})
 
// 获取用户菜单以及权限接口
Mock.mock('/sys/menu/nav', 'get', () => {
 
    let nav = [
        {
            name: 'SysManga',
            title: '系统管理',
            icon: 'el-icon-s-operation',
            component: '',
            path: '',
            children: [
                {
                    name: 'SysUser',
                    title: '用户管理',
                    icon: 'el-icon-s-custom',
                    path: '/sys/users',
                    component: 'sys/User',
                    children: []
                },
                {
                    name: 'SysRole',
                    title: '角色管理',
                    icon: 'el-icon-rank',
                    path: '/sys/roles',
                    component: 'sys/Role',
                    children: []
                },
                {
                    name: 'SysMenu',
                    title: '菜单管理',
                    icon: 'el-icon-menu',
                    path: '/sys/menus',
                    component: 'sys/Menu',
                    children: []
                }
            ]
        },
        {
            name: 'SysTools',
            title: '系统工具',
            icon: 'el-icon-s-tools',
            path: '',
            component: '',
            children: [
                {
                    name: 'SysDict',
                    title: '数字字典',
                    icon: 'el-icon-s-order',
                    path: '/sys/dicts',
                    component: '',
                    children: []
                },
            ]
        }
    ]
 
    let authoritys = ['sys:user:list', "sys:user:save", "sys:user:delete"]
 
    Result.data = {
        nav: nav,
        authoritys: authoritys
    }
 
    return Result
})

2.5 mock文件夹下创建mock3.js

//http://mockjs.com/examples.html
import Mock from 'mockjs'
import url from 'url'
/*
mock.mock()
参数1：请求地址 选填  url
参数2: 请求类型 选填  type
参数3：数据模板 | 函数   
*/
var data = Mock.mock({
    "data|100":[   //意思是data数组中有100条数据
        {  //这个对象是用来写数据模板的
          "id|+1":0,   //初始值是0每次id都+1
          "goodsName":"@ctitle(3, 5)",   //看官网，这个名字是3-5之间的
          "goodsPrice|+1":100,   //这个类似上面的id一个，只是初始值是从100开始的
          "address":"@county(true)",   //这个是地址，@county(true)  对象的属性值都是mock.mock()提供的方法，直接拿过来用就可以了
          "tel":/^1(3|5|7|8|9)\d{9}$/,   //正则写的电话后面1开头，正则不懂自己去学！！！！！！！！！！！很重要
          "goodsImg":"@image('200x100', '#894FC4', '#FFF', 'alley')", // 图片
          "date":'@date("yyyy-MM-dd M:dd:d")',  //时间
          "email":"@email()",  //邮箱
          "name":"@ctitle(10, 30)", //10-30
          "text":"@cparagraph(1, 3)", //备注用
          "my-word":"xxxxxxx@word(5, 30)", //可以拼接字符串使用
          "img":"@dataImage('200x100', 'Hello')", //图片200*100
          "datetime":'@datetime("yyyy-MM-dd A HH:mm:ss")', //"1974-01-08 PM 23:54:57"
          "string":'@string("lower", 5)', //"string5"
          "number|1-800":800,   //返回1-800的随机数
          "url":"@url",  //返回随机url地址
          "word":Mock.Random.cword(5,20),  //返回5-20个随机汉字
          "array|1-10": [  //返回1-10个随机元素的数组
            {
              "name|+1": [
                "Hello",
                "Mock.js",
                "!"
              ]
            }
          ],//数组中含有数组的
          
          'dds':'caiyufu'
        }
    ],
    code:200,
    message:'请求数据成功'
})
 
console.log(data,'ddw');//打印这Mock.mock() 赋值的内容，直接在终端运行就 可以了
 
//  .........这个是通过get  拦截的AJAX
Mock.mock(/\goods\/goodsList/,"get",function(options){
    let {limit,page} = url.parse(options.url,true).query;// 解构赋值，结合上面看就懂了
    // return data.data.slice(0,4);//获取0-4条的数据，
    return data.data.slice((page-1)*limit,(limit*page)-1)  //data.data是上面的数据，这里获取的是
})
 
 
export default Mock.mock('/postdata1','post',{
    success: true,
    message: '@cparagraph',
    // 属性 list 的值是一个数组，其中含有 1 到 5 个元素
    'list|1-5': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
    }]
})

2.6 使用axios调用接口

axios.get("/goods/goodsList", {   //这个是通过get发送的
  params: {
    limit: 5,  //一页有5条数据
    page: 1   //第几页
  }
}).then((data) => {
  console.log(data);
});

axios.post('/postdata1', {
  params: {
    name: 'jack'
  }
})
  .then((res) => {
    console.log(res.data)
  })
  .catch((err) => {
    console.log(err)
  })

axios.get('/sys/menu/nav').then(res => {
  console.log("/sys/menu/nav")
  console.log(res)
})

axios.get('/article/list').then(res => {
  console.log("/article/list")
  console.log(res)
})

回到顶部

参考链接：

http://runxinzhi.com/enhengenhengNymph-p-15665564.html