FastapiAdmin/README.en.md

Fastapi-Vue3-Admin v1.0.0

A rapid web application development framework for front-end and back-end separation based on Fastapi-Vue3-Admin

English | Chinese

📚 Project Introduction

Fastapi-Vue3-Admin is a fully open-source rapid development platform that provides free usage. It combines modern, high-performance technology stacks to help developers quickly build high-quality backend systems. The project directory structure is as follows:

fastapi_vue_admin
├─ backend        # Backend project
├─ frontend       # Frontend project
├─ devops         # Deployment project
├─ mkdocs         # Documentation 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.

• 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.

🍪 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

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
   

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

🔧 Module Showcase

Login	Dashboard
Menu	Department
Position	Role
User	Log
Config	Online
Server	Cache
Task	API
Documentation	Personal
Help	Dict

✨ 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

🎨 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