ruoyi源码学习-1 登录页面表单

前言

ruoyi平台是学习springboot+vue整体框架的优秀开源项目。从本文开始，跟随页面操作，我们来分析ruoyi项目源码的流程和框架。

因日常工作采用的是前后端分离模式，选取https://gitee.com/y_project/RuoYi-Vue项目clone代码。

项目构建

将ruoyi-ui文件夹剪切到其他位置。用idea分别打开ruoyi-ui、ruoyi-Vue，安装依赖。

在mysql数据库新建ry-vue，运行ruoyi-Vue中sql文件夹的sql文件，并修改application-druid.yml文件mysql配置。启动redis服务，并修改application.yml文件redis配置。运行前端和后端项目，查看ruoyi项目页面。

表单元素

从src/views/login.vue表单中可以看出，主要包含：用户名、密码、验证码、记住密码、登录组件。

下面我们选取较为重要的login.vue中代码分析。

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">

• 采用element表单组件el-form进行构建，子项为el-form-item。
• :model双向绑定el-form表单值
• :rules表单输入值校验

<el-input
  v-model="loginForm.password"
  type="password"
  auto-complete="off"
  placeholder="密码"
  @keyup.enter.native="handleLogin"
>

• auto-complete="off"用来关闭浏览器自动补全
• placeholder=“密码” 默认显示字段
• @keyup.enter.native=“handleLogin” 回车键触发登录处理方法

<img :src="codeUrl" @click="getCode" class="login-code-img"/>

• 调用获取验证码图片方法

<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>

• el-checkbox多选框，对应每个框的值为布尔类型

<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>

• 增加登录过程显示

页面初始化

created() {
  this.getCode();
  this.getCookie();
},

获取验证码图片

此部分中涉及请求发送处理，暂时放到下一篇统一分析。

获取cookie

初始化时获取cookie，此操作目的是：用户已登录时进入登录页面，加载已输入信息

登录操作

this.$refs.loginForm.validate(valid => {
  if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            ...

整体的操作需要先经过验证过程。验证之后，前端显示处于登录过程，判断是否记录密码。如果记录，在cookie中存储相关信息。如果否，清除cookie中相关信息，以防之前配置中记住操作选项生效。

this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            this.getCode();
          });

向store传入dispatch操作，传值并触发store中的请求操作。获得结果后，页面重定向至根页面。如果失败，则退出登录中的状态，并刷新验证码。

// src/store/modules/user.js  
Login({ commit }, userInfo) {
  const username = userInfo.username.trim()
  const password = userInfo.password
  const code = userInfo.code
  const uuid = userInfo.uuid
  return new Promise((resolve, reject) => {
    // 发送login请求
    login(username, password, code, uuid).then(res => {
      // cookie中存入token
      setToken(res.token)
      // 修改mutations
      commit('SET_TOKEN', res.token)
      resolve()
    }).catch(error => {
      // 错误提示
      reject(error)
    })
  })
},

下期计划

• src/utils/request.js 请求拦截处理分析