10-1 图书管理系统（SSM+LayUi）
图书类型管理模块(类型查询)
新建图书类型管理页面
-
在WEB-INF/pages里新建type/typeIndex.jsp，把table.html里的代码拷贝进去
-
webapp/api/init.json里的类型管理的页面路径相应更改以对应(改成typeIndex，是Controller层的路径)
<div class="layuimini-container layuimini-page-anim">
<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="username" 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="city" 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="classify" 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-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </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-normal 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>
<script>
layui.use(['form', 'table','miniPage','element'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
miniPage = layui.miniPage;
table.render({
elem: '#currentTableId',
url: 'api/table.json',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'username', width: 80, title: '用户名'},
{field: 'sex', width: 80, title: '性别', sort: true},
{field: 'city', width: 80, title: '城市'},
{field: 'sign', title: '签名', minWidth: 150},
{field: 'experience', width: 80, title: '积分', sort: true},
{field: 'score', width: 80, title: '评分', sort: true},
{field: 'classify', width: 80, title: '职业'},
{field: 'wealth', width: 135, title: '财富', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line'
});
// 监听搜索操作
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: {
searchParams: result
}
}, 'data');
return false;
});
/**
* toolbar事件监听
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var content = miniPage.getHrefContent('page/table/add.html');
var openWH = miniPage.getOpenWidthHeight();
var index = layer.open({
title: '添加用户',
type: 1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var content = miniPage.getHrefContent('page/table/add.html');
var openWH = miniPage.getOpenWidthHeight();
var index = layer.open({
title: '编辑用户',
type: 1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
}
});
});
</script>
在sqlMapConfig.xml里设置分页配置
在配置分页时遇到了BUG，插件版本的问题，修改了下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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.gychen</groupId>
<artifactId>libraryManagerSystem</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>libraryManagerSystem Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.1.3.RELEASE</spring.version>
<slf4j.version>1.6.6</slf4j.version>
<log4j.version>1.2.12</log4j.version>
<mysql.version>8.0.20</mysql.version>
<mybatis.version>3.4.5</mybatis.version>
</properties>
<dependencies>
<!-- spring -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.6.8</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>compile</scope>
</dependency>
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<!-- log start -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<!-- log end -->
<!-- mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<!-- mybatis逆向工程 -->
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
<!-- jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!-- el -->
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>3.0.0</version>
<scope>provided</scope>
</dependency>
<!-- 分页 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>3.7.5</version>
</dependency>
<dependency>
<groupId>com.github.jsqlparser</groupId>
<artifactId>jsqlparser</artifactId>
<version>0.9.1</version>
</dependency>
<!-- jackson时间格式 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.11.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.0</version>
</dependency>
</dependencies>
<build>
<finalName>libraryManagerSystem</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
<!-- mybatis逆向工程 -->
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<!-- 在控制台打印执行日志 -->
<verbose>true</verbose>
<!-- 重复生成时会覆盖之前的文件-->
<overwrite>true</overwrite>
</configuration>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
<!-- 配置分页内容 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<property name="dialect" value="mysql"/>
</plugin>
</plugins>
新建工具类
- 在com.gychen.util里新建Constants和RestRespond
- Constants
package com.gychen.util; /** * 常量类 */ public class Constants { public final static int OK_CODE = 0; public final static int FAIL_CODE = 400; public final static int OTHER_FAIL_CODE = 333; public final static String OK_MSG = "请求成功"; public final static String FAIL_MSG = "请求失败"; public final static int STATUS_0 = 0; //可用状态 public final static int STATUS_1 = 1; //禁用状态 // 单个对象 public static final String ITEM = "item"; // 返回的对象列表 public static final String LIST = "list"; public final static String CACHE_NAME = "KACache"; } - RestRespond
package com.gychen.util; import java.util.HashMap; import java.util.List; /** * REST 接口返回数据 * * @author gychen */ public class RestResponse extends HashMap<String, Object> { /** * 禁止通过构造函数构造对象，只能通过静态方法获取实例。 * * @see #ok() * @see #ok(String) * @see #fail() * @see #fail(String) */ private RestResponse() { } /** * 设置接口返回的文本消息，属性 key: message * * @param msg * @return */ public RestResponse msg(String msg) { this.put(Constants.OK_MSG, msg); return this; } /** * 设置接口返回的数据对象，属性 key: item * * @param item * @return */ public RestResponse item(Object item) { this.put(Constants.ITEM, item); return this; } /** * 设置接口返回的数据对象列表，属性 key: list * * @param list * @return */ public RestResponse list(List<?> list) { this.put("data", list); return this; } /** * 设置接口返回的数据项，并指定数据项的属性 key * * @param key * @param value * @return */ public RestResponse put(String key, Object value) { super.put(key, value); return this; } /** * 接口执行成功的返回数据，其中属性 OK_CODE = 0 * * @return */ public static RestResponse ok() { RestResponse result = new RestResponse(); result.put("code", Constants.OK_CODE); result.put("msg", Constants.OK_MSG); return result; } /** * 接口执行成功的返回数据，并设置文本消息 * * @param msg * @return */ public static RestResponse ok(String msg) { RestResponse result = new RestResponse(); result.put("code", Constants.OK_CODE); result.put("msg", Constants.OK_MSG).msg(msg); return result; } /** * 接口执行成功的返回数据，并设置对象数据 * * @param item * @return */ public static RestResponse ok(Object item) { RestResponse result = new RestResponse(); result.put("msg", Constants.OK_MSG); result.put("code", Constants.OK_CODE).item(item); return result; } /** * 接口执行成功的返回数据，并设置列表对象数据 * * @param list * @return */ public static RestResponse ok(List<?> list) { RestResponse result = new RestResponse(); result.put("code", Constants.OK_CODE); result.put("msg",Constants.OK_MSG).list(list); return result; } /** * 接口执行失败的返回数据，其中属性 FIAL_CODE = 1 * * @return */ public static RestResponse fail() { RestResponse result = new RestResponse(); result.put("code", Constants.FAIL_CODE); result.put("msg", Constants.FAIL_MSG); return result; } /** * 接口执行失败的返回数据，并设置文本消息，其中属性 error = 1, message = {msg} * * @param msg * @return */ public static RestResponse fail(String msg) { RestResponse result = new RestResponse(); result.put("msg", Constants.FAIL_MSG); result.put("code", Constants.FAIL_CODE).msg(msg); return result; } /** * 接口执行失败的返回数据，自定义状态码，其中属性 error = {errcode} * * @param errcode * @return */ public static RestResponse fail(int errcode) { RestResponse result = new RestResponse(); result.put("msg", Constants.FAIL_MSG); result.put("code", errcode); return result; } }
- Constants
（详见10-1 图书类型管理-类型查询）
