最近前端菜鳥的我跟着做了一個項目，主要負責后台管理模塊中的新聞管理模塊，主要功能有新聞的增刪改查，主要涉及到的一些控件有：自動填充的form表單，二級聯動下拉框和富文本編輯器，接下來就把這次項目學習到的知識記錄下來，算是復習一下，也方便以后有類似需求的同學借鑒。
首先，我們這次使用的框架是jeeplus，雖然它的評價都不是很好，說它丑，還花錢，並且還是抄襲jeesite只是扒個皮，但其實在項目里我覺得使用起來還是挺方便的，而且也不算丑，大家可以自行到官網查看API和使用說明等文檔，需要說明的是，他確實是一個比較不錯的應用框架，對二次開發來說很方便，使用代碼生成器可以為我們自動生成一些基本代碼，避免了在開發過程中一些重復性的工作。下邊是官網地址：http://www.jeeplus.org/ 具體的配置和環境搭建就不說了，API上都寫的很清楚，接下來介紹使用jeeplus自動生成代碼並加載到自己的項目中。
點擊代碼生成中的表單配置，添加一個表單
上圖定義了一個名為news_test的表單，數據庫表名為news_test，對應的的實體類javaBean或者說與數據庫表對應的實體類的類名為NewsTest，實體類的說明為測試新聞管理entity，該表是一個單表，也就是獨立存在的表，沒有外鍵，也不存在父表或者子表，只是為了存放新聞發布的相關信息。
接下來，在數據庫屬性分頁中，添加了如上的屬性，這里要注意的是文章內容是想通過富文本在線編輯，而不是使用附件上傳這種，所以它的類型一定要注意，設置成longblob，這張表主要是為了設置數據庫表的，數據庫會自動創建news_test表，並且添加以上的字段，並且對應的說明和類型等都會設置好。也注意這里，我把fbsj字段設置成varchar類型，而沒有設置成時間類型（比如date，dateTime等），原因是我為了接下來更方便的操作時間顯示的格式，我想通過前台傳回一個字符串，而不是一個時間對象，因為js時間對象的格式和我們習慣的時間格式不同。接下來是頁面屬性分頁的配置
這個分頁是對實體類的定義，以及sql語句的xml文件的基本配置，java屬性名稱對應的就是實體類當中的屬性，表單欄是確定是否顯示在彈出框中，我在這里是想在彈出框中加載富文本編輯器，而對應的發布時間是不想由用戶填寫的，是前台添加事件，當表單提交時，觸發事件，獲得當前時間，然后賦值到fbsj框里，傳輸到后台。列表欄是指是否顯示在列表里，這里其實就是新聞列表，查詢欄對應的是查詢條件，我這里是select from...where bk_id=...AND lm_id=...通過查找不同的欄目來顯示在該欄目里的新聞。注意，這里的content的顯示表單類型要設置成富文本編輯器，這樣前台代碼中，對應content的div才會是他默認的富文本編輯器樣式。我這里沒有使用自定義java對象，所以第三個分頁沒有操作，這里也就不向大家介紹了，大家如果需要可以自己查看API。接下來就是點擊確認，注意，點擊確認后，需要同步數據庫，這樣才能在數據庫中建立相應的表進行配置。同步完成之后，我們就可以使用代碼自動生成這個功能了，把代碼檢出。一般都是在D盤中新增了一個src文件。目錄結構如下：
src
--main
----java
------com--jeeplus--modules--news_test（dao、entity、service、web）
----resources
------mapping--modules--news_test
--webcontent
----webpage--modules--news_test
其中java文件夾中包括了后台的代碼，dao對應數據庫操作接口，entity對應實體類，service對應業務邏輯接口，web對應控制層，resources文件夾里主要存放的是sql語句的xml文件，主要是把實體和數據庫之間建立映射，采用了mybatis數據持久層。而webcontent就是存放的前台代碼。接下來要做的就是把文件加載到我們的項目里了。就是把三個news_test文件夾分別復制到我們項目中對應的文件夾下邊就可以了。
最終項目目錄結構如下：
數據庫中也已經存在news_test表，表結構如下：
我們代碼已經沒有問題了，初步的代碼都已經有了，接下來我們可以測試一下。在jeeplus管理中，點擊代碼生成下的表單配置，找到我們剛才創建的news_test表，勾選上之后，點擊上邊的生成菜單，彈出菜單配置窗口，如下配置：
點擊確定后，刷新界面就可以看到新聞管理這個菜單了，注意，如果打開該菜單，提示用戶權限不足，只需要重新啟動一下項目就可以了，因為菜單欄其實也對應着后台相應的文件，此時雖然把前台界面刷新了，只是操作的前台界面文件，並沒有在后台文件中生成相應的記錄，所以會提示用戶權限不足，重啟后刷新頁面，可以看到如下界面：
這里對該表的增刪改查，jeeplus其實也經幫我們自動生成了，我們可以測試一下新增一條新聞信息，然后刪除，修改等。mmp，我前邊忽略了一個問題，因為我的bk_id和lm_id是想做成下拉框，在數據庫中寫死，前台只需要讀取數據庫中的記錄顯示出來就可以了，而不是用戶自定義這兩項，所以把前邊頁面屬性配置那里，bk_id和lm_id對應的顯示表單類型修改成下拉框。。。。。在修改完成之后，需要重新生成代碼，然后把代碼加到項目里來，當然，其實手動自己改還是更方便的，之前無非就是錯把select標簽寫成了input標簽，只要在前台頁面代碼中自己動手改一下就好了。
好，前邊其實都是一些簡單的圖形化操作，接下來就要根據我們的實際需求來進行二次開發了，首先我們這個二級聯動下拉框應該如何實現呢？我的思路是這樣，因為怕中文數據在傳輸過程中太復雜，所以我想通過id來進行傳輸，在數據庫中讀取相應的中文名稱。首先建立兩張表板塊表和欄目標，板塊表存儲bk_id和對應的板塊名稱，欄目表里存放lm_id和欄目名稱。在數據庫中建立如下兩張表，news_bk,news_lm，如下：
板塊：
填入初始值，我設置成3個板塊a,b,c,如下：
欄目：
填入初始值，每個版塊下邊還有2個模塊：
當然，創建完數據表以后一定需要創建對應的實體對象了，在項目entity文件夾中創建如下兩個java文件，代碼如下：
/** * 新聞板塊Entity * @author jts * @version 2017-08-13 */ public class NewsBk extends DataEntity<NewsBk> { private static final long serialVersionUID = 1L; private String bk_id; // 板塊id private String bk_name; //板塊名稱 public NewsBk() { super(); } public NewsBk(String bk_id){ super(bk_id); } @Length(min=1, max=64, message="板塊id長度必須介於 1 和 64 之間") @ExcelField(title="板塊id", align=2, sort=1) public String getBk_id() { return bk_id; } public void setBk_id(String bk_id) { this.bk_id = bk_id; } @Length(min=1, max=64, message="板塊名稱長度必須介於 1 和 64 之間") @ExcelField(title="板塊名稱", align=2, sort=2) public String getBk_name() { return bk_name; } public void setBk_name(String bk_name) { this.bk_name = bk_name; } }
/** * Copyright © 2015-2020 <a href="http://www.jeeplus.org/">JeePlus</a> All rights reserved. */ package com.jeeplus.modules.news_test.entity; import org.hibernate.validator.constraints.Length; import com.jeeplus.common.persistence.DataEntity; import com.jeeplus.common.utils.excel.annotation.ExcelField; /** * 新聞欄目Entity * @author jts * @version 2017-08-13 */ public class NewsLm extends DataEntity<NewsLm> { private static final long serialVersionUID = 1L; private String lm_id; // 欄目id private String bk_id; //板塊id private String lm_name; //欄目名稱 public NewsLm() { super(); } public NewsLm(String lm_id){ super(lm_id); } @Length(min=1, max=64, message="欄目id長度必須介於 1 和 64 之間") @ExcelField(title="欄目id", align=2, sort=1) public String getLm_id() { return lm_id; } public void setLm_id(String lm_id) { this.lm_id = lm_id; } @Length(min=1, max=64, message="板塊id長度必須介於 1 和 64 之間") @ExcelField(title="板塊id", align=2, sort=2) public String getBk_id() { return bk_id; } public void setBk_id(String bk_id) { this.bk_id = bk_id; } @Length(min=1, max=64, message="欄目名稱長度必須介於 1 和 64 之間") @ExcelField(title="欄目名稱", align=2, sort=3) public String getLm_name() { return lm_name; } public void setLm_name(String lm_name) { this.lm_name = lm_name; } }
這時，我們打開的界面如下：
其中，前兩個下拉框點擊時，什么內容都沒有，只有空，這就證明我們還沒有把后台數據庫中的值傳入進來，所以接下來看前台代碼，前台代碼主要有兩個文件，一個是List對應的是新聞展示列表界面，另一個是Form，對應的就是彈出的窗口界面，也就是上圖所展示的界面，我們先從List界面修改。List界面代碼如下：
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/webpage/include/taglib.jsp"%> <html> <head> <title>新聞管理</title> <meta name="decorator" content="default"/> <script type="text/javascript"> $(document).ready(function() { }); </script> </head> <body class="gray-bg"> <div class="wrapper wrapper-content"> <div class="ibox"> <div class="ibox-title"> <h5>新聞管理列表 </h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">選項1</a> </li> <li><a href="#">選項2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <sys:message content="${message}"/> <!--查詢條件--> <div class="row"> <div class="col-sm-12"> <form:form id="searchForm" modelAttribute="newsTest" action="${ctx}/news_test/newsTest/" method="post" class="form-inline"> <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/> <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/> <table:sortColumn id="orderBy" name="orderBy" value="${page.orderBy}" callback="sortOrRefresh();"/><!-- 支持排序 -->
<div class="form-group"> <span>板塊id：</span> <form:select path="bk_id" class="form-control m-b"> <form:option value="" label=""/> <form:options items="${fns:getDictList('')}" itemLabel="label" itemValue="value" htmlEscape="false"/> </form:select> <span>欄目id：</span> <form:select path="lm_id" class="form-control m-b"> <form:option value="" label=""/> <form:options items="${fns:getDictList('')}" itemLabel="label" itemValue="value" htmlEscape="false"/> </form:select> </div>
</form:form> <br/> </div> </div> <!-- 工具欄 --> <div class="row"> <div class="col-sm-12"> <div class="pull-left"> <shiro:hasPermission name="news_test:newsTest:add"> <table:addRow url="${ctx}/news_test/newsTest/form" title="新聞管理"></table:addRow><!-- 增加按鈕 --> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:edit"> <table:editRow url="${ctx}/news_test/newsTest/form" title="新聞管理" id="contentTable"></table:editRow><!-- 編輯按鈕 --> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:del"> <table:delRow url="${ctx}/news_test/newsTest/deleteAll" id="contentTable"></table:delRow><!-- 刪除按鈕 --> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:import"> <table:importExcel url="${ctx}/news_test/newsTest/import"></table:importExcel><!-- 導入按鈕 --> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:export"> <table:exportExcel url="${ctx}/news_test/newsTest/export"></table:exportExcel><!-- 導出按鈕 --> </shiro:hasPermission> <button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新</button> </div> <div class="pull-right"> <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查詢</button> <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="reset()" ><i class="fa fa-refresh"></i> 重置</button> </div> </div> </div> <!-- 表格 --> <table id="contentTable" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable"> <thead> <tr> <th> <input type="checkbox" class="i-checks"></th> <th class="sort-column bk_id">板塊id</th> <th class="sort-column lm_id">欄目id</th> <th class="sort-column title">標題</th> <th class="sort-column content">內容</th> <th class="sort-column fbsj">fbsj</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${page.list}" var="newsTest"> <tr> <td> <input type="checkbox" id="${newsTest.id}" class="i-checks"></td> <td><a href="#" onclick="openDialogView('查看新聞管理', '${ctx}/news_test/newsTest/form?id=${newsTest.id}','800px', '500px')"> ${newsTest.bk_id} </a></td> <td> ${newsTest.lm_id} </td> <td> ${newsTest.title} </td> <td> ${fns:unescapeHtml(newsTest.content)} </td> <td> ${newsTest.fbsj} </td> <td> <shiro:hasPermission name="news_test:newsTest:view"> <a href="#" onclick="openDialogView('查看新聞管理', '${ctx}/news_test/newsTest/form?id=${newsTest.id}','800px', '500px')" class="btn btn-info btn-xs" ><i class="fa fa-search-plus"></i> 查看</a> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:edit"> <a href="#" onclick="openDialog('修改新聞管理', '${ctx}/news_test/newsTest/form?id=${newsTest.id}','800px', '500px')" class="btn btn-success btn-xs" ><i class="fa fa-edit"></i> 修改</a> </shiro:hasPermission> <shiro:hasPermission name="news_test:newsTest:del"> <a href="${ctx}/news_test/newsTest/delete?id=${newsTest.id}" onclick="return confirmx('確認要刪除該新聞管理嗎？', this.href)" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 刪除</a> </shiro:hasPermission> </td> </tr> </c:forEach> </tbody> </table> <!-- 分頁代碼 --> <table:page page="${page}"></table:page> <br/> <br/> </div> </div> </div> </body> </html>
可以看出這里是使用了自動填充表單來獲取數據，並且填充到相應的容器中。