10-1 圖書管理系統(SSM+LayUi)
阿新 • • 發佈:2020-08-13
圖書型別管理模組(型別查詢
)
新建圖書型別管理頁面
-
在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 圖書型別管理-型別查詢)