淘淘商城23-CMS內容管理之編輯內容、刪除內容
目錄
1.完成效果展示
1.1編輯內容
選中一行內容，點選編輯
會載入該內容
隨便修改一些內容，比如：內容描述、圖片、內容
點選提交，提示編輯成功
1.2刪除內容
支援多行刪除
選中兩個，點選確認
提示刪除成功
2.編輯內容
2.1前端
2.1.1獲取資料到編輯框
直接看datagrid的編輯toolbar，主要看下面劃紅線的兩個函式
getSelectionsIds("#contentList")函式在common.js中，用來獲取所有被選中行的id，以逗號分割封裝在ids中。
TT.createWindow()函式在common.js中，會將上面{url:"xxx",onLoad:"xxxx"}傳到createWindow中，然後href="/content-edit"，被PageController的@RequestMapping("/{page}")攔截，返回返回/WEB-INF/jsp/content-edit.jsp檢視。
呼叫TT.createWindow()時會觸發onLoad函式，onLoad函式會判斷引數中是否有onLoad函式，如果引數中有onLoad函式則回撥引數中的onLoad函式。很顯然內容編輯中有onLoad函式。
下面是回撥的onLoad函式：
$("#contentList").datagrid("getSelections")[0]獲取所有被選中行的第一行資訊，
$("#contentEditForm").form("load",data)渲染content-edit.jsp中的表單，
然後使用jquery動態新增dom，插入圖片到content-edit.jsp
$.post("/content/getContent"....由於內容列表在載入的時候並沒有載入content欄位，因為content欄位內容太大，所以編輯哪一個的時候，使用ajax動態獲取即可。
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>"); } //獲取content $.post("/content/getContent",{"id":data.id}, function(rt){ console.log("進入ajax"); if(rt.status == 200){ contentEditEditor.html(rt.data); } }); } });
2.1.2傳送儲存內容的表單
現在我們到了content-edit.jsp，content-edit.jsp中的內容也被渲染完了，下面分析前端如果傳送表單。
contentEditEditor = TT.createEditor("#contentEditForm [name=content]");根據name=content的textarea建立富文字編輯器。
TT.initOnePicUpload()初始化後單圖片上傳元件（initOnePicUpload函式在common.js中）
使用者點選提交時，contentEditEditor.sync();用將富文字編輯器的內容同步到name=content的textarea的文字框中，用於表單提交
最後傳送表單資料，post請求url:"/content/edit"，儲存資料到資料庫
2.2後端
第一步：接收id，根據id查詢tbContent中的content欄位
第二步：接收表單，根據id更新tb_Content中的欄位
2.2.1準備content欄位
服務層
在taotao-content-interface編寫介面
/**
* 獲取content
* @param id
* @return
*/
TaotaoResult getContent(Long id);在taotao-content-service實現介面
/**
* 編輯內容時，先根據id，獲取內容的content
*/
@Override
public TaotaoResult getContent(Long id) {
TbContent tbContent = contentMapper.selectByPrimaryKey(id);
String content = tbContent.getContent();
return TaotaoResult.ok(content);
}表現層
在taotao-manager-web編寫controller接收id
/**
* 編輯內容時，先根據id，獲取內容的content
* @param id
* @return
*/
@RequestMapping("/content/getContent")
@ResponseBody
public TaotaoResult getContent(Long id) {
TaotaoResult result = contentSerivce.getContent(id);
return result;
}2.2.2更新內容
使用TbContent接收表單，根據id更新即可
服務層
在taotao-content-interface編寫介面
/**
* 更新編輯的內容
* @param tbContent
*/
TaotaoResult updateContent(TbContent tbContent);在taotao-content-service實現介面
/**
* 更新編輯的內容
*/
@Override
public TaotaoResult updateContent(TbContent tbContent) {
//更新編輯的時間
tbContent.setUpdated(new Date());
contentMapper.updateByPrimaryKey(tbContent);
return TaotaoResult.ok();
}表現層
在taotao-manager-web編寫controller接收表單
/**
* 更新編輯的內容
* @param tbContent
* @return
*/
@RequestMapping("/content/edit")
@ResponseBody
public TaotaoResult updateContent(TbContent tbContent) {
TaotaoResult result = contentSerivce.updateContent(tbContent);
return result;
}3.刪除內容
3.1前端
在content.jsp，傳送post請求url："/content/delete"，並將要刪除的行的id攜帶過去，即可。
刪除後，提示使用者刪除成功，並更新datagird
3.2後端
直接接收id，然後根據id刪除tb_content表中的資料即可
3.2.1服務層
在taotao-content-interface編寫介面
/**
* 根據id批量刪除
* @param ids
* @return
*/
TaotaoResult deleteContent(List<Long> ids);在taotao-content-service實現介面
/**
* 根據id批量刪除
*/
@Override
public TaotaoResult deleteContent(List<Long> ids) {
for (Long id : ids) {
contentMapper.deleteByPrimaryKey(id);
}
return TaotaoResult.ok();
}3.2.2表現層
在taotao-manager-web編寫controller接收ids
使用@RequestParam(value="ids")List<Long> ids接收，是因為ids的格式為 "id,id,id..."這樣的字串，springmvc會自動幫我們轉為list
/**
* 刪除選中的內容
* @param ids
* @return
*/
@RequestMapping("/content/delete")
@ResponseBody
public TaotaoResult deleteContent(@RequestParam(value="ids")List<Long> ids) {
TaotaoResult result = contentSerivce.deleteContent(ids);
return result;
}至此內容管理就完成了