(轉）淘淘商城系列——內容管理

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

上文咱們一塊兒學習了內容分類管理，雖然說實現了展現內容分類和新增節點這兩個功能，但重命名節點和刪除節點這兩個功能還未開發，主要是時間太緊了，之後我必定會完善這些功能，讀者若是有興趣，也能夠實現這些功能，但願你們都能學有所成。廢話扯了一大堆，進入主題，本文咱們將一塊兒學習內容管理。

內容列表查詢

首先，咱們先來看看內容管理後臺頁面，以下圖所示，能夠看到頁面分爲兩部分，即分爲左側內容分類和右側內容列表兩個部分。 
爲何內容管理頁面左側的內容分類樹形列表直接就是好的呢？其實咱們看看代碼就知道了，咱們訪問的入口是index.jsp頁面，這個頁面有」內容管理」模塊，當咱們點擊內容管理時，就會去請求content.jsp頁面。 

咱們再來看看content.jsp頁面的代碼，以下圖所示。能夠看到上面那個div就是展現咱們的內容分類列表的，發起的請求與咱們上文中爲實現展現內容分類功能發起的請求徹底同樣，所以這裏不用咱們作任何處理就已經可使用了。下面的div就是內容管理後臺頁面的右部分，用來顯示內容列表，頁面加載的時候，會發起url:'/content/query/list',queryParams:{categoryId:0}這樣的請求，這個請求會去查詢全部內容分類下的全部內容。內容列表的展現其實跟商品列表的展現及其類似，你們能夠參考我以前的淘淘商城系列——MyBatis分頁插件(PageHelper)的使用以及商品列表展現這篇文章進行學習，不一樣的地方是內容列表要根據左邊樹形節點的id的變化而變化。 

那麼內容列表又是如何跟左邊的內容分類聯繫起來的呢？咱們看下面的js代碼，以下圖所示。 

• $(function(){...});函數是在頁面加載完以後觸發執行的js代碼。
• var tree = $("#contentCategoryTree");顯然是獲取內容分類樹。
• var datagrid = $("#contentList");是獲取內容列表。
• onClick : function(node){...}這段代碼的意思是當咱們點擊左邊內容分類樹的某個節點時，會作一下判斷，判斷是否是葉子節點，若是是葉子節點那麼就給categoryId賦值爲這個葉子節點的id而且會從新加載內容列表，也就意味着從新發起url:'/content/query/list'請求，只是這時的queryParams參數中categoryId的值變成了單個葉子節點的id。

搞清了內容列表的展現原理後，照理說咱們如今就應該立刻實現內容列表展現的功能，但由於時間太緊，不打算實現該功能，留待之後開發。 
未完，待續。。。

新增內容

咱們還得從頁面代碼提及，新增內容是在content.jsp頁面當中定義的，咱們能夠看到內容列表中有」toolbar:contentListToolbar」這麼一句代碼，這句代碼的意思是定義了工具欄，工具欄中有多個功能。 

咱們來看看工具欄的代碼，裏面有新增、編輯、刪除三個操做，以下所示：

var contentListToolbar = [{ text:'新增', iconCls:'icon-add', handler:function(){ var node = $("#contentCategoryTree").tree("getSelected"); if(!node || !$("#contentCategoryTree").tree("isLeaf",node.target)){ $.messager.alert('提示','新增內容必須選擇一個內容分類!'); return ; } TT.createWindow({ url : "/content-add" }); } },{ text:'編輯', iconCls:'icon-edit', handler:function(){ var ids = TT.getSelectionsIds("#contentList"); if(ids.length == 0){ $.messager.alert('提示','必須選擇一個內容才能編輯!'); return ; } if(ids.indexOf(',') > 0){ $.messager.alert('提示','只能選擇一個內容!'); return ; } TT.createWindow({ url : "/content-edit", onLoad : function(){ var data = $("#contentList").datagrid("getSelections")[0]; $("#contentEditForm").form("load",data); // 實現圖片 if(data.pic){ $("#contentEditForm [name=pic]").after("<a href='"+data.pic+"' target='_blank'><img src='"+data.pic+"' width='80' height='50'/></a>"); } if(data.pic2){ $("#contentEditForm [name=pic2]").after("<a href='"+data.pic2+"' target='_blank'><img src='"+data.pic2+"' width='80' height='50'/></a>"); } contentEditEditor.html(data.content); } }); } },{ text:'刪除', iconCls:'icon-cancel', handler:function(){ var ids = TT.getSelectionsIds("#contentList"); if(ids.length == 0){ $.messager.alert('提示','未選中商品!'); return ; } $.messager.confirm('確認','肯定刪除ID爲 '+ids+' 的內容嗎？',function(r){ if (r){ var params = {"ids":ids}; $.post("/content/delete",params, function(data){ if(data.status == 200){ $.messager.alert('提示','刪除內容成功!',undefined,function(){ $("#contentList").datagrid("reload"); }); } }); } }); } }];

我對新增操做做以下講解：

• text指定咱們看到的圖標後面的文字。
• iconCls指定新增圖標。
• handler:function()是當咱們點擊」新增」按鈕時觸發的函數。
• var node = $("#contentCategoryTree").tree("getSelected");的意思是獲得用戶選中的內容分類節點。
• if(!node || !$("#contentCategoryTree").tree("isLeaf",node.target)){的意思是若是選中的不是節點或者該節點不是葉子節點，那麼這時就彈出一個」新增內容必須選擇一個內容分類!」的提示框。若是點擊的是葉子節點的話，會調用common.js文件當中定義的TT的createWindow方法初始化一個彈出框，彈出框中顯示的頁面是由參數url: 「/content-add」指定的，也就是content-add.jsp頁面。

下面咱們便來看下content-add.jsp頁面，表格中的字段名稱與咱們的數據庫中表的字段是一致的，這樣咱們即可以直接使用逆向工程生成的代碼了。 

當以上頁面加載完以後，會觸發$(function(){...}方法，下面我來詳細分析一下該方法中的代碼。

• contentAddEditor = TT.createEditor("#contentAddForm [name=content]");的意思是初始化一個富文本編輯器。
• TT.initOnePicUpload();的意思是初始化單張圖片上傳按鈕，也就是說一次只能選擇一張圖片(由於咱們的pic和pic2字段各自對應一張圖片路徑)。
• $("#contentAddForm [name=categoryId]").val($("#contentCategoryTree").tree("getSelected").id);這行代碼的意思是把用戶選擇的內容分類節點的id賦值給隱藏域<input type="hidden" name="categoryId"/>，這樣咱們在提交表單的時候便把內容分類id也一併提交了。

當咱們點擊提交超連接提交表單的時候，就會觸發submitForm : function ()方法，下面我也來詳細分析一下該方法中的代碼。

• if(!$('#contentAddForm').form('validate')){的意思是若是表單輸入不合法，那麼會提示」表單還未填寫完！」。
• contentAddEditor.sync();的意思是若是表單填寫合法，那麼富文本編輯器將與表單中的隱藏域字段(<textarea>字段)進行內容同步。
• $.post("/content/save")的意思是發起url爲/content/save的請求。
• $("#contentAddForm").serialize()將表單中的數據序列化爲key-value形式的字符串。
• function(data){...}指回調函數，if(data.status == 200){的意思是若是返回的狀態爲200的話說明內容添加成功了，$("#contentList").datagrid("reload");意思是內容添加成功後，內容列表要進行從新加載。TT.closeCurrentWindow();的意思是關閉彈出窗口。

當咱們點擊重置超連接重置表單時，就會觸發clearForm : function()方法。$('#contentAddForm').form('reset');的意思是將剛纔表單中輸入的內容清空。 
分析了以上js代碼，下面咱們來實現添加內容這個功能。首先咱們來編寫Service層的代碼。在taotao-content-interface工程下的com.taotao.content.service包中新建一個接口——ContentService.java，並在接口中添加一個insertContent方法，以下圖所示。 

接着咱們來實現上面的接口，咱們在taotao-content-service工程的com.taotao.content.service.impl包下新建一個ContentServiceImpl實現類，該類實現ContentService接口，以下圖所示。 

爲方便你們複製，將該實現類代碼貼出，以下：

/** * 內容管理Service * <p>Title: ContentServiceImpl</p> * <p>Description: </p> * <p>Company: www.itcast.cn</p> * @version 1.0 */ Service public class ContentServiceImpl implements ContentService { @Autowired private TbContentMapper contentMapper; @Override public TaotaoResult insertContent(TbContent content) { // 補全pojo的屬性 content.setCreated(new Date()); content.setUpdated(new Date()); // 向內容表中插入數據 contentMapper.insert(content); return TaotaoResult.ok(); } }

• 1
• 2

下面咱們發佈一下該服務的這個接口，咱們在taotao-content-service工程的spring目錄下的applicationContext-service.xml配置文件中添加以下配置：

<dubbo:service interface="com.taotao.content.service.ContentService" ref="contentServiceImpl" timeout="300000" />

 

而後咱們再來編寫表現層的代碼。首先咱們須要在taotao-manager-web工程的springmvc.xml配置文件中添加對ContentService的引用，即要向springmvc.xml配置文件中添加以下配置：

<dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />

 

接着咱們須要在taotao-manager-web工程中添加ContentController類來實現新增內容這個功能。其中@RequestMapping("/content/save")註解中的url是從content-add.jsp頁面當中粘貼過來的。 

在啓動測試以前，咱們須要先打包taotao-content到本地maven倉庫。因爲新增內容這個功能涉及到了taotao-manager和taotao-content這兩個服務和taotao-manager-web，因此咱們依次啓動taotao-manager和taotao-content，而後是taotao-manager-web，啓動成功以後，而後去添加一個內容，添加界面以下圖所示。 

點擊」提交」以後，咱們能夠發現tb_content表中便有了咱們剛纔添加的內容，以下圖所示。 

編輯內容

因爲時間緊張，在此並不實現該功能，留待之後開發。未完，待續。。。敬請期待。

刪除內容

因爲時間緊張，在此並不實現該功能，留待之後開發。未完，待續。。。敬請期待。