Reactを使ってブログサイトを作る 10 - 文章ページの実装

Last updated at 2024-12-30Posted at 2024-12-30

静的な構造の構築

    import { Link } from 'react-router-dom'
    import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select } from 'antd'
    import { Table, Tag, Space } from 'antd'
    import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
    // import img404 from '@/assets/error.png'
    const { Option } = Select
    const { RangePicker } = DatePicker
    const Article = () => {
    const columns = [
            {
    title: 'Cover',
    dataIndex: 'cover',
    width: 120,
    render: cover => {
    return <img src={cover.images[0] } width={80} height={60} alt="" />
              }
            },
            {
    title: 'Title',
    dataIndex: 'title',
    width: 220
            },
            {
    title: 'Staus',
    dataIndex: 'status',
    render: data => <Tag color="green">审核通过</Tag>
            },
            {
    title: 'time',
    dataIndex: 'pubdate'
            },
            {
    title: 'views',
    dataIndex: 'read_count'
            },
            {
    title: 'comments',
    dataIndex: 'comment_count'
            },
            {
    title: 'likes',
    dataIndex: 'like_count'
            },
            {
    title: 'more',
    render: data => {
    return (
    <Space size="middle">
    <Button type="primary" shape="circle" icon={<EditOutlined />} />
    <Button
    type="primary"
    danger
    shape="circle"
    icon={<DeleteOutlined />}
    />
    </Space>
                )
              }
            }
          ]
    const data = [
        {
    id: '8218',
    comment_count: 0,
    cover: {
    images: [],
            },
    like_count: 0,
    pubdate: '2019-03-11 09:00:00',
    read_count: 2,
    status: 2,
    title: 'wkwebview离线化加载h5资源解决方案'
        }
        ]
    return (
    <div>
    <Card
    title={
    <Breadcrumb items={[
                { title: <Link to={'/'}>Home</Link> },
                { title: 'Article List' },
              ]} />
    }
    style={{ marginBottom: 20 }}
    >
    <Form initialValues={{ status: '' }}>
    <Form.Item label="Status" name="status">
    <Radio.Group>
    <Radio value={''}>All</Radio>
    <Radio value={0}>Draft</Radio>
    <Radio value={2}>Submitted</Radio>
    </Radio.Group>
    </Form.Item>
    <Form.Item label="Channel" name="channel_id">
    <Select
    placeholder="Please select channel"
    defaultValue="lucy"
    style={{ width: 120 }}
    >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    </Select>
    </Form.Item>
    <Form.Item label="Date" name="date">
    {/* 传入locale属性 控制中文显示*/}
    <RangePicker ></RangePicker>
    </Form.Item>
    <Form.Item>
    <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                  Filter
    </Button>
    </Form.Item>
    </Form>
    </Card>
    <Card title={`Results:`}>
    <Table rowKey="id" columns={columns} dataSource={data} />
    </Card>
    </div>
      )
    }
    export default Article

チャンネルリストの取得

記事リストの取得

フィルター機能

フィルター機能の本質：リスト取得APIに異なるパラメータを渡し、バックエンドから異なるデータを取得することです。
実装手順：
1. 完全なリクエストパラメータオブジェクトを準備します。
2. ユーザーが選択したフォームデータを取得します。
3. フォームデータをAPIの対応するフィールドにセットします。
4. 記事リストAPIを再呼び出し、Tableリストを再描画します。