vue基础教程(5)——构建项目级登录页

同学们可以私信我加入学习群!


正文开始

  • 前言
  • 一、创建首页
  • 二、登录页代码讲解
  • 三、对应的vue知识点:
  • 四、附件-各文件代码
  • 总结


前言

前面我们已经把vue自带的页面删除,也搭建了最简单的router路由,下面就可以真正开发我们自己的项目了,一般而言,很少有人从零开始写代码,博主也是为了完善这个系列博客,才会从零开始,把关键的代码都敲了一遍。

哪怕同学们有自己心仪的项目,搭建基础的架构,跟着博主学一遍关键的知识点,也有助于以后优化升级项目,修改别人的代码或者修复bug。

跟着博主写一遍,大概率是可以真正把控全局,把vue如何搭建网站彻底搞明白。


一、创建首页

上篇文章讲到,我们会习惯把所有路由信息都保存到一个js文件中,作为路由模块。例如:

export default [{path: '/',name: 'login',meta: {title: '登录',hideInMenu: true},component: () => import('@module-base/views/login/login.vue')},...
]

这段代码就是记录了部分路由信息,我们路由数组的第一个元素,一般就是项目默认登录的地址。component字段就是对应的组件,它的地址是默认地址"/",如果我们把项目运行到localhost:5173,那么只要我们在浏览器输入localhost:5173或者localhost:5173/,就会跳转到login.vue组件的内容。

我们login.vue中的代码十分简单,就是一个背景图+一个登录卡片,这是基础的html和vue知识,我们下面会一一讲解。

最终效果如图:

在这里插入图片描述

二、登录页代码讲解

只关注实战的同学可以快速略过代码讲解部分。

本系列主要为vue教程,所以可能在涉及html、js的基础知识时,会重点讲解,因为这属于上手vue的必学必会技能,但是css3相关知识可能会弱化,一个原因是知识点比较多,一个原因是新手入门抄样式也能磕磕绊绊地做项目。对css感兴趣同学,可以看博主源码,自行查阅资料。

登录代码可以分解为两个部分:
1.卡片组件
2.登录逻辑

  • 卡片组件
<Card title="欢迎登录" :bordered="false"><div class="form-con"><login-form @on-success-valid="handleSubmit"></login-form><p class="login-tip">输入任意用户名和密码即可</p></div></Card>

这是iview提供的卡片组件,如果使用其它ui库,参考对应官网代码即可,都是换汤不换药。

关键代码讲解:

title:组件的标题

bordered:是否有边框

login-form:是一个组件,把form表单相关功能封装到一个单独的组件中,然后vue会把login-form组件里的所有内容,最终都渲染到这个位置

@on-success-valid:@标记是vue提供的语法,代表监听事件,这里就是监听一个名叫“on-success-valid”的事件。

这里涉及到了login-form组件,所以我们再看这个组件的代码:

<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit"><FormItem prop="userName"><Input v-model="form.userName" placeholder="请输入用户名"><span slot="prepend"><Icon :size="16" type="ios-person"></Icon></span></Input></FormItem><FormItem prop="password"><Input type="password" v-model="form.password" placeholder="请输入密码"><span slot="prepend"><Icon :size="14" type="md-lock"></Icon></span></Input></FormItem><FormItem><Button @click="handleSubmit" class="c-btn-primary" long>登录</Button></FormItem></Form>

这段代码里,主要用到了iview的form组件,Form标签用来包裹在最外面,fomritem指表单中的每一个表单项,这里一共有三项:姓名输入框、密码输入框、登录按钮。

其他代码都是一些辅助代码,为了让我们的表单样式看起来更舒服,我们重点关注登录按钮,它定义了一个事件:handleSubmit。

我们上面讲过,在html元素中,@是vue定义的一个语法,代表着事件监听,@click不同于上面提到的@on-success-valid,是官方定义的监听事件,意思是监听点击事件。

完整逻辑就是在登录这个按钮上,监听了点击事件,当发现登录按钮被点击后,就调用后面定义的方法handleSubmit。我们继续看handleSubmit的代码:

 methods: {handleSubmit () {this.$refs.loginForm.validate((valid) => {if (valid) {this.$emit('on-success-valid', {userName: this.form.userName,password: this.form.password})}})}}

它先通过this.$refs.loginForm.validate验证上面的表单元素是否合规,如果合规的话,就运行后面emit的代码,emit是vue定义的触发方法,这里代码要触发一个叫on-success-valid的方法,这个方法是不是很熟悉?不错,它就是我们在login.vue中监听的方法@on-success-valid。

到这里,逻辑就比较清晰了,login.vue中引入了一个card组件,card组件是view提供的官方组件,card组件中引入了login-form组件,login-form组件是我们自己写的组件,并且在引入组件时,我们写了@on-success-valid用来监听login-form组件中触发的on-success-valid方法。

login-form中定义了一个点击事件,当点击登录按钮时,触发on-success-valid,这个信号被login.vue接收到,login.vue就会去调用@on-success-valid监听后面定义的方法。代码如下:

 <login-form @on-success-valid="handleSubmit"></login-form>

在login.vue中也叫handleSubmit方法,找到login.vue中的handleSubmit方法:

 handleSubmit ({ userName, password }) {this.$router.push({name: '_home'})}

发现它主要做了一件事,那就是利用router插件提供的方法,跳转到_home页面。

至此,一个最简单的登录逻辑完成。

三、对应的vue知识点:

1.@click、@on-success-valid是vue中事件监听的语法,意思是监听后面的操作,当发现触发了对应的操作,就调用对应的方法。

2.vue中最重要的就是组件的思想,不管是使用ui框架提供的组件,还是自定义组件,都是在一个大组件中拼接各种小组件,共同构成一个完整页面。每个组件只需要关注自己的功能,把所有功能串联起来,就是页面的完整功能。

3.代码中出现的:value、:size、:model等,是vue中v-bind语法的变种,等价于v-bind:value,v-bind:size,v-bind:model,这是在定义html元素的属性,不同于直接在html中写attribute,vue中这种语法,可以绑定一个动态变量,动态设置属性更加灵活。

四、附件-各文件代码

login.vue:


<style lang="less">@import './login.less';</style><template><div class="login"><div class="login-con"><Card icon="log-in" title="欢迎登录" :bordered="false"><div class="form-con"><login-form @on-success-valid="handleSubmit"></login-form><p class="login-tip">输入任意用户名和密码即可</p></div></Card></div><div style="position: absolute;bottom: 8px;width: 100%;display: flex;justify-content: center;color: white"><a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备2022011594-1</a></div></div>
</template><script>
import LoginForm from '_c/login-form'export default {components: {LoginForm},methods: {handleSubmit ({ userName, password }) {this.$router.push({name: '_home'})}}
}
</script><style scoped>
</style>

login-form.vue:

<template><Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit"><FormItem prop="userName"><Input v-model="form.userName" placeholder="请输入用户名"><span slot="prepend"><Icon :size="16" type="ios-person"></Icon></span></Input></FormItem><FormItem prop="password"><Input type="password" v-model="form.password" placeholder="请输入密码"><span slot="prepend"><Icon :size="14" type="md-lock"></Icon></span></Input></FormItem><FormItem><Button @click="handleSubmit" class="c-btn-primary" long>登录</Button></FormItem></Form>
</template>
<script>
export default {name: 'LoginForm',props: {userNameRules: {type: Array,default: () => {return [{ required: true, message: '账号不能为空', trigger: 'blur' }]}},passwordRules: {type: Array,default: () => {return [{ required: true, message: '密码不能为空', trigger: 'blur' }]}}},data () {return {form: {userName: 'super_admin',password: ''}}},computed: {rules () {return {userName: this.userNameRules,password: this.passwordRules}}},methods: {handleSubmit () {this.$refs.loginForm.validate((valid) => {if (valid) {this.$emit('on-success-valid', {userName: this.form.userName,password: this.form.password})}})}}
}
</script>

总结

获取资源,或者联系我,都可以通过下面入口:

https://lizetoolbox.top:8080/qrCode_contact

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

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

相关文章

TemperatureTop-kTop-p

一、温度 在语言模型中使用温度&#xff08;temperature&#xff09;这个参数是为了控制文本生成过程中的随机性和可预测性。这个概念来自于统计力学中的温度概念&#xff0c;在那里它用来描述系统的熵&#xff08;或随机性&#xff09;水平。在语言模型中&#xff0c;输出概率…

Python 基础教程:面向对象

类(Class): 用来描述具有相同的属性和方法的对象的集合。定义了该集合中每个对象所共有的属性和方法。 类变量&#xff1a;在整个实例化的对象中是公用的。类变量定义在类中且在函数体之外&#xff0c;通常不作为实例变量使用。 数据成员&#xff1a;类变量或者实例变量, 用于…

【独立开发前线】Vol.29 专注于电子邮件签名,也可以依靠SEO年入70万美元

今天要给大家分享的案例是MySignature&#xff0c;一个专注于电子邮件签名的产品&#xff1b; 它的官网是&#xff1a;MySignature: Free Email Signature Generator 提到电子邮件签名&#xff0c;很多人想到的肯定是“那不是电子邮件结尾的几行图文介绍吗&#xff0c;这也能做…

nginx.conf相关

nginx.conf相关 精确匹配路径&#xff0c;用于不含正则表达式的 uri 前&#xff0c;如果匹配成功&#xff0c;不再进行后续的查找&#xff1b; ^~ 用于不含正则表达式的 uri 前&#xff0c;表示如果该符号后面的字符是最佳匹配&#xff0c;采用该规则&#xff0c;不再进行后续…

数组逆序(以字符串逆序为例)

#include <iostream> #include <cstring> using namespace std; void my_reverse(char* p) //第一种 {int len strlen(p); //获取字符串长度for (int i 0; i < len / 2; i) //无论长度是奇数还是偶数&#xff0c;该for循环都能解决{char t p[i];p[i]…

ZNC3罗德与施瓦茨ZNC3网络分析仪

181/2461/8938产品概述&#xff1a; 罗德与施瓦茨 ZNC3 网络分析仪的工作频率范围为 9 kHz 至 3 GHz&#xff0c;面向移动无线电和电子产品行业的应用。它具有双向测试装置&#xff0c;用于测量有源和无源 DUT 的所有四个 S 参数。此外&#xff0c;它还提供适合开发和生产中各…

最新2024年增强现实(AR)营销指南(完整版)

AR营销是新的最好的东西&#xff0c;就像元宇宙和VR营销一样。利用AR技术开展营销活动可以带来广泛的利润优势。更不用说&#xff0c;客户也喜欢AR营销&#xff01; 如果企业使用AR&#xff0c;71%的买家会更多地购物。40%的购物者准备在他们可以在AR定制的产品上花更多的钱。…

【Linux】详解文件系统以及周边知识

一、磁盘的基本知识 磁盘中可以被划分成一个一个的环&#xff0c;每个环都是一个磁道。每个磁道又可以被均分成一个一个的扇区&#xff0c;扇区是磁盘IO的基本单位&#xff08;想要修改扇区中的一个比特位就必须把该扇区的全部比特位都加载到内存中&#xff09;。磁盘中的盘面&…

【Linux】详解软硬链接

一、软硬链接的建立方法 1.1软链接的建立 假设在当前目录下有一个test.txt文件&#xff0c;要对其建立软链接&#xff0c;做法如下&#xff1a; ln就是link的意思&#xff0c;-s表示软链接&#xff0c;test.txt要建立软链接的文件名&#xff0c;后面跟上要建立的软链接文件名…

网页的皮肤——css

目录 1.css的编写方式 2.css选择器 3.css样式属性 4.css包围盒 5.css中的display 6.css中的定位 7.css浮动与清除 8.弹性容器 9.自定义字体 1.css的编写方式 1.优先级最高的行内模式 直接使用style属性写在开始标签中 针对一个标签 2.内部样式表 …

魔改一个过游戏保护的CE

csdn审核不通过 网易云课堂有配套的免费视频 int0x3 - 主页 文章都传到github了 Notes/外挂/魔改CE at master MrXiao7/Notes GitHub 为什么要编译自己的CE 在游戏逆向的过程中&#xff0c;很多游戏有保护&#xff0c;我们运行原版CE的时候会被检测到 比如我们开着CE运…

MySQL数据库MHA高可用集群

前言 MySQL 数据库 MHA&#xff08;Master High Availability&#xff09;高可用集群是一种用于提高 MySQL 数据库可用性的解决方案。它通过自动故障切换和监控来确保数据库系统在主服务器发生故障时能够快速切换到备用服务器&#xff1b;在 MHA 高可用集群中&#xff0c;Mast…

单细胞分析|映射和注释查询数据集

reference映射简介 在本文中&#xff0c;我们首先构建一个reference&#xff0c;然后演示如何利用该reference来注释新的查询数据集。生成后&#xff0c;该reference可用于通过cell类型标签传输和将查询cell投影到reference UMAP 等任务来分析其他查询数据集。值得注意的是&…

享元模式

通过共享的方式高效的支持大量细粒度的对象。在有大量对象时&#xff0c;有可能会造成内存溢出&#xff0c;我们把其中共同的部分抽象出来&#xff0c;如果有相同的业务请求&#xff0c;直接返回在内存中已有的对象&#xff0c;避免重新创建。 using System; using System.Col…

Linux - 第五节

sudo用不了 - 新建的普通用户 以管理员的身份&#xff0c;去修改etc/sudoers配置下的文件&#xff0c;添加白名单 代码的编译 gcc - 只能用于编译C语言 g - 既能用来编译C语言&#xff0c;也能用来编译C ggc的简易用法 预处理 预处理功能主要包括宏定义,文件包含,条件编…

突破编程_C++_C++14新特性(变量模板)

1 变量模板在 C14 中的引入与扩展 在 C14 中&#xff0c;变量模板的引入与扩展为编程带来了许多便利&#xff0c;特别是在泛型编程方面。这一特性允许我们直接定义模板变量&#xff0c;而不需要将其包装在模板类或模板函数中&#xff0c;从而使得代码更加直观和简洁。 首先&a…

vue nextTick的简化版

以下内容来源于通义千问 的回答 在 Vue.js 中&#xff0c;$nextTick 的核心功能是在下次 DOM 更新循环结束之后执行延迟回调。这是因为 Vue 使用异步更新队列来优化渲染性能&#xff0c;当数据发生变化时&#xff0c;并不会立即更新 DOM&#xff0c;而是在同一事件循环结束时批…

2024年 前端JavaScript 进阶 第2天 笔记

2.1-内容和创建对象方式 2.2-164-构造函数 2.3-new实例化执行过程 2.4-实例成员和静态成员 2.5-基本包装类型 2.6-0bject静态方法 2.7-数组reduce累计方法 对象数组 加0 2.7-数组find、every和转换为真 --说明手册文档 MDN Web Docs 2.8-字符串常见方法 2.3 String 1.常见实例…

【微服务框架】微服务简介

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

论文复现2: YOLOv5 DeepSORT视频追踪

YOLOv5 DeepSORT是视频检测跟踪算法,结合了YOLOv5的目标检测和DeepSORT的目标跟踪能力。它具备实时性能、高准确性以及稳定的目标跟踪能力,为行人和车辆等实时监测和分析提供了有效的解决方案。 直接在github找的综合代码,没有做分别训练,因为我要实现的就一个类,所以直接…