文档章节

【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 1508
阅读 88
收藏 1
点赞 0
评论 0

前言

我在这里给大家道个歉,楼主因为毕业季拍毕业照 找工作事情比较多,所以博客实战给拉下来了,对不起大家,这只是暂时的拉下,楼主是不会放弃的。

1、上篇回顾

在上一节中我们是完成了博客的回台部分,现在我需要在前台拿到回台传来的数据并且给以显示出来。
不知道大家还记得我们在博客类别管理里面,easyui的datagrid用法吗?在这里我们继续使用datagrid 只不过多了一个模糊查询。
接下来给大家看看实际效果


博客分页显示

我们主要显示的有博客的 标题 发布时间 博客类型
然后工具栏多了一个关于博客标题的模糊查询

2、具体编码

2.1、首先 我们需要新建一个blogManage.jsp

然后同样的导入我们的公共头文件

<%@include file="./common/head.jspf"%>

这样我们easyui所用到的一些js或者css就载入进来了

2.2、页面布局

接下我们就要完成这个分页的布局,根据easyui的api手册提供的datagrid的几种使用形式,我们选择html+js的那种方式

<table id="dg" title="博客管理" class="easyui-datagrid" fitColumns="true" pagination="true"
    url="${blog}/admin/blog/listBlog.do" toolbar="#tb">
    <thead>
        <tr>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="20" align="center">编号</th>
            <th field="title" width="200">标题</th>
            <th field="releaseDate" width="100" align="center">发布日期</th> 
            <th field="blogType" width="100" align="center" formatter="formatBlogType">博客类型</th>
        </tr>
    </thead>
</table>
<div id="tb">
    <div>
         标题 <input type="text" id="s_title" size="20" onkeydown="if(event.keyCode==13) searchBlog()">
        <a href="javascript:searchBlog()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        <a href="javascript:deleteBlog()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a href="javascript:openBlogModifyTab()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>        
        <a href="javascript:reload()" class="easyui-linkbutton" iconCls="icon-reload" plain="true">刷新</a>        
    </div>
</div>

大家可能对easyui的部分属性不懂,这里我简单解释一下

1、在table中table 就是整个用与显示的 分页数据的一个便签

  • url 就是数据的请求的接口 这里就是我们后端controller中写好的listBlog那个方法的RequestMapping
  • toolbar就是我们上方工具条的id
  • field整个就是json数据中对应的属性名称
  • formatter就是对数据显示之前调用的格式化的方法名

2、在id=tb的div中 这一块就是分页显示上方的工具条
这里就没有什么好解释的了 就是一个div里面一个input 四个a标签分别对应 模糊查询输入框 模糊查询按钮 删除 修改 刷新

2.3 js方法实现

从上面可以看出,我们需要实现6个js方法 下面我逐个解释一下每一个方法的作用

  • formatBlogType() 这个方法主要是格式化我们的博客类型 因为后端传过来的是一个BlogType对象 但是我只需要显示BlogType的typeName属性就可以,所以这里需要进行格式处理
  • searchBlog()这个方法就是通过input中输入的值 往后端发送查询请求查询数据
  • deleteBlog()这个方法就是删除博客
  • openBlogModifyTab()这个方法就是打开我们博客的修改页面
  • reload()这个方法就是刷新页面 重新载入数据

方法都介绍完了 接下来就是具体编码的实现了

/**
     * 格式化博客类型获取其类型名称
     * @param val
     * @param row
     * @returns {string}
     */
    function formatBlogType(val, row) {
        return val.typeName;
    }

    /**
     * 按照title查询博客信息
     */
    function searchBlog() {
        $("#dg").datagrid("load", {
            "title":$("#s_title").val()
        });
    }

    /**
     * 删除博客信息
     * 可以多选
     */
    function deleteBlog() {
        //获取选中要删除的行
        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) {
                //发送ajax请求
                $.post("${blog}/admin/blog/delete.do",
                        {ids: ids}, function(result){
                            if(result.success) {
                                $.messager.alert("系统提示", "数据删除成功!");
                                $("#dg").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", "数据删除失败!");
                            }
                        }, "json");
            }
        });
    }
    /**
     *打开修改博客界面
     */
    function openBlogModifyTab() {

    }
    /**
     * 重新载入数据
     */
    function reload() {
        $("#dg").datagrid("reload");
    }

在这里我简单讲解一下

formatBlogType(val,row)
val 对应属性的值
row对应行的信息

datagrid比较常用也比较复杂,它有其中有load,reload这三个方法,它们都有相同的功能,都是加载数据的,但又有区别。

load方法,比如我已经定义一个datagrid的id为dg,那这个方法的使用方式为
$(“#dg”).datagrid(“load”,{ });
它的参数为一个json对象,里面写的是你要传输的参数的键值对,调用这个方法来加载数据的时候,它传给后台的分页信息是从第一页开始的。
所以我们模糊查询的时候需要把数值作为查询参数给传递过去
reload方法,使用方式也跟load的一样
$(“#grid”).datagrid(“reload”,{ });
看它的名字应该就可以知道它的做用了,没错,它跟load一样有加载数据功能,也一样的传参数,但它传给后台的分布信息是当前的页码,就是实现刷新当前页的功能。

3、测试与小结


image.png

image.png

在这一节我们完成了博客的分页显示模糊查询等功能,但是其中的修改博客以及写博客我们放到了下一节,所以修改博客那个方法我们暂时也没有实现。

另外博客已经上线了
地址 http://www.yukong.me/Blog/index.html
后台 http://www.yukong.me/Blog/login.jsp
要密码私聊我哦

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
【视频分享】尚硅谷Java视频教程_RBAC权限实战视频教程

        本视频讲授RBAC权限模型的设计、以及在项目中的应用 。 1. 使用Maven进行项目构建 。 2. 页面设计采用响应式前端框架BootStrap 。 3. 采用多种方式展现用户数据:树形结构(z...

后端编程嘟 ⋅ 05/24 ⋅ 0

Java实现个人博客网站

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

实验楼 ⋅ 2017/12/12 ⋅ 0

基于SpringBoot构建个人博客

最近心血来潮,想与大家分享一下SpringBoot应用实战,以一个简单的博客项目来带领大家使用SpringBoot,让大家体会SpringBoot的简单。 本系列视频总共分为8节,会手把手教大家写一个博客系统,...

水门_ ⋅ 2017/12/18 ⋅ 0

《Flask Web开发:基于Python的Web应用开发实战》.PDF

简介 本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书。 • 学习Flask应用的基本结构,编写示例应用; • 使用必备的组件,包括模板、数据库、W...

jackmk ⋅ 2017/08/12 ⋅ 0

好书推荐.flask.>

图书封面: 书籍简介: 1. 学习Flask应用的基本结构,编写示例应用; 使用必备的组件,包括模板,数据库,Web表单和电子邮件支持; 使用包和模块构建可伸缩的大型应用; 实现用户认证,角色和个人资...

满满李 ⋅ 2016/06/03 ⋅ 0

【分享】分享一个基于SSH实现的简单学生选课系统(附源码)

首先声明:本小项目是因老师而做,主要为了完成老师项目要求,当然也添加了许多老师没有要求的功能,本项目代码非常简单,分享出来时为了和我一样的小菜鸟共同学习一下,只适合初学者拿来学习...

长平狐 ⋅ 2012/11/12 ⋅ 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

关于redis个人博客数据结构设计

想用redis做个博客,博客有tags,文章title,文章content,点击量,时间,id号组成.用户可以通过搜索功能,从titile,content和tags查询相关性息,这纯用redis能完成吗?个人感觉不可能啊,redis的模糊查...

徐智渊 ⋅ 2013/03/11 ⋅ 3

数据库逆向框架代码生成工具:MyBatis Generator的使用

MyBatis Generator的详细介绍http://mybatis.github.io/generator/index.html MyBatis Generator With Maven http://mybatis.github.io/generator/running/runningWithMaven.html 1前言 前段......

蛙牛 ⋅ 2014/02/16 ⋅ 28

SSM(七)在JavaWeb应用中使用Redis

前言 由于最近换(mang)了(de)家(yi)公(bi)司接触了新的东西所以很久没有更新了。 这次谈谈Redis,关于应该很多朋友就算没有用过也听过,算是这几年最流行的之一了。 的应用场景非常多这里就不...

crossoverJie ⋅ 2016/12/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部