从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

最新推荐文章于 2023-02-20 17:28:49 发布
最新推荐文章于 2023-02-20 17:28:49 发布
阅读量902 收藏 4
点赞数
分类专栏： 从0开始创建vue项目 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59816940/article/details/128600216
版权

往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

书写登录页

在这里插入图片描述

  1. 新建Login.vue
  2. 配置路由
    在这里插入图片描述

需要注意的是，如果你的elementUI是按需引入的，不要忘了引入
在这里插入图片描述
然后我们会得到一个简单的登录页的界面
在这里插入图片描述

添加校验

我们的灯枯表单是需要进行校验的，elementUI这个是封装好的，我们可以按照它的使用方式去用
在这里插入图片描述
在这里插入图片描述
然后我们就可以得到一个简单的校验了
在这里插入图片描述

优化

正则

我们正常书写正则是比较麻烦的，这里我们采用一个vscode插件：any-rule
在这里插入图片描述
然后我们按F1就可以使用
在这里插入图片描述
但是我们正常开发不会这么去写规则，我们都是在方法里去校验的，所以我们要进行优化

优化

在这里插入图片描述
在这里插入图片描述
这里的正则就是我们利用插件去书写的

封装

我们还可以进行进一步优化，把这个校验单独封装成一个文件

建立utils

在这里插入图片描述

使用

在这里插入图片描述
这个就是我们正常开发的使用形式了

林多多@
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue后台搭建及登录模块
weixin_67812721的博客
08-07 602
牛牛牛
从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）
随便写写
01-08 1851
先用vue2+elementui从0搭建一个vue后台管理项目，完成后会迭代成vue3+TS+element-plus
vue2 脚手架从0到1搭建完整项目
weixin_53474595的博客
11-08 598
这里我们选择默认的纯净版vue2（不含router、vuex、ts、单元测试等）创建纯净版 vue2，（不含router、vuex、ts、单元测试等）空格键：切换选中，enter回车：选择结束 - 执行。项目名不能有大写字母，可用短横线、下划线。1.安装node(如果已安装可以忽略)检查是否安装成功命令:node -v。创建纯净版 vue3，（同上）2.安装脚手架：vue-cli。
vue项目开发流程从零开始（搭建）
weixin_46392266的博客
01-24 1908
拿到项目： 从零开始 单人 从0开始 原有项目 多人 后续开发 版本管理工具：Git || 码云 开发流程： 1、从零开始 单人 从0开始 步骤： 步骤1：配置SSH 步骤2：创建仓库 步骤3：克隆走SSH协议（注：克隆就是将远程仓库代码下载到本地 步骤4：选择开发框架并生成框架代码 步骤5：选择UI框架并配置 步骤6：将初始化好的本地仓库代码提交到远程仓库（码云 步骤7：使用项目需求管理系统给员工安排任务（码云企业版 或 jira 很多大公司中技术的公司 实现： 步骤1：配置SSH （配置公钥）
vue从0到1(配置环境+项目创建)
weixin_46129207的博客
09-25 569
首先安装node.js node.js安装:https://nodejs.org/en/download/ 下载并安装 安装完成,并且验证 node -v npm -v 此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西 将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在安装的文件夹下创建两个文件夹【node_global】及【node_cac
vue中使用vee-validator完成表单校验方案
12-13
前言 由于大部分移动端的组件库都...在vue项目中，表单校验是每个前端开发人员都避免不了的需求。校验的好处可以避免无用的 http 请求，及校验不通过不发送请求，也可以提高用户的体验效果。 安装 npm install vee-val
Vue ElementUi同时校验多个表单(巧用new promise)
12-03
有ABCD四个表单，提交的时候同时校验(是的，后台管理系统的需求就是这样)，巧用new promise。 实现的方法有很多种，我讲下自己觉得比较优雅的方式，欢迎各位大大的指正哈。 代码 let formArr=['formA','formB','...
【JavaScript源代码】vue 使用rules对表单字段进行校验的步骤.docx
12-29
vue 使用rules对表单字段进行校验的步骤 　在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用　以前验证表单字段的最大长度...
一个基于 vue 的 PC 端表格组件
05-07
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等.
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序
05-22
支持 SaaS 多租户系统，可自定义每个租户的权限，提供透明化的多租户底层封装 工作流使用 Flowable，支持动态表单、在线设计流程、会签 / 或签、多种任务分配方式 高效率开发，使用代码生成器可以一键生成前后端代码...
从零开始的VUE项目–01（前期准备和前台vue搭建）
木卯彳亍的博客
04-13 4293
前端：VUE (2.9.6) （编码工具：Visual Studio Code） 后台：ASP.NET Web API (编码工具：Visual Studio 2019） 数据库：MYSQL （可视化工具：MYSQL-Front） 基本框架：Element UI 前期准备：①已安装好npm，②已全局安装webpack和vue-cli，③在线arcgis js api（我用的是3.14，这个文件是用nginx1.19.1发布的），发布很简单，将链接：https://pan.baidu.com/s/18Eewl
Vue创建登录界面
qq_52335038的博客
10-03 2万+
一、真正的创建登录界面 1.在创建登录界面前，我们用helloword.vue来充当登录页面，现在我们真正的把登录界面创建出来，在前台views文件夹下创建一个login文件夹，然后在此文件夹下创建一个index.vue文件作为登录界面，那么router里的index.js里引入的helloword就要变成login文件下的index.vue文件，由于注册界面和登录界面区别不大，所以可以借用并修改注册界面的样式，代码如下： （1）router里的index.js里 import login from
vue实现登录界面
热门推荐
Hi-Sun的博客
06-16 5万+
使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示： HTML部分： <div class="loginbody"> <div class="login"> <div class="mylogin" align="center"> <h4>登录</h4> <el-form :model="loginForm"
从0开始写Vue项目-Vue页面主体布局和登录、注册页面
不愧是暮言的博客
02-20 2149
关于主体布局，我们刚开始肯定是做的死数据的，当我们后面整合SpringBoot的时候就会将数据联动起来了；而关于我们的数据，我们依然可以在我们的Element-ui官网里面找到我们的例子，然后进行引入来做成静态的数据。我们可以选择自己喜欢的表格来作为我们后面存
详细介绍从零开始打造vue的登录页面（2022.7）
呼啦啦啦啦啦的博客
07-12 8110
最新版保姆级教程，都来看一眼吧
vue表单的数据验证
m0_51459514的博客
03-25 2589
vue表单的数据验证
Vue实现登录功能全套详解（含封装axios）
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
炫酷超拽！推荐一款Vue开发的OA系统，功能还不错哟！！！
YunWisdom
04-28 1万+
推荐一款Vue开发的OA系统，功能还不错 基于Ant Design Pro 开发 ，项目名：OA-System Overview 基于Ant Design of Vue开发的OA办公系统 Vue 开发的OA系统 具有工作流动态审批、加签、会签等工作流功能，可以对工作流程的审批业务进行评论/讨论 具有文档预览、图片预览等功能 具有博客编写、预览、查看、搜索等功能 具有...
推荐一款Vue开发的OA系统 -- 基于Ant Design Pro 开发 ，项目名：VueOA
YunWisdom
03-19 9163
基于Ant Design Pro 开发 ，项目名：VueOA 源码地址： github: gitee:https://gitee.com/yunwisdoms/oa-front-service Overview 基于Ant Design of Vue开发的OA综合管理系统 Vue 开发的OA系统 具有工作流动态审批、加签、会签等工作流功能，可以对工作流程的审批业务...
vue后台管理项目 难点
最新发布
09-04
在Vue后台管理项目中，可能会遇到一些难点。其中一些常见的难点包括： 1. 权限控制：在后台管理系统中，权限控制是非常重要的一部分。它涉及到用户角色、权限管理和页面级别的访问控制。根据引用中提到的文章，浅谈了Vue后台管理系统权限控制的思考与实践，你可以参考该文章中的思路和方法来解决权限控制的难题。 2. 组件封装：Vue后台管理项目通常包含大量的组件，如表格、表单、菜单、弹窗等。在实际项目中，你可能需要根据项目需求对这些组件进行封装，使其更加灵活和易于复用。其中，引用中提到了一些常见的组件封装技巧，例如分页组件的封装、查询和重置功能的实现、弹出框的使用等等。 3. 数据校验：在后台管理系统中，数据的输入和提交都需要进行校验，以确保数据的有效性和安全性。Vue提供了一些内置的校验方法，如表单验证、自定义指令等。你可以使用这些方法来进行数据校验，以应对引用中提到的校验难点。 4. 组件通信：在一个复杂的后台管理系统中，各个组件之间的通信是非常常见的。你可能需要根据业务需求使用一些常见的通信方式，如事件总线、Vuex等。这样可以方便不同组件之间的数据传递和状态管理，从而提高项目的开发效率。 综上所述，Vue后台管理项目中的难点主要包括权限控制、组件封装、数据校验和组件通信。你可以根据实际项目需求，结合相关的知识点和经验，来解决这些难题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [浅谈vue后台管理系统权限控制思考与实践](https://download.csdn.net/download/weixin_38707240/12948508)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【精品课】Vue.js实现电商后台管理系统（企业项目实战）](https://download.csdn.net/download/weixin_38503483/19944528)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue后台管理知识点、难点总结02](https://blog.csdn.net/hnn567/article/details/123113223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林多多@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值