1.导入依赖
<?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.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.dxf</groupId>
<artifactId>admindemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>admindemo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--返回json字符窜的支持 -->
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.58</version>
</dependency>
<!-- 引入pageHelper插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.10</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.3</version>
</dependency>
<!--mybatis起步依赖-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</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>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<!-- mybatis-generator自动生成代码插件 -->
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.7</version>
</plugin>
</plugins>
</build>
</project>
2.配置文件
#添加项目名
server.servlet.context-path=/adminDemo
#禁用缓存，ctrl+F9重新编译网页更改
spring.thymeleaf.cache=false
#数据库连接信息（useUnicode=true&characterEncoding=UTF-8不加中文查询不到）
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.password=root
spring.datasource.username=root
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/exam?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
#配置mybatis
#别名扫描包
mybatis.type-aliases-package=com.dxf.admindemo.pojo
mybatis.mapper-locations=classpath:mapper/*Mapper.xml
#日志显示SQL的执行情况
logging.level.com.dxf.admindemo.mapper:debug
3.前端显示
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户姓名</label>
<div class="layui-input-inline">
<input type="text" name="uName" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户性别</label>
<div class="layui-input-inline">
<input type="text" name="sex" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">权限等级</label>
<div class="layui-input-inline">
<input type="text" name="scale" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<input type="text" name="cId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm data-add-btn"> 添加用户 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"> 删除用户 </button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
table.render({
elem: '#currentTableId',
url: '[[@{/}]]system/tableData',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[
{type: "checkbox", width: 50, fixed: "left"},
{field: 'uId', width: 130, title: 'ID', sort: true},
{field: 'uName', width: 130, title: '用户名'},
{field: 'sex', width: 80, title: '性别', sort: true},
{field: 'password', width: 130, title: '密码'},
{field: 'scale', title: '权限等级', minWidth: 150},
{field: 'loginstatus', width: 80, title: '状态', sort: true},
{field: 'cId', width: 80, title: '班级', sort: true},
{title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
]
],
limits: [5, 10, 15, 20, 50, 100],
limit: 5,
page: true
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
layer.alert(result, {
title: '最终的搜索信息'
});
//执行搜索重载
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
searchUser: result
}
}, 'data');
return false;
});
4.后台处理
@RequestMapping("/tableData")
@ResponseBody
public JSONObject tableData(int page,int limit,@RequestParam(name = "searchUser", required = false) String searchUser){
UserExample userExample=new UserExample();
if (searchUser!=null){
User user = JSONObject.parseObject(searchUser, User.class);
System.out.println(user);
UserExample.Criteria criteria = userExample.createCriteria();
if (user.getSex()!=null && user.getSex().length()!=0){
criteria.andSexEqualTo(user.getSex());
}
if (user.getuName()!=null && user.getuName().length()!=0){
criteria.andUNameLike("%" + user.getuName() + "%");
}
if (user.getScale()!=null){
criteria.andScaleEqualTo(user.getScale());
}
if (user.getcId()!=null){
criteria.andCIdEqualTo(user.getcId());
}
}
//查询之前调用，传入页码，以及每页数量
PageHelper.startPage(page, limit);
//startPage后面紧跟的查询是分页查询
List<User> users = systemServiceImpl.selectByExample(userExample);
//用PageInfo对结果进行包装,传入连续显示的页数
PageInfo pageInfo = new PageInfo(users,limit);
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "");
jsonObject.put("count", pageInfo.getTotal());
jsonObject.put("data", pageInfo.getList());
return jsonObject;
}
单筱风
发布了5 篇原创文章 · 获赞 0 · 访问量 123
私信
关注