http://blog.csdn.net/yerenyuan_pku/article/details/72837691

通過上文的學(xué)習(xí)，我們已經(jīng)學(xué)會(huì)搭建內(nèi)容管理系統(tǒng)這個(gè)工程，本文我們就來學(xué)習(xí)如何進(jìn)行內(nèi)容分類管理。

展示內(nèi)容分類

我們到后臺(tái)管理頁(yè)面看看關(guān)于內(nèi)容管理的內(nèi)容，如下圖所示。?

我們?cè)賮砜聪耤ontent-category.jsp頁(yè)面，這個(gè)頁(yè)面就是內(nèi)容分類頁(yè)面，頁(yè)面中的<ul id="contentCategory" class="easyui-tree">是用來展示內(nèi)容分類樹的，$(function(){...})是在頁(yè)面加載完后要調(diào)用的js代碼，下面這段代碼是用來獲取分類列表數(shù)據(jù)的，發(fā)起的url請(qǐng)求是/content/category/list。?

• animate:true的意思是設(shè)置動(dòng)畫，如果設(shè)置為true，展開樹形結(jié)構(gòu)時(shí)是慢慢展開的效果；如果設(shè)置為false，展開樹形結(jié)構(gòu)就一下子展開了。
• method:"GET"指定發(fā)起的是GET請(qǐng)求。

接下來，我們來編寫Service層的代碼。首先在taotao-content-interface工程下的com.taotao.content.service包中新建一個(gè)接口——ContentCategoryService.java，并在接口中添加一個(gè)getContentCatList方法，如下圖所示。

從中可以看出方法的返回值是EasyUITreeNode的集合，EasyUITreeNode類的內(nèi)容如下所示。?

• id是樹節(jié)點(diǎn)的id。
• text是節(jié)點(diǎn)的名稱。
• state是指樹形是閉合的還是打開的，如果當(dāng)前節(jié)點(diǎn)還有子節(jié)點(diǎn)，那么state的值是”closed”，如果當(dāng)前節(jié)點(diǎn)已經(jīng)是葉子節(jié)點(diǎn)了，那么state的值是”open”。

下面我們來實(shí)現(xiàn)上面的接口，我們?cè)趖aotao-content-service工程的com.taotao.content.service.impl包下新建一個(gè)ContentCategoryServiceImpl實(shí)現(xiàn)類，該類實(shí)現(xiàn)ContentCategoryService接口，如下圖所示。?

為方便大家復(fù)制，將該實(shí)現(xiàn)類代碼貼出，如下：

/*** 內(nèi)容分類管理服務(wù)* <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) { // 根據(jù)parentId查詢子節(jié)點(diǎn)列表 TbContentCategoryExample example = new TbContentCategoryExample(); // 設(shè)置查詢條件 Criteria criteria = example.createCriteria(); criteria.andParentIdEqualTo(parentId); // 執(zhí)行查詢 List<TbContentCategory> list = contentCategoryMapper.selectByExample(example); // 返回結(jié)果為L(zhǎng)ist 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

下面我們發(fā)布一下該服務(wù)的這個(gè)接口，我們?cè)趖aotao-content-service工程的spring目錄下的applicationContext-service.xml配置文件中添加如下配置：

<!-- 聲明需要暴露的服務(wù)接口 -->
<dubbo:service interface="com.taotao.content.service.ContentCategoryService" ref="contentCategoryServiceImpl" timeout="300000" />

?

注意：dubbo服務(wù)向外暴露的端口應(yīng)該由20880改為20881（每發(fā)布一個(gè)服務(wù)就要更改一個(gè)端口）。因?yàn)閠aotao-manager服務(wù)綁定的端口號(hào)是20880，現(xiàn)在我們又起了一個(gè)服務(wù)(taotao-content)，但是它們?cè)谕慌_(tái)服務(wù)器上，同一臺(tái)服務(wù)器上的一個(gè)端口只能被一個(gè)服務(wù)綁定。?
然后我們?cè)賮砭帉懕憩F(xiàn)層的代碼。我們需要在taotao-manager-web工程中添加Controller類來實(shí)現(xiàn)內(nèi)容分類展示，前提是我們需要先添加對(duì)taotao-content-interface的依賴，如下圖所示。?

接著我們需要在taotao-manager-web工程的springmvc.xml配置文件中添加對(duì)ContentCategoryService的引用，即要向springmvc.xml配置文件中添加如下配置：

<dubbo:reference interface="com.taotao.content.service.ContentCategoryService" id="contentCategoryService" />

• 1

• 1

下面我們?cè)贑ontentCategoryController類中調(diào)用服務(wù)接口。@RequestMapping("/content/category/list")注解中的url是從content-category.jsp頁(yè)面當(dāng)中粘貼過來的。?

ContentCategoryController類的代碼如下，這里需要注意的是，第一次查詢內(nèi)容分類的時(shí)候是沒有參數(shù)的，因此需要指定一個(gè)默認(rèn)值0，后續(xù)點(diǎn)擊要展開某個(gè)節(jié)點(diǎn)的話，就會(huì)把該節(jié)點(diǎn)的id傳過來了。

/*** 內(nèi)容分類管理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

在啟動(dòng)測(cè)試之前，我們需要先打包taotao-content到本地maven倉(cāng)庫(kù)。由于查詢內(nèi)容分類列表涉及到了taotao-manager和taotao-content這兩個(gè)服務(wù)和taotao-manager-web，所以我們依次啟動(dòng)taotao-manager和taotao-content，然后是taotao-manager-web，啟動(dòng)好之后我們?cè)L問后臺(tái)，如下圖所示，發(fā)現(xiàn)可以正常顯示內(nèi)容分類列表了。?

新增節(jié)點(diǎn)

內(nèi)容分類列表展示出來之后，我們下面要做的便是管理內(nèi)容分類，比如增加、重命名、刪除等操作，這些操作可以在某個(gè)節(jié)點(diǎn)上右鍵，在右鍵菜單中操作（當(dāng)然，現(xiàn)在還沒有實(shí)現(xiàn)這三個(gè)功能），如下圖所示。?

右鍵菜單是在content-category.jsp頁(yè)面的一個(gè)<div>中定義的，如下圖所示。?

• onContextMenu: function(e,node){：這行代碼的意思是當(dāng)我們鼠標(biāo)點(diǎn)擊右鍵的時(shí)候觸發(fā)該js方法，方法的參數(shù)中e代表事件，node代表鼠標(biāo)在當(dāng)前哪個(gè)節(jié)點(diǎn)上。
• e.preventDefault();：代表事件傳遞。
• $(this).tree('select',node.target);：$(this)將指定鼠標(biāo)所在的節(jié)點(diǎn)轉(zhuǎn)變?yōu)閖Query對(duì)象，繼而調(diào)用tree('select',node.target);方法，意思是選中這個(gè)節(jié)點(diǎn)（node這行會(huì)添加背景顏色）。整句代碼的意思是當(dāng)你點(diǎn)擊右鍵菜單的時(shí)候，把當(dāng)前節(jié)點(diǎn)變成可選擇狀態(tài)。
• $('#contentCategoryMenu').menu('show',{：這行代碼的意思是讓右鍵菜單顯示出來，下面的left和top是指坐標(biāo)。

接著我們分析一下對(duì)節(jié)點(diǎn)操作的流程。當(dāng)我們點(diǎn)擊右鍵菜單中的任何一個(gè)操作的時(shí)候，從下圖中的data-options="onClick:menuHandler"可以得知會(huì)觸發(fā)一個(gè)menuHandler方法。?

編寫的menuHandler方法如下圖所示。?

• function menuHandler(item){：這行代碼的意思是定義一個(gè)menuHandler方法，參數(shù)item是指右鍵菜單這個(gè)對(duì)象，下面通過item.name來判斷用戶選擇的是哪個(gè)操作。
• var tree = $("#contentCategory");：這行代碼的意思就是獲取分類樹。
• var node = tree.tree("getSelected");：這行代碼是獲取選中的節(jié)點(diǎn)。
• tree.tree('append', {：這行代碼的意思是我們點(diǎn)擊”添加”菜單項(xiàng)的時(shí)候?qū)⒃谶@個(gè)節(jié)點(diǎn)下面追加一個(gè)節(jié)點(diǎn)，其中?
  • parent: (node?node.target:null),：是為新節(jié)點(diǎn)指定父節(jié)點(diǎn)。
  • data里面的text是指新建的節(jié)點(diǎn)名稱叫”新建分類”；id:0表示新建的節(jié)點(diǎn)暫時(shí)定義節(jié)點(diǎn)的id為0；parentId:node.id是指新建節(jié)點(diǎn)的parentId是我們操作的節(jié)點(diǎn)的id。
• var _node = tree.tree('find',0);：意思是在樹中找到id為0的節(jié)點(diǎn)（由于新建的節(jié)點(diǎn)暫時(shí)定義id為0，因此會(huì)找到剛添加的節(jié)點(diǎn)）。
• tree.tree("select",_node.target).tree('beginEdit',_node.target);：這行代碼的意思是讓新建的節(jié)點(diǎn)處于可編輯狀態(tài)。

我們從menuHandler方法中可以看到實(shí)際添加節(jié)點(diǎn)的操作不在這個(gè)方法中，這個(gè)方法真正執(zhí)行的操作是刪除節(jié)點(diǎn)，如下圖所示。?

以上這段代碼的意思便是去發(fā)起url為”/content/category/delete/”的請(qǐng)求，傳遞的參數(shù)是父級(jí)id和要?jiǎng)h除的節(jié)點(diǎn)的id。function(){...}指代回調(diào)函數(shù)，其中tree.tree("remove",node.target);的意思就是從樹形結(jié)構(gòu)中刪掉這個(gè)節(jié)點(diǎn)。?
既然添加節(jié)點(diǎn)的操作不在menuHandler這個(gè)方法中，那么實(shí)際進(jìn)行添加節(jié)點(diǎn)到數(shù)據(jù)庫(kù)表中的操作是在哪兒控制的呢？如下圖所示的onAfterEdit事件。?

• onAfterEdit : function(node){：其意思很明顯了，就是我們編輯完之后鼠標(biāo)離開編輯節(jié)點(diǎn)后觸發(fā)的事件，參數(shù)node是指新建的節(jié)點(diǎn)。
• var _tree = $(this);：是指得到tree控件。
• if(node.id == 0){：意思是如果node的id是0（我們新建的節(jié)點(diǎn)id就暫時(shí)定義為0），就會(huì)進(jìn)入這個(gè)if判斷邏輯當(dāng)中。
• $.post("/content/category/create"：意思是添加節(jié)點(diǎn)會(huì)去請(qǐng)求”/content/category/create”這個(gè)url。
• {parentId:node.parentId,name:node.text}：指?jìng)鬟f的參數(shù)有兩個(gè)，分別是父級(jí)id和節(jié)點(diǎn)的名稱。
• function(data)是回調(diào)函數(shù)，data是返回的對(duì)象，其中if(data.status == 200){很顯然是指添加節(jié)點(diǎn)這個(gè)操作成功了；_tree.tree("update",{target : node.target,id : data.data.id});的意思就是如果添加節(jié)點(diǎn)這個(gè)操作成功了，那么就要去更新一下新添加的節(jié)點(diǎn)的id，即將id從0更新為添加到數(shù)據(jù)庫(kù)中的節(jié)點(diǎn)的id，data.data.id就是指添加到數(shù)據(jù)庫(kù)中的節(jié)點(diǎn)的id。
• if(node.id == 0)條件不成立，則說明不是添加新節(jié)點(diǎn)操作，而是更新節(jié)點(diǎn)操作，其中$.post("/content/category/update",{id:node.id,name:node.text});的意思是請(qǐng)求”/content/category/update”的url，傳遞的參數(shù)有節(jié)點(diǎn)id、節(jié)點(diǎn)名稱。

以上js代碼要是讓我自己寫，我肯定是寫不出來的，本人對(duì)jQuery仍然比較陌生，這確實(shí)是一個(gè)致命傷。我勉強(qiáng)分析完了以上那些js代碼，下面我們便來一一實(shí)現(xiàn)內(nèi)容分類的添加、修改、刪除功能。?
我們首先實(shí)現(xiàn)新增節(jié)點(diǎn)這個(gè)功能，由于都是單表操作，因此使用逆向工程生成的代碼足以滿足要求了，直接修改服務(wù)層即可，我們到taotao-content-interface工程添加一個(gè)方法，如下圖所示。?

從insertContentCat方法中可以看出其接收兩個(gè)參數(shù)：parentId、name，這與content-category.jsp頁(yè)面?zhèn)鬟f過來的參數(shù)是一致的，分別是父級(jí)id和節(jié)點(diǎn)的名稱。我們還可以看出該方法返回TaotaoResult對(duì)象，它里面包裝了TbContentCategory對(duì)象。?
下面我們到taotao-content-service工程中去實(shí)現(xiàn)這個(gè)接口，不過在此之前，由于逆向工程自動(dòng)生成的insert方法不會(huì)自動(dòng)幫我們給主鍵的值賦值，所以我們需要添加主鍵返回，即需要在TbContentCategoryMapper.xml文件中新增一段sql片段，如下：?

之所以這樣做是因?yàn)槲覀冃枰玫竭@個(gè)id給樹形結(jié)構(gòu)中新增加的節(jié)點(diǎn)id賦值，而在TbContentCategoryMapper.xml文件中新增的sql片段就是給新添加的對(duì)象的主鍵賦值的。?
注意：修改完TbContentCategoryMapper.xml映射文件后，需要向本地倉(cāng)庫(kù)安裝taotao-manager-dao包。?
做好以上準(zhǔn)備后，我們到ContentCategoryServiceImpl類中實(shí)現(xiàn)添加內(nèi)容分類的方法了，如下所示。?

為方便大家復(fù)制，現(xiàn)把ContentCategoryServiceImpl實(shí)現(xiàn)類中的insertContentCat方法貼出。

@Override
public TaotaoResult insertContentCat(long parentId, String name) {// 創(chuàng)建一個(gè)內(nèi)容分類對(duì)象 TbContentCategory contentCategory = new TbContentCategory(); contentCategory.setName(name); contentCategory.setParentId(parentId); // 新添加的節(jié)點(diǎn)都是葉子節(jié)點(diǎn) contentCategory.setIsParent(false); // 排序方法默認(rèn)設(shè)置為1 contentCategory.setSortOrder(1); // 分類狀態(tài)：1(正常)，2(刪除) contentCategory.setStatus(1); contentCategory.setCreated(new Date()); contentCategory.setUpdated(new Date()); // 插入節(jié)點(diǎn) contentCategoryMapper.insert(contentCategory); // 判斷父節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)，為何要判斷？ TbContentCategory parentNode = contentCategoryMapper.selectByPrimaryKey(parentId); if (!parentNode.getIsParent()) { parentNode.setIsParent(true); // 更新父節(jié)點(diǎn) contentCategoryMapper.updateByPrimaryKey(parentNode); } return TaotaoResult.ok(contentCategory); // contentCategory對(duì)象里面是包含id屬性的 }

?

服務(wù)層寫完后，我們?cè)賹懕憩F(xiàn)層的代碼，我們到taotao-manager-web工程的ContentCategoryController類當(dāng)中添加一個(gè)insertContentCat方法，如下圖所示。?

由于taotao-manager-dao工程和taotao-content工程都做了修改，因此我們重新打包taotao-manager-dao(上面修改完TbContentCategoryMapper.xml映射文件就已打包了)和taotao-content工程，然后重啟taotao-manager、taotao-content和taotao-manager-web工程。重啟成功后，我們到后臺(tái)管理系統(tǒng)去增加兩個(gè)分類，如下圖所示。?
?
至此，新增節(jié)點(diǎn)這個(gè)功能就已實(shí)現(xiàn)！真是不容易啊！

重命名節(jié)點(diǎn)

由于時(shí)間緊張，在此并不實(shí)現(xiàn)該功能，留待以后開發(fā)。未完，待續(xù)。。。敬請(qǐng)期待。

刪除節(jié)點(diǎn)

由于時(shí)間緊張，在此并不實(shí)現(xiàn)該功能，留待以后開發(fā)。未完，待續(xù)。。。敬請(qǐng)期待。

轉(zhuǎn)載于:https://www.cnblogs.com/telwanggs/p/6945942.html

總結(jié)

以上是生活随笔為你收集整理的（转）淘淘商城系列——内容分类管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。