React 技术栈加Express打造的前后端博客项目，揭秘第九弹：前端管理界面发表文章功能和后端接口

React 技术栈加Express打造的前后端博客项目（九）：前端管理界面发表文章功能加后端对应接口

本篇将带领大家一起构建前端管理界面发表文章功能，并详细解析对应的后端接口。

1. 前端管理界面发表文章功能

首先，我们先设计前端管理界面的发表文章功能。打开/src/components/Admin组件，在其中添加一个Article组件，代码如下：

// src/components/Admin/Article.js

import React, { useState } from "react";
import { Button, Input, Form } from "antd";
import { createArticle } from "../../api/article";

const Article = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    const article = {
      title,
      content,
    };

    const result = await createArticle(article);

    if (result.status === 201) {
      alert("文章发表成功！");
    } else {
      alert("文章发表失败，请重试！");
    }
  };

  return (
    <div>
      <h1>发表文章</h1>
      <Form onFinish={handleSubmit}>
        <Form.Item label="标题">
          <Input value={title} onChange={(e) => setTitle(e.target.value)} />
        </Form.Item>
        <Form.Item label="内容">
          <Input.TextArea
            value={content}
            onChange={(e) => setContent(e.target.value)}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            发表
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Article;

然后，在/src/routes/Admin.js文件中，添加一个指向/article路由的路由，代码如下：

// src/routes/Admin.js

import React from "react";
import { Route, Switch } from "react-router-dom";

import Article from "../components/Admin/Article";

const Admin = () => {
  return (
    <Switch>
      <Route path="/article" component={Article} />
    </Switch>
  );
};

export default Admin;

这样，我们就可以在浏览器中访问/admin/article来发表文章了。

2. 后端对应接口

接下来，我们再来解析一下对应的后端接口。打开/src/api/article.js文件，找到createArticle函数，代码如下：

// src/api/article.js

import axios from "axios";

export const createArticle = async (article) => {
  const result = await axios.post("/api/articles", article);
  return result;
};

可以看到，这个接口的作用是将文章内容发送到后端，并保存到数据库中。在接口的实现中，我们使用了axios库来发送HTTP请求，并将文章内容作为请求体发送到后端。

在后端，我们还需要编写一个对应的路由来处理这个请求。打开/src/routes/api.js文件，找到articles路由，代码如下：

// src/routes/api.js

import express from "express";

const router = express.Router();

router.post("/articles", async (req, res) => {
  const article = req.body;

  // 这里省略了对文章内容的验证和保存逻辑

  res.status(201).json({
    message: "文章发表成功",
  });
});

可以看到，这个路由的作用是接收前端发送过来的文章内容，并将其保存到数据库中。在路由的实现中，我们使用了express框架来定义路由，并使用body-parser中间件来解析请求体中的JSON数据。

然后，我们需要将这个路由添加到后端服务器中。打开/src/index.js文件，找到app对象，代码如下：

// src/index.js

import express from "express";
import apiRouter from "./routes/api";

const app = express();

app.use("/api", apiRouter);

可以看到，我们在这里将/api路由添加到app对象中，这样当请求到达/api时，就会被转发到apiRouter中进行处理。

最后，我们需要启动后端服务器。打开终端，进入项目根目录，然后运行以下命令：

npm start

这样，我们的后端服务器就启动了。

现在，我们就可以在浏览器中访问/admin/article来发表文章了，发表的文章内容将被发送到后端，并保存到数据库中。