[学习笔记]利用Mock模拟后台数据，并实现登录功能

新项目，后端数据还没准备好，没办法直接从后端获取接口数据，于是我利用Mock简单实现一下这个功能，以作为测试用。

首先，利用  cnpm install mockjs --save-dev  指令安装完mock后，在项目里创建文件夹mock，再创建index.js和userList.js（前者为mock服务文件，后者为模拟数据文件）

index.js中复制如下代码：

// 首先引入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);
    }
});

 另外，需要在main.js中插入一段代码：require('../mock')

之后在userList中写入数据，首先写入get请求获取的数据：

import Mock from 'mockjs' //导入mockjs

const userList = {  //定义用户数据
    data: {
        total: 6,

        //前两个用户数据分别固定设为管理员和普通用户，为后续权限设置做准备，其他用户随机生成
        userinfo: [{  
            username: 'dza6196172',
            password: '123456',
            roles: 'admin',
            name: '张三',
            age: 23,
            job: '前端工程师',
            token: '000111222333444555666',
            id: '100',
        }, {
            username: 'editor',
            password: '123456',
            roles: 'editor',
            name: '测试1',
            'age|20-30': 23,
            job: '前端工程师',
            token: '145145145123123123111',
            id: '101',
        }, {
            username: '@word(3, 5)',
            password: '123456',
            roles: 'editor',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
            token: '@guid()',
            id: '102',
        }, ],
        meta: {
            status: 200,
            message: 'success',
        }
    },
};

//定义请求方法与路径
export default {
    'get|/user': userList,
}

在登录页某一按钮上定义methods以测试是否成功获取数据

async getuser(){
                const {data:res} = await this.$http.get('/user')
                console.log(res);
               }

之后写入post请求相关代码：

Mock.mock('/user', 'post', req => { //路径与请求方式
    const { username, password } = JSON.parse(req.body); //将传递进来的数据保存
    for (let i = 0; i < userList.data.userinfo.length; i++) { 
        //判断userList中是否存在该用户并且用户密码是否正确
        if (username === userList.data.userinfo[i].username && password === userList.data.userinfo[i].password) {
            return {
                meta: {
                    msg: 'success',
                    status: 200
                },
                user: {
                    username: userList.data.userinfo[i].username,
                    roles: userList.data.userinfo[i].roles
                }
            }
        }
    }
    return {
        meta: {
            msg: 'error',
            status: 201
        }
    }
})

登录按钮的methods暂时写为：

loginButton(){
                this.$refs.loginRef.validate(async valid => { //规则校验
                    if(!valid)return
                    const {data:res} = await this.$http.post('/user',this.loginForm) //发送请求
                    if(res.meta.status!==200){
                        return this.$message.error('用户名或密码错误')
                    }
                    this.$message.success('登录成功')
                })
             },

分别输入正确/错误的用户名/密码后，测试没有问题。