直播平台搭建源码，react+ts实现分页全部功能

index.tsx代码

<br>import React, { Component } from 'react';<br>import Header from '../../component/header'<br>import Footer from '../../component/footer'<br>import { Pagination } from 'antd';<br>import axios from 'axios';<br>type Props = {<br>    history:any<br>    data:any<br>}<br>class Index extends React.Component<Props>{<br>    constructor(props:any){<br>        super(props)<br>        this.state={<br>            list:[],<br>            pPageCfg: {<br>                page_number: sessionStorage.getItem("currentPages") || 1,<br>                page_size: 8,<br>              },<br>            setPageCfg: {<br>                currentPage: 1,<br>                totalPage: 24,<br>            },<br>         }<br>         this.lists=this.lists.bind(this)<br>    }<br>   <br>   itemRender(current:any, type:any, originalElement:any) { if (type === 'prev') { return <a>上一页</ a>; } if (type === 'next') { return <a>下一页</ a>; } return originalElement; }<br>   getPage=(page:any, page_size = 8)=> {<br>    sessionStorage.setItem("currentPages", encodeURIComponent(page));<br>    const { pPageCfg }:any = this.state;<br>    pPageCfg.page_number = page;<br>    pPageCfg.page_size = page_size;<br>    console.log({...pPageCfg},123)<br>    axios.get("http://localhost:8888/pages", {params:{...pPageCfg}}).then((res) => {<br>      console.log(res.data);<br>      const list2=res.data.data<br>        this.setState({<br>           list:list2,<br>          setPageCfg: {<br>            currentPage: page,<br>            totalPage: 24,<br>          },<br>        });<br>    });<br>  }<br>  lists():any{<br>    const {list}:any =this.state<br>    return list.map((item:any,index:any)=>{<br>     return <li key={index} onClick={()=>{this.xiabiao(item,index)}}><br>             <div><br>                  <img src={item.img} alt="" /><br>                  <p>{item.txt}</p><br>             </div><br>         </li><br>    })<br>}<br>   componentDidMount(){<br>    const { setPageCfg }:any = this.state;<br>      this.getPage(setPageCfg.currentPage);<br>   }<br>   xiabiao(item:any,index:number){<br>    console.log(item)<br>    this.props.history.push({pathname: `/case/detail/${index}`, state: {data:item}})<br>   }<br>   first(){<br>    let {setPageCfg}:any =this.state<br>    if(setPageCfg.currentPage == 1){<br>      return<br>    }<br>    setPageCfg.currentPage = 1<br>    this.setState({<br>      setPageCfg<br>    })<br>    this.getPage(1)<br>   }<br>   end(){<br>    let {setPageCfg}:any =this.state<br>    if(setPageCfg.currentPage == 3){<br>      return<br>    }<br>    setPageCfg.currentPage = 3<br>    this.setState({<br>      setPageCfg<br>    })<br>    this.getPage(3)<br>  }<br>    public render() {<br>        const {list,setPageCfg}:any=this.state<br>        console.log(list)<br>        return (<br>            <div><br>              <Header></Header><br>                <ul className="content">{list.length>0&&this.lists()}</ul><br>                <div className="fenyeqi"><br>                  <p className="zongshu">共有3页</p><br>                  <p onClick={()=>{this.first()}}>首页</p><br>                  {list.length !== 0 ? (<br>                  <Pagination <br>                    className="fenye"<br>                    onChange={this.getPage}<br>                    current={setPageCfg.currentPage}<br>                    defaultPageSize={8}<br>                    total={setPageCfg.totalPage}<br>                    itemRender={this.itemRender}<br>                   /><br>                  ) : (<br>                  "请等待..."<br>                  )}<br>                  <p onClick={()=>{this.end()}}>尾页</p><br>                </div><br>                <Footer></Footer><br>            </div><br>        );<br>    }<br>}<br>export default Index;

后台接口

<br>router.get('/pages', async (req, res, next) => {<br>  let {page_size=8,page_number=1}=req.query<br>  let sql = `select * from pages limit ${(page_number-1)*page_size},${page_size}`<br>  let result = await mysql(sql)<br>  if (result) {<br>    res.json(new SuccessModule(result))<br>    return<br>  }<br>  res.json(new ErrorModule('操作失败'))<br>})