深圳网站设计 深圳信科,id文件直接导入wordpress,暴雪国服官网入口,网站建设需要哪些费用支出同学们可以私信我加入学习群#xff01; 正文开始 前言一、创建首页二、登录页代码讲解三、对应的vue知识点#xff1a;四、附件-各文件代码总结 前言
前面我们已经把vue自带的页面删除#xff0c;也搭建了最简单的router路由#xff0c;下面就可以真正开发我们自己的项目…同学们可以私信我加入学习群 正文开始 前言一、创建首页二、登录页代码讲解三、对应的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欢迎登录 :borderedfalsediv classform-conlogin-form on-success-validhandleSubmit/login-formp classlogin-tip输入任意用户名和密码即可/p/div/Card这是iview提供的卡片组件如果使用其它ui库参考对应官网代码即可都是换汤不换药。
关键代码讲解
title组件的标题
bordered是否有边框
login-form:是一个组件把form表单相关功能封装到一个单独的组件中然后vue会把login-form组件里的所有内容最终都渲染到这个位置
on-success-valid:标记是vue提供的语法代表监听事件这里就是监听一个名叫“on-success-valid”的事件。
这里涉及到了login-form组件所以我们再看这个组件的代码
Form refloginForm :modelform :rulesrules keydown.enter.nativehandleSubmitFormItem propuserNameInput v-modelform.userName placeholder请输入用户名span slotprependIcon :size16 typeios-person/Icon/span/Input/FormItemFormItem proppasswordInput typepassword v-modelform.password placeholder请输入密码span slotprependIcon :size14 typemd-lock/Icon/span/Input/FormItemFormItemButton clickhandleSubmit classc-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-validhandleSubmit/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中写attributevue中这种语法可以绑定一个动态变量动态设置属性更加灵活。
四、附件-各文件代码
login.vue: style langlessimport ./login.less;/styletemplatediv classlogindiv classlogin-conCard iconlog-in title欢迎登录 :borderedfalsediv classform-conlogin-form on-success-validhandleSubmit/login-formp classlogin-tip输入任意用户名和密码即可/p/div/Card/divdiv styleposition: absolute;bottom: 8px;width: 100%;display: flex;justify-content: center;color: whitea hrefhttps://beian.miit.gov.cn/ target_blank冀ICP备2022011594号-1/a/div/div
/templatescript
import LoginForm from _c/login-formexport default {components: {LoginForm},methods: {handleSubmit ({ userName, password }) {this.$router.push({name: _home})}}
}
/scriptstyle scoped
/style
login-form.vue:
templateForm refloginForm :modelform :rulesrules keydown.enter.nativehandleSubmitFormItem propuserNameInput v-modelform.userName placeholder请输入用户名span slotprependIcon :size16 typeios-person/Icon/span/Input/FormItemFormItem proppasswordInput typepassword v-modelform.password placeholder请输入密码span slotprependIcon :size14 typemd-lock/Icon/span/Input/FormItemFormItemButton clickhandleSubmit classc-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
