通过Spring Initializr创建Springboot项目

springblade 后台 springboot layui_springblade 后台

springblade 后台 springboot layui_layui autocomplete_02

springblade 后台 springboot layui_layui autocomplete_03

项目目录结构

springblade 后台 springboot layui_springblade 后台_04

项目创建成功后把修改属性文件改成yml文件

Springboot集成thymeleaf

添加thymeleaf依赖

<dependency>     <groupId>org.springframework.bootgroupId>     <artifactId>spring-boot-starter-thymeleafartifactId> dependency>

在yaml文件中添加thymeleaf配置

spring:   thymeleaf:     #去掉页面缓存     cache: false     #试图后缀为html     suffix: .html     #页面编码方式为UTF-8     encoding: UTF-8

测试

新建controller并成功跳转页面

@Controller public class PageController {      @GetMapping("/")     public String index(){         return "index";     } }

在templates目录下新建index.html文件

<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title>首页title> head> <body> <h1>thymeleaf集成成功h1> body> html>

页面输入连接访问

springblade 后台 springboot layui_layui js 跳转页面_05

页面集成layUI

layUI官方下载地址：https://www.layui.com/，目前最新版本：2.5.6

下载到本地解压把layui整个文件夹copy到项目的static目录下

建议：在通过项目路径复制到指定目录中，如果直接复制到idea中速度会很慢

如何使用LayUI这里就不累赘再去介绍，如果感兴趣可以参考官方文档进行学习https://www.layui.com/doc/

SpringBoot集成mybatis

添加依赖

<dependency>     <groupId>org.mybatis.spring.bootgroupId>     <artifactId>mybatis-spring-boot-starterartifactId>     <version>2.1.3version> dependency>   <dependency>     <groupId>mysqlgroupId>     <artifactId>mysql-connector-javaartifactId>     <version>8.0.21version> dependency>

在pom.xml里面build中添加

<resources>        <resource>         <directory>src/main/resourcesdirectory>         <includes>             <include>**/*.*include>         includes>         <filtering>falsefiltering>     resource> resources>

在yaml文件中添加数据库的相关配置

spring:   datasource:     url: jdbc:mysql://localhost/user?serverTimezone=UTC&characterEncoding=UTF-8     username: root     password: 123456 mybatis:   type-aliases-package: com.meng.userinfo.domain   #mapper对应位置   mapper-locations: classpath:mapper/*.xml   configuration:     #日志打印出SQL语句     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

idea连接数据库

springblade 后台 springboot layui_springblade 后台_06

springblade 后台 springboot layui_layui autocomplete_07

分页查询

添加依赖

<dependency>     <groupId>org.projectlombokgroupId>     <artifactId>lombokartifactId>     <version>1.18.12version> dependency>

在idea中添加lombok插件

不安装程序会报错

springblade 后台 springboot layui_layui autocomplete_08

创建实体类

@Data public class User {     private Integer id;     private String userName;     private String password;     private String sex;     private String birthday;     private String phone;     private String email;     private String comm; }

创建contrller

@RestController public class UserController {     @Autowired     private UserService userService;      /**      * 通过条件查询      * @return      */     @PostMapping("user/list")     public Maplist(int page,int limit){         Mapmap = new HashMap<>();         map.put("start",(page-1)*limit);         map.put("limit",limit);         Map result = new HashMap<>();         result.put("code", 0);         result.put("msg", "");         result.put("count", userService.getCounts(map));         result.put("data",userService.list(map));         return result;     } }

创建service

public interface UserService {     /**      * 统计查询出的条数      * @param map      * @return      */     int getCounts(Map map);      /**      * 通过条件查询出数据      * @param map      * @return      */     Listlist(Map map); }
@Servicepublic class UserServiceImpl implements UserService {    @Autowired    private UserMapper userMapper;    @Override    public int getCounts(Map map) {        return userMapper.getCounts(map);    }    @Override    public Listlist(Map map) {        return userMapper.list(map);    }}

创建mapper

@Mapperpublic interface UserMapper {    int getCounts(Map<String, Object> map);    List list(Map<String, Object> map);}

Mapper文件

<?xml version="1.0" encoding="UTF-8" ?>/span>        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"        "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.meng.userinfo.dao.UserMapper">    <select id="getCounts" resultType="int" parameterType="map">        select count(*) from user    select>    <select id="list" resultType="com.meng.userinfo.domain.User"            parameterType="map">        select * from user limit #{start},#{limit}    select>mapper>

把数据查询出来使用layUI的数据表格在页面上显示，layUI自带分页只是需要注意：页面传的参数和控制层返回的数据格式是特定的需要遵守。

在页面上引入layUI的css和js文件

<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"><script type="text/javascript" th:src="@{/layui/layui.js}">script>

页面

<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title>首页title>          <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">     <script type="text/javascript" th:src="@{/layui/layui.js}">script> head> <body> <table id="demo" lay-filter="test">table> <script type="text/javascript" th:inline="none">     layui.use(['layer', 'jquery', 'table', 'form'], function () {         var layer = layui.layer,//创建弹出层的实例对象             $ = layui.jquery,//创建jquery的实例对象             table = layui.table,//创建table的实例对象             form = layui.form;//创建form的实例对象          //第一个实例         table.render({             elem: '#demo' //table的id             , url: '/user/list' //数据接口             , page: true //开启分页\             ,method: 'post'             , cols: [[                 {field: 'id', title: 'ID',type:'checkbox'}                 , {field: 'userName', title: '用户名'}                 , {field: 'sex', title: '性别'}                 , {field: 'birthday', title: '生日'}                 , {field: 'phone', title: '联系方式'}                 , {field: 'email', title: '邮箱'}                 , {field: 'comm', title: '备注'}             ]]         });     });script> body> html>

条件查询

页面



class="demoTable"> 搜索姓名：

class="layui-inline"> class="layui-input" name="userName" id="userName" autocomplete="off">


搜索联系方式：


class="layui-inline"> class="layui-input" name="phone" id="phone" autocomplete="off">


class="layui-btn" data-type="reload" id="search_bth">class="layui-icon layui-icon-search"> 查询 




$('#search_bth').click(function () {    table.reload('demo', { //demo对应table的id        where: { //设定异步数据接口的额外参数，任意设            userName: $('#userName').val(),            phone: $('#phone').val()        }        ,page: {            curr: 1 //重新从第 1 页开始        }    });});

修改controller

public Maplist(int page,int limit,String userName,String phone){    Mapmap = new HashMap<>();    map.put("start",(page-1)*limit);    map.put("limit",limit);    map.put("userName",userName);    map.put("phone",phone);    Map result = new HashMap<>();    result.put("code", 0);    result.put("msg", "");    result.put("count", userService.getCounts(map));    result.put("data",userService.list(map));    return result;}

修改Mapper

<select id="getCounts" resultType="int" parameterType="map">    select count(*) from user    <where>        <if test="null != userName and userName != ''">            userName like '%${userName}%'        if>        <if test="null != phone and phone != ''">            phone like '%${phone}%'        if>    where>select><select id="list" resultType="com.meng.userinfo.domain.User"        parameterType="map">    select * from user    <where>        <if test="null != userName and userName != ''">            userName like '%${userName}%'        if>        <if test="null != phone and phone != ''">            phone like '%${phone}%'        if>    where>    limit #{start},#{limit}select>

添加

页面

<div class="demoTable">     <button class="layui-btn layui-btn-sm layui-bg-blue" id="add_btn">添加button> div>  <script type="text/javascript" th:inline="none">     layui.use(['layer', 'jquery', 'table', 'form','laydate'], function () {         var layer = layui.layer,//创建弹出层的实例对象             $ = layui.jquery,//创建jquery的实例对象             table = layui.table,//创建table的实例对象             form = layui.form,//创建form的实例对象             laydate = layui.laydate;          //显示添加界面         $('#add_btn').click(function () {             //弹窗             layer.open({                 type: 1,                 area: ['400px', '600px'],                 title: '添加',                 content: $('#add').html() //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响             });             form.render();             //常规用法             laydate.render({                 elem: '#birthday_add'             });         });          //添加表单提交         form.on('submit(add)', function(data){             //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象             //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回             //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}             //ajax异步请求，提交数据             $.post('user/add',data.field,function (data) {                 if (data){                      layer.msg('添加成功', {                         icon: 1,                         time: 2000 //2秒关闭(如果不配置，默认是3秒)                     }, function(){                         //添加成功关闭添加界面                         layer.closeAll('page'); //关闭所有页面层                         //刷新表格(重载)                         table.reload('demo');                     });                  }else {                     layer.msg('添加失败', {                         icon: 2,                     });                 }             });             return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。         });     });script>  <script type="text/html" id="add">     <form class="layui-form layui-form-pane" action="">         <div class="layui-form-item">             <label class="layui-form-label">用户名label>             <div class="layui-input-block">                 <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">密码label>             <div class="layui-input-block">                 <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">性别label>             <div class="layui-input-block">                 <input type="radio" name="sex" value="男" title="男">                 <input type="radio" name="sex" value="女" title="女" checked>             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">生日label>             <div class="layui-input-block">                 <input type="text" id="birthday_add" name="birthday" required  lay-verify="required" placeholder="年-月-日" autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">联系方式label>             <div class="layui-input-block">                 <input type="text" name="phone" required  lay-verify="required" placeholder="请联系方式" autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">邮箱label>             <div class="layui-input-block">                 <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item layui-form-text">             <label class="layui-form-label">备注label>             <div class="layui-input-block">                 <textarea name="comm" placeholder="请输入内容" class="layui-textarea">textarea>             div>         div>          <div class="layui-form-item">             <div class="layui-input-block">                 <button class="layui-btn" lay-submit lay-filter="add">立即提交button>                 <button type="reset" class="layui-btn layui-btn-primary">重置button>             div>         div>     form>script>

controller

@PostMapping("user/add") public boolean add(User user){     return userService.add(user); }

Mapper

"add" parameterType=     insert into user(userName,password,sex,birthday,phone,email,comm)     values (#{userName},#{password},#{sex},#{birthday},#{phone},#{email},#{comm});

开启头部工具栏

<script type="text/html" id="barDemo">     <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">i>编辑a>     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">i>删除a>script> <script type="text/javascript" th:inline="none">     layui.use(['layer', 'jquery', 'table', 'form','laydate'], function () {         var layer = layui.layer,//创建弹出层的实例对象             $ = layui.jquery,//创建jquery的实例对象             table = layui.table,//创建table的实例对象             form = layui.form,//创建form的实例对象             laydate = layui.laydate;          //第一个实例         table.render({             elem: '#demo' //table的id             , url: '/user/list' //数据接口             , page: true //开启分页             ,method: 'post',             toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板toolbarDemo可随意写             ,defaultToolbar: ['filter', 'exports', 'print']             , cols: [[                 {field: 'id', title: 'ID',type:'checkbox'}                 , {field: 'userName', title: '用户名'}                 , {field: 'sex', title: '性别'}                 , {field: 'birthday', title: '生日'}                 , {field: 'phone', title: '联系方式'}                 , {field: 'email', title: '邮箱'}                 , {field: 'comm', title: '备注'}                 ,{title:'操作', toolbar: '#barDemo'}             ]]         });script>

修改

页面

<script type="text/javascript" th:inline="none">     layui.use(['layer', 'jquery', 'table', 'form', 'laydate'], function () {         var layer = layui.layer,//创建弹出层的实例对象             $ = layui.jquery,//创建jquery的实例对象             table = layui.table,//创建table的实例对象             form = layui.form,//创建form的实例对象             laydate = layui.laydate;          //监听行工具事件 test为table的lay-filter的值         table.on('tool(test)', function (obj) {             var data = obj.data;             //console.log(obj)             if (obj.event === 'edit') {                 layer.open({                     type: 1,                     area: ['400px', '600px'],                     title: '修改加',                     content: $('#edit').html() //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响                 });                 form.render();                 //常规用法                 laydate.render({                     elem: '#birthday-edit'                 });                  //给表单赋值                 form.val("edit-form", { //formTest 即  所在元素属性 lay-filter="" 对应的值                     "id":data.id                     ,"userName": data.userName                     ,"password": data.password                     ,"sex": data.sex                     ,"birthday": data.birthday                     ,"phone": data.phone                     ,"email": data.email                     ,"comm": data.comm                 });             }         });         //监听编辑表单提交         form.on('submit(edit)', function(data){             $.post('user/edit', data.field, function (data) {                 if (data) {                     layer.msg('修改成功', {                         icon: 1,                         time: 2000 //2秒关闭(如果不配置，默认是3秒)                     }, function () {                         //添加成功关闭添加界面                         layer.closeAll('page'); //关闭所有页面层                         //刷新表格(重载)                         table.reload('demo');                     });                  } else {                     layer.msg('修改失败', {                         icon: 2,                     });                 }             });             return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。         });      });script>  <script type="text/html" id="edit">     <form class="layui-form layui-form-pane" action="" lay-filter="edit-form">         <input type="hidden" name="id">         <div class="layui-form-item">             <label class="layui-form-label">用户名label>             <div class="layui-input-block">                 <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名"                        autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">密码label>             <div class="layui-input-block">                 <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"                        autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">性别label>             <div class="layui-input-block">                 <input type="radio" name="sex" value="男" title="男">                 <input type="radio" name="sex" value="女" title="女" checked>             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">生日label>             <div class="layui-input-block">                 <input type="text" id="birthday-edit" name="birthday" required lay-verify="required" placeholder="年-月-日"                        autocomplete="off" class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">联系方式label>             <div class="layui-input-block">                 <input type="text" name="phone" required lay-verify="required" placeholder="请联系方式" autocomplete="off"                        class="layui-input">             div>         div>          <div class="layui-form-item">             <label class="layui-form-label">邮箱label>             <div class="layui-input-block">                 <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off"                        class="layui-input">             div>         div>          <div class="layui-form-item layui-form-text">             <label class="layui-form-label">备注label>             <div class="layui-input-block">                 <textarea name="comm" placeholder="请输入内容" class="layui-textarea">textarea>             div>         div>          <div class="layui-form-item">             <div class="layui-input-block">                 <button class="layui-btn" lay-submit lay-filter="edit">修改button>             div>         div>     form>script>

controller

/**  * 添加  *  * @param user  * @return  */ @PostMapping("user/edit") public boolean edit(User user) {     return userService.updateById(user); }

mapper

"updateById" parameterType=     update user     <set>         <if test="null != userName and userName != ''">             userName = #{userName},         if>         <if test="null != password and password != ''">             password = #{password},         if>         <if test="null != sex and sex != ''">             sex = #{sex},         if>         <if test="null != birthday and birthday != ''">             birthday = #{birthday},         if>         <if test="null != phone and phone != ''">             phone = #{phone},         if>         <if test="null != email and email != ''">             email = #{email},         if>          <if test="null != comm and comm != ''">             comm = #{comm},         if>     set>     where id = #{id}

批量删除

页面

<div class="demoTable">     <button class="layui-btn layui-btn-sm layui-bg-blue layui-bg-red" id="batch_del_btn">批量删除button> div> <script type="text/javascript" th:inline="none">     layui.use(['layer', 'jquery', 'table', 'form','laydate'], function () {         var layer = layui.layer,//创建弹出层的实例对象             $ = layui.jquery,//创建jquery的实例对象             table = layui.table,//创建table的实例对象             form = layui.form,//创建form的实例对象             laydate = layui.laydate;         //批量删除         $('#batch_del_btn').click(function () {             var checkStatus = table.checkStatus('demo'); //idTest 即为基础参数 id 对应的值             var datas = checkStatus.data;             var ids = [];             for (var i = 0; i < datas.length; i++) {                 ids.push(datas[i].id);             }              if (ids.length == 0){                 layer.msg('请选择需要删除的数据', {                     icon: 2,                 });             }else {                 $.post('user/del',{ids:ids},function (data) {                     if (data){                         layer.msg('删除成功', {                             icon: 1,                             time: 2000 //2秒关闭(如果不配置，默认是3秒)                         }, function(){                             //刷新表格(重载)                             table.reload('demo');                         });                      }else {                         layer.msg('删除失败', {                             icon: 2,                         });                     }                 })             }         })     });script>

controller

/**  * 删除  * 必须写@RequestParam("ids[]")，页面传参的参数名就是ids[]，不然参数拿不到  *  * @param ids  * @return  */ @PostMapping("user/del") public boolean batchDel(@RequestParam("ids[]") int[] ids) {     return userService.batchDel(ids); }

Mapper

"batchDel" parameterType=     delete from user where id in     <foreach collection="ids" item="id" open="(" close=")" separator=",">         #{id}     foreach>

删除一条数据

页面

//监听行工具事件 test为table的lay-filter的值 table.on('tool(test)', function (obj) {     var data = obj.data;     //console.log(obj)     if (obj.event === 'edit') {     } else if (obj.event === 'del') {         layer.confirm('真的删除么', function (index) {             obj.del();             layer.close(index);             $.post('user/del', {id: data.id}, function (data) {                 if (data) {                     layer.msg('删除成功', {                         icon: 1,                         time: 2000 //2秒关闭(如果不配置，默认是3秒)                     }, function () {                         //刷新表格(重载)                         table.reload('demo');                     });                  } else {                     layer.msg('删除失败', {                         icon: 2,                     });                 }             })         });     } });

controller

/**  * 删除  * @param id  * @return  */ @PostMapping("user/del") public boolean del(int id) {     return userService.del(id); }

Mapper

"del" parameterType=     delete from user where id = #{id}