❤ React-文章管理

1、文章功能的思路：

接下来我们实现一个文章管理功能，文章管理功能主要是我们在pc端用户进行登陆以后可以对于文章进行增删改差，然后在后台管理之中可以对发布的文章进行归类

用户可以在特定的文章下面对于文章进行评论等

2、文章部分的搭建

新建一个路由页面，然后我们先搭建一个文章的增删改差页面，跟我们之前的用户部分差不多

也就是我们接下来要搭建的是这个页面

src/views/article/Articlemanage.tsx

先简单搭建一下我们的页面结构

 <>
      <div className="pageuser compage">
        <div className='comback'>
          <Form
            {...formItemLayout}
            layout={formLayout}
            form={form}
            initialValues={{ layout: formLayout }}
            onValuesChange={onFormLayoutChange}
          >
            <Form.Item label="标题">
              <Input placeholder="请输入" style={{ width: 200 }} value={name} onChange={e => setName(e.target.value)} />
            </Form.Item>
            <Form.Item {...handleQuery}>
              <Button onClick={() => { handleQuery() }} type="primary">查询</Button>
            </Form.Item>
            <Form.Item>
              <Button onClick={() => { handleReset() }} type="primary">重置</Button>
            </Form.Item>
          </Form>
        </div>
        <div className='comback'>
          <Button type="primary" onClick={handleAdd}>添加</Button>
        </div>
        <div className='comback' style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Table rowKey="id" dataSource={dataSource} columns={columns}/>
          {/* <Table rowKey="id" dataSource={datatable.length === 0 ? dataSource : datatable} columns={columns}/> */}
        </div>
      </div>
      <Modal
        open={modalVisible}
        title="编辑信息"
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setModalVisible(false)}>
            取消
          </Button>,
          <Button key="save" type="primary" onClick={() => form.submit()}>
            保存
          </Button>,
        ]}
      >
        <Form form={form} onFinish={handleSave}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>

渲染上对应的假数据看看

 const columns = [
    {
      title: '文章ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '文章标题',
      dataIndex: 'title',
      key: 'title',
      
    },
    {
      title: '文章作者',
      dataIndex: 'author',
      key: 'author',
      
    },
    {
      title: '文章内容',
      dataIndex: 'content',
      key: 'content',
      
    },
    {
      title: '文章缩略图',
      dataIndex: 'thumbnail',
      key: 'thumbnail',
      
    },
    {
      title: '文章类型',
      dataIndex: 'articletype',
      key: 'articletype',
      
    },
    {
      title: '点击量',
      dataIndex: 'articleclick',
      key: 'articleclick',
      
    },
    {
      title: '收藏量',
      dataIndex: 'articlecollect',
      key: 'articlecollect',
      
    },
    {
      title: '文章状态',
      dataIndex: 'articlestatus',
      key: 'articlestatus',
      
    },
    {
      title: '文章发布时间',
      dataIndex: 'articlecreateTime',
      key: 'articlecreateTime',
    }, 
    {
      title: '操作',
      key: 'action',
      render: (_, row) => {
        return (
          <Flex gap="middle" wrap>
            <Button type="dashed"
              onClick={() => handleEdit(row)}
              autoInsertSpace={false}>
              编辑
            </Button>
            <Button type="dashed"
              onClick={() => handleEnable(row)}
              autoInsertSpace={false} style={{color:row.state == 1 ? 'red' : "green"}}>
                 {row.state == 1 ? '点击禁用' : '点击启用'}
            </Button>
            <Popconfirm
              title="确定要删除吗？"
              onConfirm={() => handleDelete(row)}
              okText="确定"
              cancelText="取消"
            >
              <Button style={{ marginLeft: 8 }} type="dashed" autoInsertSpace>
                删除
              </Button>
            </Popconfirm>
          </Flex>
        )
      },
    },
  ];
  
  const dataSource = [
   {
        "id": "1715192676371320834",
        "title": "视频播放",
        "author": "作者",
        "content": '内容',
        "thumbnail": "xxxx", //suoluetu
        "articletype": '文章类型',
        "articleclick": 31,
        "articlestatus": 2,
        "articlecollect": null,
        "articlecreateTime": "2023-10-20 10:26:15",
    },

];

最后预览一下我们的界面！

3、查询功能

接下来我们对于文章部分进行功能的完善

先来引入文章的接口部分

// 文章列表
export function getarticlesList (n) {
    return request({
      url: '/api/articles',
      method: 'get',
      params:n
    })
}

然后对于文章的查询部分进行完善，这里的查询还是跟我们之前的用户部分差不多，从这里我们也可以看出，其实如果不进行封装的话，大部分的代码其实都是具备复制使用的特性的

这里我先直接把所有接口进行导入

//导入文章的接口部分 

import { getarticlesList, addarticles, delarticles, editarticles, getarticles, editarticlesStatus} from '@/api/common/article';

完善文章的查找功能

 const getList = async () => {
    try {
      let queryParams = {
        title,
        articletype,
        // pageNum: pageNum,//queryParams.value.pageNum,
        // pageSize: pageSize,//queryParams.value.pageSize,
      };
      const res:any = await getarticlesList(queryParams); // 假设getUser函数能够正确返回Promise对象
      console.log(res, 'getUser');
      if(res.code == 200){
        message.success('查询成功！');
        setDatatable(res.data);
      }else{
        console.log('查询失败，请重试！',res, 'getUser');
        message.error(res.message);
      }
      // console.log(res.data, 'tables'); // 更新后的数据通过res.data获取
    } catch (error) {
      console.log('查询失败，请重试！');
      // console.error('Error fetching data:', error);
    }
  }

尝试一下我们的查询功能

查找功能ok

4、增加功能

接下来尝试一下我们的添加功能

添加文章的接口：

// 添加文章 
export function addarticles (n) {
    return request({
            url: '/api/articles',
            method: 'post',
            data:n
    })
}

在文章管理之中引入然后写一个文章简单的弹窗信息

import { getarticlesList, addarticles, delarticles, editarticles, getarticles, editarticlesStatus} from '@/api/common/article';

写一个文章简单的弹窗
<Modal
        open={modalVisible}
        title="编辑信息"
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setModalVisible(false)}>
            取消
          </Button>,
          <Button key="save" type="primary" onClick={() => form.submit()}>
            保存
          </Button>,
        ]}
      >
        <Form form={form} onFinish={handleSave}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item name="title" label="标题">
            <Input />
          </Form.Item>
          <Form.Item name="author" label="作者">
            <Input />
          </Form.Item>
        </Form>
      </Modal>

添加的时候就一个文章的标题和作者

完善文章的增加功能

 const handleSave = async (values) => {
    try { 
        await addarticles(values).then(res => {
          console.log(res, '增加');
          if (res.status == 200) {
            console.log(res, 'res');
            message.success('添加成功');
          }
        }) 
      setModalVisible(false);
      form.resetFields();
      handleSearch();  // 刷新数据
    } catch (error) {
      message.error('保存失败，请重试！');
    }
  };

文章添加以后，成功实现我们的增加功能

5、修改功能

修改功能还和之前我们的用户的详情差不多，唯一有区别的地方就是我们可能正常文章详情会查的东西多一些

// 获取文章详情
export function getarticles(id) {
    return request({
      url: '/api/articles/'+id,
      method: 'get'
    })
}

修改的时候获取文章的详情进行渲染

import { getarticlesList, addArticles, delarticles, editarticles, getArticles, editarticlesStatus} from '@/api/common/article';
const handleDetail = async (row) => {
    try {
      const response = await getArticles(row.id);
      const data = response.data;
      return data;
    } catch (error) {
      message.error('获取数据详情失败，请重试！');
    }
}
  
const handleEdit = async (row) => {
    // title.value = "编辑";
    try {
      setLoading(true);
      // const response = await getUser(row.id);
      // const data = response.data;
      // console.log(data,'data');
      let data = await handleDetail(row); // 接口的方式查询
      form.setFieldsValue(data); // 填充数据到表单中
    } catch (error) {
      message.error('获取数据详情失败，请重试！');
    } finally {
      setLoading(false);
    }
    setModalVisible(true);
};

测试一下我们的编辑获取详情，这个时候可以正常获取

获取到文章详情以后，接下来我们需要提交修改过后的文章

// 修改文章
export function editaAticles(n) {
    return request({
            url: '/api/articles',
            method: 'put',
            data:n
    })
}

更改我们的保存接口
const handleSave = async (values) => {
    try {
      if (values.id) {
        await editaAticles(values).then(res => {
          if (res.status == 200) {
            console.log(res, '修改');
          }
        })
        message.success('修改成功');
        // await axios.put(`https://example.com/api/data/${values.id}`, values);
      } else {
        await addArticles(values).then(res => {
          console.log(res, '增加');
          if (res.status == 200) {
            console.log(res, 'res');
            message.success('添加成功');
          }
        })
      }
      setModalVisible(false);
      form.resetFields();
      handleSearch();  // 刷新数据
    } catch (error) {
      message.error('保存失败，请重试！');
    }
  };

测试一下，我们的修改功能良好！

5、删除功能

接下来完善我们文章基础的最后一个部分删除功能

// 删除文章
export function delArticles (id) {
    return request({
      url: '/api/articles/'+id,
      method: 'delete'
    })      
}
// 完善删除按钮事件
  const handleDelete = async (record) => {
    try {
      await delArticles(record.id);
      message.success('删除成功');
      handleSearch();
    } catch (error) {
      message.error('删除失败，请重试！');
    }
  };

点击删除按钮

删除成功，文章的删除没问题！

总结：

整体来看其实文章界面跟我们的用户界面差不多，甚至可以说除了接口和参数以外，其他的部分也完全一模一样，所以后续我们一样的部分就不进行再次做了，而是去优化和学习没有用过的部分，从中不断细化和抽离代码，最终可以让我们的项目封装成一个完整的后台管理系统！

文章功能部分比较繁琐和复杂，基础的部分我们增删改差已经搭建了，那么接下来如何进行完善抽离以及实现在实际使用中更为复杂调用呢，这里我们可以先思考一下！