【免费下载】 开源项目 `full-stack-fastapi-template` 使用教程

1. 项目的目录结构及介绍

full-stack-fastapi-template/
├── backend/
│   ├── app/
│   │   ├── api/
│   │   │   ├── api_v1/
│   │   │   │   ├── endpoints/
│   │   │   │   └── api.py
│   │   │   └── api.py
│   │   ├── core/
│   │   │   ├── config.py
│   │   │   └── security.py
│   │   ├── db/
│   │   │   ├── base.py
│   │   │   ├── base_class.py
│   │   │   ├── init_db.py
│   │   │   └── session.py
│   │   ├── models/
│   │   ├── schemas/
│   │   ├── services/
│   │   ├── main.py
│   │   └── __init__.py
│   ├── tests/
│   ├── .env
│   ├── .gitignore
│   ├── Dockerfile
│   ├── requirements.txt
│   └── setup.py
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── ...
│   ├── .gitignore
│   ├── Dockerfile
│   ├── package.json
│   └── ...
├── .github/
│   ├── workflows/
│   └── ...
├── .env
├── .gitignore
├── docker-compose.yml
├── LICENSE
└── README.md

目录结构介绍

• backend/: 后端代码目录，包含 FastAPI 应用的所有文件。
  • app/: 应用的主要代码目录。
    • api/: API 路由和端点。
    • core/: 核心配置和安全相关文件。
    • db/: 数据库相关文件。
    • models/: 数据库模型。
    • schemas/: Pydantic 模型。
    • services/: 业务逻辑服务。
    • main.py: 应用的入口文件。
  • tests/: 测试代码目录。
• frontend/: 前端代码目录，包含 React 应用的所有文件。
  • public/: 公共资源文件。
  • src/: 源代码文件。
• .github/: GitHub 配置文件，如 GitHub Actions 工作流。
• .env: 环境变量配置文件。
• docker-compose.yml: Docker 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

• backend/app/main.py: 这是 FastAPI 应用的入口文件，包含应用的初始化和启动代码。

from fastapi import FastAPI
from app.api.api_v1.api import api_router
from app.core.config import settings

app = FastAPI(
    title=settings.PROJECT_NAME,
    openapi_url=f"{settings.API_V1_STR}/openapi.json"
)

app.include_router(api_router, prefix=settings.API_V1_STR)

前端启动文件

• frontend/src/index.js: 这是 React 应用的入口文件，包含应用的初始化和启动代码。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

3. 项目的配置文件介绍

后端配置文件

• backend/.env: 环境变量配置文件，包含数据库连接、密钥等敏感信息。

# 数据库连接
DATABASE_URL=postgresql://user:password@localhost:5432/dbname

# 密钥
SECRET