mock.js详细用法

mock.js使用方法

MOCK.JS 是前端的一个模拟数据的库。这个库的使用，可以在前端开发时，就避免大量的后端请求。

1.定义

随机生成相应格式的数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

官方文档：Mock.js

2.安装

npm install mockjs --save

3. 使用方法

方法一，直接使用一个mock.js文件的情况下：

01 编写一个mock.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
})

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
})

02 在main.js 经mock.js引入。

 require("./mock.js")

03 在 vue的组件当中直接，axios就可以了。

login.vue组件当中，提供的关于缩略图的获取方法。

getCaptcha() {
                this.$axios.get('/captcha').then(res => {

                    console.log("/captcha")
                    console.log(res)

                    this.loginForm.token = res.data.data.token
                    this.captchaImg = res.data.data.captchaImg
                    this.loginForm.code = ''
                })
            }

方法二，就是如何调用一个目录的方式

01 创建一个mock目录，然后将可以提供mock数据的JS文件编写好。这里边编写了两个JS文件。

注意观察两个文件的关系。

把getHomeData给作为JS的函数导出了。

仔细看了，你就会发现，其实就是一个文件的分组。第二个文件要把JS的函数给导出，然后第一个文件再引用。有点类似于打包的概念。

02 一定要在main.js当中引入

import './mock'

03 在页面当中引用

这个部分没有特别的只是直接使用就可以了。或者说就是使用axios直接调用就可以了。不需要特殊处理。

methods：
{
    getShipData(){
        this.$http.get('/home/getData').then(res =>{
            if(res.data.code === '200'){
                this.shipList = res.data.data.shipList;            
            }        
        })    
    }
    }