基于SpringBoot和LayUI的CRUD实验_java

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">
                
                    <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">
                    
                        <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">
                
                    <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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/884250.html

基于SpringBoot和LayUI的CRUD实验

发表评论

评论列表（0条）