项目综合实训

已于 2022-12-17 20:45:28 修改
阅读量208 收藏 3
点赞数 1
文章标签： 数据库
于 2022-12-17 20:35:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59687371/article/details/128343864
版权

1.软件开发流程

2.瑞吉外卖项目概述 

 3.开发环境搭建

一、数据库环境搭建

（一）启动navicat

        启动navicat，创建mysql连接

        

（二）数据库设计

  • 数据库设计：概念设计（E-R图）、逻辑设计、物理设计

1、概念设计

  • 概念设计是数据库设计的核心环节。通过对用户需求进行综合、归纳与抽象，形成一个独立于具体DBMS的概念模型。

        （1）明确建模目标（模型覆盖范围）

        （2）定义实体集（自底向上标识和定义实体集）

        （3）定义联系（实体间关联关系）

        （4）建立信息模型（构造ER模型）

        （5）确定实体集属性（属性描述一个实体集的特征或性质）

        （6）对信息模型进行集成与优化（检查和消除命名不一致、结构不一致等）

  • 概念设计目前采用最广泛的是ER建模方法。将现实世界抽象为具有属性的实体及联系。1976年，Peter.Chen提出Ｅ-Ｒ模型（Entity- Relationship Model），即实体联系模型，用Ｅ-Ｒ图来描述数据库的概念模型。
  • 观点：世界是由一组称作实体的基本对象和这些对象之间的联系构成的。
  • 实体间的联系有三类：一对一联系（1：1）、一对多联系（1：n )、多对多联系（m：n）
  • E-R图示例（部分）

        

  • 思维导图直观呈现

        

2、逻辑设计 

 将概念模型（如ER图）转化为DBMS支持的数据模型（如关系模型），并对其进行优化

 （1）用户信息表

字段名类型宽度小数位数是否主键
idbigint200是
namevarchar50否
phonevarchar100否
sexvarchar2否
id_numbervarchar18否
avatarvarchar500否
statusint110否

（三）创建数据库

创建项目需要的数据库 - reggie，字符集采用utf8mb4

 单击【确定】按钮

 打开reggie数据库

 （四）导入数据库脚本

  • 导入数据库脚本：db_reggie.sql

         链接：https://pan.baidu.com/s/1l5ZhlNsiuowYOiFCQnOT0w 提取码：jnw5

        

  • 单击【开始】按钮

 （五）查看数据库中的表

  • 数据库reggie包含11张表

      

 二、Maven项目搭建

两种常用项目构建工具

 （一）创建Maven项目

        创建Maven项目，配置项目信息

        

（二）检查检查项目编码、maven仓库配置以及jdk配置

   

        创建完项目之后，我们应该检查项目编码、maven仓库配置以及jdk配置

        

  • 安装maven软件

         

  • 配置maven的环境变量

        

  • 检验maven环境变量是否配置成功

      

 在maven配置文件添加阿里镜像源

 检查IntelliJ IDEA里maven仓库的配置

  • 检查jdk配置情况

        

 

 （三）添加项目相关依赖和插件

        在pom.xml文件里添加相关依赖和构建插件

        

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.4</version>
        <relativePath/>
    </parent>
    <groupId>net.hw</groupId>
    <artifactId>ReggieTakeOut</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <java.version>11</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba.fastjson2</groupId>
            <artifactId>fastjson2</artifactId>
            <version>2.0.14</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.4</version>
            </plugin>
        </plugins>
    </build>
</project>

 （四）创建应用属性文件

  • 在resources目录下创建应用属性文件 - application.yml

#配置服务器
server:
  port: 8080  #端口号

#配置Spring框架
spring:
  application: ReggiedTakeOut #应用名称
  datasource: #数据源
    druid: #druid数据源
      driver-class-name: com.mysql.cj.jdbc.Driver #数据库驱动程序
      url: jdbc:mysql://localhost:3306/reggie #数据源地址
      username: root #用户名
      password: ****** #密码

#配置mybatis-plus插件
mybatis-plus:
  configuration: #配置
    map-underscore-to-camel-case: true #将字段名映射成实体属性时，转换下划线，按照驼峰命名法映射
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #日志实现类
  global-config: #全局配置
    db-config: #数据库配置
      id-type: auto #数据库ID自增
  • mybatis-plus的IdType枚举类型 - 定义生成ID的类型

        

枚举值

作用

AUTO

数据库ID自增

INPUT

用户输入ID

ID_WORKER

全局唯一ID，Long类型主键

ID_WORKER_STR

字符串全局唯一ID

UUID

全局唯一ID，UUID类型主键

NONE

未设置主键类型

（五）安装lombok插件

在设置对话框里找到plugins，搜索lombok，单击绿色的Install按钮

（六）创建启动主类 

创建net.lk包，然后在包里创建ReggieTakeOutApplication类

package net.lk;

import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@Slf4j
@SpringBootApplication
public class ReggieTakeOutApplication {
    public static void main(String[] args) {
        SpringApplication.run(ReggieTakeOutApplication.class, args);
        log.info("瑞吉外卖项目启动成功~");
    }
}
  • log对象的四个方法

        

方法名

作用

info()

输出普通信息

debug()

输出调试信息

error()

输出错误信息

warn()

输出警告信息

        运行程序，查看效果

        

 （七）拷贝静态资源和模板页面

  • 在前端资源里找到backend与frontend目录

  • 将这两个目录拷贝到resources目录

        

  • 测试能否访问模板页面 - 后端的首页 - index.html

 启动应用，在浏览器里访问http://localhost:8080/backend/index.html

 （八）创建MVC配置类，做静态资源映射

  • 创建config子包，在包里创建`WebMvcConfig`类

 添加方法，做静态资源映射

 在方法里，添加两个资源映射：映射到前端和后端的静态资源

 重启应用，可以看到调试信息 - 进行静态资源映射……

  • 测试能否访问后端的首页 - /backend/index.html

 

  • 到此为止，项目基础环境就搭建好了，后面我们会在这个项目框架里去实现用户需求的具体功能。

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键进入浏览器的调试模式

  • 后面我们会在雇员控制器里编写相应的处理函数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）

序号

实体属性名

关系字段名

1

id

id

2

name

name

3

username

username

4

password

password

5

phone

phone

6

sex

sex

7

idNumber

id_number

8

status

status

9

createTime

create_time

10

updateTime

update_time

11

createUser

create_user

12

updateUser

update_user

  • 实体属性名采用驼峰命名法，关系字段名采用xml命名规范

  • 如果关系字段名由多个单词用下划线连接，那么实体属性名与关系字段名就不一致，需要进行一个转换，但是这个转换工作不需要手工去操作，直接在应用属性文件（application.yml）里进行设置。

  • 创建`entity`子包

  • 在net.lk.entity包里创建雇员实体类 - Employee

  

package net.lk.entity;

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

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


@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
}

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

  • 创建mapper子包

  • 在net.lk.mapper包里创建雇员映射器接口 - EmployeeMapper

package net.lk.mapper;

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


@Mapper // 交给Spring容器来管理
public interface EmployeeMapper extends BaseMapper<Employee> {

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

（三）创建雇员服务

1、创建雇员服务接口

  • 创建service子包

  • 在net.lk.service包里创建雇员服务接口 - EmployeeService

  • 采用mybatis-plus插件，代码及其简单，只需要继承IService<Employee>接口
package net.lk.service;

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


public interface EmployeeService extends IService<Employee> {
    
}

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

  • 在net.hw.service包里创建impl子包

  • 在net.lk.service.impl子包里创建雇员服务接口实现类 - EmployeeServiceImpl
package net.lk.service.impl;

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


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

（四）创建返回结果类

  • 服务器端所有处理方法返回结果都封装到这个通用类里
  • 创建common子包

  • 在net.lk.common包里创建返回结果类 - R

package net.lk.common;

import lombok.Data;

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

@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.lk.controller;

import lombok.extern.slf4j.Slf4j;
import net.lk.common.R;
import net.lk.entity.Employee;
import net.lk.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;

@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）来登录，单击【登录】按钮

  • 查看断点调试信息

 单击【Step Over】按钮3次，判断用户名是否错误

 

 单击【Step Over】按钮，判断密码是否错误

 单击【Step Over】按钮，判断雇员状态是否已禁用

 单击【Step Over】按钮3次，返回登录成功结果

 此时，查看登录页面，登录成功，会本地存储用户信息

四、哈希加密

（一）加解密基础

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

1、采用md5加密算法

(1) 采用DigestUtils类

  • 在net.lk.common包里创建Encrypt类

package net.lk.common;

import org.springframework.util.DigestUtils;

import java.util.Scanner;

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());
    }
}

(2）采用MessageDigest类

  • 在net.lk.common包里创建EncryptMD5类

 

package net.lk.common;

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

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.lk.common包里创建EncryptSHA256类

package net.lk.common;

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

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.lk.common包里创建EncryptSHA512类

package net.lk.common;

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

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.lk.common包里创建EncryptSHA1类

package net.lk.common;

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

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.lk.common包里创建EncryptSHA224类

package net.lk.common;

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

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位定长字符串；明文细微变化，密文天壤之别

5. 后台退出功能开发

一、需求分析

员工登录成功后，页面跳转到后台系统首页面(backend/index.html)，此时会显示当前登录用户的姓名：管理员

如果员工需要退出系统，直接点击登录用户名右侧的

按钮，即可退出系统，退出系统后页面应跳转回登录页面

 此时单击

按钮，系统会报404错误，因为我们在雇员控制器里尚未编写对应的退出处理方法

 

二、代码开发

（一）代码分析

  • 我们看看后台首页 - /backend/index.html

  • 退出按钮绑定的单击事件处理函数logout()

  

 在脚本文件/backend/api/login.js里查看logoutApi()函数

  • 'url': '/employee/logout'与'method': 'post'告诉我们应该在雇员控制器EmployeeController里定义一个logout()方法，并且添加请求映射注解@PostMapping("/logout")，该方法里做两件事：清除会话里保存的用户信息，返回成功结果

（二）编写代码

  • 打开雇员控制器EmployeeController
  • 创建logout()方法，清除会话里的雇员信息，返回成功结果

  • 查看雇员控制器源代码
package net.lk.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import lombok.extern.slf4j.Slf4j;
import net.lk.common.R;
import net.lk.entity.Employee;
import net.lk.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.DigestUtils;
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;
import javax.servlet.http.HttpSession;

/**
 * 功能：雇员控制器类
 * 作者：华卫
 * 日期：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) {
        // 1. 将页面提交的密码password进行md5加密处理
        String password = employee.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());

        // 2. 根据页面提交的用户名username查询数据库
        LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>(); // 查询包装器
        queryWrapper.eq(Employee::getUsername, employee.getUsername()); // 等值查询
        Employee emp = employeeService.getOne(queryWrapper); // 按查询包装器进行查询

        // 3. 如果没有查询到则返回登录失败结果
        if (emp == null) {
            return R.error("登录失败[用户名错误]");
        }

        // 4. 密码比对，如果不一致则返回登录失败结果
        if (! emp.getPassword().equals(password)) {
            return R.error("登录失败[密码错误]");
        }

        // 5. 查看员工状态，如果为已禁用状态，则返回员工已禁用结果
        if (emp.getStatus() == 0) {
            return R.error("登录失败[账号已禁用]");
        }

        // 6. 登录成功，将员工id存入Session并返回登录成功结果
        HttpSession session = request.getSession(); // 通过请求对象获取会话
        session.setAttribute("employee", emp.getId()); // 将雇员id保存到会话里
        return R.success(emp); // 返回登录成功结果
    }

    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request) {
        // 清除雇员信息
        request.getSession().removeAttribute("employee");
        // 返回成功结果
        return R.success("退出成功");
    }
}

三、功能测试

  • 重启应用，访问登录页面，成功登录之后，跳转到后台首页，单击

    按钮，成功退出，返回后台登录页面

              登录退出

ukng
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实战项目-ego商城
qq_41961383的博客
07-13 941
vue实战项目-ego商城
Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性
热门推荐
寻思旧京洛
08-21 1万+
1. 给页面表单对象添加验证属性 由于我的项目使用的el-form,则给el-form添加属性 :rules="registerRules" ref="registerForm" 为el-form-item每个表单子项添加 prop 属性, 例如 <el-form-item prop="username"> <el-input name="username"...
第一次综合项目实训
banmenjin6636的博客
12-13 167
人员名单：16012110 王明 16012120 李少宇 领航员：王明 驾驶员：李少宇 项目代码：https://gitee.com/axsj/10wm_20lsy_sxy/blob/master/java 项目名称：第一次综合项目实训 项目背景： 　　阿超的课都是下午两点钟，这时班上不少的同学都昏昏欲睡，为了让大家兴奋起来，阿超让同学玩一个叫“黄金点”的游戏 项目要...
后台登录功能开发
luog007的博客
12-20 211
瑞吉外卖管理系统，后台登录功能开发
vue 验证用户名不能为空_vue.js+element UI，输入框的rules validator中检测用户名是否已经被使用，没有效果？...
weixin_34708196的博客
12-29 1465
userRules: {username: [{ required: true, message: '请输入新的用户名称', trigger: 'blur' },{ min: 1, max: 20, message: '用户名的长度不得超过20个字符', trigger: 'blur' },{ validator: validateName, trigger: 'blur' }],password...
项目实训（一）——项目综述
Fancy145的博客
03-20 343
项目实训综述
《企业项目综合实战》综合实训（一）
security.blog.cndn.net
03-11 1430
《企业项目综合实战》综合实训（一） 课题 组号：小组成员：_____________________ 背景介绍： 模拟某企业办公局域网访问互联网WEB服务器上的资源，并实现全网互联。在局域网中划分VLAN，客户端PC能够对全网的交换机和路由器进行telnet远程控制，并禁止192.168.1.0/24访问服务器的WEB服务。 地址规划如下图，192.168.1.0/24的网关地址为192.168....
安卓实训项目
07-06
【安卓实训项目】是一个针对初学者和进阶者设计的实践型项目，旨在帮助开发者熟悉Android应用程序的开发流程，提升其在实际应用中的技能。该项目包含了一系列常见的功能模块，覆盖了移动应用开发的基础与核心部分，...
软件项目综合实训方案.doc
10-11
软件项目综合实训方案是针对计算机应用技术专业大三学生的实践教学活动，旨在深化理论知识与实际操作的结合。实训以图书馆借阅管理系统为案例，要求学生在完成VB.NET程序设计和SQL SERVER 2005数据库应用技术学习的...
广西科技大学启迪数字学院2018级项目综合实训三项目方案(H5全栈前端开发方向）--昆山杰普软件科技有限公司1
08-03
广西科技大学启迪数字学院2018级项目综合实训三是一个针对H5全栈前端开发的实践教学方案，由昆山杰普软件科技有限公司提供。该实训旨在提升学生的项目实践能力和职业能力，特别是在H5全栈开发领域的技能。 1. **...
大数据综合项目实训实践课程教学大纲（质量标准）共5页.p
11-02
【大数据综合项目实训实践课程教学大纲（质量标准）】是一份详细指导大数据相关课程实践教学的文档，旨在为学生提供全面、系统的大数据处理技能训练。这份大纲涵盖了五页内容，通常包括课程目标、课程内容、教学方法...
Java综合实训项目指导书
11-20
### Java综合实训项目知识点 #### 实训大纲与目标 - **实训目的与基本要求**： - 综合实训作为连接理论与实践的关键环节，旨在让学生通过实际项目的操作加深对专业知识的理解与应用。 - 通过参与实训项目，学生...
java笔记 mybatis 基本增删改
qq_63095129的博客
08-05 724
在pom.xml文件中添加依赖。
【MySQL】慢sql优化全流程解析
k123456kah的博客
08-04 1094
explain 是 MySQL 提供的一种用于分析和调试 SQL 查询的工具。 通过使用 explain，可以了解 MySQL 在执行查询时采用的具体执行计划，包括访问数据表的方式、使用的索引、连接表的顺序等信息。这些信息对于优化查询性能至关重要。
Python爬虫与MongoDB的完美结合
weixin_52392194的博客
08-03 812
我们掌握了在Windows和Linux系统下安装MongoDB，设计适合爬虫存储数据的写入规范，并通过实际爬虫示例展示了如何将爬取到的数据存储到MongoDB中。此外，还进行了MongoDB性能优化，提高了数据存储和查询的效率。
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1311
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
04、MySQL-DCL（数据控制语言）
nibabaoo的博客
08-06 268
例：创建用户zhangsan 只能够在当前主机localhost访问 密码123456。例：创建用户xiaoming 可以在任意主机访问该数据库 密码123456。例：修改用户zhangsan的密码为654321。例：删除用户xiaoming。
Linux安全与高级应用（四）深入探索MySQL数据库：安装、管理与安全实践
最新发布
洛秋的博客
08-07 1062
Linux：作为操作系统，提供稳定的运行环境。Apache：作为Web服务器，处理HTTP请求。MySQL：作为数据库管理系统，存储和管理数据。：作为脚本语言，生成动态网页。LAMP平台的优势在于其成本低廉、可定制性强、易于开发、方便易用且安全稳定。这使得LAMP成为许多企业和开发者的首选平台。通过以上步骤，我们完成了LAMP平台的部署及其主要组件的配置和测试。LAMP平台的搭建不仅为Web开发提供了一个强大的环境，同时也展现了其在成本和效率上的优势。
用 Bytebase 实现批量、多环境、多租户数据库的丝滑变更
Bytebase的博客
08-02 1162
现在，你已学会如何使用部署配置和数据库分组在 Bytebase 中运行批量更改。动手试试吧！💡 更多资讯，请关注 Bytebase 公号：Bytebase。
软件测试项目综合实训黑盒测试等价类划分法csdn答案
08-09
软件测试项目综合实训黑盒测试等价类划分法CSND答案如下： 在软件测试项目综合实训中，黑盒测试是一种重要的测试方法，是通过测试输入和预期输出之间的关系来对软件进行测试。等价类划分法是黑盒测试中常用的一种...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值