10-2 图书管理系统（SSM+LayUi）
返回响应信息工具类
- 在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; } }
新建TypeController
- 在com.gychen.controller里新建TypeController
package com.gychen.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TypeController {
@RequestMapping("/typeIndex")
public String typeIndex(){
return "type/typeIndex";
}
/**
* 获取type数据信息 分页
*/
@RequestMapping("/typeAll")
@ResponseBody // 以json格式返回
public Object typeAll(){
return null;
}
}
修改typeIndex.jsp
- 添加jsp头文件和jstl、el、路径信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 获取项目路径和项目其它信息 -->
<%
String path=request.getContextPath();
String basePath=request.getScheme()+
"://"+request.getServerName()+
":"+request.getServerPort()+path+
"/";
%>
<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: '<%=basePath%>typeAll', // 查询类型数据
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 100, title: 'ID', sort: true}, // sort 排序功能
{field: 'name', width: 180, title: '类型名称'},
{field: 'remarks', width: 80, title: '备注信息'},
{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('<%=basePath%>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('<%=basePath%>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>
修改ClassInfoDao
- 在com.gychen.dao里修改ClassInfoDao
package com.gychen.dao;
import com.gychen.po.ClassInfo;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;
import java.util.List;
@Component("classDao")
public interface ClassInfoDao {
/**
* 查询所有图书类型信息
*/
// @Select("select * from class_info")
// List<ClassInfo> queryClassInfoAll();
List<ClassInfo> queryClassInfoAll(@Param(value = "name")String name);
}
添加ClassInfoDao.xml
- 在resources/com.gychen.dao里新建ClassInfoDao.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.gychen.dao.ClassInfoDao" >
<!-- 查询全部信息 -->
<select id="queryClassInfoAll" resultType="com.gychen.po.ClassInfo">
select * from class_info
<where>
<if test="name!=null">
and name like '%${name}%'
</if>
</where>
</select>
</mapper>
- 在ClassInfoService中修改接口信息
List<ClassInfo> queryClassInfoAll (@Param(value = "name")String name);
- 修改TypeController
package com.gychen.controller;
import com.github.pagehelper.PageInfo;
import com.gychen.po.ClassInfo;
import com.gychen.service.ClassInfoService;
import com.gychen.util.RestResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TypeController {
@Autowired
private ClassInfoService classInfoService; // 这里的classInfoService要和ClassInfoServiceImpl中的注解名字相同
@RequestMapping("/typeIndex")
public String typeIndex(){
return "type/typeIndex";
}
/**
* 获取type数据信息 分页
*/
@RequestMapping("/typeAll")
@ResponseBody
public RestResponse typeAll(String name, @RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "15") Integer limit){
PageInfo<ClassInfo> pageInfo = classInfoService.queryClassInfoAll(name, page, limit);
return RestResponse.ok(pageInfo.getList());
}
}
- 修改typeindex.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 获取项目路径和项目其它信息 -->
<%
String path=request.getContextPath();
String basePath=request.getScheme()+
"://"+request.getServerName()+
":"+request.getServerPort()+path+
"/";
%>
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main">
<div class="demoTable">
类型名称：
<div class="layui-inline">
<input class="layui-input" name="name" id="name" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<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: '<%=basePath%>typeAll', // 查询类型数据
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 100, title: 'ID', sort: true}, // sort 排序功能
{field: 'name', width: 180, title: '类型名称'},
{field: 'remarks', width: 180, title: '备注信息'},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
id: 'testReload'
});
var $ = layui.$, active = {
reload: function(){
var name = $('#name');
console.log(name);
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
name: name.val()
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
/**
* toolbar事件监听
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var content = miniPage.getHrefContent('<%=basePath%>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('<%=basePath%>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>
