文档章节

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

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 2505
阅读 40
收藏 2

在前面两篇博客中我们分别实现了在dao层的博客类别的增删改查已经分页,以及在后台管理系统界面中的博客类别的分页显示,那么现在我就要准备实现了在后台管理界面的博客类别的添加,修改,删除操作了。

1、博客类别service层完善

在service层中 需要注入dao层的对象 然后调用相应的方法即可
ssm.blog.service.BlogTypeService
/**
 * 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

/**
 * 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);
    }
}

这样我们的service就解决了 接下来就是完善我们的controller层
2、博客类别controller层完善
在控制层我们需要提供新增、修改、删除三个url请求接口给前台的页面请求,但是其实我们可以把修改跟新增放在一个方法中,只需要判断传来的数据是否有没有id
有:就是修改 没有:就是新增
对于删除操作来说,我们的是可以多选的,那么我们需要前台把选中的id按照某种特定的方式拼接成字符串 ,然后我们在控制层把字符串按照某种方式分割,然后for循环逐个删除 删除的时候我们要判断该博客类别下面是否有博客 如果有就禁止删除博客类别 ,等我们完成博客对应的操作再来完善 在那里我们注释写一个TODO就可以
例如

前台:
  选中要删除的id分别是 var idArray = [3, 5 ,6]
  按,拼接拼接成字符var ids = idArray.join(",")
  请求发送给后台
后台
  String[]  idArr = ids.split(",");
 这样我们就拿到了全部要删除的id了

就是代码实现

// 添加和更新博客类别
    @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;
    }

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("刷新");
                }
            }],

这一段代码是用户给我们分页显示时添加对应的工具条 ,也就是这个样子


工具条


代码上面的注释挺清楚,每个属性对应的作用都有解释。
我主要说一下handler属性
当我们点击对应的按钮 就应该会执行函数,那么这个函数的实现写在哪里,那就是写在对应的handler中的,
所以我在对应的handler中写上alert 测试一下handler有么有执行,大家可以自行测试一下。
如果大家还是不懂得话所以在easyui API手册中搜索toolbar

1、功能实现

说一下实现思路 当我们点击添加按钮或者修改按钮 那么系统就会弹出一个对话框让我们输入对应的信息,然后信息输入完毕,单击保存就会请求我们后台对应的保存方法,将数据添加到数据库,就提示添加成功,


Paste_Image.png

所以我们的第一步就是打开对话框
在 easyui中搜索dialog
我们查看EasyUI的文档,发现新建一个窗口有两种方法,要么使用标签创建,要么使用js创建,我们这里使用标签创建,但是需要一个<div>盒子,如下:


Paste_Image.png


当我们点击添加或者修改按钮时 我们是处于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">&nbsp;(博客类别会根据序号从小到大排列)
                </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>

其中 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;
                }
            }
        });
    }

这样我们保存的操作就实现了 接下来就是在点击不同的按钮在不同按钮的handler中设置对应的url即可

对于添加操作来说 我们只需设置对话框的标题以及请求的url即可

{
                iconCls: 'icon-add',    //图标
                text: '添加',            //名称
                handler: function () {  //回调函数
                    //打开对话框并且设置标题
                 $("#dlg").dialog("open").dialog("setTitle", "添加博客类别信息");
                //将url设置为添加
                url = "${blog}/admin/blogType/save.do";
                }
}

对于修改操作来说 我们首先要判断选中行的数目 确保被选中修改的只有一行 然后获取选中的行的信息 把选中行的信息回显在对话框中
然后设置设置对话框的标题以及请求的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;
                    }
            }

接下来我们继续完善对话框关闭即可
这个功能很简单,把对话框中内容置空 然后关闭即可

function closeBlogTypeDialog() {
        $("typeName").val(""); //保存成功后将内容置空
        $("typeNum").val("");
        $("#dlg").dialog("close"); //关闭对话框
    }

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");
            }
        });
                }
            }

刷新操作就比较简单了 让我们的datagrid reload一下就可以了

{
                iconCls: 'icon-reload',
                text: '刷新',
                handler: function () {
                            $("#dg").datagrid("reload");
                }
            }

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

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
私信 提问
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
ZHENFENGSHISAN/My-Blog

My Blog My Blog是由Docker+SpringBoot+Mybatis+thymeleaf等技术实现的Java博客系统,本来是一个docker和springboot的实战练习项目,目前已经开源,功能齐全、部署简单及完善的代码,一定会给...

ZHENFENGSHISAN
2017/05/15
0
0
Java实现个人博客网站

说明:该项目是实验楼用户“LOU3165780622”发布在实验楼上的项目教程:【Java实现个人博客】,未经允许,禁止转载; 该项目利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人...

实验楼
2017/12/12
0
0
Nodejs + Express 实现多用户博客系统(23 个视频)

Nodejs 实现最常见的登录注册功能,结合管理文章等功能,实现大家所期待的多用户博客系统。 总播放时长:135 分钟 作者:hfpp2012 类别:后端 技术分类:Nodejs Node.js + Express 实现多用户...

rails365
2018/08/15
0
0
springMVC+spring+mybatis集成

在上一博客讲到如何在maven上创建springMVC项目 通过Maven创建SprinvMVC项目 下面我们接着说如果把SSM框架初步搭建完成,感谢 http://blog.csdn.net/gebitan505/article/details/44455235 我...

minidai
2015/12/03
830
1

没有更多内容

加载失败,请刷新页面

加载更多

弹窗时候禁止页面滚动

1、依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失......

Jack088
30分钟前
7
0
.NET的数学库NMath实用教程——创建最小二乘法

NMath是一个适用于所有.NET语言,如C#、Visual Basic、F#和.NET的数学库,它包含了.NET平台上的面向对象数字计算的基础类。我们将以连载的形式向大家介绍NMath的实用教程,有任何建议或提示...

ymy_666666
31分钟前
2
0
索尼为收购工作室准备,对抗微软?

对比来说,索尼方面不但没有增加新的工作室,反而在过去两年内关闭了一些工作室。面对微软的步步紧逼,索尼最新的招聘广告暗示将来有可能会收购一些工作室。 在领英上,索尼互动娱乐发布了两...

linuxCool
31分钟前
2
0
公司网站有漏洞被入侵该怎么解决

2019年1月14日消息,thinkphp又被爆出致命漏洞,可以直接远程代码执行,getshell提权写入网站木马到网站根目录,甚至直接提权到服务器,该漏洞影响版本ThinkPHP 5.0、ThinkPHP 5.0.10、Think...

网站安全
43分钟前
4
0
centos7 Nginx+rtmp 搭建流媒体服务器

一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum -y install gcc gcc-c++ 二. PCRE pcre-devel 安装 PCRE(Perl Compatib...

legend3
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部