项目实战之使用mock实现用户登陆

1.安装mock

npm i mockjs

2.登陆接口

//src/mock/index.ts
import Mock from 'mockjs';

Mock.setup({
    timeout: '200-2000'
})

//设置拦截路径
//mock中有三个方法：分别是  拦截路径的正则表达式，请求的方法，  和响应数据的函数
// Mock.mock(/\/api\/register/,'get',homeApi.getHomeData);

//测试接口
Mock.mock(/\/api\/test/, 'get', (req: any) => {
    console.log(req);
    return {
        code: 200,
        data: {
            msg: 'mock测试成功'
        }
    }

})

//登陆接口
Mock.mock(/\/api\/login/, 'post', (req: any) => {
    // req.body 指代请求体中的内容
    console.log(req.body);
    // 测试接口  可以删掉了
    // return {
    //     code: 200,
    //     data: {
    //         msg: 'mock测试登陆成功'
    //     }
    // }

    //定义账号池 相当于数据库中的用户表
    const userPools = [
        { name: 'laoc', password: 123456 },
        { name: 'xchen', password: 123456 },
        { name: 'admin', password: 123456 },
        { name: 'lucy', password: 123456 },
    ];

    //把name和password 通过结构复制 从请求体中解构出来 用来做判断 看用户名是否正确
    // 正确的判断 就是看和账号池内的数据是否匹配
    const { name, password } = JSON.parse(req.body);
    // console.log(name, password);

    //过滤数据池  判断和输入的用户名是否匹配
    const userLength = userPools.filter(item => {
        //如果过滤时候 其中一项的name  和我们输入的name一直 就把这一项数据返回给userLength
        return item.name == name;
    })
    // console.log(userLength);
    //判断userLength的长度 如果为0 说明用户名不在数据池内 即不存在
    // 否则 说明用户名存在 接着判断密码
    if (userLength.length > 0) {
        // 用户名存在 接着判断密码
        //  等号后面的password 使我们解构出来用户提交的password
        if (userLength[0].password == password) {
            return {
                code: 200,
                data: {
                    msg: '登陆成功'
                }
            }
        } else {
            return {
                code: -1,
                data: {
                    msg: '密码输入错误'
                }
            }
        }
    } else {
        return {
            code: -1,
            data: {
                msg: '用户名不存在'
            }
        }
    }

})