React技术栈+Express前后端实战博客项目：前端管理界面标签管理和后端对应接口开发

2023-10-26 12:46:07

本文是React技术栈+Express前后端博客项目系列的第八部分，我们将介绍如何在前端管理界面实现标签管理，并在后端开发相应的接口。

前端管理界面标签管理

首先，我们需要在前端管理界面中创建一个标签管理页面。在这个页面中，我们将列出所有标签，并允许用户添加、编辑和删除标签。

我们可以使用React中的useState钩子来管理标签列表。以下是标签管理页面的代码片段：

import React, { useState } from "react";

const TagManagement = () => {
  const [tags, setTags] = useState([]);

  const addTag = (tag) => {
    setTags([...tags, tag]);
  };

  const editTag = (tag, newTag) => {
    const index = tags.indexOf(tag);
    tags[index] = newTag;
    setTags([...tags]);
  };

  const deleteTag = (tag) => {
    const index = tags.indexOf(tag);
    tags.splice(index, 1);
    setTags([...tags]);
  };

  return (
    <div>
      <h1>标签管理</h1>
      <ul>
        {tags.map((tag) => (
          <li key={tag}>
            {tag}
            <button onClick={() => editTag(tag, prompt("New tag name:"))}>
              编辑
            </button>
            <button onClick={() => deleteTag(tag)}>删除</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addTag(prompt("New tag name:"))}>添加标签</button>
    </div>
  );
};

export default TagManagement;

后端对应接口开发

接下来，我们需要在后端开发相应的接口来支持前端的标签管理功能。

我们可以使用Express框架来开发接口。以下是后端接口的代码片段：

const express = require("express");
const router = express.Router();

const Tag = require("../models/Tag");

// 添加标签
router.post("/tags", async (req, res) => {
  const tag = new Tag({ name: req.body.name });
  await tag.save();
  res.send(tag);
});

// 获取所有标签
router.get("/tags", async (req, res) => {
  const tags = await Tag.find();
  res.send(tags);
});

// 更新标签
router.put("/tags/:id", async (req, res) => {
  const tag = await Tag.findByIdAndUpdate(req.params.id, req.body);
  res.send(tag);
});

// 删除标签
router.delete("/tags/:id", async (req, res) => {
  await Tag.findByIdAndDelete(req.params.id);
  res.send({ message: "删除成功" });
});

module.exports = router;