前言
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 请求拦截处理分析
近期评论