题目管理系统,vue+elementui+springboot+mysql,用于学习
题库管理系统,语言vue+springboot,数据库mysql
·
代码语言
前端:vue+elementui
后端:springboot
数据库:mysql
开发工具:idea+vscode
登录管理模块
考试管理模块
新增试卷模块
题库管理模块
分页,增删改查都实现了,同时也实现了数据通过excel录入到数据库中
代码的实现
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<!---图像区域-->
<img src="../assets/logo.png">
</div>
<!---登录表单区域-->
<el-form ref="loginForm" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules">
<!--userid-->
<el-form-item prop="userid">
<el-input prefix-icon="el-icon-search" v-model="loginForm.userid"></el-input>
</el-form-item>
<!---password-->
<el-form-item prop="password">
<el-input prefix-icon="el-icon-search" v-model="loginForm.password"></el-input>
</el-form-item>
<!---button erea-->
<el-form-item class="btns">
<el-button type="primary" @click="login()">登录</el-button>
<el-button type="info" @click="resetLoginForm()">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { setToken } from '@/utils/auth'
export default {
data () {
return {
loginForm: {
userid: '123',
password: '123456'
},
loginFormRules: {
// 验证用户名是否合法
userid: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在3到10字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5, max: 10, message: '长度在5到10字符', trigger: 'blur' }
]
}
}
},
methods: {
// 点击重置按钮,重置登录表单
resetLoginForm () {
console.log(this)
this.$refs.loginFormRef.resetFields()
},
// 登录验证
login () {
this.$refs.loginForm.validate(async val => {
if (!val) return
console.log(this.loginForm, 'this.loginform')
return this.$api.checkLogin({
userid: this.loginForm.userid,
password: this.loginForm.password
}).then(response => {
if (response.status === 500) {
return this.$message.error('服务器连接失败')
} else if (response.data.flag === false) {
return this.$message.error('用户名或密码错误')
} else if (response.data.flag === true) {
sessionStorage.setItem('token', response.data.token)
this.$message.success('登录成功')
setToken('Token', 'amy')
return this.$router.push('/index/index')
}
}, error => {
console.log('请求失败了', error.data.message)
return this.$message.error('请求失败了')
})
}
)
}
},
updated () {
var lett = this
document.onkeydown = function (e) {
var key = window.event.keyCode
if (key === 13) {
lett.login()
}
}
}
}
</script>
springboot部分代码的展示
package com.example.filter;
import com.auth0.jwt.exceptions.AlgorithmMismatchException;
import com.auth0.jwt.exceptions.SignatureVerificationException;
import com.auth0.jwt.exceptions.TokenExpiredException;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.example.utils.TokenUtil;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Component
public class JwtAuthenticationTokenFilter implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
System.out.println("执行了这里decodedJWT.getToken()");
String JWT = request.getHeader("Authorization");
try {
// 1.校验JWT字符串
DecodedJWT decodedJWT = TokenUtil.decode(JWT);
// 2.取出JWT字符串载荷中的随机token,从Redis中获取用户信息
System.out.println(decodedJWT.getToken()+"decodedJWT.getToken()");
return true;
}catch (SignatureVerificationException e){
System.out.println("无效签名");
e.printStackTrace();
}catch (TokenExpiredException e){
System.out.println("token已经过期");
e.printStackTrace();
}catch (AlgorithmMismatchException e){
System.out.println("算法不一致");
e.printStackTrace();
}catch (Exception e){
System.out.println("token无效");
e.printStackTrace();
}
return true;
} @Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
System.out.println("请求处理之后进行调用,主要是在视图被渲染之前(Controller方法调用之后)");
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
throws Exception {
System.out.println("请求结束之后被调用,在DispatcherServlet渲染了对应的视图之后执行(主要是用于进行资源清理工作)");
}
}
由于这个代码是我这一个月写的所以在功能上不完善,如果你在学习,可以找我要这个代码,有空边学边完善,相互学习
更多推荐
已为社区贡献1条内容
所有评论(0)