【第17章】Vue实战篇之注册界面

文章目录

  • 前言
  • 一、搭建界面
  • 二、数据绑定
    • 1.定义响应数据
    • 2.绑定数据
  • 三、数据校验
    • 1. 定义校验规则
    • 2. 表单校验
    • 3. 展示
  • 四、注册接口调用
    • 1. user.js
    • 2. Login.vue
  • 五、展示
  • 总结


前言

本章内容主要包含:

  • 注册界面搭建
  • 数据绑定
  • 表单校验
  • 调用后端接口

一、搭建界面

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
//控制注册与登录表单的显示, 默认显示注册
const isRegister = ref(false)
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 注册表单 --><el-form ref="registerFormRef" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input></el-form-item><!-- 注册按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><!-- 登录表单 --><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码?</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
/* 样式 */
.login-page {height: 100vh;background-color: #fff;.bg {background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

二、数据绑定

1.定义响应数据

//用于注册的数据模型
const registerData = ref({username: '',password: '',rePassword: ''
})

2.绑定数据

<!-- 注册表单 -->
<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" v-model="registerData"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input></el-form-item><!-- 注册按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item>
</el-form>

三、数据校验

1. 定义校验规则

//自定义确认密码的校验函数
const rePasswordValid = (rule, value, callback) => {console.log(value);if (value == null || value === '') {callback(new Error('请再次确认密码'))} else if (value !== registerData.value.password) {callback(new Error('两次输入密码不一致'))} else {callback()}
}
//用于注册的表单校验模型
const registerDataRules = ref({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, max: 16, message: '密码长度必须为5~16位', trigger: 'blur' }],rePassword: [{ validator: rePasswordValid, trigger: 'blur' }]
})

2. 表单校验

Form 组件提供了表单验证的功能,只需为 rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

<!-- 注册表单 -->
<el-form ref="registerFormRef" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="registerDataRules"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input></el-form-item><el-form-item prop="password"><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input></el-form-item><el-form-item prop="rePassword"><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input></el-form-item><!-- 注册按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item>
</el-form>

3. 展示

在这里插入图片描述

四、注册接口调用

1. user.js

import request from '@/utils/request.js'export const registerService = (registerData)=>{var params = new URLSearchParams()for (let key in registerData) {params.append(key, registerData[key])}return request.post('/user/register', params)
}

2. Login.vue

import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { registerService } from '@/api/user.js'//注册按钮点击事件
const registerFormRef = ref(null)
const registerUser =async () => {let result =await registerService(registerData.value)let message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '注册成功!')} else {ElMessage.error(message ? message : '注册失败!')}
}
const register = () => {if (!registerFormRef) returnconst valid = registerFormRef.value.validate((valid, fields) => {if (valid) {registerUser();}})
}

五、展示

在这里插入图片描述


总结

回到顶部

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

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

相关文章

Java23种设计模式(二)

1、单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有…

电脑硬盘文件隐藏了怎么恢复数据?轻松上手不求人

在数字化时代&#xff0c;电脑硬盘中存储的数据对于个人和企业而言都至关重要。然而&#xff0c;有时我们可能会遇到一些意想不到的情况&#xff0c;比如硬盘中的文件突然消失了或者变成了隐藏状态。这种情况不仅让人感到困惑&#xff0c;还可能对日常工作和生活造成不小的影响…

【unity笔记】三、冰山碰撞变成碎块效果

一、模型准备 共需准备两个模型&#xff0c;一个原始模型&#xff0c;一个破碎后的模型。 破碎后的模型制作教程&#xff1a; 下载Blender 导入原始模型在添加偏好设置中添加Cell Fracture插件&#xff0c;调整模型碎裂效果。导出&#xff0c;保存到项目预制体文件夹。 二、…

胡说八道(24.6.17)——STM32以及通信杂谈

之前的文章中咱们谈到了STM32的时钟&#xff0c;今天我们来联系实际&#xff0c;来看看内部时钟下和外部时钟下的两种不同时钟的电平翻转。本次终于有硬件了&#xff0c;是最基础的STM32F103C8T6。 首先是&#xff0c;内部时钟的配置操作。 系统的内部时钟是72MHz&#xff0c;由…

DeepSeek V2 可以直接生成2048游戏代码,并可以运行

在 macOS 上&#xff0c;你可以使用 curses 库来实现 2048 游戏&#xff0c;就像在 Windows 上一样。curses 库在 macOS 上是内置的&#xff0c;所以你不需要额外安装任何库。 你可以直接使用我之前提供的代码。以下是完整的代码&#xff0c;你可以将其保存为一个 Python 文件…

【Windows系统】文件操作出现“文件访问被拒绝”弹窗问题

环境 系统&#xff1a;win10x64 版本&#xff1a;1709 问题 重命名系统文件夹文件&#xff0c;有时会出现【文件访问被拒绝】的弹窗&#xff0c;导致操作失败。 如何才能避免弹窗&#xff0c;成功操作&#xff1f; 解决方法 前提&#xff1a;实施以下解决&#xff0c;首先…

JavaScript Prototype

JavaScript Prototype JavaScript 是一种高级的、解释执行的编程语言&#xff0c;广泛应用于网页和服务器端开发。JavaScript 的核心特性之一是其原型继承机制&#xff0c;这是理解 JavaScript 对象模型的关键。 什么是 Prototype&#xff1f; 在 JavaScript 中&#xff0c;…

设置角色运动的动画

(1) 打开Assets-UnityTechnologies-Animation-Animators&#xff0c;Create-Animation-Controller,命名为JohnLemon (2) 打开JohnLemon&#xff0c;出现下图 (3) 依次将Assets-UnityTechnologies-Animation-Animation中的JohnIdle和JohnWalk拖放到Base Layer窗口中 (4) 右击Idl…

Sora不香了,Runway Gen-3震撼发布!AI电影时代真的要来了!(附与快手可灵对比测试)

文章首发于公众号&#xff1a;X小鹿AI副业 大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ AI 视频太卷了&…

TikTok养号新手保姆级教程

对于很多刚开始运营TikTok的新手小白来说&#xff0c;都会有一个同样的疑问&#xff0c;那就是&#xff1a;TikTok到底需不需要养号&#xff1f;这里明确告诉大家是需要养号的&#xff0c;今天就把我自己实操过的养号经验和策略总结出来&#xff0c;分享给大家。 一、什么是Ti…

【每日刷题】Day68

【每日刷题】Day68 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 451. 根据字符出现频率排序 - 力扣&#xff08;LeetCode&#xff09; 2. 最小的K个数_牛客题霸_牛客…

odoo报错KeyError: ‘ir.http‘

使用odoo17代码&#xff0c;python3.10.11配好的开发环境&#xff0c;当启动以后&#xff0c;浏览器登录访问的时候&#xff0c;后台报错 ERROR odoo_db odoo.modules.loading: Database odoo_db not initialized, you can force it with -i base File "/opt/odoo/odoo/o…

现在市面上哪个大大数据信用查询平台比较好用?

在当今信息化和数字化的时代&#xff0c;信用查询平台的重要性愈发突出&#xff0c;特别是在个人贷款、信用卡申请和金融服务领域。选择一个优秀的大数据信用查询平台&#xff0c;不仅可以帮助用户全面了解自己的信用状况&#xff0c;还能提供针对性的解读和建议&#xff0c;帮…

如何用Java SE数组实现高速的数字转换功能

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

outline server 服务搭建到 Ubuntu

安装outline manager到本地电脑 Windows版: https://github.com/Jigsaw-Code/outline-releases/blob/master/manager/Outline-Manager.exe MacOS版 https://github.com/Jigsaw-Code/outline-releases/blob/master/manager/Outline-Manager.dmg 启动outline manager 点击…

友思特分享 | 百皮秒+一体化:基于Q开关与增益开关技术的短脉冲激光器

导读 基于主动调Q、被动调Q和增益开关技术的激光器能够产生高能量的瞬时短激光脉冲。友思特提供基于多种调制技术的百皮秒级脉冲激光器&#xff0c;脉宽覆盖独特的50ps~1ns范围&#xff0c;可在科研、医疗与工业领域广泛应用。 产生激光脉冲最直接的方法是在连续激光器外部加一…

油猴 脚本如何添加包含哪个网址 执行脚本

油猴 脚本如何添加包含哪个网址 执行脚本 在这里面加上就可以 // include *://blog.csdn.net/*/article/details/* // include *.blog.csdn.net/article/details/*

惊艳视觉!7个让你大开眼界的数据可视化案例

数据可视化是指通过视觉呈现信息的一种方式&#xff0c;它仍处于不断演变的过程中。许多企业、政府和其他组织都使用数据可视化分析来寻求保持竞争优势。在界面设计中&#xff0c;数据可视化也呈现出越来越流行的趋势&#xff0c;学习数据可视化也是设计师保持竞争优势的一种方…

小甲鱼——字典

字典是ipython当中唯一实现映射关系的内置类型。 映射关系&#xff1a;就是一一对应 y {"吕布":"口口布","关羽":"关习习"} type(y) <class dict>这个就是一个字典&#xff0c;我们将冒号左边的就称之为字典的“键”&#xf…

FineReport

1.FineReport 官网 &#xff1a;FineReport产品简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 下载地址 免费下载FineReport - FineReport报表官网 FineReport是一款用于报表制作&#xff0c;分析和展示的工具。 普通模板&#xff1a;是 FineReport 最常用&#xf…