开源项目 `full-stack` 使用教程

开源项目 full-stack 使用教程

full-stackFull stack, modern web application generator. Using Flask, PostgreSQL DB, Docker, Swagger, automatic HTTPS and more.项目地址:https://gitcode.com/gh_mirrors/fu/full-stack

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

full-stack/
├── backend/
│   ├── app/
│   │   ├── api/
│   │   ├── core/
│   │   ├── db/
│   │   ├── models/
│   │   ├── services/
│   │   └── main.py
│   ├── tests/
│   ├── Dockerfile
│   └── requirements.txt
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.js
│   │   └── index.js
│   ├── Dockerfile
│   └── package.json
├── docker-compose.yml
└── README.md

目录结构介绍

• backend/: 后端代码目录，包含应用逻辑、API、数据库模型等。

  • app/: 应用核心代码。
    • api/: API 路由和处理函数。
    • core/: 核心配置和工具函数。
    • db/: 数据库相关代码。
    • models/: 数据模型。
    • services/: 业务逻辑服务。
    • main.py: 后端入口文件。
  • tests/: 测试代码。
  • Dockerfile: 后端 Docker 配置文件。
  • requirements.txt: 后端依赖包列表。

• frontend/: 前端代码目录，包含静态资源、组件、页面等。

  • public/: 公共静态资源。
  • src/: 前端源代码。
    • assets/: 静态文件，如图片、字体等。
    • components/: 可复用的 UI 组件。
    • pages/: 页面组件。
    • App.js: 前端主应用组件。
    • index.js: 前端入口文件。
  • Dockerfile: 前端 Docker 配置文件。
  • package.json: 前端依赖包和脚本配置。

• docker-compose.yml: Docker 编排文件，用于启动后端和前端服务。

• README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

• backend/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)

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

前端启动文件

• 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/app/core/config.py: 后端配置文件，包含项目名称、API 版本路径等配置。

from pydantic import BaseSettings

class Settings(BaseSettings):
    PROJECT_NAME: str = "Full Stack Project"
    API_V1_STR: str = "/api/v1"
    # 其他配置项...

settings = Settings()

前端配置文件

• frontend/package.json: 前端依赖包和脚本配置。

{
  "name": "frontend",
  "version": "0.1.0

full-stackFull stack, modern web application generator. Using Flask, PostgreSQL DB, Docker, Swagger, automatic HTTPS and more.项目地址:https://gitcode.com/gh_mirrors/fu/full-stack