vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...

前言

接上文，本文主要讲解vue+element-ui后台管理系统的登录功能的实现，api接口这块如果对后端技术以及node的实现不太了解的情况下，可以写出假数据进行模拟操作~

一、创建登录文件并配置访问路由

首先我们将上文创建好的项目在ide中打开，我这里使用的是vscode，项目清单结构如下图所示：

项目清单

我们在views文件夹下新建一个Login.vue作为我们的系统登录界面，然后在router路由文件夹下的index.js路由配置文件中配置我们的登录界面访问路由，如下图所示：

配置登录访问路由

这里import Login from "../views/Login.vue"为链接到我们的登录界面，这里可以写成动态链接的方式：component: () => import( "../views/Login.vue") ,这样的写法有助于提高项目路由的加载效率，按需加载。

然后我们通过npm run serve 启动我们的项目，并尝试通过路由访问进行测试，如果访问成功看到了你在登录界面所写的内容即配置成功了~以下是我的界面效果：

登录界面内容

二、登录界面编写

登录界面大家都知道主要是一个登录表单的是布局实现以及一些简单的表单验证而已，所以接下来我们将用element-ui的表单来实现登录表单。

el实现form表单的组件是<el-form>组件，单行输入框用的是<el-input>组件，如果你不太清楚也可以直接打开上文说的element-ui的组件表单页面进行查看和选择使用，地址：https://element.eleme.cn/#/zh-CN/component/form

以下是我的登录表单布局文件：

登录表单布局代码

其中表单的有效性验证可以通过rule去实现（如果要想通过rule实现的话需要在el-form标签中进行rule属性设置），在script的data中编写rule的条件，官方提供的基础验证如下：

element-ui官方表单内容有效性验证代码截图

其中pass、checkpass以及age是需要在各表单标签中进行prop设置方可生效，最后增加一些自己的样式，大概效果就会像我这样：

登录界面

三、登录功能的实现

这里主要指利用axios请求登录接口校验登录功能。由于该系列文章仅限于前段的实现，后端接口这里就不做详细说明，大家可以选择php、node.js、java、c#或者python等都是可以实现的，前端coder推荐使用node.js, 我这里使用的是tp/flask实现的。

1、安装axios

这里通过命令npm install --save axios即可像项目中增加axios用于API接口请求。

2、全局配置axios

安装完成后如果你是全局配置则需要在main.js中进行axios的引入配置。具体方式如下：

import axios from "axios";
Vue.prototype.$http = axios;

通过以上两行代码配置后，就可以在项目中全局通过$http使用axios了，至于axios的拦截器等高级操作这里不做深入阐述。

3、进行登录

这里假设我的登录接口地址为/user/login, 由于登录是提交操作以及涉及敏感信息，该接口应该是post的请求方式，所以我们的请求代码就可以这样写：

this.$http.post('/user/login', data).then(res => {}).catch(error => {})

4、可能涉及的问题

1)、跨域问题

为什么会产生跨域问题？JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，即同源政策。通俗的讲，为了安全所以浏览器进行了限制，所以不能进行跨域。

2}、什么是跨域

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都会出现跨域的问题。

3）、如何解决

在项目中新建一个vue.config.js文件，在其中写入一下内容即可：

module.exports = {
 devServer: {
 host: 'localhost',
 port: 8080,
 proxy: {
 '/api': {
 target: 'http://127.0.0.1:5000',
 // ws : true,
 changeOrigin: true,
 pathRewrite: {
 '^/api': ''
                }
            }
        }
    }
};

其中host和port是你本地的服务器和端口，而proxy中写的就是你要代理的服务器的相关信息。

vue.config.js中的更多配置可参考官方文档：https://cli.vuejs.org/zh/config/

四、登录信息的存储

经过以上的步骤我们已经实现了登录界面的编写和接口的请求。但是在日常的项目过程中会涉及到一些登录信息的存储以及登录状态的存储，那么传统的方式可以通过一些localstorage、sessionStorage去实现，现在我们可以使用vuex实现。

vuex在我们构建项目的过程中已经加入了项目了，如果没有的话可以通过以下命令去加入项目：

npm install --save vuex

在我们登录成功之后就可以将我们的登录相关信息通过vuex存储在全局的store中，共项目中任何需要用到的地方使用。至于Vuex的详细使用方式可以参考vuex官方文档：https://vuex.vuejs.org/zh/guide/，或者有需要详细操作的，可以评论或者私信我交流~

至此我们Vue-cli + Element-ui实现后台管理系统的登录功能我们已经实现了，下一篇文章将介绍如何实现后台管理系统的主要框架~

一个不是前端的coder，文章如有不足之处还望指出~