spring boot+vue怎么给注册登录信息进行MD5加密
时间: 2023-06-04 19:08:09 浏览: 216
在vue项目中使用md5加密的方法
您好,关于您的问题,可以使用Java自带的MessageDigest进行MD5加密,具体代码实现如下:
1. 在后端Java代码中:
```
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
/**
* MD5加密工具类
*/
public class MD5Utils {
/**
* 获取MD5加密字符串
* @param str 需要加密的字符串
* @return 返回加密后的字符串
*/
public static String getMD5(String str) {
try {
// 获取MD5摘要算法的MessageDigest对象
MessageDigest md = MessageDigest.getInstance("MD5");
// 将要加密的字符串转换成byte数组进行加密
byte[] input = str.getBytes();
// 加密并返回加密后的byte数组
byte[] out = md.digest(input);
// 将byte数组转换成字符串
return bytesToHex(out);
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
return null;
}
}
/**
* 将byte数组转换成16进制字符串
* @param bytes byte数组
* @return 返回转换后的16进制字符串
*/
private static String bytesToHex(byte[] bytes) {
StringBuilder sb = new StringBuilder();
for (byte b: bytes) {
String hex = String.format("%02x", b);
sb.append(hex);
}
return sb.toString();
}
}
```
2. 在前端Vue代码中:
```
<template>
<div>
<el-form :model="form" ref="form" :rules="rules" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">登 录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import MD5Utils from '@/utils/MD5Utils';
export default {
name: "LoginPage",
data() {
return {
form: {
username: "",
password: ""
},
rules: {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
// 对密码进行MD5加密
this.form.password = MD5Utils.getMD5(this.form.password);
// TODO: 发送登录请求
// ...
} else {
console.log("error submit!!");
return false;
}
});
}
}
}
</script>
```
以上代码示例中,后端Java代码使用了Java自带的MessageDigest进行MD5加密,前端Vue代码则引入了一个MD5加密工具类,并且在发送请求前对密码进行了加密处理,从而实现了对注册登录信息进行MD5加密的操作。
阅读全文