《CMS后台系统》项目实战 详细分解（九）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

列表组件引入

• 借用ListTable的css样式

直接在div盒子上添加对应属性

    <div className='list_table'>ListList</div>

列表传送门

ant.design/components/…

• 复制对应代码

import { List, Avatar, Button, Skeleton } from 'antd';

const count = 3; const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;

state = { initLoading: true, loading: false, data: [], list: [], };


  const { initLoading, loading, list } = this.state;
  const loadMore =
    !initLoading && !loading ? (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button onClick={this.onLoadMore}>loading more</Button>
      </div>
    ) : null;



    <div className='list_table'>
        <List
        className="demo-loadmore-list"
        loading={initLoading}
        itemLayout="horizontal"
        loadMore={loadMore}
        dataSource={list}
        renderItem={item => (
          <List.Item
            actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
          >
            <Skeleton avatar title={false} loading={item.loading} active>
              <List.Item.Meta
                avatar={<Avatar src={item.picture.large} />}
                title={<a href="https://ant.design">{item.name.last}</a>}
                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
              />
              <div>content</div>
            </Skeleton>
          </List.Item>
        )}
      />
    </div>

修改代码

• 使用useState

// 引入useState
import React,{useState} from 'react'

将List转换就行其余删掉

const [list, setList] = useState([])

删除 fakeDataUrl 、count

删除List中的initLoading、loadMore、 avatar

• 最后代码

import React,{useState} from 'react'
import { List,Skeleton } from 'antd';


export default function ListList() {

  const [list, setList] = useState([])


  return (
    <div className='list_table'>
        <List
        className="demo-loadmore-list"
        itemLayout="horizontal"
        dataSource={list}
        renderItem={item => (
          <List.Item
            actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
          >
            <Skeleton  title={true} loading={item.loading} active>
              <List.Item.Meta
                title={<a href="!#">标题</a>}
                description="副标题"
              />
              <div>日期</div>
            </Skeleton>
          </List.Item>
        )}
      />
    </div>
  )
}

实现效果

使用useEffect发送请求

// 引入useEffect
import React,{useState,useEffect} from 'react'

// 引入api
import { ArticleListApi } from '../request/api';

  // 请求列表数据
  useEffect(()=>{
      ArticleListApi().then(res=>{
        console.log(res.data.arr)
        if(res.errCode === 0) {
          let {arr,total,num,count} = res.data;
          setList(arr)
        }
      })
  },[])

• 渲染数据

 <Skeleton  loading={false}>
              <List.Item.Meta
                title={<a href="!#">{item.title}</a>}
                description={item.subTitle}
              />
              <div>{item.date}</div>
            </Skeleton>

• 实现效果

• 将标题挤开部分

style={{ padding: '20px' }}

• 设置分页

引入分页

import { List,Skeleton,Pagination } from 'antd';

使用API

<Pagination onChange={onChange} total={50} />

书写onChange事件

    // 分页
    const onChange = (pages) => {
      console.log(pages)
    }

使用useState设置total、current、pageSize

  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

在Pagination中可以直接使用total、current、pageSize

<Pagination onChange={onChange} total={50} total={total} current={current} pageSize={pageSize} />

请求更新total、current、pageSize

  // 请求列表数据
  useEffect(()=>{
      ArticleListApi({
        num: current,
        count: pageSize
      }).then(res=>{
        console.log(res.data.arr)
        if(res.errCode === 0) {
          let {arr,total,num,count} = res.data;
          setList(arr);
          setTotal(total);
          setCurrent(num);
          setPageSize(count)
        }
      })
  },[])

• 请求封装

  // 请求封装
  const getList = (num) => {
    ArticleListApi({
      num: num,
      count: pageSize
    }).then(res=>{
      console.log(res.data.arr)
      if(res.errCode === 0) {
        let {arr,total,num,count} = res.data;
        setList(arr);
        setTotal(total);
        setCurrent(num);
        setPageSize(count)
      }
    })
  }

• 书写点击事件

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

将分页按钮书写到右边

style={{float: 'right',marginTop: '20px'}}

日期域按钮

日期

// 引入moment
import moment from 'moment'

//规范时间
<div>{moment(item.date).format("YYYY-MM-DD hh:mm:ss")}</div>

按钮

// 引入button

import { ArticleListApi } from '../request/api';

  actions={[
    <Button type='primary' onClick={()=>console.log(item.id)}>编辑</Button>, 
    <Button type='danger' onClick={()=>console.log(item.id)}>删除</Button>
  ]}