【ssm个人博客项目实战06】博客类别的添加修改删除的实现

在前面两篇博客中我们分别实现了在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 I
4000
nteger 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");
}, //
c2c5
进行验证，通过才让提交
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");
}
}

到此 我们完成了博客类别的添加修改删除刷新操作了