目录
1.创建一个名为EmployeeService的设备服务接口,并定义设备管理的基本操作,并在接口中添加自定义的查询方法
2.创建一个名为EmployeeServiceImpl的设备服务实现类,实现EmployeeService接口中的方法,并注入EmployeeRepository实例
1.运行环境
IDE - IDEA
Spring Boot 3+
Spring Framework 6+
Maven
Java 17
Spring Data JPA ( Hibernate)
Thymelea
2.功能概述
- 设备模型:定义设备的属性,例如设备类型、设备名称、初始状态等。至少应该有3个以上的属性
- 添加设备:允许用户输入设备信息,并将设备信息添加到数据库或持久化存储中
- 删除设备:根据设备ID或其他唯一标识符,删除指定的设备记录。
- 添加设备:允许用户修改设备的属性信息,并更新到数据库或持久化存储中。、
- 查找设备:提供自定义查询条件(例如设备类型、设备名称等),根据查询条件检索设备信息,并显示查询结果。
- 分页:将设备信息分页显示,以便用户能够浏览和管理大量设备信息。用户可以指定每页显示的设备数量,并根据需要切换到不同的页码。
- 排序:允许用户按照指定的字段对设备进行排序,例如按设备名称、设备类型等进行升序或降序排序。
3.技术类型
Springboot +JPA+thymeleaf+MySQL+ BootStrap
4.实现过程以及代码
1.创建项目
2. 选择依赖
对应的maven依赖如下(在项目文件pom.xml)中查看
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
3.项目结构
4.配置数据库
添加到项目路径/src/main/resources/application.properties中,用户名,密码照自己的更改
spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useSSL=false&serverTimezone=UTC&useLegacyDatetimeCode=false
spring.datasource.username=root
spring.datasource.password=123456
spring.jpa.properties.hibernate.dialect =org.hibernate.dialect.MySQLDialect
spring.jpa.hibernate.ddl-auto = update
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type=TRACE
5. Model层
创建一个名为Role的角色实体类,并使用JPA注解进行数据映射
代码如下:
package com.example.finalhomework.model;
import jakarta.persistence.*;
import lombok.Data;
@Data
@Entity
@Table(name = "roles")
public class Role {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@Column(name = "role_number")
private String roleNumber;
@Column(name = "role_nicknames")
private String roleNicknames;
@Column(name = "character_rating")
private String characterRating;
@Column(name = "weapon_type")
private String weaponType;
@Column(name = "role_attributes")
private String roleAttributes;
}
6.Repository层
创建一个继承自JpaRepository的EmployeeRepository接口,用于进行设备数据的CRUD操作。你可以在接口中添加自定义的查询方法,以便根据设备类型、设备名称等查询设备
代码如下:
package com.example.finalhomework.repository;
import com.example.finalhomework.model.Role;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface EmployeeRepository extends JpaRepository<Role, Long>{
List<Role> findByRoleNumber(String keyword);
}
7.Service层
1.创建一个名为EmployeeService的设备服务接口,并定义设备管理的基本操作,并在接口中添加自定义的查询方法
代码如下:
package com.example.finalhomework.service;
import java.util.List;
import com.example.finalhomework.model.Role;
import org.springframework.data.domain.Page;
public interface EmployeeService {
//获取所有的员工
List <Role> getAllEmployees();
//新增/更新一个员工
void saveEmployee(Role role);
//获取指定ID的员工
Role getEmployeeById(long id);
//删除指定ID的员工
void deleteEmployeeById(long id);
//分页
Page<Role> findPaginated(int pageNo, int pageSize, String sortField, String sortDirection);
List<Role> searchEmployees(String keyword);
}
2.创建一个名为EmployeeServiceImpl的设备服务实现类,实现EmployeeService接口中的方法,并注入EmployeeRepository实例
代码如下:
package com.example.finalhomework.service;
import java.util.List;
import java.util.Optional;
import com.example.finalhomework.model.Role;
import com.example.finalhomework.repository.EmployeeRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
@Service
public class EmployeeServiceImpl implements EmployeeService {
@Autowired
private EmployeeRepository employeeRepository;
@Override
public List <Role> getAllEmployees() {
return employeeRepository.findAll();
}
@Override
public void saveEmployee(Role role) {
this.employeeRepository.save(role);
}
@Override
public Role getEmployeeById(long id) {
//调用数据访问层查找指定ID的角色,返回Optional对象
Optional <Role> optional = employeeRepository.findById(id);
Role role = null;
//如果存在指定id的角色
if (optional.isPresent()) {
//从Optional对象中获取角色对象
role = optional.get();
} else {
//否则抛出运行时异常
throw new RuntimeException(" 找不到员工ID :: " + id);
}
return role;
}
@Override
public void deleteEmployeeById(long id) {
this.employeeRepository.deleteById(id);
}
@Override
public Page<Role> findPaginated(int pageNo, int pageSize, String sortField, String sortDirection) {
//设置排序参数,升序ASC/降序DESC?
Sort sort = sortDirection.equalsIgnoreCase(Sort.Direction.ASC.name())
? Sort.by(sortField).ascending()
: Sort.by(sortField).descending();
//根据页号/每页记录数/排序依据返回某指定页面数据。
Pageable pageable = PageRequest.of(pageNo - 1, pageSize, sort);
return this.employeeRepository.findAll(pageable);
}
@Override
public List<Role> searchEmployees(String keyword) {
// 在数据库中执行根据关键字查询的操作,并返回结果列表
return employeeRepository.findByRoleNumber(keyword); // 假设按照的RoleNumber查询
}
}
8.Controller层
创建一个名为EmployeeController的控制器,用于处理设备管理相关的请求,并使用Thymeleaf模板引擎渲染视图。在控制器中注入EmployeeService实例,并实现对应的请求处理方法
代码如下:
package com.example.finalhomework.controller;
import com.example.finalhomework.model.Role;
import com.example.finalhomework.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@GetMapping("/")
public String viewHomePage(Model model) {
return findPaginated(1, "roleNumber", "asc", model);
}
@GetMapping("/showNewEmployeeForm")
public String showNewEmployeeForm(Model model) {
// 创建模型属性来绑定表单数据
Role role = new Role();
model.addAttribute("role", role);
return "new_employee";
}
@PostMapping("/saveEmployee")
public String saveEmployee(@ModelAttribute("Role") Role role) {
// save employee to database
employeeService.saveEmployee(role);
return "redirect:/";
}
@GetMapping("/showFormForUpdate/{id}")
public String showFormForUpdate(@PathVariable(value = "id") long id, Model model) {
// 从服务中获取角色
Role role = employeeService.getEmployeeById(id);
//将employee设置为模型属性以预填充表单
model.addAttribute("role", role);
return "update_employee";
}
@GetMapping("/deleteEmployee/{id}")
public String deleteEmployee(@PathVariable(value = "id") long id) {
// 调用delete employee方法
this.employeeService.deleteEmployeeById(id);
return "redirect:/";
}
@GetMapping("/search")
public String searchEmployees(@RequestParam("keyword") String keyword, Model model) {
List<Role> searchResults = employeeService.searchEmployees(keyword);
model.addAttribute("listRoleClasss", searchResults);
return "index";
}
//获取分页数据
@GetMapping("/page/{pageNo}")
public String findPaginated(@PathVariable (value = "pageNo") int pageNo,
@RequestParam("sortField") String sortField,
@RequestParam("sortDir") String sortDir,
Model model) {
int pageSize = 5;
Page<Role> page = employeeService.findPaginated(pageNo, pageSize, sortField, sortDir);
List<Role> listRoles = page.getContent();
model.addAttribute("currentPage", pageNo);
model.addAttribute("totalPages", page.getTotalPages());
model.addAttribute("totalItems", page.getTotalElements());
model.addAttribute("sortField", sortField);
model.addAttribute("sortDir", sortDir);
model.addAttribute("reverseSortDir", sortDir.equals("asc") ? "desc" : "asc");
model.addAttribute("listRoleClasss", listRoles);
return "index";
}
}
9.视图层
创建设备管理相关的HTML视图,使用Thymeleaf和Bootstrap进行页面布局和渲染
Index.html
代码如下:
<!DOCTYPE html>
<html lang="com" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>原神祈愿记录</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-2">
<h1>原神祈愿记录</h1>
<a th:href = "@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3">添加角色 </a>
<table border="1" class = "table table-striped table-responsive-md">
<thead>
<tr>
<th>
<a th:href="@{'/page/' + ${currentPage} + '?sortField=roleNumber&sortDir=' + ${reverseSortDir}}">
角色编号</a>
</th>
<th>
<a th:href="@{'/page/' + ${currentPage} + '?sortField=roleNicknames&sortDir=' + ${reverseSortDir}}">
角色昵称</a>
</th>
<th>
<a th:href="@{'/page/' + ${currentPage} + '?sortField=characterRating&sortDir=' + ${reverseSortDir}}">
角色星级</a>
</th>
<th>
<a th:href="@{'/page/' + ${currentPage} + '?sortField=weaponType&sortDir=' + ${reverseSortDir}}">
武器类型</a>
</th>
<th>
<a th:href="@{'/page/' + ${currentPage} + '?sortField=roleAttributes&sortDir=' + ${reverseSortDir}}">
角色属性</a>
</th>
<th> 操作 </th>
</tr>
</thead>
<tbody>
<tr th:each="role : ${listRoleClasss}">
<td th:text="${role.roleNumber}"></td>
<td th:text="${role.roleNicknames}"></td>
<td th:text="${role.characterRating}"></td>
<td th:text="${role.weaponType}"></td>
<td th:text="${role.roleAttributes}"></td>
<td> <a th:href="@{/showFormForUpdate/{id}(id=${role.id})}" class="btn btn-primary">更新记录</a>
<a th:href="@{/deleteEmployee/{id}(id=${role.id})}" class="btn btn-danger">删除记录</a>
</td>
</tr>
</tbody>
</table>
<!-- 搜索表单 -->
<form action="/search" method="get" class="my-3">
<div class="input-group">
<input type="text" name="keyword" class="form-control" placeholder="角色编号">
<div class="input-group-append">
<button type="submit" class="btn btn-primary">搜索</button>
</div>
</div>
</form>
<div th:if = "${totalPages > 1}">
<div class = "row col-sm-10">
<div class = "col-sm-3">
角色数量: [[${totalItems}]] 名
</div>
<div class = "col-sm-5">
<span th:each="i: ${#numbers.sequence(1, totalPages)}">
<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
<span th:unless="${currentPage != i}">[[${i}]]</span>
</span>
</div>
<div class = "col-sm-1">
<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">上页</a>
<span th:unless="${currentPage < totalPages}"></span>
</div>
<div class="col-sm-1">
<a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">下页</a>
<span th:unless="${currentPage < totalPages}">尾页</span>
</div>
<a th:href="@{/}"> 返回首页</a>
</div>
</div>
</div>
</body>
</html>
New_employee.html
代码如下:
<!DOCTYPE html>
<html lang="com">
<head>
<meta charset="UTF-8">
<title>添加角色</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>添加角色系统</h1>
<hr>
<h2>角色信息</h2>
<form action="#" th:action="@{/saveEmployee}" th:object="${role}" method="POST">
<input type="text" th:field="*{roleNumber}" placeholder=" 角色编号" class="form-control mb-4 col-4">
<input type="text" th:field="*{roleNicknames}" placeholder="角色昵称" class="form-control mb-4 col-4">
<input type="text" th:field="*{characterRating}" placeholder="角色星级" class="form-control mb-4 col-4">
<input type="text" th:field="*{weaponType}" placeholder="武器类型" class="form-control mb-4 col-4">
<input type="text" th:field="*{roleAttributes}" placeholder="角色属性" class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">确认添加</button>
</form>
<hr>
<a th:href="@{/}"> 返回首页</a>
</div>
</body>
</html>
Update_employee.html
代码如下:
<!DOCTYPE html>
<html lang="com">
<head>
<meta charset="UTF-8">
<title>更新角色信息</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>更新角色信息系统</h1>
<hr>
<h2>更新角色信息</h2>
<form action="#" th:action="@{/saveEmployee}" th:object="${role}" method="POST">
<!-- Add hidden form field to handle update -->
<input type="hidden" th:field="*{id}" />
<input type="text" th:field="*{roleNumber}" class="form-control mb-4 col-4">
<input type="text" th:field="*{roleNicknames}" class="form-control mb-4 col-4">
<input type="text" th:field="*{characterRating}" class="form-control mb-4 col-4">
<input type="text" th:field="*{weaponType}" class="form-control mb-4 col-4">
<input type="text" th:field="*{roleAttributes}" class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2"> 确认更新</button>
</form>
<hr>
<a th:href="@{/}"> 返回首页</a>
</div>
</body>
</html>
5.原神祈愿记录管理系统效果图
首页
排序
分页
查询
添加角色
更新角色信息
6.总结
这是一个简单的项目,也是我的一些学习过程,希望能帮助到你。