# fastapi_vue3_admin **Repository Path**: jitlu/fastapi_vue3_admin ## Basic Information - **Project Name**: fastapi_vue3_admin - **Description**: fastapi-vue3-admin 是一套完全开源的快速开发平台,提供免费使用。它结合了现代、高性能的技术栈,后端采用Fastapi + SQLAlchemy,前端采用基于 vue3 + typescript + vite + pinia + Element-Plus。旨在帮助开发者快速搭建高质量的中后台系统。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 317 - **Created**: 2025-10-30 - **Last Updated**: 2025-10-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

logo

Fastapi-Vue3-Admin Version

A modern, open-source, full-stack integrated rapid development platform for mid - and back - end systems

If you like this project, please give it a ⭐️ to show your support!

Gitee Stars GitHub Stars License

English | [Chinese](./README.md)
## 📘 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: - Web address: - App address: - 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: - Web frontend address: - App frontend address: - 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 # Stop the service docker compose down # Delete an image docker rmi # Delete a container docker rm # 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) | | Form | ![Form](./fastdocs/src/public/form.png) | | Generator | ![Generator](./fastdocs/src/public/gencode.png) | | Workflow | ![Workflow](./fastdocs/src/public/workflow.png) | | File | ![File](./fastdocs/src/public/file.png) | | MyApps | ![MyApps](./fastdocs/src/public/myapp.png) | | Setting | ![Setting](./fastdocs/src/public/setting.png) | | AI | ![AI](./fastdocs/src/public/ai.png) | ### Mobile | Module
| Details | Module
| Details | Module
| 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 ## 🙏 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)