通过Spring Initializr创建Springboot项目
项目目录结构
项目创建成功后把修改属性文件改成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>页面输入连接访问
页面集成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.StdOutImplidea连接数据库
分页查询
添加依赖
<dependency> <groupId>org.projectlombokgroupId> <artifactId>lombokartifactId> <version>1.18.12version> dependency>在idea中添加lombok插件
不安装程序会报错
创建实体类
@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} 
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
