使用vueAdmin开发后台管理系统（登录篇）

本文介绍了如何使用vue-element-admin开发在线考试系统教师端的流程，模板的下载过程略过，项目部署后的目录结构如图所示

我自己的前端学的不怎么样，可以说是个半吊子，只能粗略的用一下，文章主要是针对那些对后端比较了解，但是前端了解的比较少，只需要会用就行的人，帮你们少走点弯路，都是自己踩了很多坑走过来的。

前面几段是根据我自己的业务需求配置的，如果想要看登录的实现具体过程可以从登录页面初步修改章节看起

修改访问端口

项目文件如图所示，在vue.config文件中存放了配置文件，由于本项目所有前端页面都使用nginx为入口，所以需要配置项目的端口号，在该文件中找到port的配置信息，修改为3001

const port = process.env.port || process.env.npm_config_port || 3001 // dev port

跨域问题的解决

因为本地使用了域名模拟，所以需要解决跨域问题，在配置文件中修改如下信息

本项目后端使用了微服务的技术，要在网关中也允许跨域

通过teacher.exam.com域名访问后一直在请求info?t=1585471430974这个地址，具体原因可以自行百度，这里只提供了解决方案找到node_modules里的sockjs文件，将1605行注释

登录页面初步修改

具体的路由还有目录结构请自行查看官方网站，这里只截取需要更改的地方

登录页面对username进行了验证，这里我们需要改成自己的逻辑，本项目的用户名并没有限制，所以只进行了是否为空的验证

const validateUsername = (rule, value, callback) => {
       if (value=='') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }

登录的提交方法代码如下，这里建议尽量不要修改他默认的代码，感觉作者在登录方面写的文档对于新手不太友好，也没有讲的非常清楚

这里登录的流程其实是对token进行了验证，在登录后，服务端会返回一个token，然后会自动调用getInfo方法获取用户的信息，主要是this.$store.dispatch('user/login', this.loginForm)这行代码，映射了多个文件，需要了解逻辑的同学可以参考这篇文章https://www.jianshu.com/p/29c5b8cd593e

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {