数据列表及分页功能还能用SpringBoot+Layui实现，开
2020-05-26 本文已影响0人
代码搬运者Java
前言
该篇博客是题主临时有个小需求，不牵扯复杂的业务逻辑，只是单纯的一个查询功能，不熟悉layui数据表格的童鞋可以参考参考，难度系数较低，即学即用。
新建项目
首先我们需要新建一个springboot项目并集成maven（不清楚的同学可以找教程看看哦，这里我就不多唠叨了），到此我们第一步的工作差不多完成了。
接着我们需要配置一些参数，引入依赖，具体代码如下：
- POM依赖
<?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.2.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</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-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 支持通过JDBC连才妾数据库 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 集成mybatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.1</version>
</dependency>
<!--json @responseBody/@requestBody-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.54</version>
</dependency>
<dependency>
<groupId>org.xmlunit</groupId>
<artifactId>xmlunit-core</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
</pre>
- properties配置文件
###mysql 连接信息
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=CTT&useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true
###用户名
spring.datasource.username=root
###密码
spring.datasource.password=*****
###驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
### Mybatis配置
mabatis.mapper-locations=classpath:/mappers/*Mapper.xml
mabatis.type-aliases-package=com.example.demo.dao
###解决SpringBoot不能直接访问templates下的静态资源
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/
# 定位模板的目录
spring.mvc.view.prefix=classpath:/templates/
# 给返回的页面添加后缀名
spring.mvc.view.suffix=.html
spring.thymeleaf.cash=false
</pre>
编写HTML页面，引入layui
接着新建一个html页面，（注意引入jquery.js）在layui官网下载解压文件夹到static目录下，具体目录结构和代码如下：
image
注意：以下代码我是做了查询及默认加载列表（tag=1时是查询），因为时间问题代码写的比较冗余，大家自己如果要参考的话可以自己稍微修改
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>信息列表</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="/layui/css/layui.css" media="all">
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body style="margin-left: 20%;margin-top: 20px;">
<form class="layui-form" action="" style="width: 802px;">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="text-align: left;margin-top: 8px;padding: 0;"> 信息标题:</label>
<div class="layui-input-inline" >
<input type="text" id="title" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline" >
<label class="layui-form-label" style="text-align: left;margin-top: 8px;padding: 0;">创建时间:</label>
<div class="layui-input-inline">
<input type="text" name="date" id="time" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline" >
<div class="layui-input-inline">
<input type="button" value="查询" onclick="query(1);" class="layui-btn layui-btn-primary" style="margin-right: -20px;float: right;">
</div>
</div>
</div>
<table class="layui-hide" id="test"></table>
</form>
</body>
<script type="text/javascript">
$().ready(function() {
query();
/*日期组件*/
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#time'
});
});
});
function query(tag){
if(1==tag){ //查询
var title = $("#title").val();
var time = $("#time").val();
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url: "/info/query?title="+title+"&time="+time
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'title', width:200, title: '信息标题'}
,{field:'creatTime', width:200, title: '创建日期',templet:function (d) {
return showTime(d.creatTime);
}}
,{field:'pdr', width:200,title: '评定人'}
,{field:'pdyj', width:200, title: '评定意见'}
]]
});
});
}else{
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url: "/info/list"
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'title', width:200, title: '信息标题'}
,{field:'creatTime', width:200, title: '创建日期',templet:function (d) {
return showTime(d.creatTime);
}}
,{field:'pdr', width:200,title: '评定人'}
,{field:'pdyj', width:200, title: '评定意见'}
]]
});
});
}
}
function showTime(tempDate){
var d = new Date(tempDate);
var year = d.getFullYear();
var month = d.getMonth();
month++;
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
month = month<10 ? "0"+month:month;
day = day<10 ? "0"+day:day;
hours = hours<10 ? "0"+hours:hours;
minutes = minutes<10 ? "0"+minutes:minutes;
seconds = seconds<10 ? "0"+seconds:seconds;
var time = year+"-"+month+"-"+day;
return time;
}
</script>
</html>
</pre>
service层
根据业务需求的不同，大家可自行编写sql，代码如下：
package com.example.demo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public class InfoService {
@Autowired
private JdbcTemplate jdbcTemplate;
public List<Map<String,Object>> findAllPage(int before, int after){
String sql="select title,creatTime,pdr,pdyj from info m left join info_pd n on m.id=n.info_id limit ?, ?";
List<Map<String,Object>> mapList =jdbcTemplate.queryForList(sql,before,after);
return mapList;
}
public String findAllCount(){
String sql="select count(0) c from info m left join info_pd n on m.id=n.info_id ";
Map<String,Object> map =jdbcTemplate.queryForMap(sql);
String count=String.valueOf(map.get("c"));
return count;
}
public List<Map<String,Object>> findPage(int before, int after, String title,String time){
List<Map<String,Object>> mapList =null;
String sql="";
if("".equals(title) && !"".equals(time)){
sql="select title,creatTime,pdr,pdyj from info m left join info_pd n on m.id=n.info_id WHERE m.creatTime=? limit ?, ?";
mapList =jdbcTemplate.queryForList(sql,time,before,after);
}else if(!"".equals(title) && "".equals(time)){
sql="select title,creatTime,pdr,pdyj from info m left join info_pd n on m.id=n.info_id WHERE m.title LIKE concat('%', ?,'%') limit ?, ?";
mapList =jdbcTemplate.queryForList(sql,title,before,after);
}else if(!"".equals(title) && !"".equals(time)){
sql="select title,creatTime,pdr,pdyj from info m left join info_pd n on m.id=n.info_id WHERE m.title LIKE concat('%', ?,'%') and m.creatTime=? limit ?, ?";
mapList =jdbcTemplate.queryForList(sql,title,time,before,after);
}else{
sql="select title,creatTime,pdr,pdyj from info m left join info_pd n on m.id=n.info_id limit ?, ?";
mapList =jdbcTemplate.queryForList(sql,before,after);
}
return mapList;
}
public String findCount(String title,String time){
Map<String,Object> map =null;
String sql="",count="";
if("".equals(title) && !"".equals(time)){
sql="select count(0) c from info m left join info_pd n on m.id=n.info_id WHERE m.creatTime=? ";
map =jdbcTemplate.queryForMap(sql,time);
count=String.valueOf(map.get("c"));
}else if(!"".equals(title) && "".equals(time)){
sql="select count(0) c from info m left join info_pd n on m.id=n.info_id WHERE m.title LIKE concat('%', ?,'%') ";
map =jdbcTemplate.queryForMap(sql,title);
count=String.valueOf(map.get("c"));
}else if(!"".equals(title) && !"".equals(time)){
sql="select count(0) c from info m left join info_pd n on m.id=n.info_id WHERE m.title LIKE concat('%', ?,'%') and m.creatTime=? ";
map =jdbcTemplate.queryForMap(sql,title,time);
count=String.valueOf(map.get("c"));
}else{
sql="select count(0) c from info m left join info_pd n on m.id=n.info_id ";
map =jdbcTemplate.queryForMap(sql);
count=String.valueOf(map.get("c"));
}
return count;
}
}
</pre>
controller层
@Controller
@RequestMapping("/info")
public class InfoController {
@Autowired
private InfoService infoService;
@RequestMapping("/query")
@ResponseBody
public Object query(HttpServletResponse resp, ModelMap model, String title,String time,int page,int limit){
String sql="";
int before = limit * (page - 1);
int after = page * limit;
List<Map<String,Object>> mapList =infoService.findPage(before,after,title,time);
String count=infoService.findCount(title,time);
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "msc");
jsonObject.put("count", count);
jsonObject.put("data", mapList);
return jsonObject.toString();
}
@RequestMapping("/list")
@ResponseBody
public Object list(HttpServletResponse request, int page,int limit){
int before = limit * (page - 1);
int after = page * limit;
List<Map<String,Object>> mapList =infoService.findAllPage(before,after);
String count=infoService.findAllCount();
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "msc");
jsonObject.put("count", count);
jsonObject.put("data", mapList);
return jsonObject.toString();
}
}
</pre>
效果展示及总结
没接触过layui的同学可以自行去layui官网观看代码及效果，附上链接： www.layui.com/demo/table.…，重点在于后台返回的数据格式，至于分页的话，我这只是一个简单的练手，并没封装page类，效果呈现如下图：
image
image
作者：PlutoJie
链接：https://juejin.im/post/5ecc75e6e51d45786b181e08
