Springboot整合themleft实现简单的增删改查

最终效果如下图

介绍该项目的整体架构：Spring Boot +JPA +themleft+layui

1.首先建立一个springboot项目

1.1 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 https://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.0.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.yzy</groupId>
    <artifactId>test</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>test</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.29</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <!--<exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>-->
        </dependency>
        <dependency>
            <groupId>org.junit.vintage</groupId>
            <artifactId>junit-vintage-engine</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

    </dependencies>

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

</project>

1.2启动类YaoziyangApplication.java

package com.yzy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class YaoziyangApplication {

    public static void main(String[] args) {
        SpringApplication.run(YaoziyangApplication.class,args);
    }
}

1.3在resources目录下建立application.yml

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/testcrud?serverTimezone=GMT%2B8
    username: root
    password: root

  jpa:
    hibernate:
      #更新或创建数据库表结构
      ddl-auto: update
    #输出执行sql
    show-sql: true

  thymeleaf:
    cache: false
    check-template-location: true
    encoding: UTF-8
    mode: HTML5
    prefix: classpath:/templates/
    suffix: .html

1.4在static中导入layui所用的工具包可以去官方下载

结构如下

2.建立具体的包和类

2.1建立实体类

package com.yzy.entity;

import javax.persistence.*;

@Entity
@Table(name = "yaoziyang")
public class Yaoziyang {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer userId;
    private String userName;
    private Integer userAge;

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public Integer getUserAge() {
        return userAge;
    }

    public void setUserAge(Integer userAge) {
        this.userAge = userAge;
    }

    public Yaoziyang() {
    }

    public Yaoziyang(String userName, Integer userAge) {
        this.userName = userName;
        this.userAge = userAge;
    }
}

2.2 建立DAO层

package com.yzy.dao;

import com.yzy.entity.Yaoziyang;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

@Repository
public interface YaoziyangDao extends JpaRepository<Yaoziyang, Integer> {

    @Query(value = "update yaoziyang set user_Name = ?1 ,user_Age = ?2 where user_Id = ?3",nativeQuery = true)
    @Modifying
    int Update(String userName,Integer userAge,Integer userId);

    @Query(value = "delete from yaoziyang where user_Id = ?1 ",nativeQuery = true)
    @Modifying
    int deleteAllByUserId(Integer userId);

}

2.3 建立service层业务层

package com.yzy.service;

import com.yzy.dao.YaoziyangDao;
import com.yzy.entity.Yaoziyang;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;
import java.util.List;

@Service
@Transactional
public class YaoziyangService {

    @Autowired
    private YaoziyangDao yaoziyangDao;

    public List<Yaoziyang> findAll(){
        return yaoziyangDao.findAll();
    }

    public Yaoziyang save(Yaoziyang yaoziyang){
        return  yaoziyangDao.save(yaoziyang);
    }

    public int updateyaoziyang(Yaoziyang yaoziyang){
        int update = yaoziyangDao.Update(yaoziyang.getUserName(), yaoziyang.getUserAge(),yaoziyang.getUserId());
        return update;
    }

    public int deleteYaoziyang(Integer userId){
        return yaoziyangDao.deleteAllByUserId(userId);
    }

}

2.4建立控制层controller

YaoziyangController.java

package com.yzy.controller;

import com.yzy.entity.Yaoziyang;
import com.yzy.service.YaoziyangService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class YaoziyangController {

    @Autowired
    private YaoziyangService yaoziyangService;

    @RequestMapping("/findAll")
    public Map<String,Object> findAll(){
        Map<String,Object> map = new HashMap<>();
        List<Yaoziyang> all = yaoziyangService.findAll();
        map.put("data",all);
        map.put("code",0);
        map.put("msg","ok");
        return  map;
    }

    @RequestMapping("/save")
    public Yaoziyang save(Yaoziyang yaoziyang){
        return yaoziyangService.save(yaoziyang);
    }

    @RequestMapping("/update")
    public int updateYaoziyang(Yaoziyang yaoziyang){
        int update = yaoziyangService.updateyaoziyang(yaoziyang);
        return update;
    }

    @RequestMapping("/delete")
    public int deleteYaoziyang(Integer userId){
        return yaoziyangService.deleteYaoziyang(userId);
    }

}

这里用的用的themleft用一个PageController.java

package com.yzy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {

    @RequestMapping("/index")
    public String index(){
        return "index";
    }
}

index.html内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="/layui.js" charset="utf-8"></script>
<script src="/jquery-3.4.1.min.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<div id="add" style="display: none;">
    用户名：<input type="text" id="userName"><br>
    年龄： <input type="number" id="userAge" >
    <input type="button" id="sub" value="提交">
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<div id="update" style="display: none;">
    <input type="hidden" id="userId1">
    用户名：<input type="text" id="userName1"><br>
    年龄： <input type="number" id="userAge1" >
    <input type="button" id="sub1" value="提交">
</div>



<script>
    var index;
    var table;
    $(function () {
        $('#sub').click(function () {
            $.ajax({
                url:'/save',
                data:{
                    'userName':$('#userName').val(),
                    'userAge': $('#userAge').val()
                },
                success:function (res) {
                    layer.close(index);
                    // layui.table
                    table.reload('test', {
                        url: '/findAll'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                }
            })
        });
        $('#sub1').click(function () {
            $.ajax({
                url:'/update',
                data:{
                    'userId':$('#userId1').val(),
                    'userName':$('#userName1').val(),
                    'userAge': $('#userAge1').val()
                },
                success:function (res) {
                    layer.close(index);
                    // layui.table

                    table.reload('test', {
                        url: '/findAll'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                }
            })
        });
    })



    layui.use('table', function () {
        table =  layui.table;
        table.render({
            elem: '#test'
            , url: '/findAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [ [
                {field: 'userId', width: 80, title: 'ID', sort: true}
                , {field: 'userName', width: 80, title: '用户名'}
                , {field: 'userAge', width: 80, title: '年龄', sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ] ]
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    // var data = checkStatus.data;
                    // layer.alert(JSON.stringify(data));
                    index = layer.open({
                        type: 1,
                        content: $('#add') //这里content是一个DOM，这个元素要放在body根节点下
                    });
                    break;
                /*case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;*/
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                index = layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'/delete',
                        type:'GET',
                        data:{
                            'userId':data.userId
                        },
                        success:function (res) {
                            obj.del();
                        }
                    });

                    layer.close(index);
                });
            } else if(obj.event === 'edit'){

                index = layer.open({
                    type: 1,
                    content: $('#update'), //这里content是一个DOM，这个元素要放在body根节点下
                    success: function(layero, index){
                        $('#userId1').val(data.userId);
                        $('#userName1').val(data.userName);
                        $('#userAge1').val(data.userAge);
                    }
                });
            }
        });
    });
</script>

</body>
</html>