前端react 开发图书列表分页

我最近刚开始使用react 进行实际的企业项目开发

网文系统

我平常使用vue多

最近突然猛地一用 react 说实话多少有点不熟练所以我现在开始一步一步总结

有一个列表的功能

显示一些图书

大概是这样目前有一个列表对接一个接口然后接上分页功能

至于说样式就慢慢写了

我直接上整个代码了

复制代码

import { Button, Card, Space, Image, Pagination, Modal } from 'antd'
import React, { useEffect, useState } from 'react'
import {
  http
  // , NumberInputChange 
} from '@/utils'

import "./index.scss"
import Operation from 'antd/es/transfer/operation'

const BookList = () => {
  const [list, setBookList] = useState([

  ])
  const [pageinfo, setPageInfo] = useState({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

  useEffect(() => {
    getlist()
  }, [pageinfo.currentPage, pageinfo.pageSize]) // 添加依赖，当
  const fetchUserList = async () => {
    return http.post('/api/Works/GetNovelList', {
      pageIndex: pageinfo.currentPage, // 使用当前页码
      pageSize: pageinfo.pageSize,     // 使用当前页大小
    }).then(res => {
      console.log(res)
      return res

      // return res.body.list.map(item => ({
      //   label: item.groupAlarmName,
      //   value: item.id,
      // }))
    })
  }

  const getlist = async () => {
    const res = await fetchUserList()
    console.log(res, "获取当前的结果")
    if (res.code == 200) {
      setBookList(res.data.infos)
      setPageInfo(prev => ({
        ...prev,
        total: res.data.totalCount
      }))
    } else {

    }



  }
  const handleBookAction = (e, name) => {
    console.log(e, name)

  }
  // 页码改变
  const handlePageChange = (page, pageSize) => {
    console.log('页码改变:', page, '页大小:', pageSize)
    setPageInfo(prev => ({
      ...prev,
      currentPage: page,
      pageSize: pageSize
    }))
    // 不要在这里手动调用 getlist()，useEffect 会自动触发
  }

  // 页大小改变
  const handleSizeChange = (current, size) => {
    console.log('页大小改变:', '当前页:', current, '新大小:', size)
    setPageInfo(prev => ({
      ...prev,
      currentPage: 1, // 重要：改变页大小时回到第一页
      pageSize: size
    }))
  }
  const [isModalOpen, setIsModalOpen] = useState(false)
  const handleOk = () => {
    alert("我点击了确定按钮")
    setIsModalOpen(false)

  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  const openModal = () => {
    setIsModalOpen(true)

  }
  return (
    <div style={{ padding: '20px' }}>
      <Card size="small" title="我的作品" extra={<Button onClick={openModal} type='primary'>添加新书</Button>}>
        <div className='book-container'>
          {
            list.map((item) => {
              return <Card key={item.novelID} size='small' style={{ marginBottom: '16px' }} actions={[
                <Button type="link" onClick={() => handleBookAction(item, 'edit')}>编辑</Button>,
                <Button type="link" onClick={() => handleBookAction(item, 'chapters')}>章节管理</Button>,
                <Button type="link" onClick={() => handleBookAction(item, 'publish')}>发布</Button>
              ]}>
                {/* {item.novelName} */}
                <div className='item'>
                  <Image src={item.coverUrl} width={150} style={{ objectFit: 'widthFix', borderRadius: '8px' }}></Image>
                  <div className='content'>
                    <div className='text'>
                      <div className='name'>{item.novelName}</div>
                      <div className='updated'>最近更新：{item.latestUpdateChapter}</div>
                    </div>
                    <div className='number'>
                      <div className='chanpterCount'>{item.totalChapterCount} 章 ｜ </div>
                      <div className='wordCount'>{item.totalWordCount} 字 ｜</div>
                      <div className=''>{item.isFinish == 0 ? '连载' : '未完结'}</div>
                    </div>
                  </div>


                </div>

              </Card>

            })
          }
          {/* <div className='item'>

          </div> */}

        </div>
        <div className='book-pagination'>
          <Pagination
            showSizeChanger
            onChange={handlePageChange}           // 页码改变
            onShowSizeChange={handleSizeChange}   // 页大小改变            
            pageSize={pageinfo.pageSize}
            total={pageinfo.total}
            current={pageinfo.currentPage}


          />

        </div>
      </Card>
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  )

}

export default BookList

当然这里面使用的是函数组件

现在写react 我感觉还是函数组件好使。简单明了类组件感觉不太好上手需要详细查看才行

我这边使用的是ant-design 组件库对这个react 框架比较适配

我这边遇到的问题是分页组件这里

复制代码

          <Pagination
            showSizeChanger
            onChange={handlePageChange}           // 页码改变
            onShowSizeChange={handleSizeChange}   // 页大小改变            
            pageSize={pageinfo.pageSize}
            total={pageinfo.total}
            current={pageinfo.currentPage}


          />

当然使用这个 ant-design，跟在vue中不太一样呢用惯了vue 肯定不太习惯写react

复制代码

  const [pageinfo, setPageInfo] = useState({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })

在react 中这个东西就跟vue 的双向绑定就不太一样写法

复制代码

 setPageInfo(prev => ({
        ...prev,
        total: res.data.totalCount
      }))

赋值方法可定不一样

大家可以慢慢看我来更新

前端react 开发 图书列表分页

前端react 开发图书列表分页