3. 【Vue实战--孢子记账--Web 版开发】--登录大模块

从这篇文章开始我们就进入到了孢子记账的前端开发，在本专栏中我默认大家的电脑上都已经配置好了开发环境。下面我们一起开始编写孢子记账的Web版吧。

一、功能

登录大模块功能包括注册、登录和找回密码功能，在本篇文章中我只会展示注册界面的实现，以及通用功能的实现。下面我们先来看一下这三个功能的原型设计图。
登录功能
注册功能
找回密码功能
界面的左侧根据不同功能切换不同的图片，右侧是功能。

二、代码编写

2.1 注册功能数据模型

在Interface文件夹下新建登录大模块的数据模型文件login.ts，这个文件内容主要是登录、注册和找回密码的表单数据的模型。代码如下：

export interface Register {userName: string;password: string;rePassword: string;phoneNumber: string;email: string;
}
2.2 注册功能

根据原型图我们可以得知实现注册功能需要五个输入框：用户名、密码、确认密码、手机号和邮箱，以及一个注册按钮和一个登录跳转链接。在src/components文件夹下新建login文件夹，并在里面创建Register.vue文件。接下来让我们对代码中的每个部分进行详细讲解，涵盖其目的和功能。

  1. 引入依赖

    import { ref, defineEmits, reactive, inject } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import type { Register } from "../../Interface/login.ts";
import type { Response } from "../../Interface/response.ts";

    这些导入的模块和类型为组件提供了基本的响应式能力、事件机制、表单验证以及类型安全，确保在开发过程中可以获得更好的类型提示和错误检查。通过 TypeScript 和这些工具的结合，可以提高代码的可靠性和可维护性。其中FormInstance定义了 Element Plus 中表单实例的类型，用于 TypeScript 类型检查，确保表单方法和属性的类型安全。FormRules定义表单验证规则的类型，用于为表单字段设定验证逻辑，比如必填、格式验证等。Register 和Response分别是注册表单模型和通用返回数据模型。

  2. 定义组件内部逻辑

    • 事件和依赖注入
      const emit = defineEmits(['switch']);
const axios: any = inject('axios');
      emit定义了一个名为 switch 的事件，允许从当前组件向父组件传递消息或切换状态。inject从外部注入 axios 实例，避免直接在组件中引入 axios，这样遵循依赖注入原则，提高代码的灵活性和可测试性。
    • 创建响应式数据
      const ruleRegisterRef = ref<FormInstance>();
const registerData = reactive<Register>({userName: '',password: '',rePassword: '',phoneNumber: '',email: ''
});
      ruleRegisterRef使用 ref 创建的表单实例引用，用于操作表单。registerData是一个 reactive 对象，表示注册表单的数据模型。每个字段如 userName、password 等，都与表单中的输入绑定。
    • 定义表单验证规则
      const rules = reactive<FormRules<Register>>({userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],rePassword: [{ required: true, message: '确认密码不能为空', trigger: 'blur' },{validator: (rule, value, callback) => {if (value !== registerData.password) {callback(new Error('两次输入密码不一致'));} else {callback();}}, trigger: 'blur'}],phoneNumber: [{ required: true, message: '手机号不能为空', trigger: 'blur' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
});
      rules为表单字段定义验证规则，规则很明白就不讲解了。rePassword不仅要验证是否为空，还需要验证是否与 password 匹配，因此我们自定义了验证器函数来验证与passowrd是否匹配。

  3. 注册方法

    const register = (formEl: FormInstance | undefined) => {if (!formEl) return;formEl.validate().then(() => {axios.post(import.meta.env.VITE_API_BASE_URL + '/api/SysUser/Register', registerData).then((res: any) => {const response: Response<boolean> = res.data;if (response.statusCode === 200) {emit('switch', "login");} else {ElMessage.error(response.errorMessage);}}).catch((err: any) => {console.log(err);});}).catch(() => {return;});
};

    register负责提交注册表单。首先调用 formEl.validate() 进行表单验证，若通过则发送 HTTP POST 请求。请求成功后，如果服务器返回成功状态，则触发 switch 事件，切换到登录页面。如果失败，使用 ElMessage.error 显示错误消息。

  4. 切换到登录页面方法

    const toLogin = () => {emit('switch', "login");
};

    toLogin简单地通过 emit 触发 switch 事件，切换到登录页面。

  5. 模板部分

    <template><div style="padding-top:10%"><div style="text-align: center"><img src="../../assets/logo.png" style="width:200px;height: 49px; max-height: 100%;" alt="Login Image"></div><el-form ref="ruleRegisterRef" :model="registerData" :rules="rules" label-position="top" status-icon><el-form-item label="用户名" prop="userName"><el-input style="height:40px;line-height: 40px" v-model="registerData.userName" placeholder="请输入..."></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input style="height:40px;line-height: 40px" v-model="registerData.password" type="password" placeholder="请输入..."></el-input></el-form-item><el-form-item label="确认密码" prop="rePassword"><el-input style="height:40px;line-height: 40px" v-model="registerData.rePassword" type="password" placeholder="请输入..."></el-input></el-form-item><el-form-item label="手机号" prop="phoneNumber"><el-input style="height:40px;line-height: 40px" v-model="registerData.phoneNumber" type="text" placeholder="请输入..."></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input style="height:40px;line-height: 40px" v-model="registerData.email" type="text" placeholder="请输入..."></el-input></el-form-item><el-form-item><el-button type="primary" style="width: 100%;height:40px;line-height: 40px" @click="register(ruleRegisterRef)">注册</el-button><label>已有账号？</label><el-link :underline="false" type="primary" v-on:click="toLogin">登录</el-link></el-form-item></el-form></div>
</template>

    这里使用 el-form 组件渲染表单，绑定 registerData 和验证规则 rules。每个输入项用 el-form-item 包裹，定义了标签和输入框。“注册”按钮点击时调用 register 方法提交表单。“登录”链接，点击时调用 toLogin 方法切换页面。

2.3 通用界

通用界面主要是登录、注册、找回密码共用的UI界面，也就是原型图的左侧部分。在src/pages目录下新建Login.vue 文件。
这段代码是一个 Vue 3 组件，使用了 script setup 和 TypeScript 语法，实现了在登录、注册、找回密码三个子组件之间的切换。以下是对代码的详细讲解：

  1. 导入部分

    import Login from '../components/login/Login.vue'
import Register from '../components/login/Register.vue'
import RetrievePassword from "../components/login/RetrievePassword.vue";
import { computed, ref } from 'vue'

    Login、Register、RetrievePassword分别导入登录、注册、找回密码的组件。computed和ref是从 Vue 导入用于创建响应式引用和计算属性。

  2. 状态管理和逻辑处理

    const componentAVisible = ref(0)

    componentAVisible使用 ref 创建一个响应式引用，初始值为 0。这个值决定当前显示的组件：0 代表 Login，1 代表 Register，2 代表 RetrievePassword。

    const toggleComponent = (param: String) => {if (param === "login")componentAVisible.value = 0else if (param === "register")componentAVisible.value = 1elsecomponentAVisible.value = 2
}

    toggleComponent是一个方法，用于根据传入的字符串参数切换 componentAVisible 的值，从而改变当前显示的组件。

    const currentComponent = computed(() => componentAVisible.value == 0 ? Login : componentAVisible.value == 1 ? Register : RetrievePassword)

    计算属性currentComponent根据 componentAVisible 的值动态返回对应的组件对象。这个属性决定了 <component> 标签中实际渲染的组件。

  3. 模板部分

    <template><div class="container"><div class="image-section"><img src="../assets/login.svg" v-if="currentComponent==Login" class="image" alt="Login Image"><img src="../assets/register.svg" v-else-if="currentComponent==Register" class="image" alt="Register Image"><img src="../assets/findPassword.svg" v-else class="image" alt="FindPassword Image"></div><div class="section"><div class="border"><component :is="currentComponent" @switch="toggleComponent"/></div></div></div><footer class="footer"><p>© 2025 MiaoShu Studio. All rights reserved.</p></footer>
</template>

    模板部分比较简单，通过v-if 和 v-else-if 根据 currentComponent 的值显示对应的图片。使用 <component> 标签动态渲染 currentComponent。@switch 事件绑定了 toggleComponent 方法，用于子组件触发组件切换。

三、总结

这篇文章是Web版开发的第一篇文章，因此讲解的比较详细，但是在后续的文章中将只会讲解核心代码和重要代码。完整代码大家可以在github上下载，但是我建议大家先自己实现代码，然后再对比github上的代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/892483.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【2024年华为OD机试】 (A卷,100分)- 端口合并（Java JS PythonC/C++）

【2024年华为OD机试】 (A卷,100分)- 端口合并（Java JS PythonC/C++）

一、问题描述 题目描述 有 M 个端口组 (1 < M < 10)&#xff0c; 每个端口组是长度为 N 的整数数组 (1 < N < 100)&#xff0c; 如果端口组间存在 2 个及以上不同端口相同&#xff0c;则认为这 2 个端口组互相关联&#xff0c;可以合并。 输入描述 第一行输入端…
阅读更多...
73.矩阵置零 python

73.矩阵置零 python

矩阵置零 题目题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a; 题解思路分析Python 实现代码代码解释提交结果 题目 题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例…
阅读更多...
基于华为ENSP的OSPF状态机、工作过程、配置保姆级别详解（2）

基于华为ENSP的OSPF状态机、工作过程、配置保姆级别详解（2）

本篇技术博文摘要 &#x1f31f; 基于华为enspOSPF状态机、OSPF工作过程、.OSPF基本配置等保姆级别具体详解步骤&#xff1b;精典图示举例说明、注意点及常见报错问题所对应的解决方法 引言 &#x1f4d8; 在这个快速发展的技术时代&#xff0c;与时俱进是每个IT人的必修课。我…
阅读更多...
宝塔安装教程，bt怎么安装 linux

宝塔安装教程，bt怎么安装 linux

Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 37a09b35 Ubuntu/Deepin安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo b…
阅读更多...
SOLID原则学习，接口隔离原则

SOLID原则学习，接口隔离原则

文章目录 1. 定义2. 为什么要遵循接口隔离原则&#xff1f;3. 违反接口隔离原则的例子4. 遵循接口隔离原则的改进5. 总结 1. 定义 接口隔离原则&#xff08;Interface Segregation Principle, ISP&#xff09; 接口隔离原则是面向对象设计中的五大原则&#xff08;SOLID&#…
阅读更多...
测试开发之面试宝典

测试开发之面试宝典

目录 session和cookie的区别 session和cookie的区别 1.session和cookie都是鍵值对应的 2.session和cookie都是服务器生成的&#xff0c;session的ID&#xff0c;即服各器用来识别读取session对象的一把钥匙 3.session是保存在服各器端&#xff0c;而cookie是返回給客戶端的&…
阅读更多...
Jenkins-持续集成、交付、构建、部署、测试

Jenkins-持续集成、交付、构建、部署、测试

Jenkins-持续集成、交付、构建、部署、测试 一: Jenkins 介绍1> Jenkins 概念2> Jenkins 目的3> Jenkins 特性4> Jenkins 作用 二&#xff1a;Jenkins 版本三&#xff1a;DevOps流程简述1> 持续集成&#xff08;Continuous Integration&#xff0c;CI&#xff0…
阅读更多...
SQL进阶实战技巧：统计相同时刻多地登陆的用户？

SQL进阶实战技巧：统计相同时刻多地登陆的用户？

目录 0 问题描述 1 数据准备 2 代码实现 3 问题拓展 3.1 查询每个用户登录日期的最大空档期
阅读更多...
BurpSuite之FUZZ模糊测试

BurpSuite之FUZZ模糊测试

Fuzz会生成大量的随机数据对目标网站进行测试，去挖掘可能存在的漏洞，类似密码爆破，但是fuzz针对的是漏洞进行爆破,它也有自己的爆破字典 (fuzz用的好漏洞少不了) 哪些网站要用fuzz呢？ 1. 当最目标网站没有更好的办法的时候就可以使用fuzz尝试爆破测试。 2. 目标网站什么都…
阅读更多...
从0到机器视觉工程师（六）:配置OpenCV和Qt环境

从0到机器视觉工程师（六）:配置OpenCV和Qt环境

CMake配置OpenCV CMakeLists.txt文件的编写 cmake_minimum_required(VERSION 3.20) project(test_opencv LANGUAGES CXX) #寻找Opencv库 FIND_PACKAGE(OpenCV REQUIRED) include_directories(test_opencv ${OpenCV_INCLUDE_DIRS}) add_executable(test_opencv main.cpp) TARGE…
阅读更多...
Vue3框架核心功能点响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia等的实战示例代码

Vue3框架核心功能点响应式数据reactive、组合式API setup、computed、组件通信、路由导航，状态管理vuex、pinia等的实战示例代码

记录几个Vue3框架核心功能点&#xff0c;例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航&#xff0c;状态管理vuex、pinia……等实战示例代码&#xff1a; 一、响应式数据&#xff08;Reactive Data&#xff09; 创建响应式对象 使用reactive函数创建…
阅读更多...
svelte5中使用react组件

svelte5中使用react组件

在svelet5中导入并使用react组件库 svelte5中使用react组件 svelte5中使用react组件 在svelet5中导入并使用react组件库, 示例项目地址&#xff1a;https://github.com/shenshouer/my-svelte-react 在svelte5中当前还有问题&#xff0c;无法将children传递到react中渲染 使用…
阅读更多...
R语言装环境Gcc报错以及scater包的安装

R语言装环境Gcc报错以及scater包的安装

error: ‘timespec_get’ has not been declared in ‘::’ 80 | using ::timespec_get; 在conda 的虚拟环境中升级gcc的版本 conda install -c conda-forge gcc11 gxx11终极方法&#xff0c;在R的最新版本和环境下装啥都能成功&#xff01;&#xff01; 比如beyondcell的方法…
阅读更多...
CDA数据分析师一级经典错题知识点总结（3）

CDA数据分析师一级经典错题知识点总结（3）

1、SEMMA 的基本思想是从样本数据开始&#xff0c;通过统计分析与可视化技术&#xff0c;发现并转换最有价值的预测变量&#xff0c;根据变量进行构建模型&#xff0c;并检验模型的可用性和准确性。【强调探索性】 2、CRISP-DM模型Cross Industry Standard Process of Data Mi…
阅读更多...
Flink概念知识讲解之：Restart重启策略配置

Flink概念知识讲解之：Restart重启策略配置

Flink概念知识讲解之&#xff1a;Restart重启策略配置 当 Task 发生故障时&#xff0c;Flink 需要重启出错的 Task 以及其他受到影响的 Task &#xff0c;以使得作业恢复到正常执行状态。 Flink 通过重启策略和故障恢复策略来控制 Task 重启&#xff1a;重启策略决定是否可以…
阅读更多...
VUE3 VITE项目在 npm 中，关于 Vue 的常用命令有一些基础命令

VUE3 VITE项目在 npm 中，关于 Vue 的常用命令有一些基础命令

如果你正在使用 Vite 构建的 Vue 3 项目&#xff0c;并且想要使用相关的 Vue 和 Vite 工具&#xff0c;下面是一些常用的命令和步骤来创建和管理 Vue 项目。 1. 使用 npm create 创建 Vue 3 项目&#xff08;Vite&#xff09; 如果你还没有创建项目&#xff0c;可以使用以下命…
阅读更多...
微服务电商平台课程七：前端框架vue

微服务电商平台课程七：前端框架vue

后台商城： https://github.com/macrozheng/mall-admin-web 前台商城：https://github.com/macrozheng/mall-app-web Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编…
阅读更多...
【Uniapp-Vue3】v-for列表渲染的用法

【Uniapp-Vue3】v-for列表渲染的用法

如果我们想要重复渲染多个元素&#xff0c;就可以使用v-for进行渲染。 比如我们想要将元素渲染5次&#xff1a; 如果我们想要知道当前元素是渲染的第几个&#xff0c;可以在v-for的时候添加参数index&#xff0c;并在差值表达式中填入index&#xff1a; 则index会以0开始进行渲…
阅读更多...
《新闻大厦抢先版》V0.18.105+Dlcs官方学习版

《新闻大厦抢先版》V0.18.105+Dlcs官方学习版

《新闻大厦抢先版》官方版https://pan.xunlei.com/s/VODaeUn3v-ZWVvvmUMfo5AqWA1?pwdnhpz# 建造并不断优化新闻大楼&#xff0c;保障员工权益并及时赶上周日的印刷交期&#xff01; 招募并管理不同职业以登上成功的阶梯&#xff1a;记者、摄像师、勤杂工&#xff0c;除此以外…
阅读更多...
解锁3D模型转换：STL转OBJ全攻略

解锁3D模型转换：STL转OBJ全攻略

一、3D模型转换的基石&#xff1a;STL与OBJ格式概览 在3D模型的世界里&#xff0c;STL和OBJ格式犹如两大基石&#xff0c;支撑着模型创建、编辑、转换与应用的方方面面。了解它们的特性&#xff0c;是深入探究3D模型转换的关键第一步。 1.1 STL格式深度剖析 STL 全称为Stereo…
阅读更多...
最新文章

Copyright @ 2022~2023