React Nest Admin 全栈项目搭建与配置指南

React Nest Admin 全栈项目搭建与配置指南

项目概述

React Nest Admin 是一个基于 React, Nest.js 与 Ant Design 的全栈中后台管理系统模板。它不仅提供了完整的前后端解决方案，还涵盖了JWT鉴权、角色权限管理等关键特性，适合用于快速构建现代的企业级应用。

1. 目录结构及介绍

该项目采用了清晰的分层结构来组织代码，便于维护和扩展。下面是其主要的目录结构及其简述：

.
├── backend                    # 后端代码目录，基于Nest.js
│   ├── src                     # 核心源码
│   │   ├── app                  # 应用核心模块
│   │   ├── entities             # 数据库实体
│   │   ├── modules              # 各功能模块
│   │   └── ...
│   ├── .env                    # 环境变量配置
│   ├── package.json            # 后端依赖与脚本
│   └── ...
├── frontend                   # 前端代码目录，基于Create React App
│   ├── public                  # 公共静态资源
│   ├── src                     # 主要源代码
│   │   ├── actions              # Redux动作
│   │   ├── components           # 组件
│   │   ├── reducers              # Redux归约函数
│   │   ├── routes               # 路由配置
│   │   ├── sagas                # Redux Saga异步流程控制
│   │   ├── styles               # 样式文件
│   │   ├── utils                # 辅助工具函数
│   │   └── index.js             # 入口文件
│   ├── assets                  # 静态资产
│   ├── config-overrides.js     # React-app配置覆盖
│   ├── .gitignore               # Git忽略文件列表
│   ├── package.json            # 前端依赖与脚本
│   ├── README.md               # 项目说明文件
│   └── yarn.lock               # Yarn包锁定文件
└── ...

2. 项目的启动文件介绍

前端启动

前端的入口点是frontend/src/index.js。启动前端项目，可通过以下命令之一执行：

npm run start      # 或者
yarn start

这将启动开发服务器，默认监听在http://localhost:3000。

后端启动

后端的运行依赖于Nest.js框架，启动命令位于backend目录下：

npm run start:dev   # 开发模式
# 或者，使用Yarn：
yarn start:dev

此命令将在开发环境中启动服务，通常监听在不同的端口，如http://localhost:3001。

3. 项目的配置文件介绍

前端配置

• config-overrides.js：这是一个创建React应用(CRA)的配置覆盖文件，允许自定义webpack配置。
• .env (如果有)：可以存放环境变量，用于根据不同环境配置不同参数。

后端配置

• backend/src/config/：这里可能包含特定于后端的配置文件，比如数据库连接字符串和其他环境相关的设置。
• .env：同样适用于后端，用于存储诸如数据库URL、JWT秘钥等敏感信息。
• package.json: 包含了npm脚本，如启动、构建、测试等操作的命令配置。

确保在启动项目之前，已正确设置.env中的环境变量，以保证项目能够正常工作。

通过遵循以上步骤和理解项目结构，你可以轻松地开始开发或定制React Nest Admin项目，满足你的中后台系统需求。