做网站应该用什么语言来开发,wordpress修改背景,网页设计共享网站,网络安全设计包括哪些方面从这篇文章开始我们就进入到了孢子记账的前端开发#xff0c;在本专栏中我默认大家的电脑上都已经配置好了开发环境。下面我们一起开始编写孢子记账的Web版吧。
一、功能
登录大模块功能包括注册、登录和找回密码功能#xff0c;在本篇文章中我只会展示注册界面的实现…从这篇文章开始我们就进入到了孢子记账的前端开发在本专栏中我默认大家的电脑上都已经配置好了开发环境。下面我们一起开始编写孢子记账的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文件。接下来让我们对代码中的每个部分进行详细讲解涵盖其目的和功能。 引入依赖 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分别是注册表单模型和通用返回数据模型。 定义组件内部逻辑 事件和依赖注入const emit defineEmits([switch]);
const axios: any inject(axios);emit定义了一个名为 switch 的事件允许从当前组件向父组件传递消息或切换状态。inject从外部注入 axios 实例避免直接在组件中引入 axios这样遵循依赖注入原则提高代码的灵活性和可测试性。创建响应式数据const ruleRegisterRef refFormInstance();
const registerData reactiveRegister({userName: ,password: ,rePassword: ,phoneNumber: ,email:
});ruleRegisterRef使用 ref 创建的表单实例引用用于操作表单。registerData是一个 reactive 对象表示注册表单的数据模型。每个字段如 userName、password 等都与表单中的输入绑定。定义表单验证规则const rules reactiveFormRulesRegister({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是否匹配。 注册方法 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: Responseboolean 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 显示错误消息。 切换到登录页面方法 const toLogin () {emit(switch, login);
};toLogin简单地通过 emit 触发 switch 事件切换到登录页面。 模板部分 templatediv stylepadding-top:10%div styletext-align: centerimg src../../assets/logo.png stylewidth:200px;height: 49px; max-height: 100%; altLogin Image/divel-form refruleRegisterRef :modelregisterData :rulesrules label-positiontop status-iconel-form-item label用户名 propuserNameel-input styleheight:40px;line-height: 40px v-modelregisterData.userName placeholder请输入.../el-input/el-form-itemel-form-item label密码 proppasswordel-input styleheight:40px;line-height: 40px v-modelregisterData.password typepassword placeholder请输入.../el-input/el-form-itemel-form-item label确认密码 proprePasswordel-input styleheight:40px;line-height: 40px v-modelregisterData.rePassword typepassword placeholder请输入.../el-input/el-form-itemel-form-item label手机号 propphoneNumberel-input styleheight:40px;line-height: 40px v-modelregisterData.phoneNumber typetext placeholder请输入.../el-input/el-form-itemel-form-item label邮箱 propemailel-input styleheight:40px;line-height: 40px v-modelregisterData.email typetext placeholder请输入.../el-input/el-form-itemel-form-itemel-button typeprimary stylewidth: 100%;height:40px;line-height: 40px clickregister(ruleRegisterRef)注册/el-buttonlabel已有账号/labelel-link :underlinefalse typeprimary v-on:clicktoLogin登录/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 语法实现了在登录、注册、找回密码三个子组件之间的切换。以下是对代码的详细讲解 导入部分 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 vueLogin、Register、RetrievePassword分别导入登录、注册、找回密码的组件。computed和ref是从 Vue 导入用于创建响应式引用和计算属性。 状态管理和逻辑处理 const componentAVisible ref(0)componentAVisible使用 ref 创建一个响应式引用初始值为 0。这个值决定当前显示的组件0 代表 Login1 代表 Register2 代表 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 标签中实际渲染的组件。 模板部分 templatediv classcontainerdiv classimage-sectionimg src../assets/login.svg v-ifcurrentComponentLogin classimage altLogin Imageimg src../assets/register.svg v-else-ifcurrentComponentRegister classimage altRegister Imageimg src../assets/findPassword.svg v-else classimage altFindPassword Image/divdiv classsectiondiv classbordercomponent :iscurrentComponent switchtoggleComponent//div/div/divfooter classfooterp© 2025 MiaoShu Studio. All rights reserved./p/footer
/template模板部分比较简单通过v-if 和 v-else-if 根据 currentComponent 的值显示对应的图片。使用 component 标签动态渲染 currentComponent。switch 事件绑定了 toggleComponent 方法用于子组件触发组件切换。
三、总结
这篇文章是Web版开发的第一篇文章因此讲解的比较详细但是在后续的文章中将只会讲解核心代码和重要代码。完整代码大家可以在github上下载但是我建议大家先自己实现代码然后再对比github上的代码。
