React+Antd实现搜索与分页功能

根据后台Api，实现搜索与分页功能。

模糊查询Api：
src/api/accout.js

// 模糊查询接口
export function searchVideo (data) {
    return service.request({
        url:"/video/select",
        method:"get",
        params:data         //请求类型为 get 时
    })
}

View/admin/index.js（主界面）

//引入Antd分页组件：
import { Pagination } from 'antd';
//获取视api
import { getAllvideo } from '../../api/accout'
import Search from '../search/index'

export default class Admin extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            //创建数组保存获取的接口数据
            list: [],
            //每页10条数据
            pageSize: 10,
            pageNum: 1
        };
    }
    
    // 生命周期函数---渲染后调用
    componentDidMount() {
        this.getApiData();
    }
    
    //获取视频数据函数：
    getApiData = (values) => {
        getAllvideo({
            pageNum: this.state.pageNum,
            pageSize: this.state.pageSize
        }).then(res => {
            console.log(res);
            this.setState({
                //获取的数据保存到list数组
                list: res.data
            })
        }).catch(err => {
            console.log(err)
        })
    }
    
    //父组件搜索函数，子组件（搜索组件）调用此函数，改变list列表，从而根据搜索内容展示对应数据。
    //子组件（搜索组件）通过在输入框输入关键字，调用模糊查询api，返回相关数据
    valueChange(data) {
        this.setState({
            list: data
        })
    }   
    
    
    //页码点击事件（分页）（重点）
    onPageNumChange(pageNum) {
        // alert(pageNum)
        this.setState({
            pageNum 
        }, () => {
            getAllvideo({
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize
            }).then(res => {
                console.log(res);
                this.setState({
                    //获取的数据保存到list数组
                    list: res.data
                })
            }).catch(err => {
                console.log(err)
            })
        })
    }
    
        
    render() {
        const list = this.state.list;

        return (
            <>
                

                    


                    

                    

                     this.onPageNumChange(pageNum)}
                    />
                
            
        )
    }
}

View/search/index.js（搜索组件）

import React, { Component } from 'react'
import './index.css'
//引入模糊查询接口：
import { searchVideo } from '../../api/accout'

export default class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                title: '',
                source: '',
                subject: '',
                remark: ''
            }
        }
    }

    //输入框事件
    handleChange = (key, e) => {
        let form = this.state.form
        for (let i in form) {

            if (i === key) {
                form[i] = e.target.value
                this.setState(form)
            }
        }
        console.log('输入框的值',form)
    }


    //提交事件
    handleSubmit(e) {
        e.preventDefault();

        const params = {
            title: this.state.form.title,
            source: this.state.form.source,
            subject: this.state.form.subject,
            remark: this.state.form.remark
        }

        searchVideo(params)
            .then(res => {
                if (res.status === 200) {
                    // const arr = []
                    console.log('搜索接口返回值', res)
                    this.props.ValueChange(res.data)
                } else {
                    alert('搜索接口出现问题')
                }
            }).catch(err => {
                console.log(err)
            })
    }


    render() {
        return (
            <>
                

                    

                        

                            

                                标题：
                                

                            
                            

                                来源：
                                

                            
                            

                                主体：
                                

                            
                            

                                备注：
                                
                            
                        


                        

                            
                        
                    
                
            
        )
    }
}