FastapiAdmin/README.en.md

Fastapi-Vue3-Admin v1.0.0

A fast development framework for Web + Mini Programs + H5 applications based on the separation of front-end and back-end in Fastapi-Vue-Admin.

English | Chinese

📚 Project Introduction

Fastapi-Vue3-Admin is a fully open-source modern rapid development platform designed to help developers efficiently build high-quality backend systems. The project integrates the high-performance backend framework FastAPI and the powerful ORM library SQLAlchemy, along with the frontend technology stack Vue3, Vite6, Ant Design Vue, and the mobile development framework UniApp and its component library uView-plus, providing developers with an out-of-the-box solution. The project directory structure is as follows:

fastapi_vue_admin
├─ backend        # Backend project
├─ frontend       # Frontend project
├─ devops         # Deployment project
├─ mkdocs         # Documentation project
├─ uni-app        # Uni-app project
├─ README.en.md   # English documentation
└─ README.md      # Chinese documentation

• Backend:

  • FastAPI:A modern, high-performance asynchronous framework.
  • Swagger:Automatically generates interactive API documentation.
  • Pydantic:Enforces type constraints.
  • SQLAlchemy 2.0:A powerful ORM library.
  • APScheduler:A powerful job scheduling library.

• Frontend:

  • Vue3:A modern frontend framework.
  • Ant Design Vue:An enterprise-level UI component library.
  • TypeScript:Static type checking.
  • Vite:A fast build tool.

• App:

  • Vue3: A progressive JavaScript framework for building user interfaces.
  • Vite: A fast frontend build tool that supports hot reloading.
  • Pinia: A state management library for Vue3 that provides a rich set of components.
  • UniApp: A cross-platform application development framework that supports multi-terminal development.
  • uView-plus: A Vue3-based UI component library that provides a rich set of components.

• Authentication:OAuth2 using hashed passwords and JWT Bearer tokens.

• Authorization Architecture:Designed based on RBAC, supporting dynamic permission menus, button-level permission control, and data-level permission control.

• Ready-to-use:Suitable as a starting template for new projects, also useful for learning and reference.

If you find the project helpful, please give it a star!

🍻 Project Features

• Modular and loosely coupled
• Rich modules, ready-to-use
• Simple and easy to integrate
• Comprehensive documentation, easy to maintain
• Top-down, systematic design
• Unified framework, unified components, reducing selection costs
• Development standards, design patterns, code layering models
• Powerful and convenient development toolchain
• Complete local internationalization support
• Designed for team and enterprise use

📌 Built-in Modules

• Dashboard: Dashboard display, entry point for common features.

• System Management

  • Menu Management:Configures system menus, operation permissions, and button permission identifiers.
  • Department Management:Configures the organizational structure of the system, supports data permissions in tree structures.
  • Position Management:Manages user positions.
  • Role Management:Manages role menus and permission allocation, sets menu permissions for roles.
  • User Management:Maintains and manages system users, including regular information maintenance and account settings.
  • Log Management:Uniformly maintains commonly used and relatively fixed data in the system.
  • Config Management:Maintains system configuration information, such as system parameters and system settings.
  • Notice Management:Manages system notifications, such as system messages and system announcements.
  • Dict Management:Manages system dictionaries, such as system parameters and system settings.
  • Job Management:Manages system jobs, such as system messages and system announcements.

• Monitoring Management

  • Online Users:Views currently online users in the system.
  • Server Monitoring:Views the system's runtime status, including memory, CPU, disk, etc.
  • Cache Monitoring:Views system cache information, such as cache hit rate and cache keys.

• Common Management

  • API Management:Maintains system APIs, such as API addresses and request methods.
  • Documentation Management:Maintains system API documentation, supports online API calls.

• App

  • home：Application home page.
  • work：Application work page.
  • me：Application me page.

🍪 Account Information

Account Type	Username	Password
Admin Account	admin	123456
Demo Account	demo	123456

👷 Installation and Usage

Version Information

Type	Technology Stack	Version
Backend	Python	3.10
Backend	FastAPI	0.109
Frontend	Node.js	>= 20.0（Recommended latest version）
Frontend	npm	16.14
Frontend	Vue3	3.3
Database	MySQL	8.0 Recommended latest version
Database	PostgreSQL	14（Recommended latest version）
Database	MongoDB	8.0（Recommended latest version）
Middleware	Redis	7.0 Recommended latest version
App	uni-app	3.0.0
App	uview-plus	^3.3.74

Get the Code

git clone https://gitee.com/tao__tao/fastapi_vue3_admin.git

Backend

1. Install dependencies

   cd backend
   pip3 install -r requirements.txt
   
   When running pip install, I encountered the following error: UnicodeDecodeError: 'gbk' codec can't decode byte 0xad in position.
   Solution Link：https://www.cnblogs.com/RexTooru/p/17303318.html
   

2. Modify project database configuration The DB_DRIVER database driver type and the corresponding database configuration information are located in the app/config/.env.dev (.env.test, .env.prod) files.

3. Create a database named fastapi_vue_admin

4. Initialize database data

   # Run in the root directory of the backend project (backend)
   # This command will automatically generate tables and data in the database
   # If the database has already been initialized, this command can be skipped
   python3 main.py init
   

5. Start the backend

   # Run in the root directory of the backend project (backend)
   python3 main.py run
   
   # After modifying the models, you need to: regenerate migration files and then apply migrations
   # Generate migration
   # python main.py revision "initial migration" --env=dev (default is dev if not specified)
   # Apply migration
   # python main.py upgrade --env=dev (default is dev if not specified)
   

Frontend

1. Install dependencies

   cd frontend
   npm install
   

2. Run the frontend

   npm run dev
   

3. Build the frontend

   npm run build
   

App

1. Install dependencies

   cd frontend
   npm install
   

2. Run the frontend

   npm run dev:h5
   

3. Build the frontend

   npm run build
   

Access the Project

• Frontend URL: http://127.0.0.1:5180
• Username: admin Password: 123456
• API URL: http://127.0.0.1:8000/api/v1/docs

Docker Deployment

• cd fastapi_vue3_amdin/frontend
• npm run build （Ensure the dist directory exists; otherwise, errors will occur during execution）
• cd fastapi_vue3_amdin
• docker compose up -d
• Notes：
• In the frontend .env.production file, change VITE_API_BASE_URL to the public IP address.
• In the backend .env.prod file, set MYSQL_HOST and REDIS_HOST to private IP addresses.
• Common Issues：
• Backend fails to start: Usually because the initialization script was not executed. The script directory is backend/sql/mysql_xxx.sql. Another possibility is that the MySQL or Redis services are not running and need to be started manually.
• Deployment Order：
• 1. Start MySQL and Redis services
• 2. Execute database initialization scripts.
• 3. Start the backend service.
• 4. Start the frontend service.
• Access URL:Public IP address on port 80; login with username admin and password 123456.

🔧 Module Showcase

Login	Dashboard
Menu	Department
Position	Role
User	Log
Config	Online
Server	Cache
Task	API
Documentation	Personal
Help	Dict
app-login	app-home
app-work	app-me
app-userinfo

✨ Special Thanks

Thank you to the following projects for their contributions and support, which have made this project possible:

• FastAPI Project
• Vue3 Project
• KInit Project
• Fastapi-Vue3-Admin Project
• Vue-FastAPI-Admin Project
• RuoYi-Vue3-FastAPI Project
• APScheduler Project
• Vite Project
• UniApp Project
• uView-plus Project

🎨 WeChat Group

The QR codes below are personal codes that can be used for technical discussions and to discuss various issues encountered during project usage. I sincerely hope everyone can optimize the project together and actively participate in discussions to support each other!！

Personal QR Codes