正式页面开发-登录注册页面
整体路由设计:
- 登录和注册的切换是切换组件或者是切换内容(v-if和 v-else),因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。
- 登录之后进到首页,有三个大模块:文章分类,文章管理,个人中心。首页架子也是一级路由,点到三个模块一级个人中心中的其他模块也是一样都是二级路由
在 views文件夹中 新建四个文件夹,分别存放登录页,首页架子,文章,用户四个部分路由,根据各个文件夹有多少文件再新建 vue 文件
在router 中配置路由规则
在 APP.vue中写上路由出口
登陆注册页面:页面之间切换用 v-if 和 v-else
删除之前 app.vue中的代码,只留下简单地架构即可
登陆注册页面需要用到一些图标,所以首先安装图标库
笔记中 cv 静态结构代码
el-row搭配 el-col来实现板块划分,一行分为 24份数,el-col中通过 :span="份数"来实现板块占据的份数,offset =""来实现与左侧的margin。
右侧的登录页面通过 el-form 表单来总实现,el-form-item表示表单中每个小部分,注册字样,输入用户名,输入密码 ,再次输入密码,注册字样,返回字样。
el-form-item中有输入框 el-input,图标 :prefix-icon=""
el-form-item中有返回键 el-link,点击事件则将 isRegister布尔值改为 false
<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
</script><template><!-- el-row配合 el-col组合,el-row表示一行,一行分成24份el-col标识列 (1):span="12" 代表在一行中,占12份(50%)(2) :span="6" 代表在一行中,占6份(25%)(3) :offset="3" 代表在一行中,左侧margin份数--><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><!-- 因为其中都是表单,所以直接 el-form(整个表单组件)el-form-item 表单的一行 (一个表单域中)el-input 表单元素(输入开给你)--><!-- 注册相关表单 --><el-form ref="form" 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-inputname="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>
登陆注册页面功能
表单校验
:model = "ruleForm",ruleForm绑定的是 form 对象(下面定义的 reluForm是ts写法),它是用来收集当前表单中全部表单数据
在线演示:黑马程序员-大事件
接口文档: 登录 - 黑马程序员-大事件
接口根路径: http://big-event-vue-api-t.itheima.net
了解了四大块之后,接下来就是首先创建一个ruleForm对象,从接口文档中创建相应字段。将其绑定到注册代码段的 el-form 中
接下来是创建整个表单的校验规则:
新建校验规则 rules,里边写上 用于提交的form对象的三个数据的校验规则,例如username
然后将 form对象相应的属性绑定到相应的输入框中
并且在输入框对应的 el-form-item中配置prop
(如果希望是实时校验,将 trigger值改为 change)
除了username的非空校验和长度校验之外,还有password的非空校验和正则校验
自定义校验,原则是因为以上三个校验都无法满足。
再次输入密码不光是要满足非空和正则校验,还要校验是否和原本输入的一致
正式进行注册提交之前,还要进行预校验,也就是没有输入东西的时候是不能进行注册的。
点击注册按钮的时候还要对表单内容进行校验,通过之后才能进行注册提交请求。
调用 element-plus 中的 form 的方法 validate,要使用这个方法那么就先要拿到 form 组件实例
先定义一个 form ,然后 与需要获取的那个做绑定。因为注册和登录都需要验证,所以两个都绑定,也不必担心两个重名,因为 v-if 和 v-else 则证明了这两个每次只会出现一次
预校验之后进行注册请求:
在api 文件夹中新建 user.js文件
在使用 ElMessage时,虽然以往类似能直接使用 el-row之类的标签,是因为原来配置的自动导入。现在因为 eslint中没有关于此的配置,所以直接使用 ElMessage 是错误的,所以要在 eslintrc.cjs中进行配置
登录功能(校验+登录+存token)
共用 formModel ,因为登录中也需要 username和password,然后将其在 登录部分的 el-form中 :model="formModel" 绑定。规则也共用,: rules = "rules"绑定规则
v-model 绑定 form 数据对象子属性
prop绑定校验规则
登录 和 注册 两个切换的时候,输入框中的内容能带入到另外一个里面去,所以在切换的时候要将表单信息进行重置
点击登录的时候也要进行预校验
要完成登录还要封装对应的 api 接口
调用方式与 注册接口调用方式一样
需要将请求回来的结果接收,并调用 stores文件夹中用户模块 user.js中的setToken方法将请求结果存入本地。因为stores 文件夹中的各模块已经导入到 其下的index.js中,所以只需要在index.js中进行按需导入即可。导进来之后要要 创建一个实例(所说的实例也就是通过构造函数创建的对象),也就是对象,然后才能访问其中的 setToken 方法
登录成功之后是要进行跳转到首页的,这里按需导入 vue-router库中的 useRouter钩子函数,然后创建一个实例(也就是钩子函数创建出来的对象)。
相关文章:
正式页面开发-登录注册页面
整体路由设计: 登录和注册的切换是切换组件或者是切换内容(v-if和 v-else),因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。登录之后进到首页,有三个大模块:文章分类&…...
vLLM专题(二):安装-CPU
vLLM 是一个 Python 库,支持以下 CPU 变体。选择您的 CPU 类型以查看供应商特定的说明: Intel/AMD x86 vLLM 最初支持在 x86 CPU 平台上进行基本模型推理和服务,支持的数据类型包括 FP32、FP16 和 BF16。 注意 此设备没有预构建的 wheel 包或镜像,因此您必须从源代码构建 v…...
【CSS进阶】常见的页面自适应的方法
在前端开发中,自适应布局(Responsive Design)是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括 流式布局、弹性布局(Flexbox)、栅格布局(Grid)、媒体查询&…...
Java编程语言:从基础到高级应用的全面探索
在当今的软件开发领域中,Java无疑是一种极为流行且强大的编程语言。自1995年由Sun Microsystems推出以来,Java凭借其跨平台性、面向对象特性和丰富的API库,迅速成为企业级应用开发的首选语言。本文将带您从Java的基础语法入手,逐步…...
计算机视觉:神经网络实战之手势识别(附代码)
第一章:计算机视觉中图像的基础认知 第二章:计算机视觉:卷积神经网络(CNN)基本概念(一) 第三章:计算机视觉:卷积神经网络(CNN)基本概念(二) 第四章:搭建一个经典的LeNet5神经网络(附代码) 第五章࿱…...
linux 面试题
1. 文件与目录操作 ls 功能:列出目录内容 常用参数: -l:长格式显示(权限、大小、时间等)-a:显示隐藏文件(以.开头的文件)-h:以易读格式显示文件大小(如KB/…...
利用websocket检测网络连接稳定性
浏览器中打开F12,控制台中输入以下内容 > 回车 > 等待结果 连接关闭 表示断网 let reconnectDelay 1000; // 初始重连间隔 let pingInterval null; let socketManuallyClosed false; // 标志是否手动关闭function createWebSocket() {if (socketManuallyCl…...
Go入门之数组与切片
var arr1 [...]int{1, 2, 3}fmt.Println(len(arr1)) 数组长度不能扩展 var arr2 [...]int{0: 100, 5: 101}fmt.Println(len(arr2)) } 指定索引初始化 可以通过for和range遍历 值类型:基本数据类型和数组都是值类型,改变副本的值不会改变本身的值 切片为引用数…...
《Nuxt.js 实战:从放弃到入门》六、打造个性化文字转图片工具
在当今短视频的时代,将文字转化为图片是一个常见且实用的需求,无论是用于社交媒体分享、设计宣传材料,还是制作个性化的视觉内容。今天,我们就来深入剖析一个使用 Vue 3 和 ElementPlus 构建的文字转图片工具的代码…...
软硬链接?
目录 1. 硬链接(Hard Link) 2. 软链接(Symbolic Link,符号链接) 总结: 1. 硬链接(Hard Link) 定义: 硬链接是直接指向文件数据块(inode)的链接。…...
轻松搭建本地大语言模型(二)Open-WebUI安装与使用
文章目录 前置条件目标一、安装 Open-WebUI使用 Docker 部署 二、使用 Open-WebUI(一)访问Open-WebUI(二)注册账号(三)模型选择(四)交互 四、常见问题(一)容器…...
windows Redis Insight 如何查看宝塔docker里的redis数据
1、ping 命令用于测试网络连通性,它只需要目标 IP 地址作为参数,不需要端口号。正确的命令如下: ping 公网地址2、使用 Telnet 测试端口连通性 telnet 公网地址 端口 telnet 47.108.67.228 6379如果连接成功,窗口会变为空白&am…...
Python高级语法之urllib
目录: 1、爬虫的介绍2、urllib的使用2.1、urllib的异常捕获2.2、urllib的实现微博cookie登陆2.3、urllib的handler处理器2.4、urllib的代理服务器2.5、urllib的代理服务池 1、爬虫的介绍 2、urllib的使用 2.1、urllib的异常捕获 2.2、urllib的实现微博cookie登陆 2…...
word$deepseep
1、进入官网地址。 DeepSeek 2、进入DeepSeek的API文档 3、点击DeepSeek开放平台左侧的“API Keys”, 再点击“创建API Key” 4、在弹出的对话框中,输入自己的API Key名称,点击创建。 sk-0385cad5e19346a0a4ac8b7f0d7be428 5、打开Word文档。 6、Word找…...
【koa】05-koa+mysql实现数据库集成:连接和增删改查
前言 前面我们已经介绍了第二阶段的第1-4点内容,本篇介绍第5点内容:数据库集成(koamysql) 也是第二阶段内容的完结。 一、学习目标 在koa项目中正常连接数据库,对数据表进行增删改查的操作。 二、操作步骤 本篇文章…...
【深度学习】分布偏移纠正
分布偏移纠正 正如我们所讨论的,在许多情况下训练和测试分布 P ( x , y ) P(\mathbf{x}, y) P(x,y)是不同的。 在一些情况下,我们很幸运,不管协变量、标签或概念如何发生偏移,模型都能正常工作。 在另一些情况下,我们…...
数据结构_前言
本次我们将进入一个新的阶段啦~ 要注意哦: 在学数据结构之前,我们要先掌握c语言中所学的指针、结构体、内存的存储这几部分,如果还没太掌握的话,那记得去复习回顾一下噢。 下面我们就一起进入数据结构的学习吧! 知识…...
spark任务运行
运行环境 在这里插入代码片 [roothadoop000 conf]# java -version java version "1.8.0_144" Java(TM) SE Runtime Environment (build 1.8.0_144-b01)[roothadoop000 conf]# echo $JAVA_HOME /home/hadoop/app/jdk1.8.0_144[roothadoop000 conf]# vi spark-env.sh …...
由because it is a JDK dynamic proxy that implements温习Spring的代理
由because it is a JDK dynamic proxy that implements温习Spring的代理 项目场景原因分析1、报错位置2、错误原因3、业务需求 解决方案1、注入CGlib代理2、取出原生对象 项目场景 昨日在启动一个SpringBoot项目时,发现启动失败,并在日志中出现了这样的…...
mac相关命令
显示和隐藏usr等隐藏文件文件 terminal输入: defaults write com.apple.Finder AppleShowAllFiles YESdefaults write com.apple.Finder AppleShowAllFiles NO让.bashrc每次启动shell自动生效 编辑vim ~/.bash_profile 文件, 加上 if [ -f ~/.bashrc ]; then. ~/.bashrc fi注…...
Banana Pi OpenWRT One 官方路由器的第一印象
OpenWRT One是OpenWRT开源社区推出的首款官方开发板,与Banana Pi社区共同设计,由Banana Pi制造和发行。路由器采用蓝色铝合金外壳,质感极佳,视觉效果远超宣传图。整体设计简洁,呈长方形,虽然不是特别时尚&a…...
基于SpringBoot的“高考志愿智能推荐系统”的设计与实现(源码+数据库+文档+PPT)
基于SpringBoot的“高考志愿智能推荐系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 系统首页界面 系统注册页…...
探索Hugging Face:开源AI社区的核心工具与应用实践
引言:AI民主化的先锋 在自然语言处理(NLP)领域,Hugging Face已成为开源社区的代名词。这个成立于2016年的平台,通过提供易用的工具和丰富的预训练模型库,彻底改变了开发者使用和部署AI模型的方式。截至202…...
SVM对偶问题
1、对偶问题数学基础 对偶问题:在线性规划中,每一个线性规划问题(称为原问题)都有一个与之对应的对偶问题。从数学形式上看,如果原问题是求解一个线性目标函数的最大值(或最小值),在满足一系列线性不等式&…...
萃取的实现(三)
探测成员 基于SFINAE,判断一个给定类型T,是否含有名为x的成员。 探测类型成员 判断一个给定类型T,是否含有类型成员size_type,源码如下: #include <type_traits> #include <iostream> #include <vect…...
nodejs版本管理,使用 nvm 删除node版本,要删除 Node.js 的某个版本详细操作
要删除 Node.js 的某个版本并保持 Node Version Manager (nvm) 的管理整洁,可以按以下步骤操作: 步骤 1:查看已安装的 Node.js 版本 nvm ls这会列出你通过 nvm 安装的所有 Node.js 版本。输出类似于: -> v18.17.1v16.20…...
openCV中如何实现滤波
图像滤波用于去除噪声和图像平滑,OpenCV 提供了多种滤波器: 1.1. 均值滤波: import cv2# 读取图像 image cv2.imread("example.jpg")# 均值滤波 blurred_image cv2.blur(image, (5, 5)) # (5, 5) 是滤波核的大小 滤波核大小的…...
vscode通过ssh连接服务器实现免密登录+删除
文章目录 参考: 1、 vscode通过ssh连接服务器实现免密登录删除(吐血总结)...
智能硬件新时代,EasyRTC开启物联音视频新纪元
在万物互联的时代浪潮中,智能硬件正以前所未有的速度融入我们的生活,从智能家居的便捷控制,到智能穿戴设备的健康监测,再到工业物联网的高效管理,智能硬件的应用场景不断拓展。而在这个智能硬件蓬勃发展的背后…...
《机器学习数学基础》补充资料:求解线性方程组的克拉默法则
《机器学习数学基础》中并没有将解线性方程组作为重点,只是在第2章2.4.2节做了比较完整的概述。这是因为,如果用程序求解线性方程组,相对于高等数学教材中强调的手工求解,要简单得多了。 本文是关于线性方程组的拓展,供…...
mysql的rpm包安装
(如果之前下载过mariadb,使用yum remove mariadb卸载,因为mariadb与rpm包安装的mysql有很多相似的组件和文件,会发生冲突,而源码包安装的mysql不会,所以不用删除源码包安装myqsl,只删除mariadb就可以&#…...
TailwindCss的vue3安装使用
按照官网的安装教程,属性最后无法生效,这是自我改良版,添加了额外步骤,但是每次引入新的tailwindcss属性 需要重新跑一次项目 npm下载tailwindcss npm install -D tailwindcss npx初始化tailwind配置 npx tailwindcss init 此时根…...
foobar2000设置DSP使用教程及软件推荐
foobar2000安卓中文版:一款高品质手机音频播放器 foobar2000安卓中文版是一款备受好评的高品质手机音频播放器。 几乎支持所有的音频格式,包括 MP3、MP4、AAC、CD 音频等。不论是经典老歌还是最新的流行音乐,foobar2000都能完美播放。除此之…...
开源多商户商城源码最新版_适配微信小程序+H5+APP+PC多端
在数字化时代,电子商务已经成为各行业不可或缺的一部分,开源多商户商城源码为中小企业和个人开发者提供了快速搭建和定制电商平台的利器。分享一款最新版的开源多商户商城源码,它能够适配微信小程序、H5、APP和PC等多个端口,满足商…...
【matlab】大小键盘对应的Kbname
matlab中可以通过Kbname来识别键盘上的键。在写范式的时候,遇到一个问题,我想用大键盘上排成一行的数字按键评分,比如 Kbname(1) 表示键盘上的数字1,但是这种写法只能识别小键盘上的数字,无法达到我的目的,…...
go语言并发的最佳实践
Go 语言的并发模型是其最强大的特性之一,基于 CSP(Communicating Sequential Processes)理论,通过 goroutine 和 channel 实现轻量级并发. 一、并发核心概念 1. Goroutine 在 Go 语言中,Goroutine 是实现并发编程的…...
超全Deepseek资料包,deepseek下载安装部署提示词及本地部署指南介绍
该资料包涵盖了DeepSeek模型的下载、安装、部署以及本地运行的详细指南,适合希望在本地环境中高效运行DeepSeek模型的用户。资料包不仅包括基础的安装步骤,还提供了68G多套独立部署视频教程教程,针对不同硬件配置的模型选择建议,以…...
重看Spring聚焦BeanDefinition分析和构造
目录 一、对BeanDefinition的理解 (一)理解元信息 (二)BeanDefinition理解分析 二、BeanDefinition的结构设计分析 (一)整体结构体会 (二)重要接口和类分析 三、构造 BeanDef…...
从MySQL5.7平滑升级到MySQL8.0的最佳实践分享
一、前言 升级需求:将5.7.35升级到8.0.27, 升级方式 in-place升级【关闭现有版本MySQL,将二进制或包替换成新版本并在现有数据目录上启动MySQL并执行升级任务的方式,称为in-place升级】 原版本 5.7.35 CentOS Linux release 7.9.2009 新版本…...
Node-Red
是什么? ——基于浏览器的流程编辑工具可连接设备、服务器和API应用 一、安装 1、本地安装(Windows) 在电脑上安装 Node.js 环境,然后使用 NPM 安装 Node-RED Node.js介绍: JavaScript 在不同的位置有不一样的解析器 写入 HTML 的 JS 语言,浏览器即它的解析器需要独…...
GO语言的安装以及第一个Go语言程序
1. Go语言的安装与设置 官网:golang.org 国内下载:https://studygolang.com/dl 国内镜像:https://goproxy.cn/ 2. GOland的安装 Go 1.13 及以上(推荐) 打开你的终端并执行 $ go env -w GO111MODULEon $ go env -w GOPROXYhttps://goproxy.cn,direc…...
年前集训总结python
1.用空格隔开输出列表list1 print(" ".jion(map(str,list1))) 2.转换函数 int() 将一个数字或字符串转换为整数。可以指定基数,支持从其他进制(如二进制、十六进制)转换为十进制。 int(101, 2) # 二进制字符串转十进制 > 5 …...
【JAVA实战】JAVA实现Excel模板下载并填充模板下拉选项数据
背景 有这样一个场景:前端下载Excel模板,进行数据导入,这个下载模板过程需要经过后端接口去数据库查询数据进行某些列的下拉数据填充,下拉填充的数据过程中会出现错误String literals in formulas can’t be bigger than 255 cha…...
【linux】在 Linux 上部署 DeepSeek-r1:32/70b:解决下载中断问题
【linux】在 Linux 上部署 DeepSeek-r1:32/70b:解决下载中断问题 【承接商业广告,如需商业合作请+v17740568442】 文章目录 【linux】在 Linux 上部署 DeepSeek-r1:32/70b:解决下载中断问题问题描述:解决方法方法一:手动中断并重启下载方法二:使用 Bash 脚本自动化下载在…...
Rust 面试题
1. Rust 中的所有权(Ownership)是什么? 回答: 所有权是 Rust 的核心概念之一,每个值在 Rust 中都有一个唯一的所有者,并且所有权在作用域内转移。当所有者离开作用域时,Rust 会自动释放该值的内存,避免了内存泄漏。 代码示例: fn main() {let s1 = String::from(&q…...
Copilot Next Edit Suggestions(预览版)
作者:Brigit Murtaugh,Burke Holland 排版:Alan Wang 我们很高兴向你介绍在本次 Visual Studio Code 发布中,关于 GitHub Copilot 的三个预览功能: Next Edit Suggestions(NES)Copilot Edits 的…...
LeetCode - 18 四数之和
题目来源 18. 四数之和 - 力扣(LeetCode) 题目描述 给你一个由 n 个整数组成的数组 nums ,和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] (若两个四元组元素一一…...
汽车零部件开发应该具备哪些编程思维?
目录 1、功能安全思维 2、实时性与确定性思维 3、可靠性和冗余思维 4、硬件软件协同思维 5、CAN总线通信思维 6、故障诊断和自诊断思维 7、功耗优化思维 8、软件更新和版本管理思维 9、用户体验与安全性思维 汽车零部件开发中,嵌入式软件在车辆系统中的作用…...
在Windows系统中安装Open WebUI并连接Ollama
Open WebUI是一个开源的大语言模型(LLM)交互界面,支持本地部署与离线运行。通过它,用户可以在类似ChatGPT的网页界面中,直接操作本地运行的Ollama等大语言模型工具。 安装前的核心要求: Python 3.11&#…...
React 与 Vue 对比指南 - 上
React 与 Vue 对比指南 - 上 本文将展示如何在 React 和 Vue 中实现常见功能,从基础渲染到高级状态管理 Hello 分别使用 react 和 vue 写一个 Hello World! react export default () > {return <div>Hello World!</div>; }vue <…...