【React】极客园案例实践-发布文章模块

前情提要-Layout模块完成

发布文章模块

4、发布文章模块
- [4-1 实现基础文章发布](#4-1 实现基础文章发布)
- [4-2 上传封面实现](#4-2 上传封面实现)
- - 准备上传结构
  - 实现现基础上传
- [4-3 切换图片Type](#4-3 切换图片Type)
- [4-4 控制最大上传图片数量](#4-4 控制最大上传图片数量)
- [4-5 发布带封面的文章](#4-5 发布带封面的文章)
- - 校验图片类型和数量是否吻合
  - 处理图片列表格式为接口格式
- [4-6 暂存图片列表实现](#4-6 暂存图片列表实现)

4、发布文章模块

4-1 实现基础文章发布

创建基础结构

pages/Publish/index.jsx

jsx 复制代码

import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import './index.scss'

const { Option } = Select

const Publish = () => {
  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '发布文章' },
          ]}
          />
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ type: 1 }}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择文章频道' }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              <Option value={0}>推荐</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: '请输入文章内容' }]}
          ></Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish

pages/Publish/index.scss

css 复制代码

.publish {
  position: relative;
}

.ant-upload-list {
  .ant-upload-list-picture-card-container,
  .ant-upload-select {
    width: 146px;
    height: 146px;
  }
}

提交-17发布文章-基础结构搭建

准备富文本编辑器

实现步骤

安装富文本编辑器
导入富文本编辑器组件以及样式文件
渲染富文本编辑器组件
调整富文本编辑器的样式

代码落地

1-安装 react-quill

bash 复制代码

npm i react-quill@2.0.0-beta.2 --legacy-peer-deps

2-导入资源渲染组件

bash 复制代码

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

<ReactQuill
   className="publish-quill"
   theme="snow"
   placeholder="请输入文章内容"
 />

pages/Publish/index.jsx

css 复制代码

.publish-quill {
  .ql-editor {
    min-height: 300px;
  }
}

pages/Publish/index.scss

提交-18发布文章-接入富文本编辑器

频道数据获取

实现步骤

使用useState初始化数据和修改数据的方法
在useEffect中调用接口并保存数据
使用数据渲染对应模版

apis/article.jsx

jsx 复制代码

// 封装文章相关的所有请求

import { request } from "@/utils"

// 获取所有频道
export function getChannelAPI(formData) {
  // axios规范写法
  return request({
    url: '/channels',
    method: 'GET',
  })
}

pages/Publish/index.jsx

提交-19发布文章-频道列表的获取渲染

发布文章

测试

提交-20发布文章-基础文章发布

4-2 上传封面实现

准备上传结构

放在内容的上面，频道的下面

jsx 复制代码

<Form.Item label="封面">
  <Form.Item name="type">
    <Radio.Group>
      <Radio value={1}>单图</Radio>
      <Radio value={3}>三图</Radio>
      <Radio value={0}>无图</Radio>
    </Radio.Group>
  </Form.Item>
  <Upload
    listType="picture-card"
    showUploadList
  >
    <div style={{ marginTop: 8 }}>
      <PlusOutlined />
    </div>
  </Upload>
</Form.Item>