Springboot +JPA+thymeleaf+MySQL设计一个数据驱动的管理系统

目录

要求：设计并完成一个数据驱动的管理系统。例如设备管理系统，或其他自己感兴趣的管理系统。

功能实现：

背景：设计一个笔记本电脑管理系统，供用户方便查看并管理笔记本电脑

文件准备：

 开始写入：

业务类(Laptops)：

数据访问层(Repository)：

业务逻辑层（Service）：

Impl：

控制层（Controller）：

HTML部分：主页面以及新增和更新部分页面设置

主页面(index)：

新增页面(NewLaptops):

更新页面(UpdateLaptops)：

最终效果如下：

 样式设置：

相关源码我放在gitee内：https://gitee.com/sutiao77/Laptops_system.git

总结：

JAVA的学习可以说让我们正式认识了JAVA这门语言的魅力，从最初几行代码变为现如今的几十行到几百行，一点点的学习一点点的进步，漫长的过程也让我们对知识更深刻的记忆。

---

要求：设计并完成一个数据驱动的管理系统。例如设备管理系统，或其他自己感兴趣的管理系统。

功能实现：

1.设备：属性至少3个以上，包括并不限于设备类型、设备名称、初始状态……

2.添加设备

3.删除设备

4.更新设备

5.查找设备（自定义查询依据），显示查询结果。

6.分页

7.排序

背景：设计一个笔记本电脑管理系统，供用户方便查看并管理笔记本电脑

文件准备：

项目依赖：Lombok+Mysql+thmyeleaf+JPA+Spring Web

业务类(Laptops)：属性，如品牌、型号、价格等等

数据访问层(Repository)：负责与数据库进行交互，包括插入、更新、删除和查询信息的方法。

业务逻辑层（Service）：处理业务逻辑，对信息的验证。

控制层（Controller）：接收用户的请求，调用相应的服务方法，并返回处理结果。

HTML部分：主页面以及新增和更新部分页面设置

主页面(index)、新增页面(NewLaptops)、更新页面(UpdateLaptops)

 开始写入：

业务类(Laptops)：

package com.example.laptops_system.model;

import jakarta.persistence.*;
import lombok.Data;

@Data
@Entity
@Table(name = "genie")
public class Laptops {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @Column(name = "brand")
    private String brand;

    @Column(name = "model")
    private String model;

    @Column(name = "price")
    private String price;

    @Column(name = "monthly_sales")
    private String monthly_sales;

    @Column(name = "recommend")
    private String recommend;

}

数据访问层(Repository)：

package com.example.laptops_system.repository;

import com.example.laptops_system.model.Laptops;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

import java.util.List;

public interface LaptopsRepository extends JpaRepository<Laptops, Long> {
    @Query("select s from Laptops s where s.brand like %:brand%")
    List<Laptops> findAllByGenieName(@Param("brand") String brand);
}

业务逻辑层（Service）：

package com.example.laptops_system.service;

import com.example.laptops_system.model.Laptops;
import org.springframework.data.domain.Page;

import java.util.List;

public interface LaptopsService {
    List<Laptops> getAllStaff();
    // 新增/更新一个信息
    void saveGenie(Laptops laptops);
    // 根据品牌名字去查询
    List<Laptops>findByGeniesName(String brand);
    //删除信息
    void deleteGenieById(long id);
    //分页
    Page<Laptops> findPaginated(int pageNo, int pageSize, String sortField, String sortDirection);
    //获取指定ID的笔记本
    Laptops getGenieById(long id);
}

Impl：

package com.example.laptops_system.service;

import com.example.laptops_system.model.Laptops;
import com.example.laptops_system.repository.LaptopsRepository;
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;

import java.util.List;
import java.util.Optional;

@Service
public class LaptopsServiceImpl implements LaptopsService {
    @Autowired
    private LaptopsRepository laptopsRepository;
    @Override
    public List<Laptops> getAllStaff() {
        return laptopsRepository.findAll();
    }
    @Override
    public void saveGenie(Laptops laptops) {
        this.laptopsRepository.save(laptops);
    }
    @Override
    public List<Laptops> findByGeniesName(String brand) {
        List<Laptops> opt = laptopsRepository.findAllByGenieName(brand);
        return opt;
    }
    @Override
    public Laptops getGenieById(long id) {
        //调用数据访问层查找指定ID的笔记本，返回Optional对象
        Optional<Laptops> optional = laptopsRepository.findById(id);
        Laptops laptops = null;
        //如果存在指定id的笔记本
        if (optional.isPresent()) {
            //从Optional对象中获取该对象
            laptops = optional.get();
        } else {
            //否则抛出运行时异常
            throw new RuntimeException(" 笔记本ID :: " + id);
        }
        return laptops;
    }
    @Override
    public void deleteGenieById(long id) {
        this.laptopsRepository.deleteById(id);
    }
    @Override
    public Page<Laptops> 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.laptopsRepository.findAll(pageable);
    }
}

控制层（Controller）：

package com.example.laptops_system.controller;
import com.example.laptops_system.model.Laptops;
import com.example.laptops_system.service.LaptopsService;
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 LaptopsController {

    @Autowired
    private LaptopsService laptopsService;
    @GetMapping("/")
    public String viewHomePage(Model model) {
        return findPaginated(1, "brand", "asc", model);
    }
    @GetMapping("/showNewGenieForm")
    public String showNewGenieForm(Model model) {
        Laptops laptops = new Laptops();
        model.addAttribute("laptops", laptops);
        return "NewLaptops";
    }

    @PostMapping("/saveGenie")
    public String saveGenie(@ModelAttribute("laptops") Laptops laptops) {
        // save genie to database
        laptopsService.saveGenie(laptops);
        return "redirect:/";
    }

    @GetMapping("/query{ipm}")
    public String query(@PathVariable(value = "ipm") String ipm,Model model){
        List<Laptops> listLaptops = laptopsService.findByGeniesName(ipm);
        model.addAttribute("listLaptops", listLaptops);
        return "index";
    }
    @GetMapping("/showFormForUpdate/{id}")
    public String showFormForUpdate(@PathVariable(value = "id") long id, Model model) {

        //从服务中获得笔记本id
        Laptops laptops = laptopsService.getGenieById(id);

        // 将 laptops 设置为模型属性以预先填充表单
        model.addAttribute("laptops", laptops);
        return "UpdateLaptops";
    }
    @GetMapping("/deleteGenie/{id}")
    public String deleteGenie(@PathVariable(value = "id") long id) {

        // 调用删除方法
        this.laptopsService.deleteGenieById(id);
        return "redirect:/";
    }

    //获取分页数据
    @GetMapping("/page/{pageNo}")
    public String findPaginated(@PathVariable (value = "pageNo") int pageNo,
                                @RequestParam("sortField") String sortField,
                                @RequestParam("sortDir") String sortDir,
                                Model model) {
        int pageSize = 4;
        Page<Laptops> page = laptopsService.findPaginated(pageNo, pageSize, sortField, sortDir);
        List<Laptops> listLaptops = 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("listLaptops", listLaptops);
        return "index";
    }
}

HTML部分：主页面以及新增和更新部分页面设置

主页面(index)：

<!DOCTYPE html>
<html lang="en" 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">
    <style type="text/css">
        .table th, .table td {
            text-align: center;
            vertical-align: middle!important;
        }
    </style>


</head>
<body>

<div class="container my-2">
    <h1 class = "text-center">笔记本信息列表</h1>

    <div class="form-inline row" >
        <a th:href = "@{/showNewGenieForm}" class="btn btn-info" > 新增笔记本 </a>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <form id="query-form" action="/query" method="get">
            <h6></h6><input type="text" id="name-input" name="" placeholder="品牌">
            <button type="button" onclick="queryGenie()">查找</button>

        </form>
    </div>
    <hr>
    <!--    将输入框输入的内容传到url上面去-->
    <script>
        function queryGenie() {
            var GenieName = document.getElementById("name-input").value;
            var url = "/query" + encodeURIComponent(GenieName);
            window.location.href = url;
        }
    </script>

    <table border="1" class = "table table-striped table-responsive-md">
        <thead>
        <tr>
        <tr  class="table-success">
            <th >
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=name&sortDir=' + ${reverseSortDir}}">
                    品牌 </a>
            </th>
            <th >
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=game&sortDir=' + ${reverseSortDir}}">
                    型号</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=sex&sortDir=' + ${reverseSortDir}}">
                    平均价格</a>
            </th >
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=kill&sortDir=' + ${reverseSortDir}}">
                    月销量</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=kill&sortDir=' + ${reverseSortDir}}">
                    推荐(星级)</a>
            </th>
            <th > 操作 </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="Laptops : ${listLaptops}"
            class="table-info">
            <td th:text="${Laptops.brand}" ></td>
            <td th:text="${Laptops.model}"></td>
            <td th:text="${Laptops.price}"></td>
            <td th:text="${Laptops.monthly_sales}"></td>
            <td th:text="${Laptops.recommend}"></td>
            <td> <a th:href="@{/showFormForUpdate/{id}(id=${Laptops.id})}" class="btn btn-success">更新</a>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <a th:href="@{/deleteGenie/{id}(id=${Laptops.id})}" class="btn btn-danger">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div th:if = "${totalPages > 1}">
        <div class = "row col-sm-10">
            <div class = "col-sm-3">
                Total Rows: [[${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>  &nbsp; &nbsp;
               </span>
            </div>
            <div class = "col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
                <span th:unless="${currentPage < totalPages}">Next</span>
            </div>

            <div class="col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
                <span th:unless="${currentPage < totalPages}">Last</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

新增页面(NewLaptops):

<!DOCTYPE html>
<html lang="en">
<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="@{/saveGenie}" th:object="${laptops}" method="POST">
        <input type="text" th:field="*{brand}" placeholder="品牌" class="form-control mb-4 col-4">

        <input type="text" th:field="*{model}" placeholder="型号" class="form-control mb-4 col-4">

        <input type="text" th:field="*{price}" placeholder="价格" class="form-control mb-4 col-4">

        <input type="text" th:field="*{monthly_sales}" placeholder="月销量" class="form-control mb-4 col-4">

        <input type="text" th:field="*{recommend}" placeholder="推荐星级" class="form-control mb-4 col-4">


        <button type="submit" class="btn btn-info col-2"> 添加笔记本</button>
        <!--        <button type="button" class="btn btn-info" style="text-shadow: black 5px 3px 3px;">-->
        <!--            增加玩家-->
        <!--        </button>-->
    </form>

    <hr>

    <a th:href="@{/}"> 返回笔记本信息列表</a>
</div>
</body>

</html>

更新页面(UpdateLaptops)：

<!DOCTYPE html>
<html lang="en">
<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="@{/saveGenie}" th:object="${laptops}" method="POST">

        <!-- Add hidden form field to handle update -->
        <input type="hidden" th:field="*{id}" />
        <input type="text" th:field="*{brand}" placeholder="品牌" class="form-control mb-4 col-4">

        <input type="text" th:field="*{model}" placeholder="型号" class="form-control mb-4 col-4">

        <input type="text" th:field="*{price}" placeholder="价钱" class="form-control mb-4 col-4">

        <input type="text" th:field="*{monthly_sales}" placeholder="月销量" class="form-control mb-4 col-4">

        <input type="text" th:field="*{recommend}" 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>

最终效果如下：

 样式设置：

样式配置项修改参考：Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

相关源码我放在gitee内：https://gitee.com/sutiao77/Laptops_system.git

总结：

JAVA的学习可以说让我们正式认识了JAVA这门语言的魅力，从最初几行代码变为现如今的几十行到几百行，一点点的学习一点点的进步，漫长的过程也让我们对知识更深刻的记忆。

本篇文章是自我学习的过程，如有不足请不要指出，谢谢！