实操教程：用Vue3和Vant UI打造一款功能丰富的记账应用（包含登录注册及验证码功能）
最编程
2024-02-22 20:08:51
...
<template>
<!-- 根据页面显示相应头部 -->
<Header :title="type == 'login' ? '登录' : '注册'" />
<div class="auth">
<img class="logo" src="//s.yezgea02.com/1606836859539/onpeice.png" alt="" />
<!-- 登录界面的表单 -->
<van-form class="form-wrap" @submit="onSubmit" v-if="type == 'login'">
<div class="form">
<!-- 账号输入框，clearable：清除图标，rules：表单校验规则 -->
<van-field
clearable
v-model="username"
name="username"
label="账号"
placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账户' }]"
/>
<!-- 密码输入框 -->
<van-field
clearable
v-model="password"
type="password"
name="password"
label="密码"
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
</div>
<div style="margin: 16px 0">
<van-button round block type="primary" native-type="submit">
登录
</van-button>
<p @click="chanegType('register')" class="change-btn">
没有账号，前往注册
</p>
</div>
</van-form>
<!-- 注册页面的表单 -->
<van-form class="form-wrap" @submit="onSubmit" v-if="type == 'register'">
<div class="form">
<van-field
clearable
v-model="username"
name="username"
label="账号"
placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账号' }]"
/>
<van-field
clearable
v-model="password"
type="password"
name="password"
label="密码"
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<!-- 验证码输入框 -->
<van-field
center
clearable
label="验证码"
placeholder="输入验证码"
v-model="verify"
>
<!-- 点击刷新验证码 -->
<template #button>
<!-- 生成验证码图片组件，ref 方便拿到组件内的实例属性 -->
<VueImgVerify ref="verifyRef" />
</template>
</van-field>
</div>
<div style="margin: 16px 0">
<van-button round block type="primary" native-type="submit">
注册
</van-button>
<p @click="chanegType('login')" class="change-btn">登录已有账号</p>
</div>
</van-form>
</div>
</template>
<script>
import { reactive, toRefs, ref, onMounted } from "vue";
// 生成验证码的组件
import VueImgVerify from "../components/VueImageVerify.vue";
import Header from "../components/Header.vue";
import axios from "../utils/axios";
// 轻提示（成功/失败...）
import { Toast } from "vant";
import router from "../router";
export default {
name: "Login",
components: {
VueImgVerify, // 验证码组件
Header, //公共头组件
},
setup() {
// 便于拿到 verifyRef 组件内的实例属性
const verifyRef = ref(null);
// 注册登录的相关内容
const state = reactive({
username: "",
password: "",
type: "login", // 登录注册模式切换参数
verify: "", // 验证码输入框输入的内容
imgCode: "", // 生成的验证图片内的文字
});
console.log("verifyRef", verifyRef);
// 提交登录 or 注册表单
const onSubmit = async (values) => {
// 登录功能
if (state.type == "login") {
const { data } = await axios.post("/user/login", {
username: state.username,
password: state.password,
});
// 添加 token 到本地存储
localStorage.setItem("token", data.token);
window.location.href = "/";
} else {
// 生成的图片验证码的文字等于验证码组件生成的验证码
state.imgCode = verifyRef.value.imgCode || "";
// 如果验证码组件生成的验证码的小写 != 用户输入的验证码的小写，则提示错误
if (
verifyRef.value.imgCode.toLowerCase() != state.verify.toLowerCase()
) {
console.log("verifyRef.value.imgCode", verifyRef.value.imgCode);
Toast.fail("验证码错误");
return;
}
// 验证码匹配成功，注册=>注册成功
await axios.post("/user/register", {
username: state.username,
password: state.password,
});
Toast.success("注册成功");
}
};
// 切换登录和注册两种模式
const chanegType = (type) => {
state.type = type;
};
return {
...toRefs(state),
onSubmit,
chanegType,
verifyRef,
};
},
};
</script>
<style lang='less' scoped>
@import url("../config/custom.less");
.auth {
height: calc(~"(100% - 46px)");
padding: 30px 20px 0 20px;
background: @primary-bg;
.logo {
width: 150px;
display: block;
margin: 0 auto;
margin-bottom: 30px;
}
.form-wrap {
.form {
border-radius: 10px;
overflow: hidden;
.van-cell:first-child {
padding-top: 20px;
}
.van-cell:last-child {
padding-bottom: 20px;
}
}
}
.change-btn {
text-align: center;
margin: 10px 0;
color: @link-color;
font-size: 14px;
}
}
</style>
上一篇： 如何使用dayjs库轻松创建倒计时功能
下一篇： 问C# Blazor:倒计时计时器EN