ssm + js 页面加载显示用户表中的数据

参考前序操作：ssm + js 实现注册功能

思路

① 后台

1. Mapper
   a. 进行查询操作，查询状态=1
   b. 编写映射文件
   c. Po
   d. Dto
2. Service：完成分页设置
   a. 查询的同时进行分页操作
   b. PageHelper
3. Controller
   a. 获取前端提交页码和条数
   b. 返回查询的数据

② 前端

1. 页面，显示查询的数据
2. 使用jquery在页面加载时，查询并显示数据
3. Bootstrap框架

操作步骤

1. 分页显示所有数据

(1) 添加分页插件的依赖，在pom文件中

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.1</version>
</dependency>

(2) 添加需要的po和dto

根据业务需要，决定dto中的存在的属性

(3) 创建Mapper添加sql语句
① UserInfoMapper

② 添加查询方法，注意查询的状态

③ 添加映射

1. 使用注解
2. 使用映射文件

<select id="findAll" resultType="com.upc.oa.po.UserInfo">
    select
        userId, userName, userRealName, userSex, userEmail
    from user_info
    where userStatus=1
</select>

④ 每写完一个方法必须进行测试

(4) 创建业务逻辑，需要分页
① 原始情况，只需要分页数据

1. 接口
   
2. 实现类
   
   ② 目前不仅需要显示数据，同时还需要显示总页数、总记录数等
3. 创建接口
   
4. 创建实现类
   
5. 说明
   

(5) 创建控制器
① 创建UserController

② 添加分页的方法

@RequestMapping("/findAll")
public PageInfo<UserInfo> findAll(int pageNum,int pageSize){
    PageInfo<UserInfo> page=null;
    page=userInfoService.findAll(pageNum,pageSize);
    return page;
}

③ 使用idea中自带的插件httpclint测试我们的控制器

1. 启动项目，运行XxxApplication 程序中的main方法
   
   看到以下内容
   
   可以通过http://localhost:8088/oa/xxx/xxx
2. 使用httpClient进行测试控制器
   
   
   
   

2. 前端

(1) 添加需要使用jquery和bootstrap
① Jquery

② Bootstrap

1. 提供大量的css样式和少量js组件
2. 下载bootstrap
   https://www.bootcss.com/
   选择bootstrap4 版本
   https://v4.bootcss.com/docs/getting-started/download/
   
3. 复制到static目录中
   
   (2) 创建页面，在页面中使用添加jquery和bootstrap的依赖
   
   
   注意:
   Jquery 文件的引入必须在bootstrap.js文件的前面
   
   (3) 在static中添加内容后，可能出现不识别的请求，需要先重新编译，后再运行即可
   
   
   编写数据显示的页面
   (1) 注意
   ① Jquery js文件的引入必须在bootstrap js文件之前
   

(2) 如果添加了js、css文件后，运行程序不能识别，必须重新编译，再运行程序

(3) 使用maven管理构建的项目，在pom文件中添加依赖后，可能出现不识别的 情况，重新引入依赖
全选
(1) 页面

(2) Js

在页面加载时，显示数据库中没有删除的用户信息
(1) 使用jquery，在页面加载完毕后，自动向后台发送post请求，获取第一页中的数据

(2) 使用js把数据更新到页面中

<script>
    var pageNum=1;
    var pageSize=3;
    var pageNums=0;

    function init() {
        var param={
            "pageNum":pageNum,
            "pageSize":pageSize
        };
        jQuery.post("user/findAll",param,function (rst) {
          pageNums=rst.pages;
          jQuery("#pages").html(pageNums);
          jQuery("#pageNum").html(pageNum);
          jQuery("#totals").html(rst.total);
          //把查询的数据显示的表格tbody位置
            //1.获取查询的数据
            var arrs=rst.list;
            var trs='';
            for(var i=0;i<arrs.length;i++)
            {
                //获取每一行对应的用户对象
                var u=arrs[i];
                //循环一次，在页面中产生一行数据
                //使用反引号，用于定义模板
                trs+=`
                 <tr>
                    <td>
                        <input type="checkbox" name="ids"
                            value="${u.userId}">
                    </td>
                    <td>${u.userName}</td>
                    <td>${u.userRealName}</td>
                    <td>${u.userSex==1?'男':'女'}</td>
                    <td>${u.userEmail}</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">编辑</a>
                    </td>
                </tr>
                `;
            }
            //把根据数据构建的tr添加到表格中
            jQuery("#data").html(trs);
            //=======================
            //设置页码
            var nums=rst.navigatepageNums;
            var nav=`
                <ul class="pagination">
                    <li class="page-item">
                        <a href="#" class="page-link"
                            οnclick="pageUtil(${pageNum-1})">上一页</a>
                    </li>
                   `;
                //循环读取页码
                for(var i=0;i<nums.length;i++)
                {
                    nav+=`
                        <li class="page-item ${pageNum==nums[i]?'active':''}">
                            <a href="#" class="page-link"
                                οnclick="pageUtil(${nums[i]})">${nums[i]}</a>
                        </li>
                    `;
                }
                nav+=`
                    <li class="page-item">
                        <a href="#" class="page-link"
                            οnclick="pageUtil(${pageNum+1})">下一页</a>
                    </li>
                </ul>
            `;
                jQuery("#right").html(nav);
        })
    }

    //页面加载完毕执行init方法
    jQuery(function () {
        init();
    });
</script>

(1) 实现分页操作

<script>
    //完成分页操作
    //要显示数据的页码
    function pageUtil(num) {
        if(num<=1)
        {
            num=1;
        }
        if(num>=pageNums)
        {
            num=pageNums;
        }
        pageNum=num;
        init();
    }
</script>

② 调用分页函数

//把根据数据构建的tr添加到表格中
jQuery("#data").html(trs);
//=======================
//设置页码
var nums=rst.navigatepageNums;
var nav=`
    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link"
                οnclick="pageUtil(${pageNum-1})">上一页</a>
        </li>
       `;
    //循环读取页码
    for(var i=0;i<nums.length;i++)
    {
        nav+=`
            <li class="page-item ${pageNum==nums[i]?'active':''}">
                <a href="#" class="page-link"
                    οnclick="pageUtil(${nums[i]})">${nums[i]}</a>
            </li>
        `;
    }
    nav+=`
        <li class="page-item">
            <a href="#" class="page-link"
                οnclick="pageUtil(${pageNum+1})">下一页</a>
        </li>
    </ul>
`;
    jQuery("#right").html(nav);

2. 查看请求的资源