从零搭建一个 React 中后台管理项目模板，基础篇！

2023-11-18 15:33:48

前言

1. 项目背景

中后台管理系统在很多企业都是必不可少的，它可以帮助企业管理各种数据，提高工作效率。目前市面上有很多中后台管理系统解决方案，但是很多都是基于传统技术栈开发的，不符合现代化开发的需求。所以，我决定从零开始构建一个基于 React 技术栈的中后台管理系统项目模板，希望能够帮助更多的人快速搭建自己的中后台管理系统。

2. 技术选型

中后台管理系统是一个复杂系统，它需要用到多种技术，包括前端技术、后端技术、数据库等。在进行技术选型时，我考虑了以下几个因素：

性能： 系统需要能够承受高并发访问，所以需要选择性能较好的技术。
可扩展性： 系统需要能够随着业务的发展而不断扩展，所以需要选择可扩展性较好的技术。
维护性： 系统需要易于维护，所以需要选择维护性较好的技术。

经过比较，我选择了以下技术栈：

前端： React
后端： Node.js + Express
数据库： MySQL
构建工具： Webpack
CSS 预处理器： Sass
状态管理： Redux + Saga
UI 组件库： Material UI
类型检查： TypeScript

项目结构

项目结构如下：

├── client
│   ├── src
│   │   ├── components
│   │   ├── pages
│   │   ├── store
│   │   └── styles
│   ├── package.json
│   ├── webpack.config.js
│   └── index.html
├── server
│   ├── src
│   │   ├── controllers
│   │   ├── middlewares
│   │   ├── models
│   │   ├── routes
│   │   └── services
│   ├── package.json
│   ├── app.js
│   └── config.js
├── .env
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

项目配置

项目的配置在 .env 文件中，包括数据库连接信息、端口号等。

前端开发

1. 安装依赖

cd client
yarn install

2. 运行项目

yarn start

3. 前端代码结构

前端代码结构如下：

├── src
│   ├── components
│   │   ├── Header.js
│   │   ├── Footer.js
│   │   └── Sidebar.js
│   ├── pages
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── store
│   │   ├── actions.js
│   │   ├── reducers.js
│   │   └── saga.js
│   ├── styles
│   │   ├── main.scss
│   │   └── variables.scss
│   ├── App.js
│   ├── index.js
│   └── serviceWorker.js

4. 路由配置

路由配置在 client/src/App.js 文件中，如下所示：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

5. 状态管理

状态管理使用 Redux + Saga。Redux 用来管理全局状态，Saga 用来处理异步操作。

6. UI 组件库

UI 组件库使用 Material UI。Material UI 是一个非常受欢迎的 React UI 组件库，它提供了丰富的组件，可以快速构建出美观、易用的界面。

7. CSS 预处理器

CSS 预处理器使用 Sass。Sass 是一个 CSS 预处理器，它可以帮助我们更轻松地编写 CSS 代码。

后端开发

1. 安装依赖

cd server
yarn install

2. 运行项目

yarn start

3. 后端代码结构

后端代码结构如下：

├── src
│   ├── controllers
│   │   ├── UserController.js
│   │   ├── PostController.js
│   │   └── CommentController.js
│   ├── middlewares
│   │   ├── auth.js
│   │   └── error.js
│   ├── models
│   │   ├── User.js
│   │   ├── Post.js
│   │   └── Comment.js
│   ├── routes
│   │   ├── user.js
│   │   ├── post.js
│   │   └── comment.js
│   ├── services
│   │   ├── UserService.js
│   │   ├── PostService.js
│   │   └── CommentService.js
│   ├── app.js
│   └── config.js

4. 路由配置

路由配置在 server/src/app.js 文件中，如下所示：

const express = require('express');

const app = express();

// Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Routes
app.use('/api/users', require('./routes/user'));
app.use('/api/posts', require('./routes/post'));
app.use('/api/comments', require('./routes/comment'));

// Error handling
app.use((err, req, res, next) => {
  res.status(err.status || 500).json({
    error: {
      message: err.message,
    },
  });
});

module.exports = app;

5. 模型定义

模型定义在 server/src/models 文件夹中，如下所示：

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
});

const User = mongoose.model('User', UserSchema);

module.exports = User;