4.后台登录功能开发

已于 2024-03-26 09:30:22 修改
阅读量303 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-12-17 16:41:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67806436/article/details/128354205
版权

文章目录

4.后台登录功能开发

一、需求分析

（一）页面原型展示

  • 找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.html
    在这里插入图片描述
  • 点开登录.html页面
    在这里插入图片描述
  • 登录页面有两个文本框需要用户输入用户名和密码，客户端要进行非空校验，单击【登录】按钮之后，表单数据以JSON格式通过AJAX请求方式发送到后台，后台控制器要编写相应的处理函数，对提交的数据进行业务处理，然后将处理结果返回给前端。
  • 不妨看一看login.html页面代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞吉外卖管理端</title>
  <link rel="shortcut icon" href="../../favicon.ico">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css">
  <link rel="stylesheet" href="../../styles/login.css">
  <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
  <style>
    .body{
      min-width: 1366px;
    }
  </style>
</head> 

<body>
  <div class="login" id="login-app">
    <div class="login-box">
      <img src="../../images/login/login-l.png" alt="">
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
          <div class="login-form-title">
            <img src="../../images/login/logo.png" style="width:139px;height:42px;" alt="" />
          </div>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
              prefix-icon="iconfont icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
              @click.native.prevent="handleLogin">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../js/validate.js"></script>
  <script src="../../api/login.js"></script>

  <script>
    new Vue({
      el: '#login-app',
      data() {
        return {
          loginForm:{
            username: 'admin',
            password: '123456'
          },
          loading: false
        }
      },
      computed: {
        loginRules() {
          const validateUsername = (rule, value, callback) => {
            if (value.length < 1 ) {
              callback(new Error('请输入用户名'))
            } else {
              callback()
            }
          }
          const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
              callback(new Error('密码必须在6位以上'))
            } else {
              callback()
            }
          }
          return {
            'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
            'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
          }
        }
      },
      created() {
      },
      methods: {
        async handleLogin() {
          this.$refs.loginForm.validate(async (valid) => {
            if (valid) {
              this.loading = true
              let res = await loginApi(this.loginForm)
              if (String(res.code) === '1') {
                localStorage.setItem('userInfo',JSON.stringify(res.data))
                window.location.href= '/backend/index.html'
              } else {
                this.$message.error(res.msg)
                this.loading = false
              }
            }
          })
        }
      }
    })
  </script>
</body>
</html>
  • Vue对象通过el属性绑定了id属性为login-app的div元素
    在这里插入图片描述
  • Vue对象通过data()方法绑定JSON数据loginForm，通过computed绑定校验规则loginRules
    在这里插入图片描述
  • Vue对象通过methods绑定对登录表单数据进行处理的异步方法handleLogin
    在这里插入图片描述
  • 在前端处理函数里，有后端处理函数返回的结果，保存在res变量里，里面有三个数据：res.code、res.data、res.msg，这就要求后端处理函数返回JSON数据必须要包含这三项内容。

（二）登录页面展示

  • 页面位置：项目/resources/backend/page/login/login.html
    在这里插入图片描述
  • 为什么Vue对象里要绑定这个用户登录数据呢？
  • 因为员工表employee里有一条数据：admin与123456（MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e）
    在这里插入图片描述
  • 单击【登录】按钮，首先进行校验，如果校验通过，按钮标题就会变成登录中……，如果校验失败，按钮标题就依然是登录
    在这里插入图片描述

（三）查看登录请求信息

  • 按F12键进入浏览器的调试模式
    在这里插入图片描述
  • 说明单击登录按钮通过客户端校验之后，请求的URL：http://localhost:8080/employee/login
  • 后面我们会在雇员控制器里编写相应的处理函数login()
@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {
   
    @PostMapping("/login")
    public R<Employee> login(HttpRequest request, @RequestBody Employee employee) {
        return null;
    }
}

（四）数据模型-雇员表

  • 查看雇员表结构
    在这里插入图片描述

二、代码开发

  • 开发流程图
    在这里插入图片描述

（一）创建雇员实体类

  • ORM（Object Relation Mapping）对象关系映射
  • 雇员实体类（Employee）—— 雇员表（employee）
    在这里插入图片描述
  • 实体属性名采用驼峰命名法，关系字段名采用xml命名规范
  • 如果关系字段名由多个单词用下划线连接，那么实体属性名与关系字段名就不一致，需要进行一个转换，但是这个转换工作不需要手工去操作，直接在应用属性文件（application.yml）里进行设置。
    在这里插入图片描述
  • 创建entity子包
    在这里插入图片描述
  • 在net.hw.entity包里创建雇员实体类 - Employee
    在这里插入图片描述
package net.hw.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 功能：雇员实体类
 * 作者：xizaizhao
 * 日期：2022年11月03日
 */
@Data // Lombok注解，注在类上，提供类的get、set、equals、hashCode、canEqual、toString方法
public class Employee implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;

    private String username;

    private String name;

    private String password;

    private String phone;

    private String sex;

    private String idNumber; // 对应字段 - id_number

    private Integer status;

    private LocalDateTime createTime; // 对应字段 - create_time

    private LocalDateTime updateTime; // 对应字段 - update_time

    @TableField(fill = FieldFill.INSERT) // mybatis-plus注解，填充策略
    private Long createUser; // 对应字段 - create_user

    @TableField(fill = FieldFill.INSERT_UPDATE) // mybatis-plus注解，填充策略
    private Long updateUser; // 对应字段 - update_user
}

  • 参看博文《lombok的@Data注解(https://blog.csdn.net/qq_39900031/article/details/126376871)》

  • 参看博文《mybatis-plus常用注解(https://blog.csdn.net/m0_61682705/article/details/125348601)》

（二）创建雇员映射器接口

  • 创建mapper子包
    在这里插入图片描述

  • 在net.hw.mapper包里创建雇员映射器接口 - EmployeeMapper
    在这里插入图片描述

  • 采用了mybatis-plus插件，就不用再去创建对应的映射器配置文件（EmployeeMapper.xml）
    在这里插入图片描述

package net.hw.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import net.hw.entity.Employee;
import org.apache.ibatis.annotations.Mapper;

/**
 * 功能：雇员映射器接口
 * 作者：xizaizhao
 * 日期：2022年11月03日
 */
@Mapper // 交给Spring容器来管理
public interface EmployeeMapper extends BaseMapper<Employee> {

}
  • 继承了BaseMapper接口，无需编写任何代码，直接就实现了对Employee进行增删改查的功能。

（三）创建雇员服务

# 1、创建雇员服务接口

  • 创建service子包
    在这里插入图片描述
  • 在net.hw.service包里创建雇员服务接口 - EmployeeService
    在这里插入图片描述
  • 采用mybatis-plus插件，代码及其简单，只需要继承IService接口
package net.hw.service;

import com.baomidou.mybatisplus.extension.service.IService;
import net.hw.entity.Employee;

/**
 * 功能：雇员服务接口
 * 作者：xizaizhao
 * 日期：2022年11月03日
 */
public interface EmployeeService extends IService<Employee> {
    
}

#2、创建雇员服务接口实现类

  • 在net.hw.service包里创建impl子包
    在这里插入图片描述
  • 在net.hw.service.impl子包里创建雇员服务接口实现类 - EmployeeServiceImpl
package net.hw.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import net.hw.entity.Employee;
import net.hw.mapper.EmployeeMapper;
import net.hw.service.EmployeeService;
import org.springframework.stereotype.Service;

/**
 * 功能：雇员服务接口实现类
 * 作者：xizaizhao
 * 日期：2022年11月03日
 */
@Service // 交给Spring容器管理
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee>
        implements EmployeeService {
}
  • 注意：必须先继承ServiceImpl<EmployeeMapper,
    Employee>类，后实现EmployeeService接口，顺序绝对不能交换（打个不恰当的比方，继承类是与父亲的关系，实现接口是与叔叔的关系，在Java里，一个类只能继承一个父类，但是可以实现多个接口，现实生活中也是如此，一个人只能有一个父亲，但是可以有多个叔叔，父亲肯定比叔叔亲，因此排名必定在前）。

（四）创建返回结果类

  • 服务器端所有处理方法返回结果都封装到这个通用类里
  • 创建common子包
    在这里插入图片描述
  • 在net.hw.common包里创建返回结果类 - R
    在这里插入图片描述
package net.hw.common;

import lombok.Data;

import java.util.HashMap;
import java.util.Map;

/**
 * 功能：返回结果类
 * 作者：赵茜
 * 日期：2022年11月03日
 */
@Data // Lombok注解，精简代码
public class R<T> {

    private Integer code; // 编码：1成功，0和其它数字为失败
    private String msg; // 错误信息
    private T data; // 数据
    private Map map = new HashMap(); // 动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }
}

（五）创建雇员控制器

  • 创建controller子包
    在这里插入图片描述

  • 在net.hw.controller包里创建雇员控制器类 - EmployeeController
    在这里插入图片描述

  • 基本框架代码，登录方法代码尚未编写

package net.hw.controller;

import lombok.extern.slf4j.Slf4j;
import net.hw.common.R;
import net.hw.entity.Employee;
import net.hw.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

/**
 * 功能：雇员控制器类
 * 作者：xizaizhao
 * 日期：2022年11月03日
 */
@Slf4j // 日志注解
@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @PostMapping("/login")
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {
        return null;
    }
}
  • 登录方法处理逻辑
1、将页面提交的密码password进行md5加密处理
2、根据页面提交的用户名username查询数据库
3、如果没有查询到则返回登录失败结果
4、密码比对，如果不一致则返回登录失败结果
5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
6、登录成功，将员工id存入Session并返回登录成功结果
  • 登录方法流程图
    在这里插入图片描述
  • 将页面提交的密码password进行md5加密处理
    在这里插入图片描述
  • 根据页面提交的用户名username查询数据库
  • 一般情况下，按用户名查询，返回的是一个记录集，但是雇员表对用户名字段做了唯一约束
    在这里插入图片描述
  • 因此，按用户名查询雇员表，只有两种情况：要么没找到，要么找到一条
    在这里插入图片描述
  • 如果没有查询到则返回登录失败结果
    在这里插入图片描述
  • 密码比对，如果不一致则返回登录失败结果
    在这里插入图片描述
  • 查看员工状态，如果为已禁用状态，则返回员工已禁用结果
    在这里插入图片描述
  • 登录成功，将员工id存入Session并返回登录成功结果
    在这里插入图片描述

三功能测试

（一）修改超时配置

  • 在resources/backend/js/request.js文件里设置超时为1000000毫秒，便于后面做断点调试
    在这里插入图片描述

（二）设置断点

  • 在EmployeeController里设置断点
    在这里插入图片描述

（三）采用调试模式启动应用

  • 点击工具栏上的调试按钮
    在这里插入图片描述
  • 查看控制台信息
    在这里插入图片描述
  • 查看调试器信息，目前啥也没有
    在这里插入图片描述

测试登录 - [成功]

  • 浏览器访问http://localhost:8080/backend/page/login/login.html
    在这里插入图片描述
  • 按F12键，打开开发者工具
    在这里插入图片描述
  • 利用目前正确的用户登录信息（admin：123456）来登录，单击【登录】按钮
    在这里插入图片描述
  • 刚才设置了超时1000000毫秒，还是出现系统接口请求超时的错误信息，这是浏览器缓存未清除所导致的，我们得先清除浏览器缓存数据。
    在这里插入图片描述
    在这里插入图片描述
  • 重启应用，再刷新登录页面，就没有超时警告信息了
    在这里插入图片描述
  • 查看断点调试信息
    在这里插入图片描述
  • 单击【Step Over】按钮3次，判断用户名是否错误
    在这里插入图片描述
  • 单击【Step Over】按钮，判断密码是否错误
    在这里插入图片描述
  • 单击【Step Over】按钮，判断雇员状态是否已禁用
    在这里插入图片描述
  • 单击【Step Over】按钮3次，返回登录成功结果
    在这里插入图片描述
  • 此时，查看登录页面，登录成功，会本地存储用户信息
    在这里插入图片描述

四、哈希加密

（一）加密基础

在这里插入图片描述

Python里面实现MD5、SHA256、SHA512、SHA1和SHA224加密

  • 雇员表密码字段采用了md5加密 [密码明文：123456，密文：e10adc3949ba59abbe56e057f20f883e]
    在这里插入图片描述
  • 采用md5加密，得到的加密字符串都是定长的，32位
    在这里插入图片描述

1、采用md5加密算法

  • 编写程序 - 哈希加密md5.py
# 哈希加密是单向加密

# 导入加密模块
import hashlib

# 采用md5加密算法
obj = hashlib.md5()
# 输入待加密字符串 - 明文 [plaintext]
plaintext = input('输入待加密字符串：')
# 转换成二进制数据
obj.update(plaintext.encode('utf-8'))
# 获得密文 [cryptotext]
cryptotext = obj.hexdigest()
# 打印密文及密文长度
print('加密之后的字符串：{}'.format(cryptotext))
print('md5加密字符长度：{}'.format(len(cryptotext)))
  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 无论明文多长，采用md5加密之后的密文都是32位定长字符串；明文细微变化，密文天壤之别

采用sha256加密算法

  • 编写程序 - 哈希加密sha256.py
# 哈希加密是单向加密

# 导入加密模块
import hashlib

# 采用sha256加密算法
obj = hashlib.sha256()
# 输入待加密字符串 - 明文 [plaintext]
plaintext = input('输入待加密字符串：')
# 转换成二进制数据
obj.update(plaintext.encode('utf-8'))
# 获得密文 [cryptotext]
cryptotext = obj.hexdigest()
# 打印密文及密文长度
print('加密之后的字符串：{}'.format(cryptotext))
print('sha256加密字符长度：{}'.format(len(cryptotext)))
  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 无论明文多长，采用sha256加密之后的密文都是64位定长字符串；明文细微变化，密文天壤之别

采用sha512加密算法

  • 编写程序 - 哈希加密sha512.py
# 哈希加密是单向加密

# 导入加密模块
import hashlib

# 采用sha512加密算法
obj = hashlib.sha512()
# 输入待加密字符串 - 明文 [plaintext]
plaintext = input('输入待加密字符串：')
# 转换成二进制数据
obj.update(plaintext.encode('utf-8'))
# 获得密文 [cryptotext]
cryptotext = obj.hexdigest()
# 打印密文及密文长度
print('加密之后的字符串：{}'.format(cryptotext))
print('sha512加密字符长度：{}'.format(len(cryptotext)))
  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 无论明文多长，采用sha512加密之后的密文都是128位定长字符串；明文细微变化，密文天壤之别

4、采用sha1加密算法

  • 编写程序 - 哈希加密sha1.py
# 哈希加密是单向加密

# 导入加密模块
import hashlib

# 采用sha1加密算法
obj = hashlib.sha1()
# 输入待加密字符串 - 明文 [plaintext]
plaintext = input('输入待加密字符串：')
# 转换成二进制数据
obj.update(plaintext.encode('utf-8'))
# 获得密文 [cryptotext]
cryptotext = obj.hexdigest()
# 打印密文及密文长度
print('加密之后的字符串：{}'.format(cryptotext))
print('sha1加密字符长度：{}'.format(len(cryptotext)))
  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 无论明文多长，采用sha1加密之后的密文都是40位定长字符串；明文细微变化，密文天壤之别

采用sha224加密算法

  • 编写程序 - 哈希加密sha224.py
# 哈希加密是单向加密

# 导入加密模块
import hashlib

# 采用sha224加密算法
obj = hashlib.sha224()
# 输入待加密字符串 - 明文 [plaintext]
plaintext = input('输入待加密字符串：')
# 转换成二进制数据
obj.update(plaintext.encode('utf-8'))
# 获得密文 [cryptotext]
cryptotext = obj.hexdigest()
# 打印密文及密文长度
print('加密之后的字符串：{}'.format(cryptotext))
print('sha224加密字符长度：{}'.format(len(cryptotext)))
  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 无论明文多长，采用sha224加密之后的密文都是56位定长字符串；明文细微变化，密文天壤之别

（三）Java里实现MD5、SHA256、SHA512、SHA1和SHA224加密

1、采用md5加密算法

（1）采用DigestUtils类
  • 在net.hw.common包里创建Encrypt类
    在这里插入图片描述
package net.hw.common;

import org.springframework.util.DigestUtils;

import java.util.Scanner;

/**
 * 功能：MD5加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class Encrypt {
    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用MD5加密算法进行加密
        cryptoText = DigestUtils.md5DigestAsHex(plainText.getBytes());

        // 输出MD5加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("md5加密字符串长度：" + cryptoText.length());
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 有点遗憾，DigestUtils类没有提供SHA系列的加密算法

  • 无论明文多长，采用md5加密之后的密文都是32位定长字符串；明文细微变化，密文天壤之别

（2）采用MessageDigest类
  • 在net.hw.common包里创建EncryptMD5类
    在这里插入图片描述
package net.hw.common;

import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Scanner;

/**
 * 功能：MD5加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class EncryptMD5 {

    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用SHA256加密算法进行加密
        cryptoText = sha256DigestAsHex(plainText);

        // 输出SHA256加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("md5加密字符串长度：" + cryptoText.length());
    }

    /**
     * md5加密
     *
     * @param text 待加密的字符串
     * @return 加密后的字符串
     */
    public static String sha256DigestAsHex(String text) {
        MessageDigest md;
        String encodedText = "";
        try {
            md = MessageDigest.getInstance("MD5");
            md.update(text.getBytes(StandardCharsets.UTF_8));
            encodedText = byte2Hex(md.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return encodedText;
    }

    /**
     * md5 加密 将byte转为16进制
     *
     * @param bytes 字节数组
     * @return 加密后的字符串
     */
    private static String byte2Hex(byte[] bytes) {
        StringBuilder builder = new StringBuilder();
        String temp;
        for (byte aByte : bytes) {
            temp = Integer.toHexString(aByte & 0xFF);
            if (temp.length() == 1) {
                // 得到一位的进行补0操作
                builder.append("0");
            }
            builder.append(temp);
        }
        return builder.toString();
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 无论明文多长，采用md5加密之后的密文都是32位定长字符串；明文细微变化，密文天壤之别

2、采用sha256加密算法

  • 在net.hw.common包里创建EncryptSHA256类
    在这里插入图片描述
package net.hw.common;

import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Scanner;

/**
 * 功能：SHA256加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class EncryptSHA256 {

    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用SHA256加密算法进行加密
        cryptoText = sha256DigestAsHex(plainText);

        // 输出SHA256加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("sha256加密字符串长度：" + cryptoText.length());
    }

    /**
     * sha256加密
     *
     * @param text 要加密的字符串
     * @return 加密后的字符串
     */
    public static String sha256DigestAsHex(String text) {
        MessageDigest md;
        String encodedText = "";
        try {
            md = MessageDigest.getInstance("SHA-256");
            md.update(text.getBytes(StandardCharsets.UTF_8));
            encodedText = byte2Hex(md.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return encodedText;
    }

    /**
     * sha256加密 将byte转为16进制
     *
     * @param bytes 字节码
     * @return 加密后的字符串
     */
    private static String byte2Hex(byte[] bytes) {
        StringBuilder builder = new StringBuilder();
        String temp;
        for (byte aByte : bytes) {
            temp = Integer.toHexString(aByte & 0xFF);
            if (temp.length() == 1) {
                // 得到一位的进行补0操作
                builder.append("0");
            }
            builder.append(temp);
        }
        return builder.toString();
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 无论明文多长，采用sha256加密之后的密文都是64位定长字符串；明文细微变化，密文天壤之别

3、采用sha512加密算法

  • 在net.hw.common包里创建EncryptSHA512类
    在这里插入图片描述
package net.hw.common;

import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Scanner;

/**
 * 功能：SHA512加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class EncryptSHA512 {

    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用SHA512加密算法进行加密
        cryptoText = sha512DigestAsHex(plainText);

        // 输出SHA512加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("sha512加密字符串长度：" + cryptoText.length());
    }

    /**
     * sha512加密
     *
     * @param text 待加密的字符串
     * @return 加密后的字符串
     */
    public static String sha512DigestAsHex(String text) {
        MessageDigest md;
        String encodedText = "";
        try {
            md = MessageDigest.getInstance("SHA-512");
            md.update(text.getBytes(StandardCharsets.UTF_8));
            encodedText = byte2Hex(md.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return encodedText;
    }

    /**
     * sha512加密 将byte转为16进制
     *
     * @param bytes 字节数组
     * @return 加密后的字符串
     */
    private static String byte2Hex(byte[] bytes) {
        StringBuilder builder = new StringBuilder();
        String temp;
        for (byte aByte : bytes) {
            temp = Integer.toHexString(aByte & 0xFF);
            if (temp.length() == 1) {
                // 得到一位的进行补0操作
                builder.append("0");
            }
            builder.append(temp);
        }
        return builder.toString();
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 无论明文多长，采用sha512加密之后的密文都是128位定长字符串；明文细微变化，密文天壤之别

4、采用sha1加密算法

  • 在net.hw.common包里创建EncryptSHA1类
    在这里插入图片描述
package net.hw.common;

import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Scanner;

/**
 * 功能：SHA1加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class EncryptSHA1 {

    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用SHA256加密算法进行加密
        cryptoText = sha256DigestAsHex(plainText);

        // 输出SHA256加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("sha1加密字符串长度：" + cryptoText.length());
    }

    /**
     * sha1加密
     *
     * @param text 待加密的字符串
     * @return 加密后的字符串
     */
    public static String sha256DigestAsHex(String text) {
        MessageDigest md;
        String encodedText = "";
        try {
            md = MessageDigest.getInstance("SHA-1");
            md.update(text.getBytes(StandardCharsets.UTF_8));
            encodedText = byte2Hex(md.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return encodedText;
    }

    /**
     * sha1 加密 将byte转为16进制
     *
     * @param bytes 字节数组
     * @return 加密后的字符串
     */
    private static String byte2Hex(byte[] bytes) {
        StringBuilder builder = new StringBuilder();
        String temp;
        for (byte aByte : bytes) {
            temp = Integer.toHexString(aByte & 0xFF);
            if (temp.length() == 1) {
                // 得到一位的进行补0操作
                builder.append("0");
            }
            builder.append(temp);
        }
        return builder.toString();
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 无论明文多长，采用sha1加密之后的密文都是40位定长字符串；明文细微变化，密文天壤之别

5、采用sha224加密算法

  • 在net.hw.common包里创建EncryptSHA224类
    在这里插入图片描述
package net.hw.common;

import java.nio.charset.StandardCharsets;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Scanner;

/**
 * 功能：SHA224加密
 * 作者：xizaizhao
 * 日期：2022年12月01日
 */
public class EncryptSHA224 {

    public static void main(String[] args) {
        // 声明变量
        String plainText, cryptoText;
        Scanner sc = new Scanner(System.in);

        // 输入待加密字符串
        System.out.print("输入待加密字符串：");
        plainText = sc.nextLine();

        // 采用SHA224加密算法进行加密
        cryptoText = sha224DigestAsHex(plainText);

        // 输出SHA224加密字符串
        System.out.println("加密之后的字符串：" + cryptoText);
        System.out.println("sha224加密字符串长度：" + cryptoText.length());
    }

    /**
     * sha224加密
     *
     * @param text 待加密的字符串
     * @return 加密后的字符串
     */
    public static String sha224DigestAsHex(String text) {
        MessageDigest md;
        String encodedText = "";
        try {
            md = MessageDigest.getInstance("SHA-224");
            md.update(text.getBytes(StandardCharsets.UTF_8));
            encodedText = byte2Hex(md.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return encodedText;
    }

    /**
     * sha224加密 将byte转为16进制
     *
     * @param bytes 字节数组
     * @return 加密后的字符串
     */
    private static String byte2Hex(byte[] bytes) {
        StringBuilder builder = new StringBuilder();
        String temp;
        for (byte aByte : bytes) {
            temp = Integer.toHexString(aByte & 0xFF);
            if (temp.length() == 1) {
                // 得到一位的进行补0操作
                builder.append("0");
            }
            builder.append(temp);
        }
        return builder.toString();
    }
}

  • 运行程序，查看结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 无论明文多长，采用sha224加密之后的密文都是56位定长字符串；明文细微变化，密文天壤之别

xizaizhao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一天总结之后端登录功能的实现
qq_45889574的博客
01-13 2500
第一天总结之后端登录功能的实现
登录功能的实现（包括前后端）
热门推荐
_Kiwi_berry的博客
08-10 2万+
登录功能对于前端刚入门不久的我来说较为困难，花了很久查阅了许多资料。代码部分涉及的技术栈和细节也很多。过了一段时间来看，发现对自己写的代码竟然感觉十分陌生，故想写篇博客，对整个过程进行梳理。方便自己重看代码，同时也希望能帮到在实现这一功能受阻的程序猿们o(￣▽￣)ブ前端验证用户输入是否符合规范前端调用后端登录接口，向后端发起登录请求后端收到请求，查验数据库种是否有相应账号以及密码是否正确验证通过后，将成功信息连同token一起发送给前端。...................................
注册后端功能的实现和登录功能-简单理解步骤3
m0_61464384的博客
04-02 5284
前面后台服务已经搭建好了 同时要安装mongoose blueimp-md5,body-parser ------------------------------------------------------------- 一：后端 接下来就要写curd数据库里面的内容了------前台给你一个数据 如果你的后台没有就要放到数据库里面，同时告诉你注册成功了 1：启动mongdb，然后在curd里面创建一个数据库 （上官网搜索mongoose直接定义模型 粘贴复制）改名字改成b0352stu后台数据
【计算机毕设】后台登录功能实现
Hugh_marin的博客
10-07 2333
本系列以黑马项目：瑞吉外卖作为例子，详细描述 毕设项目设计与实现 的流程~上至项目，下至代码，能从网上copy的尽量从网上copy，再在他们的基础上修改、拓展，不断深入底层，这样循环往复才会获得更多的正反馈，更有学习的成就感~gitee源项目链接黑马-瑞吉外卖大家务必动手操作一遍，反正毕设的时候也得做的，熟练点可以避很多坑~
后端管理系统开发（一）：登录篇
chixiongye3856的博客
07-22 526
作为后端程序员，想写一个数据展示的系统，主要用于数据查询、数据展示，当然也有登录功能了，有没有比较快的方式呢，于此，Vue-Admin-Pro便产生了，基于iView-Admin，进行简化，为后端程序员量身打造的极简后端管理系统。 项目地址：vue-admin-pro 系列文章1：后端管理系统...
12.用户登录功能-后端开发.rar
最新发布
04-28
01.项目功能介绍 02.Netty 介绍与相关基础知识 03.基于web.socket简单聊天DEM实现-Netty服务器类 ...12.用户登录功能-后端开发 25.添加好友-接受好友请求后端开发 26.添加好友-拒绝添加好友后端开发 27.通信录功能实现
.NetCore快速开发后台框架 v1.0
10-03
.NetCore快速开发后台框架 LdCms.Admin快速开发后台框架，由蓝点科技自主研发的一套快速开发后台基础框架、内置后台基础常用功能
.NetCore快速开发后台框架源代码
03-18
.NetCore快速开发后台框架 LdCms.Admin快速开发后台框架，由蓝点科技自主研发的一套快速开发后台基础框架、内置后台基础常用功能
.NetCore快速开发后台框架
03-01
.NetCore快速开发后台框架。LdCms.Admin快速开发后台框架，是一套快速开发后台基础框架、内置后台基础常用功能。
javacat极简后台开发框架.exe
10-12
现在的快速开发脚手架铺天盖地，功能越来越复杂，上手难度越来越高，基本上都是功能的累积，真的能在开发效率上有所改进的少之又少， 但是很多企业其实需要这样的开发框架，代码简洁，但是基本的菜单管理，角色管理...
javaWeb前后台交互（只有登录功能）
07-06
javaWeb前后台交互，里面只有登录一个功能，主要是MVC模式下前后台连接。针对刚刚学习完JSP+Mysql+Servlet，想连接前后台人群。大神请绕道。
前端登录方案？这一篇就够了
小生方勤
07-08 734
登录是每个网站中都经常用到的一个功能，在页面上我们输入账号密码，敲一下回车键，就登录了，但这背后的登录原理你是否清楚呢？今天我们就来介绍几种常用的登录方式。Cookie + Sessio...
简单的登录功能--后端实现
qq_58545721的博客
03-06 100
实现简单的登录功能 引用到的依赖为sa-token的内容 <!-- Sa-Token 权限认证，在线文档：https://sa-token.cc --> <dependency> <groupId>cn.dev33</groupId> <artifactId>sa-token-spring-boot-starter</artifactId> <version>1.34.0</versio
云e办（后端）——登录功能（JWT与spring security）
xiangqian0721的博客
10-31 630
*** 当未登录或者token失效时访问接口时，自定义的返回结果*RespBean bean = RespBean . error("权限不足，请联系管理员！");} }
项目基本登录功能
xyx_312的博客
07-03 305
登录基本流程代码
从4开始，在后端系统中增加用户注册和登录功能
做兴趣使然的Hero
07-21 706
本次我们接着上四篇文章进行讲解《从0开始，用Go语言搭建一个简单的后端业务系统》、《从1开始，扩展Go语言后端业务系统的RPC功能》、《从2开始，在Go语言后端业务系统中引入缓存》以及《从3开始，在业务系统中增加分页功能》，这次是系统中比较核心的功能——用户登录&注册，这个功能其实本应该是最先实现的，但是由于不同因素的影响，放到了本次进行实现，不过也无伤大雅，后期我们都会不断的进行查漏补缺和优化来使我们的项目总体上更加优雅，话不多说，我们开始正文：（1）注册流程 （2）登录流程 user结构： dao层代
4. 后台登录功能开发
Cy1imple的博客
12-16 233
后台登录功能开发
外卖项目后端登陆功能的开发实现
qq_40891050的博客
12-18 158
登录功能
后端如何实现登陆功能
98猛虎的博客
06-18 4514
登陆功能是一个非常常见的功能。它有一套统一的规范流程，我们只需要遵循这一套流程就可以了。 实现登陆我们就必须使用到 cookie, 使用 cookie 来保存用户的信息。在请求某个域的时候，http 会自动将这个域的 cookie 放到请求头当中。所以我们只需要在用户成功后，将必要的信息通过设置 Set-Cookie 这个响应头返回给客户端。浏览器会自动将该头的信息存储到当前域名下的 cookie...
后台管理系统登录开发人员职责
04-26
后台管理系统登录开发人员的职责通常包括以下几个方面： 1. 设计登录页面和相关功能：开发人员需要根据项目需求，设计出...总的来说，后台管理系统登录开发人员的职责是确保系统登录功能的安全性、稳定性和可用性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值