React+boot实现分页查询数据，渲染到前端页面（2020.5.15）（未完待续）

如图：

先讲思路：
SQL语句：Select * from table limit a,b;（ a为数据的脚标，也就是从什么地方查起，b就是每次需要查询的个数） 注：a和b在下面文字中会涉及。

前端发送请求到后台查询数据时，一般为全部查询，就是把所有的数据一次性查询完毕，返回到前端页面，然后进行页面渲染。但是，这样也有弊端，比如数据量很大，接收的时候消耗资源就多，而我们也不需要一次性返回那么多数据，这就可以转变为分页查询。

当我们在数据展示页面点击下一页的时候，会对当前页设定的 a 进行递增，点击上一页就是 a 递减了，这个是按当前页面所显示的数据 b 来加减的。然后再次发送请求到后台，后台接收查询范围，将查询数据返回。

后台：

mybatis的mapper.xml：

<select id="selectD" resultType="A" >
        select * from table1 limit #{page1},#{page2}  #这个是分页查询的sql语句
</select>
    
<select id="selectPCount"  resultType="int">    #这个是查询所有数据的总数，转化之后用来记录页数
        select COUNT(id) from table1
</select>

这个是controller接口：

#Post方式select查询分页数据操作
    @PostMapping("/selectPageData")
    public List<A> selectPageData(int page1,int page2){
        return dataService.selectData(page1,page2);
    }

#Get方式select查询数据总条数
    @GetMapping("/selectPageCount")
    public int selectPageCount(){
        return dataService.selectPageCount();
    }

剩下的接口层和实现层就不用写了吧。各位大佬都懂的。

前台：

当我们初始化界面的时候，需要进行一次数据的请求。
在 React 中用componentDidMount（）来实现。

componentDidMount() {
        //分页查询
        let data = new FormData();
        data.append("page1",this.state.page1);
        data.append("page2",this.state.page2);
        axios.post("http://localhost:8080/selectPageData",data).then((res) => {
            if(res.status===200) {
                this.setState({navs: res.data});
            }
        });
        //查询总页数
        axios.get("http://localhost:8080/selectPageCount").then((res)=>{
            if(res.status===200){
                let a = Math.ceil(res.data/10);
                this.setState({pageAll:a});
                console.log("总页数 pageAll ： "+this.state.pageAll);
            }
        })
    }