基于SpringBoot和LayUI的CRUD实验

1：介绍后端：SpringBootMyBatisX插件druid数据库连接池mysql数据库lombokdevtools前端：thymeleaflayuigithub项目源码2：CRUD数据表CREATE DATABASE crud CHARACTER SET utf8mb4;CREATE TABLE t_dept(dept_id INT COMMENT'部门编号' PRIMARY KEY AUT

HDLaZy

484人浏览 · 2022-05-09 04:15:47

HDLaZy · 2022-05-09 04:15:47 发布

1：介绍

后端：

SpringBoot
MyBatisX插件
druid数据库连接池
mysql数据库
lombok
devtools

前端：

thymeleaf
layui

github项目源码

2：CRUD数据表

CREATE DATABASE crud CHARACTER SET utf8mb4;


CREATE TABLE t_dept(
	dept_id INT COMMENT'部门编号' PRIMARY KEY AUTO_INCREMENT ,
    dept_name varchar(20) not null comment'部门名',
	dept_work VARCHAR(20) NOT NULL COMMENT'部门工作'
);
CREATE TABLE t_emp(
	emp_id INT  COMMENT'员工编号' PRIMARY KEY AUTO_INCREMENT,
	emp_name VARCHAR(40) NOT NULL COMMENT'员工姓名',
	emp_dept INT COMMENT'外键，部门编号',
	emp_salary DECIMAL(10,2) COMMENT'员工工资',
	emp_space VARCHAR(20) COMMENT '员工工作地区',
	FOREIGN KEY (emp_dept) REFERENCES t_dept(dept_id)
);

在这里插入图片描述

3：前端页面

3.1：LayUI公共页面抽取

Layui官方文档
 Thymeleaf官方文档
根据官方文档配置即可，抽取公共部分使用的是thymeleaf举例如下：

公告页面头部：

<head th:fragment="commonHeader">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

引用公告页面头部：

<head>
    <meta charset="UTF-8">
    <!--公共头-->
    <link th:include="common::commonHeader">
    <title>CRUD部门</title>
</head>

3.2：修改信息的回显

插入员工和修改员工为同一页面，在修改时回显，在添加时显示默认信息：

<form class="layui-form layui-form-pane" th:action="@{/saveEmp}" method="post">

            <div class="layui-form-item" pane>
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                <!--如果后端传递的emp存在则回显name，不存在显示默认的值-->
                    <input type="text" i name="name" required  lay-verify="required" th:value="${emp !=null ? emp.getEmpName() : '例如：张三' }"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">工资</label>
                <div class="layui-input-block">
                <!--同上-->
                    <input type="text" i name="salary" required  lay-verify="required" th:value="${emp !=null ? emp.getEmpSalary() : '例如：1000.00'}"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">工作地点</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                    <!--text为显示内容：如果后端传递的emp存在，则显示，如果不存在则显示请选择
                        value为实际的下拉列表的值：如果emp有值则为emp的属性值，如果不存在默认为北京
-->
                        <option th:text="${emp !=null ? emp.getEmpSpace() : '请选择'}" th:value="${emp != null ? emp.getEmpSpace() : '北京'}"></option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                        <option value="西安">西安</option>
                        <option value="安徽">安徽</option>
                        <option value="青青草原">青青草原</option>
                        <option value="狼堡">狼堡</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                <!--如果后端传递的值dept存在，且等于研发部则checked的值为true，代表选择此单选框-->
                    <input type="radio" name="dept" value="研发部" title="研发部" th:attr="checked=${dept!= null and dept.toString()=='研发部' ? true : false}">
                    <input type="radio" name="dept" value="测试部" title="测试部" th:attr="checked=${dept!= null and dept.toString()=='测试部' ? true : false}">
                </div>
            </div>

            <div class="layui-form-item" pane>
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

3.3：thymeleaf页面遍历数据

后端传递的list为emps：

            <tr th:each="emp:${emps}">
                <td th:text="${emp.getEmpName()}" >(员工姓名)</td>
                <td th:text="${emp.getEmpSalary()}">(员工工资)</td>
                <td th:text="${emp.getEmpSpace()}">(工作地点)</td>
            </tr>

3.4：请求路径参数值

为了实现：
在这里插入图片描述
操作栏中可选择修改和删除操作，所以请求必须携带员工的ID，所以需要使用请求路径参数

                <td>
                    <a th:href="@{/upPage/{empId}(empId=${emp.getEmpId()})}" class="layui-btn layui-btn-sm   layui-btn-normal">修改</a>
                    <a th:href="@{/delEmp/{empId}/{deptId}(empId=${emp.getEmpId()},deptId=${emp.getEmpDept()})}" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                </td>

4：项目目录

在这里插入图片描述
使用MyBatisX插件快速生成基础代码

5：application.yaml配置数据库连接

#配置druid
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: 
    password: 
    url: 
    type: com.alibaba.druid.pool.DruidDataSource