MyBatis实现分页与ajax笔记（小白向）

MyBatis实现分页（使用PageHelper实现）

1：这里只是说明大致流程与具体实现，原理的话，不是我这种刚刚工作2年多的人该研究的。

步骤：

1：导入maven依赖（版本号，也可以通过父工程管理，当父子工程都指定的时候，执行就近原则，哈哈哈）

	    <!--加入分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>4.0.0</version>
    </dependency>

2：在配置文件中配置好PageHelper插件。详细注释版，大佬勿喷

<!-- 3.配置SqlSessionFactory对象， -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置MyBaties全局配置文件:mybatis-config.xml -->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!-- 扫描pojo包 使用别名 -->
        <property name="typeAliasesPackage" value="com.pojo"/>
        <!-- 扫描sql配置文件:cmapper需要的xml文件 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
        <property name="plugins">
            <array>
                <!-- 配置PageHelper插件 -->
                <bean class="com.github.pagehelper.PageHelper">
                    <property name="properties">
                        <props>
                            <!-- 配置数据库方言，告诉PageHelper当前使用的数据库 -->
                            <prop key="dialect">mysql</prop>
                            <!-- 配置页码的合理化修正，在1~总页数之间修正页码 -->
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>

mybatis的原理就先不总结了，就是通过工厂（SqlSessionFactory）获取SqlSession，然后再去发送sql语句，
与数据库进行交互，所以在这里加上分页插件。spring会扫码这些配置文件，然后运行的时候动态给变量，属性去赋值，用配置文件，是为了方便找到相关参数去维护，当然，也可以选择用类去配置。注解也行，哈哈哈。

#########################################

3：在Service中导入，使用并且启动分页插件

    /**
     *
     * @param keyword 查询的字段
     * @param pageNum 页码，第几页，是startPage的参数
     * @param pageSize 每一页的长度 是startPage的参数
     * @return 返回PageInfo对象，统一数据类型，做过开发的懂的都懂
     * 核心代码其实就是1，2，3步，
     */
    @Override
    public PageInfo<Order> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
        //1：开启分页功能。
        PageHelper.startPage(pageNum,pageSize);
        //2：执行查询，查出数据。
        List<Order> listOrder = orderDao.selectOrderByKeyword(keyword);
        //2.5查看数据是否是理想模型，其实是为了看看这一步有没有数据，哈哈哈，在实际开发中用test去测试。
        for (Order order:listOrder
             ) {
            System.out.println(order);
        }
        //3: 封装成PageInfo对象，并且返回出去。
        return  new PageInfo<>(listOrder) ;
    }

4：自然就是Controller调用咯，当然了，设置一些默认值也是很有必要的，以防缺少参数啥的，这里springMVC会自动的将查询出来的对象转换成JSON字符串，并且返回，毕竟你不能把java对象传到前面的对象呀，jQuery它又不认识，传到前端之后呢，那就是前端的事情了，

    @ResponseBody
    @RequestMapping("/getPageInfo02")
    public PageInfo<Order> getPageInfo02(
            @RequestParam( value = "keyword",defaultValue = "") String keyword,
            @RequestParam(value = "pageNum" ,defaultValue = "1") Integer pageNum,
            @RequestParam(value = "pageSize",defaultValue = "5") Integer pageSize

    ){
        System.out.println(keyword);
        PageInfo<Order> pageInfo = orderService.getPageInfo(keyword,pageNum,pageSize);

        return pageInfo;
    }

5：  请求路径与返回的json字符串  
请求路径：：http://localhost:8080/getPageInfo02?keyword=1826
返回JSON值（js大佬就可以利用这些值，去写出来一些视图，pageNum，pageSize，可以让用户修改，从而出来不同的页码，长度等，总之就是随心所以咯。我也想做一个js大佬。啧啧，全栈工资高啊）：
{"pageNum":1,"pageSize":5,"size":1,"startRow":1,"endRow":1,"total":1,"pages":1,"list":[{"id":1,"salesman":"jg","createTime":"2020-11-13","price":1826}],"firstPage":1,"prePage":0,"nextPage":0,"lastPage":1,"isFirstPage":true,"isLastPage":true,"hasPreviousPage":false,"hasNextPage":false,"navigatePages":8,"navigatepageNums":[1]}

Ajax小白Model（详细注释版，以能交互，发请求为主。）

概念：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）当然，他也是可以同步的，所以我习惯叫他局部动态刷新技术，哈哈哈。就是为了减少数据的传输量，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

流程（嘿嘿，随手画的。）：

与普通请求的区别：

1：普通请求：请求--->响应--->页面
2：Ajax请求：请求--->相应--->数据

Ajax请求示例与详细注释：

       <%--获取基础路径，这里即：http://localhost:8080/   后面拼接的就是请求的路由了--%>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <%--//导入工具包  jquery和layer--%>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
        $(function () {//固定格式，指的是加载完成之后再运行下面的代码
            $('#btn1').click(function () {//通过id选择器绑定单击函数
                var array = [5, 8, 12];//声明一个数组
                var requestBody = JSON.stringify(array);//转换成json字符串来传递
                $.ajax({//调用ajax请求
                    url: 'send/array.html',//目标的请求路径
                    type: 'post',//请求的方式
                    data: requestBody,//具体数据
                    contentType: 'application/json;charset=utf-8',//内容类型，字符编码格式
                    dataType: 'text',//期望的数据类型
                    success: function (data) {//请求成功的处理方式
                        alert(data)
                    },
                    error: function (error) {//请求失败的处理方式
                        alert(error)
                    }
                });
            });
        })
    </script>