【vue实战项目】通用管理系统：登录页

目录

1.前言

2.表单

3.容器

4.路由

5.校验

6.请求后端接口

---

1.前言

本文是博主vue实战项目系列文章的第一篇，本系列将清晰的从搭建环境开始一步步开发一个vue的通用管理系统，项目规模不大，较为小巧，但是覆盖了目前常用的前端开发技术。很适合作为一个前端的练习项目，也特别适合后端的小伙伴用来熟悉前端。整个系列走完，会对当前的前端开发的技术栈有了较为大致的了解，不会再打开现在的一个前端项目两眼一抹黑。

本项目会先用vue2来开发，然后升级成vue3，前置的环境准备等相关内容请移步：

从0开始搭建一个前端项目的架子-CSDN博客

2.表单

一个登录页由哪些东西构成？无非就是最核心的输入用户名密码的输入框，再加上一些杂七杂八的修饰元素。比如我们常见的QQ邮箱的页面：

输入用户名密码的地方很明显是一个表单，作为整个登录页的核心，这个输入框表单当然是我们要首先写出来的。要是用原生HTML来写的话，还要自己手动编写很多关于样式的内容，太麻烦了，UI框架的好处就体现出来了，自带的一系列带样式的组件，拿来就用，既然本项目选择了elementUI来作为UI框架，直接去elementUI官网上去拿一个自己看得上的表单组件即可：

我看上了这个表单：

于是直接展开它的代码，把其中要的表单组件的代码拷贝出来新建一个Login组件即可。

我们要拷贝的代码：

新建一个Login组件：

稍微调整一下Login组件的内容，将这个表单组件调整为，我们要的输入用户名、密码的输入框，主要就是改一下输入框的名字，改一下数据的名字：

3.容器

光有了输入框表单，我们可以启动来看看是什么样子：

组件直接铺满了屏幕，这显然不是我们想要的是前面看到的那种类似于QQ邮箱登录页那种输入框的效果。我们需要找一个容器来将输入框表单装起来，elementUI提供了卡片容器可以实现这种效果：

把代码扣下来，将输入框放进卡片容器中。

代码示例：

效果：

调整一下整体的CSS：

效果：

4.路由

登录页应该作为系统的默认首页，所以我们需要配置好路由：

让访问/和/login的请求都转跳到登录页上。

5.校验

登录页的输入框应该有合理的输入校验，对输入的用户名、密码进行校验，对于不合法的输入，应该弹出提示。elementUI的表单组件是允许在标签上配置校验规则的：

优化校验规则：

原来的校验规则是在输入框上单独写，这样代码不好维护，elementUI支持将校验规则抽出来，在表单上以:rules="rules"的方式来引用，这样可以将规则集中写在数据域里，便于维护。这些elementUI支持的校验规则和标签上的扩展属性可以翻看elementUI的官方文档。

效果：

6.请求后端接口

最后我们使用axios加上对后端接口的请求，home页面暂时还未开发，直接转跳到HelloWorld组件上去即可：