SSM实战记录(一)--一个大体的分页流程

这是一个使用springMVC+spring+mybatis+bootstrap table做的分页流程,网上之前搜到的类似的教程实在太少了,所以就想着写一个大体的过程(没写的很详细),能帮助到一些人是最好的.

先来一张完成图,可以搜索和按照制定列排序,这些都是操作都是从通过sql搜索出来的.

1.bootstrap table前端设计

对于这种插件,官方例子一般都很详细,遇到不懂得应该去官网查例子,或者翻墙查,反正对百度搜索出来的垃圾不忍直视…
对于表格要注意以下几个问题:
1. 取出来的结果怎么提交给表格(通过ajax请求,返回json串)
2. 得到的json串怎么和表格字段相对应(通过data-field字段)
3. 怎么传递请求参数?怎么设计分页?(传递参数利用queryParams参数,设计分页主要是服务器要返回两个字段,total表示总数量,rows表示当前页数据条数和你搜出来的记录)

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="animated fadeInRightBig">
                <!--添加内容区域-->
                <div class="ibox-content">
                    <h4 class="example-title">题目列表</h4>
                    <div class="btn-group hidden-xs"  role="group" id="exampleToolbar">
                        <button type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                        </button>
                    </div>
                    <!--添加题目表-->
                    <table  id="exampleTableToolbar3" data-toggle="table" >
                        <thead>
                        <tr>
                        <!--data-field和你从数据库取出来的pojo类名相对应-->
                            <th data-field="id" data-sortable="true">ID</th>
                            <th data-field="pro_name">标题</th>
                            <th data-field="pro_num">数据组数</th>
                            <th data-field="pro_path">数据路径</th>
                            <th data-field="cate_id">类别</th>
                            <th data-field="username">上传用户</th>
                            <th data-field="credits" data-sortable="true">积分</th>
                            <th data-field="pro_pass" data-sortable="true">提交次数</th>
                            <th data-field="pro_pass" data-sortable="true">通过次数</th>
                            <th data-field="start_time">加入时间</th>
                            <%--这里是用来编辑的,可以添加编辑,删除等按钮--%>
                            <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <!--添加题目表结束-->

            </div>
        </div>

2.ajax请求json串

具体请求对于bootstrap table一般是放在js里面控制.

var table3 = $("#exampleTableToolbar3");

table3.bootstrapTable({
    url: "/system/getAllProblem",//具体请求地址
    method: ‘post‘,//请求方式
    cache: false,                      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                  //是否显示分页（*）
    search: !0,//是否开启搜索框
    showRefresh: !0,//是否显示刷新框
    sidePagination: "server",          //分页方式：client客户端分页，server服务端分页（*）
    queryParams: queryParams,//传递参数（*）
    pageSize: 10,                      //每页的记录行数（*）
    showColumns: !0,//是否显示columns按钮
    toolbar: "#exampleToolbar",//对用的toolbar
    iconSize: "outline",
    icons: {refresh: "glyphicon-repeat", columns: "glyphicon-list"},//对应按钮对应的字体图标
    uniqueId: "ID"//主键id
});

//题目表参数传递
function queryParams(params) {
    return {
        limit:params.limit,//每页数据条数
        offset:params.offset,//当前页偏移
        order:params.order,//排序
        ordername:params.sort,//需要排序的字段
        search:params.search//搜索的字段
    };
}

随便测试下,就能看到的传递的字段,是json格式的,说明我们要查询10条记录,从第1条开始,按照id奖序,并且要查询带有字符p的相关数据

为了接收参数的方面,我们把上面的几个参数封装到pojo类中,当成一个工具类

public class PageUtil {
    private int limit = 10;//每页限制数,默认为10
    private int offset = 1;//当前页偏移,默认为1
    private String order;//排序
    private String ordername;//排序列名称
    private String search;//搜索内容

    //这里是模糊查询,所以需要对search字段改造下
        public void setSearch(String search) {
        this.search = "%"+search+"%";
    }
    //省略get和set方法
}

3.mybatis对应的sql语句

基本查询语句,会根据PageUtil里面封装的值自动来查询

    <!--查询出所有题目-->
    <select id="findAllProblem" resultType="com.aust.model.system.Problem" parameterType="com.aust.util.PageUtil">
        SELECT * FROM cum_problem
        <where>
            <if test="search != null">
                (pro_name LIKE #{search} ) or (username LIKE #{search})
            </if>
        </where>
        <if test="ordername != null">
            <!--这里使用$符号-->
            ORDER BY ${ordername} ${order}
        </if>
    </select>

4.spring管理的dao

DAO里面只要写上调用mybatis这个sql就可以了.具体错误什么的都由spring来处理.

@Repository("CumProblemMapper")
public class CumProblemMapper {

    @Resource(name = "sqlSessionTemplate")
    private SqlSessionTemplate sqlSessionTemplate;

    public List<Problem> findAllProblem(PageUtil pageUtil){
        return sqlSessionTemplate.selectList("cumProblemMapper.findAllProblem",pageUtil);
    }
}

5.springMVC管理的controller

写控制器要注意以下几点问题:
1. 如何接收传递过来的json数据(用@requestBody pageUtil)
2. 如何分页查询?(利用mybatis分页插件(PageHelper),或者直接在sql里面加上limit ?,?)
3. 分页查询后如何返回json数据?(利用@ResponseBody)

解决了以下几个问题,那么控制器就可以设计如下:

@Controller
@RequestMapping(value = "/system")
public class CumProblemController {
    @Resource(name = "CumProblemMapper")
    private CumProblemMapper cumProblemMapper;

    /**
     * 进入问题列表
     */
    @RequestMapping(value = "/problem_list",method = RequestMethod.GET)
    public String getAllProblemList(){
        return "system/problem_list";
    }

    /**
     * 得到全部的题目
     * @return
     */
    @RequestMapping(value = "/getAllProblem",method = RequestMethod.POST)
    public @ResponseBody Map<String,Object> getAllProblem(@RequestBody PageUtil pageUtil){
        //存储所有的信息,方面返回json串
        Map<String,Object> model = new HashMap<>();
        //开始分页,传递的参数1为请求第几页,参数2为请求条数
        PageHelper.startPage(pageUtil.getOffset()/pageUtil.getLimit()+1,pageUtil.getLimit());
        //查询
        List<Problem> list = cumProblemMapper.findAllProblem(pageUtil);
        //查询结果包装到map
        model.put("total",info.getTotal());
        //查询结果包装到map
        model.put("rows",list);
        //返回json串
        return model;
    }
}

6.到此完成了分页功能,具体的很多参数你都可以另外再配置了,多参考官方文档,有问题请指出