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

前言

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

因平常工做采用的是先后端分离模式，选取gitee.com/y_project/R… 项目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 请求拦截处理分析