day23_密码加密前端验证码监听器 svn版本控制

1密码加密

注意点:

1数据库保存密文

2用户输入明文用同样的加密算法进行加密

3在程序中直接判断密文是否相同

复制代码

package com.javasm.utils;

import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

/**
 * @className: CommonUtils
 * @author: gfs
 * @date: 2025/10/31 9:38
 * @version: 0.1
 * @since: jdk17
 * @description:
 */
public class CommonUtils {

    //传入明文 转出密文
    public static String transPWD(String pwd){
        String transPWD ="";
        try {
            MessageDigest md5 = MessageDigest.getInstance("MD5");
            md5.update(pwd.getBytes());
            transPWD = new BigInteger(1, md5.digest()).toString(16);
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e);
        }
        return transPWD;

    }

}

对比密码时转成密文对比

密码加密知识点

注意:

在公开免费的算法下可以通过加盐值(自定义逻辑改变密码字符串) 进一步提高安全性

2前端验证码

为什么要验证码可以防止一些脚本自动点击登录

如果要求更高需要使用邮箱或者手机校验

前台系统会使用(给普通用户使用)

后台系统使用较少(后台系统经常不上外网)

拖动验证码组件: vue3-puzzle-vcode

https://www.npmjs.com/package/vue3-puzzle-vcode

复制代码

<script setup>
import { ref,reactive } from 'vue' 
import axios from 'axios'
import qs from 'qs';
import { ElMessage } from 'element-plus'
import router from '@/router';


  import Vcode from "vue3-puzzle-vcode";

  const isShow = ref(false);

//   const onShow = () => {
//     isShow.value = true;
//   };

  const onClose = () => {
    isShow.value = false;
  };
  //后端校验用户名密码环节 挪到验证码拖动成功之后
  const onSuccess = () => {
    //验证码验证成功
    console.log("向后端发请求 传用户数据", user)
    console.log("向后端发请求 传用户数据", qs.stringify(user))
    axios.post("http://localhost:8080/baseProj/login",qs.stringify(user))
        .then(resp=>{
            console.log("请求成功",resp.data)
            if(resp.data.code == 10001){
                ElMessage.error(resp.data.msg)
            }else if(resp.data.code == 10002){
                ElMessage.info(resp.data.msg)
            }else if(resp.data.code == 10000){
                ElMessage.success(resp.data.msg)
                //登录用户信息加入缓存 方便其他页面使用
                sessionStorage.setItem("loginUser",JSON.stringify(resp.data.returnData))
                //跳转到主页面
                router.push('/main')
            }
        })


    onClose(); // 验证成功，手动关闭模态框
  };




const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 4, max: 8, message: '长度4-8位之间', trigger: 'blur' },
  ],
})
const user = reactive({
  username: '',
  password: '',
})

const mySubmit = ()=>{
    // 通过form对象上预设的validate方法，对表单数据进行验证
    loginForm.value.validate((valid)=>{
        console.log(valid);
        //如果验证成功 提交请求
        if(valid){
            //验证码开框
            isShow.value = true;
        }
    })

    
}
//一键重置
const myReset = ()=>{
    loginForm.value.resetFields()

}

//通过相同的名称 和空ref函数 获取指定ref名称的组件对象
const loginForm = ref()

console.log(loginForm);

</script>
<template>
 <div class="loginPanel">
    <img src="/src/assets/login.png"/>
    <el-form style="margin-top: 20px;" ref="loginForm" :model="user" hide-required-asterisk :rules="rules"  label-width="80px" >
        <el-form-item label="用户名" prop="username">
            <el-input style="width: 240px;" v-model="user.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" style="width: 240px;" v-model="user.password" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" color="#626aef" @click="mySubmit">登录</el-button>
            <el-button color="#626aef" @click="myReset">重置</el-button>
        </el-form-item>
  </el-form>


 </div>
 <!-- <hr> 增加验证码的弹出框 -->
 <Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
 <!-- <button @click="onShow">开始验证</button> -->

    <video class="videoBG" autoplay loop muted playsinline>
      <source src="/src/assets/tongyi_branding.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

</template>

<style scoped>
    .loginPanel{
        width: 365px;
        height: 300px;
        border: 1px solid lightgrey;
        padding: 30px;
        margin: 200px auto;
        background-color: rgba(206, 206, 206, 0.486);
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

        .videoBG {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: 200%;
            height: auto;
            z-index: -1;

        }
</style>

3监听器(了解)

JAVAEE

servlet 接收请求返回响应处理报文

filter 接收请求返回响应处理报文同样地址请求先进filter (进入请求前做公共代码处理)

listener 监听器类似钩子函数指定对象创建/销毁时会自动触发

request ServletRequestListener

session HttpSessionListener

servletContext ServletContextListener

在服务器启动时加载mybatis对象生成数据库连接池

复制代码

package com.javasm.listener;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.ServletRequestEvent;
import javax.servlet.ServletRequestListener;
import javax.servlet.annotation.WebListener;
import javax.servlet.http.HttpSessionEvent;
import javax.servlet.http.HttpSessionListener;
import java.io.IOException;
import java.io.InputStream;

/**
 * @className: ListenerDemo
 * @author: gfs
 * @date: 2025/10/31 10:42
 * @version: 0.1
 * @since: jdk17
 * @description:
 */
//各种框架中 都会使用监听器
//伴随服务器启动 加载资源 创建对象
@WebListener
public class ListenerDemo implements ServletContextListener {

    static SqlSessionFactory sqlSessionFactory = null;

    @Override
    public void contextInitialized(ServletContextEvent sce) {
        String resource = "mybatis-config.xml";
        InputStream inputStream = null;
        try {
            inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {

    }

    //获得连接
    public static SqlSession getSqlSession(){
        SqlSession sqlSession = sqlSessionFactory.openSession();
        return sqlSession;
    }
    //归还连接
    public static  void backSqlSession(SqlSession sqlSession){
        //归还连接
        sqlSession.close();

    }


    //归还并提交
    public static  void backAndCommitSqlSession(SqlSession sqlSession){
        sqlSession.commit();
        //归还连接
        sqlSession.close();
    }



}



//public class ListenerDemo implements HttpSessionListener {
//
//    @Override
//    public void sessionCreated(HttpSessionEvent se) {
//        HttpSessionListener.super.sessionCreated(se);
//    }
//
//    @Override
//    public void sessionDestroyed(HttpSessionEvent se) {
//        HttpSessionListener.super.sessionDestroyed(se);
//    }
//}


//public class ListenerDemo implements ServletRequestListener {
//
//    @Override
//    public void requestInitialized(ServletRequestEvent sre) {
//        //对象创建了
//    }
//
//    @Override
//    public void requestDestroyed(ServletRequestEvent sre) {
//        //对象销毁了
//    }
//
//
//}