题目管理系统,vue+elementui+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渲染了对应的视图之后执行(主要是用于进行资源清理工作)");
    }


}

由于这个代码是我这一个月写的所以在功能上不完善,如果你在学习,可以找我要这个代码,有空边学边完善,相互学习

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值