（转）淘淘商城系列——内容分类管理
http://blog.csdn.net/yerenyuan_pku/article/details/72837691
通過上文的學習，我們已經學會搭建內容管理系統這個工程，本文我們就來學習如何進行內容分類管理。
展示內容分類
我們到后臺管理頁面看看關于內容管理的內容，如下圖所示。?
我們再來看下content-category.jsp頁面，這個頁面就是內容分類頁面，頁面中的<ul id="contentCategory" class="easyui-tree">是用來展示內容分類樹的，$(function(){...})是在頁面加載完后要調用的js代碼，下面這段代碼是用來獲取分類列表數據的，發起的url請求是/content/category/list。?
animate:true的意思是設置動畫，如果設置為true，展開樹形結構時是慢慢展開的效果；如果設置為false，展開樹形結構就一下子展開了。method:"GET"指定發起的是GET請求。
接下來，我們來編寫Service層的代碼。首先在taotao-content-interface工程下的com.taotao.content.service包中新建一個接口——ContentCategoryService.java，并在接口中添加一個getContentCatList方法，如下圖所示。
從中可以看出方法的返回值是EasyUITreeNode的集合，EasyUITreeNode類的內容如下所示。?
- id是樹節點的id。
- text是節點的名稱。
- state是指樹形是閉合的還是打開的，如果當前節點還有子節點，那么state的值是”closed”，如果當前節點已經是葉子節點了，那么state的值是”open”。
下面我們來實現上面的接口，我們在taotao-content-service工程的com.taotao.content.service.impl包下新建一個ContentCategoryServiceImpl實現類，該類實現ContentCategoryService接口，如下圖所示。?
為方便大家復制，將該實現類代碼貼出，如下：
/*** 內容分類管理服務* <p>Title: ContentCategoryServiceImpl</p>* <p>Description: </p>* <p>Company: www.itcast.cn</p> * @version 1.0*/
@Service
public class ContentCategoryServiceImpl implements ContentCategoryService { @Autowired private TbContentCategoryMapper contentCategoryMapper; @Override public List<EasyUITreeNode> getContentCatList(long parentId) { // 根據parentId查詢子節點列表 TbContentCategoryExample example = new TbContentCategoryExample(); // 設置查詢條件 Criteria criteria = example.createCriteria(); criteria.andParentIdEqualTo(parentId); // 執行查詢 List<TbContentCategory> list = contentCategoryMapper.selectByExample(example); // 返回結果為List List<EasyUITreeNode> resultList = new ArrayList<EasyUITreeNode>(); for (TbContentCategory tbContentCategory : list) { EasyUITreeNode node = new EasyUITreeNode(); node.setId(tbContentCategory.getId()); node.setText(tbContentCategory.getName()); node.setState(tbContentCategory.getIsParent() ? "closed" : "open"); // 添加到列表 resultList.add(node); } return resultList; } }- 1
下面我們發布一下該服務的這個接口，我們在taotao-content-service工程的spring目錄下的applicationContext-service.xml配置文件中添加如下配置：
<!-- 聲明需要暴露的服務接口 -->
<dubbo:service interface="com.taotao.content.service.ContentCategoryService" ref="contentCategoryServiceImpl" timeout="300000" />?
注意：dubbo服務向外暴露的端口應該由20880改為20881（每發布一個服務就要更改一個端口）。因為taotao-manager服務綁定的端口號是20880，現在我們又起了一個服務(taotao-content)，但是它們在同一臺服務器上，同一臺服務器上的一個端口只能被一個服務綁定。?
然后我們再來編寫表現層的代碼。我們需要在taotao-manager-web工程中添加Controller類來實現內容分類展示，前提是我們需要先添加對taotao-content-interface的依賴，如下圖所示。?
接著我們需要在taotao-manager-web工程的springmvc.xml配置文件中添加對ContentCategoryService的引用，即要向springmvc.xml配置文件中添加如下配置：
<dubbo:reference interface="com.taotao.content.service.ContentCategoryService" id="contentCategoryService" />- 1
- 1
下面我們在ContentCategoryController類中調用服務接口。@RequestMapping("/content/category/list")注解中的url是從content-category.jsp頁面當中粘貼過來的。?
ContentCategoryController類的代碼如下，這里需要注意的是，第一次查詢內容分類的時候是沒有參數的，因此需要指定一個默認值0，后續點擊要展開某個節點的話，就會把該節點的id傳過來了。
/*** 內容分類管理Controller* <p>Title: ContentCategoryController</p>* <p>Description: </p>* <p>Company: www.itcast.cn</p> * @version 1.0*/
@Controller
public class ContentCategoryController { @Autowired private ContentCategoryService contentCategoryService; @RequestMapping("/content/category/list") @ResponseBody public List<EasyUITreeNode> getContentCatList(@RequestParam(defaultValue="0") Long id) { return contentCategoryService.getContentCatList(id); } }- 1
在啟動測試之前，我們需要先打包taotao-content到本地maven倉庫。由于查詢內容分類列表涉及到了taotao-manager和taotao-content這兩個服務和taotao-manager-web，所以我們依次啟動taotao-manager和taotao-content，然后是taotao-manager-web，啟動好之后我們訪問后臺，如下圖所示，發現可以正常顯示內容分類列表了。?
新增節點
內容分類列表展示出來之后，我們下面要做的便是管理內容分類，比如增加、重命名、刪除等操作，這些操作可以在某個節點上右鍵，在右鍵菜單中操作（當然，現在還沒有實現這三個功能），如下圖所示。?
右鍵菜單是在content-category.jsp頁面的一個<div>中定義的，如下圖所示。?
onContextMenu: function(e,node){：這行代碼的意思是當我們鼠標點擊右鍵的時候觸發該js方法，方法的參數中e代表事件，node代表鼠標在當前哪個節點上。e.preventDefault();：代表事件傳遞。$(this).tree('select',node.target);：$(this)將指定鼠標所在的節點轉變為jQuery對象，繼而調用tree('select',node.target);方法，意思是選中這個節點（node這行會添加背景顏色）。整句代碼的意思是當你點擊右鍵菜單的時候，把當前節點變成可選擇狀態。$('#contentCategoryMenu').menu('show',{：這行代碼的意思是讓右鍵菜單顯示出來，下面的left和top是指坐標。
接著我們分析一下對節點操作的流程。當我們點擊右鍵菜單中的任何一個操作的時候，從下圖中的data-options="onClick:menuHandler"可以得知會觸發一個menuHandler方法。?
編寫的menuHandler方法如下圖所示。?
function menuHandler(item){：這行代碼的意思是定義一個menuHandler方法，參數item是指右鍵菜單這個對象，下面通過item.name來判斷用戶選擇的是哪個操作。var tree = $("#contentCategory");：這行代碼的意思就是獲取分類樹。var node = tree.tree("getSelected");：這行代碼是獲取選中的節點。tree.tree('append', {：這行代碼的意思是我們點擊”添加”菜單項的時候將在這個節點下面追加一個節點，其中?parent: (node?node.target:null),：是為新節點指定父節點。- data里面的text是指新建的節點名稱叫”新建分類”；
id:0表示新建的節點暫時定義節點的id為0；parentId:node.id是指新建節點的parentId是我們操作的節點的id。
var _node = tree.tree('find',0);：意思是在樹中找到id為0的節點（由于新建的節點暫時定義id為0，因此會找到剛添加的節點）。tree.tree("select",_node.target).tree('beginEdit',_node.target);：這行代碼的意思是讓新建的節點處于可編輯狀態。
我們從menuHandler方法中可以看到實際添加節點的操作不在這個方法中，這個方法真正執行的操作是刪除節點，如下圖所示。?
以上這段代碼的意思便是去發起url為”/content/category/delete/”的請求，傳遞的參數是父級id和要刪除的節點的id。function(){...}指代回調函數，其中tree.tree("remove",node.target);的意思就是從樹形結構中刪掉這個節點。?
既然添加節點的操作不在menuHandler這個方法中，那么實際進行添加節點到數據庫表中的操作是在哪兒控制的呢？如下圖所示的onAfterEdit事件。?
onAfterEdit : function(node){：其意思很明顯了，就是我們編輯完之后鼠標離開編輯節點后觸發的事件，參數node是指新建的節點。var _tree = $(this);：是指得到tree控件。if(node.id == 0){：意思是如果node的id是0（我們新建的節點id就暫時定義為0），就會進入這個if判斷邏輯當中。$.post("/content/category/create"：意思是添加節點會去請求”/content/category/create”這個url。{parentId:node.parentId,name:node.text}：指傳遞的參數有兩個，分別是父級id和節點的名稱。function(data)是回調函數，data是返回的對象，其中if(data.status == 200){很顯然是指添加節點這個操作成功了；_tree.tree("update",{target : node.target,id : data.data.id});的意思就是如果添加節點這個操作成功了，那么就要去更新一下新添加的節點的id，即將id從0更新為添加到數據庫中的節點的id，data.data.id就是指添加到數據庫中的節點的id。if(node.id == 0)條件不成立，則說明不是添加新節點操作，而是更新節點操作，其中$.post("/content/category/update",{id:node.id,name:node.text});的意思是請求”/content/category/update”的url，傳遞的參數有節點id、節點名稱。
以上js代碼要是讓我自己寫，我肯定是寫不出來的，本人對jQuery仍然比較陌生，這確實是一個致命傷。我勉強分析完了以上那些js代碼，下面我們便來一一實現內容分類的添加、修改、刪除功能。?
我們首先實現新增節點這個功能，由于都是單表操作，因此使用逆向工程生成的代碼足以滿足要求了，直接修改服務層即可，我們到taotao-content-interface工程添加一個方法，如下圖所示。?
從insertContentCat方法中可以看出其接收兩個參數：parentId、name，這與content-category.jsp頁面傳遞過來的參數是一致的，分別是父級id和節點的名稱。我們還可以看出該方法返回TaotaoResult對象，它里面包裝了TbContentCategory對象。?
下面我們到taotao-content-service工程中去實現這個接口，不過在此之前，由于逆向工程自動生成的insert方法不會自動幫我們給主鍵的值賦值，所以我們需要添加主鍵返回，即需要在TbContentCategoryMapper.xml文件中新增一段sql片段，如下：?
之所以這樣做是因為我們需要用到這個id給樹形結構中新增加的節點id賦值，而在TbContentCategoryMapper.xml文件中新增的sql片段就是給新添加的對象的主鍵賦值的。?
注意：修改完TbContentCategoryMapper.xml映射文件后，需要向本地倉庫安裝taotao-manager-dao包。?
做好以上準備后，我們到ContentCategoryServiceImpl類中實現添加內容分類的方法了，如下所示。?
為方便大家復制，現把ContentCategoryServiceImpl實現類中的insertContentCat方法貼出。
@Override
public TaotaoResult insertContentCat(long parentId, String name) {// 創建一個內容分類對象 TbContentCategory contentCategory = new TbContentCategory(); contentCategory.setName(name); contentCategory.setParentId(parentId); // 新添加的節點都是葉子節點 contentCategory.setIsParent(false); // 排序方法默認設置為1 contentCategory.setSortOrder(1); // 分類狀態：1(正常)，2(刪除) contentCategory.setStatus(1); contentCategory.setCreated(new Date()); contentCategory.setUpdated(new Date()); // 插入節點 contentCategoryMapper.insert(contentCategory); // 判斷父節點是否為葉子節點，為何要判斷？ TbContentCategory parentNode = contentCategoryMapper.selectByPrimaryKey(parentId); if (!parentNode.getIsParent()) { parentNode.setIsParent(true); // 更新父節點 contentCategoryMapper.updateByPrimaryKey(parentNode); } return TaotaoResult.ok(contentCategory); // contentCategory對象里面是包含id屬性的 }?
服務層寫完后，我們再寫表現層的代碼，我們到taotao-manager-web工程的ContentCategoryController類當中添加一個insertContentCat方法，如下圖所示。?
由于taotao-manager-dao工程和taotao-content工程都做了修改，因此我們重新打包taotao-manager-dao(上面修改完TbContentCategoryMapper.xml映射文件就已打包了)和taotao-content工程，然后重啟taotao-manager、taotao-content和taotao-manager-web工程。重啟成功后，我們到后臺管理系統去增加兩個分類，如下圖所示。?
?
至此，新增節點這個功能就已實現！真是不容易啊！
重命名節點
由于時間緊張，在此并不實現該功能，留待以后開發。未完，待續。。。敬請期待。
刪除節點
由于時間緊張，在此并不實現該功能，留待以后開發。未完，待續。。。敬請期待。
轉載于:https://www.cnblogs.com/telwanggs/p/6945942.html
總結
以上是生活随笔為你收集整理的（转）淘淘商城系列——内容分类管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10系统omnipeek无线抓包网
- 下一篇： 日月神教