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

来源：互联网发布：随意裁剪图片软件编辑：程序博客网时间：2024/05/21 02:19

这是一个使用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.到此完成了分页功能,具体的很多参数你都可以另外再配置了,多参考官方文档,有问题请指出

项目示例:

SSM框架整合: https://github.com/nl101531/JavaWEB

自己做的一个项目: https://github.com/nl101531/AUSTOJ

2 0