public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-22 13:05:18 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d30d2faf6ed119f4113eb3c71fa8e680597aa2f4
FastapiAdmin/README.en.md
T
zhangtao 02c4960151 docs: 更新README中的项目贡献列表 
更新中英文README文件中的项目贡献列表，移除不再相关的项目，添加当前使用的主要依赖项
2025-09-20 02:06:48 +08:00

312 lines
15 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div align="center">
<p align="center">
<img src="./fastdocs/src/public/logo.png" width="150" height="150" alt="logo" />
</p>
<h1>Fastapi-Vue3-Admin <img src="https://img.shields.io/badge/Version-v2.0.0-blue" alt="Version"></h1>
<h3>A modern, open-source, full-stack integrated rapid development platform for mid - and back - end systems</h3>
<p>If you like this project, please give it a ⭐️ to show your support!</p>
<p align="center">
<a href="https://gitee.com/tao__tao/fastapi_vue3_admin.git" target="_blank">
<img src="https://gitee.com/tao__tao/fastapi_vue3_admin/badge/star.svg?theme=dark" alt="Gitee Stars">
</a>
<a href="https://github.com/1014TaoTao/fastapi_vue3_admin.git" target="_blank">
<img src="https://img.shields.io/github/stars/1014TaoTao/fastapi_vue3_admin?style=social" alt="GitHub Stars">
</a>
<a href="https://gitee.com/tao__tao/fastapi_vue3_admin/blob/master/LICENSE" target="_blank">
<img src="https://img.shields.io/badge/License-MIT-orange" alt="License">
</a>
<img src="https://img.shields.io/badge/Python-≥3.10-blue">
<img src="https://img.shields.io/badge/NodeJS-≥20.0-blue">
<img src="https://img.shields.io/badge/MySQL-≥8.0-blue">
<img src="https://img.shields.io/badge/Redis-≥7.0-blue">
<img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white"/>
<img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3"/>
<img src="https://img.shields.io/badge/-JavaScript-563D7C?style=flat-square&logo=bootstrap"/>
</p>
English | [Chinese](./README.md)
</div>
## 📘 Project Introduction
**Fastapi-Vue3-Admin** is a **completely open-source, highly modular, and technologically advanced modern rapid development platform**. Its aim is to help developers efficiently build high-quality enterprise-level mid - and back - end systems. This project adopts a **front - end and back - end separation architecture**, integrating the Python back - end framework `FastAPI` and the mainstream front - end framework `Vue3` to achieve unified development across multiple terminals, providing a one - stop out - of - the - box development experience.
> **Original Design Concept**: With modularity and loose coupling at its core, it pursues rich functional modules, simple and easy - to - use interfaces, detailed development documentation, and convenient maintenance methods. By unifying frameworks and components, it reduces the cost of technology selection, follows development specifications and design patterns, builds a powerful code hierarchical model, and comes with comprehensive local Chinese support. It is specifically tailored for team and enterprise development scenarios.
## 📦Engineering Structures
```sh
fastapi_vue3_admin
├─ backend # Backend project
├─ frontend # Frontend project
├─ fastapp # Mobile project
├─ fastdocs # Official Website project
├─ devops # Deployment project
├─ docker-compose.yaml # Deployment file
├─ start.sh # One-click deployment script
├─ LICENSE # License agreement
|─ README.en.md # English documentation
└─ README.md # Chinese documentation
```
## ✨ Core Highlights
| Feature | Description |
| ---- | ---- |
| 🔭 Rapid Development | A completely open-source modern rapid development platform designed to help developers efficiently build high-quality mid- and back-end systems. |
| 🌐 Full-stack Integration | Front-end and back-end separation, integrating Python (FastAPI) + Vue3 for multi-terminal development. |
| 🧱 Modular Design | Highly decoupled system functions, facilitating easy expansion and maintenance. |
| ⚡️ High-performance Asynchronous | Uses the FastAPI asynchronous framework + Redis cache to optimize API response speed. |
| 🔒 Secure Authentication | Supports the JWT OAuth2 authentication mechanism to ensure system security. |
| 📊 Permission Management | The RBAC model enables fine-grained permission control at the menu, button, and data levels. |
| 🚀 Rapid Deployment | Supports one-click deployment with Docker/Docker Compose/Nginx. |
| 📄 Developer-friendly | Provides comprehensive Chinese documentation, a Chinese interface, and a visual toolchain to reduce the learning curve. |
| 🧩 Quick Access | Based on mainstream front-end technology stacks such as Vue3, Vite5, Pinia, and ElementPlus, it's ready to use out of the box. |
## 🛠️ Technology Stack Overview
| Type | Technology Selection | Description |
|----------|---------------------------------|-------------|
| Backend Framework | FastAPI / Uvicorn / Pydantic 2.0 / Alembic | A modern, high-performance asynchronous framework with强制类型约束 (mandatory type constraints) and data migration capabilities. |
| ORM | SQLAlchemy 2.0 | A powerful ORM library. |
| Scheduled Tasks | APScheduler | Easily implement scheduled tasks. |
| Permission Authentication | PyJWT | Implement JWT authentication. |
| Frontend Framework | Uni App / Vue3 / Vite5 / Pinia / TypeScript | Rapidly develop Vue3 applications. |
| UI Library | ElementPlus / Wot Design Uni | Quickly develop beautiful UI components. |
| Database | MySQL / MongoDB | Powerful databases. |
| Cache | Redis | A powerful cache database. |
| Documentation | Swagger / Redoc | Automatically generate API documentation. |
| Deployment | Docker / Nginx / Docker Compose | Rapidly deploy projects. |
## 📌 Built-in Modules
| Module Name | Sub-module Name | Description |
|----------|---------------------|---------------------|
| Dashboard | Workbench, Analysis Page | Entry for commonly used functions |
| System Management | Includes sub-modules such as menu, department, position, role, user, log, configuration, announcement, dictionary, and task | Main system functions |
| Monitoring Management | Online users, server monitoring, cache monitoring | System monitoring and management functions |
| Public Management | Interface management, document management | Project interface documentation |
## 🍪 Demo Environment
- Official website: <https://service.fastapiadmin.com>
- Web address: <https://service.fastapiadmin.com/web>
- App address: <https://service.fastapiadmin.com/app>
- Account: `admin` Password: `123456`
## 👷 Installation and Usage
### Version Information
| Type | Technology Stack | Version |
|----------|----------------------|---------------|
| Backend | Python | >=3.10 |
| Backend | FastAPI | 0.109 |
| Frontend | Node.js | >= 20.0 (It is recommended to use the latest version.) |
| Frontend | npm | 16.14 |
| Frontend | Vue3 | 3.3 |
| Web UI | ElementPlus | 2.10.4 |
| Mobile | Uni App | 3.0.0 |
| App UI | Wot Design Uni | 1.9.1 |
| Database | MySQL | 8.0 (It is recommended to use the latest version.) |
| Middleware | Redis | 7.0 (It is recommended to use the latest version.) |
### Get Code
```sh
# Clone the code to your local machine
git clone https://gitee.com/tao__tao/fastapi_vue3_admin.git
或
git clone https://github.com/1014TaoTao/fastapi_vue3_admin.git
```
### Local Backend Start
```sh
# Enter the backend project directory
cd backend
# Install dependencies
pip3 install -r requirements.txt
# Start the backend service
python3 main.py run
or
python3 main.py run --env=dev
# Generate migration files
python3 main.py revision "Initial migration" --env=dev (default is dev if not specified)
# Apply migrations
python3 main.py upgrade --env=dev (default is dev if not specified)
```
### Local Frontend Start
```sh
# Enter the frontend project directory
cd frontend
# Install dependencies
pnpm install
# Start the frontend service
pnpm run dev
# Build the frontend and generate the `frontend/dist` directory
pnpm run build
```
### Local App H5 Start
```sh
# Enter the fastapp project directory
cd fastapp
# Install dependencies
pnpm install
# Start the fastapp service
pnpm run dev:h5
# Build the fastapp and generate the `fastapp/dist/build/h5` directory
pnpm run build:h5
```
### Local Project Website Start
```sh
# Enter the fastdocs project directory
cd fastdocs
# Install dependencies
pnpm install
# Run the documentation project
pnpm run docs:dev
# Build the documentation project and generate the `fastdocs/dist` directory
pnpm run docs:build
```
### Local Access Address
- Project official website address: <http://localhost:5180>
- Web frontend address: <http://localhost:5180/web>
- App frontend address: <http://localhost:5180/app>
- Admin account: `admin` Password: `123456`
- Demo account: `demo` Password: `123456`
### Docker Build
```sh
# Copy the script `fastapi_vue3_admin/deploy.sh` to the server and grant execution permissions
chmod +x deploy.sh
# Execute the script
./deploy.sh
# View images:
docker images -a
# View containers:
docker compose ps
# View logs
docker logs -f <Container Name>
# Stop the service
docker compose down
# Delete an image
docker rmi <Image Name>
# Delete a container
docker rm <Container Name>
# Backend configuration file directory
fastapi_vue3_admin/backend/env/.env.prod.py
# Frontend configuration file directory
fastapi_vue3_admin/frontend/vite.config.ts
and
fastapi_vue3_admin/frontend/.env.production
# Deployment file directory
fastapi_vue3_admin/docker-compose.yaml
and
fastapi_vue3_admin/devops/devops/nginx/nginx.conf
```
## 🔧 Models
| Module | Screenshot |
|------------|---------------------------------|
| Login | ![Login](./fastdocs/src/public/login.png) |
| Dashboard | ![Dashboard](./fastdocs/src/public/dashboard.png) |
| Analysis | ![Analysis](./fastdocs/src/public/analysis.png) |
| Menu | ![Menu](./fastdocs/src/public/menu.png) |
| Department | ![Department](./fastdocs/src/public/dept.png) |
| Position | ![Position](./fastdocs/src/public/position.png) |
| Role | ![Role](./fastdocs/src/public/role.png) |
| User | ![User](./fastdocs/src/public/user.png) |
| Log | ![Log](./fastdocs/src/public/log.png) |
| Config | ![Config](./fastdocs/src/public/config.png) |
| OnlineUser | ![OnlineUser](./fastdocs/src/public/online.png) |
| Server | ![Server](./fastdocs/src/public/service.png) |
| Cache | ![Cache](./fastdocs/src/public/cache.png) |
| Task | ![Task](./fastdocs/src/public/job.png) |
| Dict | ![Dict](./fastdocs/src/public/dict.png) |
| API Docs | ![API Docs](./fastdocs/src/public/docs.png) |
| Theme | ![Theme](./fastdocs/src/public/theme.png) |
| Document | ![Document](./fastdocs/src/public/help.png) |
| Lock | ![Lock](./fastdocs/src/public/lock.png) |
### Mobile
| Module <div style="width:60px"/> | Details | Module <div style="width:60px"/> | Details | Module <div style="width:60px"/> | Details |
|----------|------|----------|------|----------|------|
| Login | ![Mobile Login](./fastdocs/src/public/app_login.png) | Home | ![Mobile Home](./fastdocs/src/public/app_home.png) | Profile | ![Mobile Profile](./fastdocs/src/public/app_mine.png) |
| Personal | ![Mobile Personal Info](./fastdocs/src/public/app_profile.png) | Settings | ![Mobile Settings](./fastdocs/src/public/app_setting.png) | Workbench | ![Mobile Workbench](./fastdocs/src/public/app_work.png) |
## 🛠️ Secondary Development Tutorial
### Backend Part
1. **Write the Entity Class Layer**: Create the ORM model for the demo in `backend/app/api/v1/models/demo/example_model.py` (corresponding to the entity class layer in Spring Boot).
2. **Write the Data Model Layer**: Create the demo data model in `backend/app/api/v1/schemas/demo/example_schema.py` (corresponding to the DTO layer in Spring Boot).
3. **Write the Query Parameter Model Layer**: Create the query parameter model for the demo in `backend/app/v1/params/demo/example_param.py` (corresponding to the DTO layer in Spring Boot).
4. **Write the Persistence Layer**: Create the demo data layer in `backend/app/api/v1/cruds/demo/example_crud.py` (corresponding to the Mapper or DAO layer in Spring Boot).
5. **Write the Business Layer**: Create the demo data layer in `backend/app/api/v1/services/demo/example_service.py` (corresponding to the Service layer in Spring Boot).
6. **Write the Interface Layer**: Create the demo data layer in `backend/app/api/v1/controllers/demo/example_controller.py` (corresponding to the Controller layer in Spring Boot).
7. **Register Backend Routes**: Register the demo routes in `backend/app/api/v1/urls/demo_url.py`.
8. **Register Routes to the FastAPI Service**: Register the routes in `backend/plugin/init_app.py`.
9. **Add the Demo Module to the System Initialization Script**: Add it in `backend/app/scripts/initialize.py` (if necessary, you can configure the demo menu permissions in `backend/app/scripts/data/system_menu.json` and `backend/app/scripts/data/system_role_menus.json` or from the frontend page menu).
10. **Add the Demo Module to the Database Migration Script**: Add it in `backend/app/alembic/env.py`.
### Frontend Part
1. **Configure the Frontend to Access the Backend Interface Address**: Configure it in `frontend/src/api/demo/example.ts`.
2. **Write the Frontend Page**: Write it in `frontend/src/views/demo/example/index.vue`.
### Mobile Part
1. **Configure the mobile access address for backend interfaces**: Write the code in `fastapp/src/api`.
2. **Write mobile pages**: Write the code in `fastapp/src/pages`.
## ℹ️ Help
For more details, please check the [Official Documentation](https://service.fastapiadmin.com)
## 👥 Contributors
<a href="https://github.com/1014TaoTao/fastapi_vue3_admin/graphs/contributors">
<img src="https://contrib.rocks/image?repo=1014TaoTao/fastapi_vue3_admin"/>
</a>
## 🙏 Thanks
Thanks to the contributions and support of the following projects, which have enabled the successful completion of this project:
- [FastAPI](https://fastapi.tiangolo.com/)
- [Pydantic](https://docs.pydantic.dev/)
- [SQLAlchemy](https://www.sqlalchemy.org/)
- [APScheduler](https://github.com/agronholm/apscheduler)
- [Vue3](https://cn.vuejs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://github.com/vitejs/vite)
- [Element Plus](https://element-plus.org/)
- [UniApp](https://uniapp.dcloud.net.cn/)
- [Wot-Design-UI](https://wot-ui.cn/)
## 🎨 Community
| WeChat QR Code | Group QR Code | WeChat Pay QR Code |
| --- | --- | --- |
| ![WeChat QR Code](./fastdocs/src/public/wechat.jpg) | ![Group QR Code](./fastdocs/src/public/group.jpg) | ![WeChat Pay QR Code](./fastdocs/src/public/wechatPay.jpg) |
## ❤️ Star
If you like this project, please give it a ⭐️ Star to show your support! Thank you very much!
[![Stargazers over time](https://starchart.cc/1014TaoTao/fastapi_vue3_admin.svg?variant=adaptive)](https://starchart.cc/1014TaoTao/fastapi_vue3_admin)
Reference in New Issue View Git Blame Copy Permalink