jeeplus+mysql實現新聞管理後臺（最詳細）

時間  2019-11-10
標籤 jeeplus+mysql jeeplus mysql 實現 管理 後臺 詳細 欄目 MySQL 简体版
原文   原文鏈接

最近前端菜鳥的我跟着作了一個項目，主要負責後臺管理模塊中的新聞管理模塊，主要功能有新聞的增刪改查，主要涉及到的一些控件有：自動填充的form表單，二級聯動下拉框和富文本編輯器，接下來就把此次項目學習到的知識記錄下來，算是複習一下，也方便之後有相似需求的同窗借鑑。javascript

首先，咱們此次使用的框架是jeeplus，雖然它的評價都不是很好，說它醜，還花錢，而且仍是抄襲jeesite只是扒個皮，但其實在項目裏我以爲使用起來仍是挺方便的，並且也不算醜，你們能夠自行到官網查看API和使用說明等文檔，須要說明的是，他確實是一個比較不錯的應用框架，對二次開發來講很方便，使用代碼生成器能夠爲咱們自動生成一些基本代碼，避免了在開發過程當中一些重複性的工做。下邊是官網地址：http://www.jeeplus.org/      具體的配置和環境搭建就不說了，API上都寫的很清楚，接下來介紹使用jeeplus自動生成代碼並加載到本身的項目中。html

點擊代碼生成中的表單配置，添加一個表單前端

上圖定義了一個名爲news_test的表單，數據庫表名爲news_test，對應的的實體類javaBean或者說與數據庫表對應的實體類的類名爲NewsTest，實體類的說明爲測試新聞管理entity，該表是一個單表，也就是獨立存在的表，沒有外鍵，也不存在父表或者子表，只是爲了存放新聞發佈的相關信息。java

接下來，在數據庫屬性分頁中，添加了如上的屬性，這裏要注意的是文章內容是想經過富文本在線編輯，而不是使用附件上傳這種，因此它的類型必定要注意，設置成longblob，這張表主要是爲了設置數據庫表的，數據庫會自動建立news_test表，而且添加以上的字段，而且對應的說明和類型等都會設置好。也注意這裏，我把fbsj字段設置成varchar類型，而沒有設置成時間類型（好比date，dateTime等），緣由是我爲了接下來更方便的操做時間顯示的格式，我想經過前臺傳回一個字符串，而不是一個時間對象，由於js時間對象的格式和咱們習慣的時間格式不一樣。接下來是頁面屬性分頁的配置web

 這個分頁是對實體類的定義，以及sql語句的xml文件的基本配置，java屬性名稱對應的就是實體類當中的屬性，表單欄是肯定是否顯示在彈出框中，我在這裏是想在彈出框中加載富文本編輯器，而對應的發佈時間是不想由用戶填寫的，是前臺添加事件，當表單提交時，觸發事件，得到當前時間，而後賦值到fbsj框裏，傳輸到後臺。列表欄是指是否顯示在列表裏，這裏其實就是新聞列表，查詢欄對應的是查詢條件，我這裏是select  from...where bk_id=...AND lm_id=...經過查找不一樣的欄目來顯示在該欄目裏的新聞。注意，這裏的content的顯示錶單類型要設置成富文本編輯器，這樣前臺代碼中，對應content的div纔會是他默認的富文本編輯器樣式。我這裏沒有使用自定義java對象，因此第三個分頁沒有操做，這裏也就不向你們介紹了，你們若是須要能夠本身查看API。接下來就是點擊確認，注意，點擊確認後，須要同步數據庫，這樣才能在數據庫中創建相應的表進行配置。同步完成以後，咱們就可使用代碼自動生成這個功能了，把代碼檢出。通常都是在D盤中新增了一個src文件。目錄結構以下：sql

src數據庫

--mainmybatis

----javaapp

------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 &copy; 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>

能夠看出這裏是使用了自動填充表單來獲取數據，而且填充到相應的容器中。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程