在前面兩篇博客中我們分別實現了在dao層的博客類別的增刪改查已經分頁，以及在後臺管理系統界面中的博客類別的分頁顯示，那麼現在我就要準備實現了在後臺管理界面的博客類別的添加，修改，刪除操作了。
#1、博客類別service層完善
在service層中 需要注入dao層的對象 然後調用相應的方法即可
ssm.blog.service.BlogTypeService
“`java
/**
* Created by xp on 2017/4/14.
* @author xp
* @Description 博客類別service接口
*/
public interface BlogTypeService {
//省略其他代碼…
// 添加博客類別
public Integer addBlogType(BlogType blogType);
// 更新博客類別
public Integer updateBlogType(BlogType blogType);
// 刪除博客類別
public Integer deleteBlogType(Integer id);
}
然後就是完善service對應的實現類
ssm.blog.service.impl.BlogTypeImpl
```java
/**
* Created by xp on 2017/4/14.
* @author xp
* @Description 博客類別service接口實現類
*/
@Service
public class BlogTypeServiceImpl implements BlogTypeService{
@Resource
private BlogTypeDao blogTypeDao;
//省略其他代碼...
public Long getTotal() {
return blogTypeDao.getTotal();
}
public Integer addBlogType(BlogType blogType) {
return blogTypeDao.addBlogType(blogType);
}
public Integer updateBlogType(BlogType blogType) {
return blogTypeDao.updateBlogType(blogType);
}
public Integer deleteBlogType(Integer id) {
return blogTypeDao.deleteBlogType(id);
}
}
<div class="se-preview-section-delimiter"></div>
這樣我們的service就解決了 接下來就是完善我們的controller層
2、博客類別controller層完善
在控制層我們需要提供新增、修改、刪除三個url請求接口給前臺的頁面請求，但是其實我們可以把修改跟新增放在一個方法中，只需要判斷傳來的數據是否有沒有id
有：就是修改 沒有：就是新增
對於刪除操作來說，我們的是可以多選的，那麼我們需要前臺把選中的id按照某種特定的方式拼接成字符串 ，然後我們在控制層把字符串按照某種方式分割，然後for循環逐個刪除 刪除的時候我們要判斷該博客類別下面是否有博客 如果有就禁止刪除博客類別 ，等我們完成博客對應的操作再來完善 在那裏我們註釋寫一個TODO就可以
例如
前臺：
選中要刪除的id分別是 var idArray = [3, 5 ,6]
按,拼接拼接成字符var ids = idArray.join(",")
請求發送給後臺
後臺
String[] idArr = ids.split(",");
這樣我們就拿到了全部要刪除的id了
<div class="se-preview-section-delimiter"></div>
就是代碼實現
// 添加和更新博客類別
@RequestMapping("/save")
public String save(BlogType blogType, HttpServletResponse response)
throws Exception {
int resultTotal = 0; // 接收返回結果記錄數
if (blogType.getId() == null) { // 說明是第一次插入
resultTotal = blogTypeService.addBlogType(blogType);
} else { // 有id表示修改
resultTotal = blogTypeService.updateBlogType(blogType);
}
JSONObject result = new JSONObject();
if (resultTotal > 0) {
result.put("success", true);
} else {
result.put("success", false);
}
ResponseUtil.write(response, result);
return null;
}
// 博客類別信息刪除
@RequestMapping(value = "/delete"} )
public String deleteBlog(
@RequestParam(value = "ids", required = false) String ids,
HttpServletResponse response) throws Exception {
//分割字符串得到id數組
String[] idsStr = ids.split(",");
JSONObject result = new JSONObject();
for (int i = 0; i < idsStr.length; i++) {
int id = Integer.parseInt(idsStr[i]);
//其實在這裏我們要判斷該博客類別下面是否有博客 如果有就禁止刪除博客類別 ，等我們完成博客對應的操作再來完善
blogTypeService.deleteBlogType(id);
}
result.put("success", true);
ResponseUtil.write(response, result);
return null;
}
<div class="se-preview-section-delimiter"></div>
3、博客類別管理界面功能完善
還記得我們在datagrid中初始化的js代碼中寫的這段代碼嗎
//上方工具條 添加 修改 刪除 刷新按鈕
toolbar:[{
iconCls: 'icon-add', //圖標
text: '添加', //名稱
handler: function () { //回調函數
alert("添加");
}
},'-',{
iconCls: 'icon-edit',
text: '修改',
handler: function () {
alert("添加");
}
},'-',{
iconCls: 'icon-edit',
text: '刪除',
handler: function () {
alert("刪除");
}
},'-',{
iconCls: 'icon-reload',
text: '刷新',
handler: function () {
alert("刷新");
}
}],
<div class="se-preview-section-delimiter"></div>
這一段代碼是用戶給我們分頁顯示時添加對應的工具條 ，也就是這個樣子
代碼上面的註釋挺清楚，每個屬性對應的作用都有解釋。
我主要說一下handler屬性
當我們點擊對應的按鈕 就應該會執行函數，那麼這個函數的實現寫在哪裏，那就是寫在對應的handler中的，
所以我在對應的handler中寫上alert 測試一下handler有麼有執行，大家可以自行測試一下。
如果大家還是不懂得話所以在easyui API手冊中搜索toolbar
1、功能實現
說一下實現思路 當我們點擊添加按鈕或者修改按鈕 那麼系統就會彈出一個對話框讓我們輸入對應的信息，然後信息輸入完畢，單擊保存就會請求我們後臺對應的保存方法，將數據添加到數據庫，就提示添加成功，
所以我們的第一步就是打開對話框
在 easyui中搜索dialog
我們查看EasyUI的文檔，發現新建一個窗口有兩種方法，要麼使用標籤創建，要麼使用js創建，我們這裏使用標籤創建，但是需要一個
當我們點擊添加或者修改按鈕時 我們是處於blogTypeMange.jsp中 所以我們需要完善這個頁面其實能彈出對話框
<div id="dlg" class="easyui-dialog" style="width:500px; height:180px; padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table cellspacing="8px">
<tr>
<td>博客類別名稱</td>
<td>
<input type="text" id="typeName" name="typeName" class="easyui-validatebox" required="true">
</td>
</tr>
<tr>
<td>博客類別排序</td>
<td>
<input type="text" id="orderNum" name="orderNum" class="easyui-numberbox" required="true"
style="width:60px"> (博客類別會根據序號從小到大排列)
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<div>
<a href="javascript:saveBlogType()" class="easyui-linkbutton" iconCls="icon-ok" plain="true">保存</a>
<a href="javascript:closeBlogTypeDialog()" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">關閉</a>
</div>
</div>
<div class="se-preview-section-delimiter"></div>
其中 closed=”true”代表對話框默認是關閉的
buttons=”#dlg-buttons” 指定對話框的按鈕組爲下面id爲dlg-buttons的div
現在對話框已經創建好了
1.1、添加修改博客類別實現
對於添加或者修改來說其實他們可以共用一個對話框，區別就是
1、修改操作我們需要把id傳遞給後臺 讓後臺知道這是修改操作，
2、修改操作需要把數據回顯在對話框中
所以我們對話框中保存所執行的saveBlogType()方法可以添加或者修改可以通用 只不過是請求的url不同 當我們點擊不同按鈕 設置不同的url即可
//定義全局url 用於修改與添加操作
var url;
//省略其他代碼 讓url聲明在第一行
/**
* 添加或者修改博客類別
*/
function saveBlogType() {
$("#fm").form("submit",{
url: url,
onSubmit: function() {
return $(this).form("validate");
}, //進行驗證，通過才讓提交
success: function(result) {
var result = eval("(" + result + ")"); //將json格式的result轉換成js對象
if(result.success) {
$.messager.alert("系統提示", "博客類別保存成功");
$("typeName").val(""); //保存成功後將內容置空
$("typeNum").val("");
$("#dlg").dialog("close"); //關閉對話框
$("#dg").datagrid("reload"); //刷新一下
} else {
$.messager.alert("系統提示", "博客類別保存失敗");
return;
}
}
});
}
<div class="se-preview-section-delimiter"></div>
這樣我們保存的操作就實現了 接下來就是在點擊不同的按鈕在不同按鈕的handler中設置對應的url即可
對於添加操作來說 我們只需設置對話框的標題以及請求的url即可
{
iconCls: 'icon-add', //圖標
text: '添加', //名稱
handler: function () { //回調函數
//打開對話框並且設置標題
$("#dlg").dialog("open").dialog("setTitle", "添加博客類別信息");
//將url設置爲添加
url = "${blog}/admin/blogType/save.do";
}
}
<div class="se-preview-section-delimiter"></div>
對於修改操作來說 我們首先要判斷選中行的數目 確保被選中修改的只有一行 然後獲取選中的行的信息 把選中行的信息回顯在對話框中
然後設置設置對話框的標題以及請求的url即可
{
iconCls: 'icon-edit',
text: '修改',
handler: function () {
//獲取選中要修改的行
var selectedRows = $("#dg").datagrid("getSelections");
//確保被選中行只能爲一行
if(selectedRows.length != 1) {
$.messager.alert("系統提示", "請選擇一個要修改的博客類別");
return;
}
//獲取選中行id
var row = selectedRows[0];
//打開對話框並且設置標題
$("#dlg").dialog("open").dialog("setTitle", "修改博客類別信息");
//將數組回顯對話框中
$("#fm").form("load", row);//會自動識別name屬性，將row中對應的數據，填充到form表單對應的name屬性中
//在url中添加id 後臺就能識別是更新操作
url = "${blog}/admin/blogType/save.do?id=" + row.id;
}
}
<div class="se-preview-section-delimiter"></div>
接下來我們繼續完善對話框關閉即可
這個功能很簡單，把對話框中內容置空 然後關閉即可
function closeBlogTypeDialog() {
$("typeName").val(""); //保存成功後將內容置空
$("typeNum").val("");
$("#dlg").dialog("close"); //關閉對話框
}
<div class="se-preview-section-delimiter"></div>
1.2、刪除博客類別以及刷新實現
由於我們的系統是支持多選刪除的操作的
所以第一步
1、獲取選中行的對象的數組
2、判斷是否有選中行
3、將選中行的id放入數組中
4、將id數組連接成字符串
5、彈出是否確定刪除對話框
6、發送ajax請求 進行數據庫刪除
7、獲取後臺返回數據 提示是否刪除成功 如果刪除成功 重新載入數據
{
iconCls: 'icon-edit',
text: '刪除',
handler: function () {
//獲取選中要刪除的行
var selectedRows = $("#dg").datagrid("getSelections");
//判斷是否有選擇的行
if(selectedRows.length == 0) {
$.messager.alert("系統提示", "請選擇要刪除的數據");
return;
}
//定義選中 選中id數組
var idsStr = [];
//循環遍歷將選中行的id push進入數組
for(var i = 0; i < selectedRows.length; i++) {
idsStr.push(selectedRows[i].id);
}
//將數組安裝,連接成字符串
var ids = idsStr.join(","); //1,2,3,4
//提示是否確認刪除
$.messager.confirm("系統提示", "<font color=red>您確定要刪除選中的"+selectedRows.length+"條數據麼？</font>", function(r) {
if(r) {
$.post("${blog}/admin/blogType/delete.do",
{ids: ids}, function(result){
if(result.exist) {
$.messager.alert("系統提示", '該類別下有博客，不能刪除!');
} else if(result.success) {
$.messager.alert("系統提示", "數據刪除成功！");
$("#dg").datagrid("reload");
} else {
$.messager.alert("系統提示", "數據刪除失敗！");
}
}, "json");
}
});
}
}
<div class="se-preview-section-delimiter"></div>
刷新操作就比較簡單了 讓我們的datagrid reload一下就可以了
{
iconCls: 'icon-reload',
text: '刷新',
handler: function () {
$("#dg").datagrid("reload");
}
}到此 我們完成了博客類別的添加修改刪除刷新操作了