从零开始搭建博客网站-----登陆页面

登录按钮以及背景图设置

  1. 安装element-plus和css插件
javascript 复制代码
npm install element-plus --save
npm install sass --save
npm install sass-loader --save
  1. 在main.js里引用

  2. 寻找背景图存入assets文件下,并且在Login.vue里设置背景图和登录按钮

  3. 设置的背景图的大小没有起作用,可能是style.css文件的影响,将其中的内容清空即可

设置登陆表单

主要在App.vue文件里写代码

效果图如下

调用后端的api,实现验证码


设置验证码表格的格式如下

实现效果如下

实现表格验证功能

  1. 验证输入内容是否为空



遇到的问题

cookies保存用户名和密码后,再次登录时,密码直接显示,如下

在密码那个表格里定义类型为password即可

知识点

  1. ref()和reactive()的区别
    参考链接https://juejin.cn/post/7235118809605308471
  2. const proxy = getcurrentinstance()作用
    参考链接https://juejin.cn/post/7292072087791173647
  3. required: true 作用
    参考链接https://blog.csdn.net/qq_45656036/article/details/119001999
  4. vue3 清晰讲解视频
    参考链接https://www.bilibili.com/video/BV1fe41157nG/?spm_id_from=333.788.recommend_more_video.5\&vd_source=7afc1e6499af8adb1402b5a5609384cd

总结

完成了登陆页面,涉及的主要文件有login.vue,main.js,主要实现了登陆函数和记住我选项函数。

登陆函数功能:在登录的时候进行账户密码和验证码的验证功能。

记住我选项函数:利用token记住账户密码,并且在下次登陆的时候自动填充在表单上。

相关推荐
Deamon Tree4 分钟前
ElasticSearch架构和写入、更新、删除、查询的底层逻辑
java·大数据·elasticsearch·架构
北极糊的狐26 分钟前
IntelliJ IDEA插件:CodeGeeX 智能助手插件
java·ide·intellij-idea
悟能不能悟28 分钟前
jdk25结构化并发和虚拟线程如何配合使用?有什么最佳实践?
java·开发语言
熙客1 小时前
Java8:Lambda表达式
java·开发语言
小咕聊编程1 小时前
【含文档+PPT+源码】基于java web的篮球馆管理系统系统的设计与实现
java·开发语言
后端小张1 小时前
【JAVA 进阶】Mybatis-Plus 实战使用与最佳实践
java·spring boot·spring·spring cloud·tomcat·mybatis·mybatis plus
崎岖Qiu1 小时前
【设计模式笔记07】:迪米特法则
java·笔记·设计模式·迪米特法则
摇滚侠3 小时前
Spring Boot3零基础教程,SpringApplication 自定义 banner,笔记54
java·spring boot·笔记
青云交3 小时前
Java 大视界 -- Java 大数据机器学习模型在游戏用户行为分析与游戏平衡优化中的应用
java·大数据·机器学习·数据存储·模型构建·游戏用户行为分析·游戏平衡优化
暗武逢天6 小时前
Java导出写入固定Excel模板数据
java·导出数据·easyexcel·excel固定模板导出