【项目功能实现（1）：登录】

登录功能比较简单，主要是使用vant做界面。😉😉😉

一、了解Vant

vant官方文档： https://vant-contrib.gitee.io/vant/#/zh-CN

Vant是轻量、可定制的移动端 Vue 组件库。

二、登录界面的编写

2.1 登录界面

准备在顶部放一张图片，下面放两个输入框，两个按钮。
在src目录下，创建login文件夹，在该文件夹下，添加login.vue。

login.vue的内容如下：

<template>
    <div>
        <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
    </div>
    <div>
        <van-field
            v-model="user.name"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
    </div>
    <div>
        <van-button plain type="primary" @click="clickButton(1)">登录</van-button>
        <van-button plain type="primary" @click="clickButton(2)">清空</van-button>

    </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue';
export default defineComponent({
    name: 'Login',
    setup(){
        const images=reactive([
        ]);
        //保存登录的信息
        const user = reactive({
            name:"",
            password:""
        });

        function clickButton(value: number){
            console.log(value);
        }

        return {
            images,
            user,
            clickButton,
        };
    },
})
</script>
<style scoped>
img{
    width: 100%;
}
</style>

这里实现了点击登录，控制台打印1；点击清空，控制台打印2。

2.2 修改路由

在router的index.ts文件中，修改部分代码，使得当访问根路径’/‘时,自动重定向到’/login’路径。另外，定义登录页面路由对应的组件是login.vue，并使用动态导入的方式import组件，修改部分代码如下：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'Login',
    component: ()=>import('../components/login/login.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

可以运行一下，运行截图如下：

三、使用mock实现用户登录

想使用mock对’/api/login’发送包含用户名以及密码的请求，尝试获取响应。添加下面的代码，当点击登录按钮时，发送请求。

		//获取当前实例对象
        const {proxy}:any = getCurrentInstance();
        //发送登录请求的方法
        function toLogin(){
            proxy.$http.post('/api/login',{
                name:user.name,
                password:user.password
            })
            .then((res: any)=>{
                console.log(res);
            })
            .catch((error: any)=>{
                console.log(error);
            })
        }

        function clickButton(value: number){
            if(value == 1){
                toLogin();
            }
            console.log(value);
        }

在mock中，添加下面的代码：

Mock.mock(/\/api\/login/,(req:any)=>{
    console.log(req.body);
//return中的数据
    return{
        code:0,
        data:{
            msg:'测试登录成功~~~~'
        }
    }
})

这样就可以拦截ajax请求,返回一些模拟数据。

实现登录逻辑之后的代码：

<template>
    <div>
        <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
    </div>
    <div>
        <van-field
            v-model="user.name"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
    </div>
    <div>
        <van-button plain type="primary" @click="clickButton(1)">登录</van-button>
        <van-button plain type="primary" @click="clickButton(2)">清空</van-button>

    </div>
</template>
<script lang="ts">
import {defineComponent, getCurrentInstance, reactive} from 'vue';
export default defineComponent({
    name: 'Login',
    setup(){
        //获取当前实例对象
        const {proxy}:any = getCurrentInstance();
        const images=reactive([
        ]);
        //保存登录的信息
        const user = reactive({
            name:"",
            password:""
        });

        //发送登录请求的方法
        function toLogin(){
            proxy.$http.post('/api/login',{
                name:user.name,
                password:user.password
            })
            .then((res: any)=>{
                console.log(res);
                if(res.data.code==0){
                    proxy.$toast.success("登录成功");
                }
                else{
                    proxy.$toast.success("登录失败");
                }
            })
            .catch((error: any)=>{
                console.log(error);
            })
        }

        function clickButton(value: number){
            if(value == 1){
                if(user.name == '' && user.password == ''){
                    proxy.$toast.fail("账号密码不能为空");
                }else{
                    toLogin();               
                }
            }
            else if(value == 2){
                user.name="";
                user.password="";
            }
            console.log(value);
        }

        return {
            images,
            user,
            clickButton,
        };
    },
})
</script>
<style scoped>
img{
    width: 100%;
}
</style>

mock

import Mock from 'mockjs'

//设置请求延时
Mock.setup({
    timeout:'200-2000',//单位为毫秒
})

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

//登陆接口
 Mock.mock(/\/api\/testApi/,(req:any)=>{
    console.log(req);
//return中的数据
    return{
        code:0,
        data:{
            msg:'mock测试成功~~~~'
        }
    }
})

Mock.mock(/\/api\/login/,(req:any)=>{
    //账号池
    const userPools=[
        {name:'aa',password:'123456'},
        {name:'bb',password:'123456'},
        {name:'cc',password:'123456'},
        {name:'dd',password:'123456'},
        {name:'ee',password:'123456'},
    ];
    const {name,password} = JSON.parse(req.body);
    console.log(req.body);

    const userLength=userPools.filter((res)=>{
        return res.name = name;
    });

    if(userLength.length>0){
        if(userLength[0].password == password){
            return {
                code: 0,
                data:{
                    msg: '账号不存在'
                }
            }
        }else{
            return {
                code: -1,
                data:{
                    msg: '密码错误'
                }
            }
        }
    }else{
        return {
            code: -1,
            data:{
                msg: '账号不存在'
            }
        }
    }
})

export default Mock;

如果输入的用户名、密码在用户池内，会跳出提示登录成功。