如何用 React + Node + Express + Ant + MongoDB 构建简洁兼时尚的博客网站

前言

博客网站是一个非常流行的网站类型，它可以帮助用户分享自己的想法、经验和知识。近年来，随着互联网的快速发展，博客网站的数量也在不断增加。

博客网站的建设是一个非常复杂的过程，它涉及到前端开发、后端开发和全栈开发等多个方面。为了帮助大家更好地了解博客网站的建设过程，本文将介绍如何使用 React + Node + Express + Ant + MongoDB 来构建一个简洁兼时尚的博客网站。

项目介绍

该项目是一个开源项目，项目地址在 GitHub 上。该项目由三部分组成，包括前台展示、管理后台和后端。

前台展示

前台展示部分主要负责博客文章的展示，包括文章列表、文章详情、评论等功能。

管理后台

管理后台部分主要负责博客文章的管理，包括文章的添加、修改、删除等功能。

后端

后端部分主要负责数据的存储和处理，包括文章的存储、评论的存储等功能。

技术选型

该项目使用以下技术进行开发：

前端

• React：一个用于构建用户界面的 JavaScript 库。
• Ant Design：一个用于构建企业级界面的 UI 组件库。

后端

• Node.js：一个用于构建服务器端应用程序的 JavaScript 运行时环境。
• Express.js：一个用于构建 Web 应用程序的框架。
• MongoDB：一个文档型数据库。

项目搭建

前端搭建

首先，我们需要安装 React 和 Ant Design。

npm install react react-dom antd

然后，我们需要创建一个新的 React 项目。

npx create-react-app my-blog

最后，我们需要在项目中添加 Ant Design。

npm install antd

后端搭建

首先，我们需要安装 Node.js 和 Express.js。

npm install nodejs express

然后，我们需要创建一个新的 Express.js 项目。

mkdir my-blog-backend
cd my-blog-backend
npm init -y

最后，我们需要在项目中添加 MongoDB。

npm install mongodb

数据库搭建

首先，我们需要在 MongoDB 中创建一个新的数据库。

mongo
use my-blog

然后，我们需要在数据库中创建两个集合，分别是文章集合和评论集合。

db.createCollection("articles")
db.createCollection("comments")

项目开发

前端开发

前台展示部分主要使用 React 和 Ant Design 进行开发。

import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    <Layout>
      <Header>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["1"]}
          style={{ lineHeight: "64px" }}
        >
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: "0 50px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">Content</div>
      </Content>
      <Footer style={{ textAlign: "center" }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  );
};

export default App;

管理后台部分主要使用 React 和 Ant Design 进行开发。

import React from "react";
import { Table, Button, Modal, Form, Input } from "antd";

const columns = [
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "内容",
    dataIndex: "content",
    key: "content",
  },
  {
    title: "操作",
    key: "action",
    render: (text, record) => (
      <span>
        <Button type="primary">编辑</Button>
        <Button type="danger">删除</Button>
      </span>
    ),
  },
];

const data = [];

const App = () => {
  const [visible, setVisible] = React.useState(false);
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        添加文章
      </Button>
      <Table columns={columns} dataSource={data} />
      <Modal
        title="添加文章"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <Form form={form} onFinish={onFinish}>
          <Form.Item label="标题" name="title" rules={[{ required: true, message: "Please input the title of article!" }]}>
            <Input />
          </Form.Item>
          <Form.Item label="内容" name="content" rules={[{ required: true, message: "Please input the content of article!" }]}>
            <Input.TextArea />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default App;

后端开发

后端部分主要使用 Node.js 和 Express.js 进行开发。

const express = require("express");
const mongoose = require("mongoose");

const app = express();

app.use(express.json());

mongoose.connect("mongodb://localhost:27017/my-blog", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const ArticleSchema = new mongoose.Schema({
  title: String,
  content: String,
});

const Article = mongoose.model("Article", ArticleSchema);

app.get("/articles", async (req, res) => {
  const articles = await Article.find();
  res.json(articles);
});

app.post("/articles", async (req, res) => {
  const article = new Article(req.body);
  await article.save();
  res.json(article);
});

app.put("/articles/:id", async (req, res) => {
  const article = await Article.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(article);
});

app.delete("/articles/:id", async (req, res) => {
  await Article.findByIdAndDelete(req.params.id);
  res.json({ message: "Article deleted successfully!" });
});

app.listen(3000);

项目部署

项目部署主要分为两个步骤：

1. 前端部署
2. 后端部署

前端部署可以使用静态文件服务器进行部署，例如 Nginx。

nginx.conf

server {
  listen 80;
  server_name example.com;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }
}

后端部署可以使用 Node.js 服务器进行部署。

node server.js

结语

通过本文的介绍，我们了解了如何使用 React + Node + Express + Ant + MongoDB 来构建一个简洁兼时尚的博客网站。该项目已开源，项目地址在 GitHub 上。欢迎大家下载体验。