Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mizhexiaoxiao/vue-fastapi-admin
⭐️ 基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台 A modern and lightweight management platform based on FastAPI, Vue3, and Naive UI.
https://github.com/mizhexiaoxiao/vue-fastapi-admin
admin fastapi fastapi-admin fastapi-vue-admin fastapi-vuejs-template jwt naive-ui naive-ui-admin pinia pydantic pydantic-v2 python swaager tortoise-orm vite vue vue-admin vue3
Last synced: 28 days ago
JSON representation
⭐️ 基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台 A modern and lightweight management platform based on FastAPI, Vue3, and Naive UI.
- Host: GitHub
- URL: https://github.com/mizhexiaoxiao/vue-fastapi-admin
- Owner: mizhexiaoxiao
- License: mit
- Created: 2023-08-11T09:57:40.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-25T02:48:35.000Z (about 1 month ago)
- Last Synced: 2024-09-29T02:21:32.110Z (about 1 month ago)
- Topics: admin, fastapi, fastapi-admin, fastapi-vue-admin, fastapi-vuejs-template, jwt, naive-ui, naive-ui-admin, pinia, pydantic, pydantic-v2, python, swaager, tortoise-orm, vite, vue, vue-admin, vue3
- Language: Vue
- Homepage: http://180.76.151.29:8080
- Size: 2.23 MB
- Stars: 675
- Watchers: 7
- Forks: 128
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
vue-fastapi-admin
English | [简体中文](./README.md)
vue-fastapi-admin is a modern front-end and back-end separation development platform that combines FastAPI, Vue3, and Naive UI. It incorporates RBAC (Role-Based Access Control) management, dynamic routing, and JWT (JSON Web Token) authentication, making it ideal for rapid development of small to medium-sized applications and also serves as a valuable learning resource.
### Features
- **Popular Tech Stack**: The backend is developed with the high-performance asynchronous framework FastAPI using Python 3.11, while the front-end is powered by cutting-edge technologies such as Vue3 and Vite, complemented by the efficient package manager, pnpm.
- **Code Standards**: The project is equipped with various plugins for code standardization and quality control, ensuring consistency and enhancing team collaboration efficiency.
- **Dynamic Routing**: Backend dynamic routing combined with the RBAC model allows for fine-grained control of menus and routing.
- **JWT Authentication**: User identity verification and authorization are handled through JWT, enhancing the application's security.
- **Granular Permission Control**: Implements detailed permission management including button and interface level controls, ensuring different roles and users have appropriate permissions.
### Live Demo
- URL: http://139.9.100.77:9999
- Username: admin
- Password: 123456
### Screenshots
#### Login Page
#### Workbench
#### User Management
#### Role Management
#### Menu Management
#### API Management
### Quick Start
Please follow the instructions below for installation and configuration:
#### Method 1：dockerhub pull image
```sh
docker pull mizhexiaoxiao/vue-fastapi-admin:latest
docker run -d --restart=always --name=vue-fastapi-admin -p 9999:80 mizhexiaoxiao/vue-fastapi-admin
```
#### Method 2: Build Image Using Dockerfile
##### Install Docker
```sh
yum install -y docker-ce
systemctl start docker
```
##### Build the Image
```sh
git clone https://github.com/mizhexiaoxiao/vue-fastapi-admin.git
cd vue-fastapi-admin
docker build --no-cache . -t vue-fastapi-admin
```
##### Start the Container
```sh
docker run -d --restart=always --name=vue-fastapi-admin -p 9999:80 vue-fastapi-admin
```
##### Access the Service
http://localhost:9999
username：admin
password：123456
### Local Setup
#### Backend
The backend service requires the following environment:
- Python 3.11
- [Poetry](https://python-poetry.org/docs/#installing-with-the-official-installer)
1. Create a Python virtual environment:
```sh
poetry shell
```
2. Install project dependencies:
```sh
poetry install
```
3. Start the backend service:
```sh
make run
```
The backend service is now running, and you can visit http://localhost:9999/docs to view the API documentation.
#### Frontend
The frontend project requires a Node.js environment (recommended version 18.8.0 or higher).
- node v18.8.0+
1. Navigate to the frontend project directory:
```sh
cd web
```
2. Install project dependencies (pnpm is recommended: https://pnpm.io/zh/installation)
```sh
npm i -g pnpm # If pnpm is already installed, skip this step
pnpm i # Or use npm i
```
3. Start the frontend development server:
```sh
pnpm dev
```
### Directory Structure Explanation
```
├── app // Application directory
│ ├── api // API interface directory
│ │ └── v1 // Version 1 of the API interfaces
│ │ ├── apis // API-related interfaces
│ │ ├── base // Base information interfaces
│ │ ├── menus // Menu related interfaces
│ │ ├── roles // Role related interfaces
│ │ └── users // User related interfaces
│ ├── controllers // Controllers directory
│ ├── core // Core functionality module
│ ├── log // Log directory
│ ├── models // Data models directory
│ ├── schemas // Data schema/structure definitions
│ ├── settings // Configuration settings directory
│ └── utils // Utilities directory
├── deploy // Deployment related directory
│ └── sample-picture // Sample picture directory
└── web // Front-end web directory
├── build // Build scripts and configuration directory
│ ├── config // Build configurations
│ ├── plugin // Build plugins
│ └── script // Build scripts
├── public // Public resources directory
│ └── resource // Public resource files
├── settings // Front-end project settings
└── src // Source code directory
├── api // API interface definitions
├── assets // Static resources directory
│ ├── images // Image resources
│ ├── js // JavaScript files
│ └── svg // SVG vector files
├── components // Components directory
│ ├── common // Common components
│ ├── icon // Icon components
│ ├── page // Page components
│ ├── query-bar // Query bar components
│ └── table // Table components
├── composables // Composable functionalities
├── directives // Directives directory
├── layout // Layout directory
│ └── components // Layout components
├── router // Routing directory
│ ├── guard // Route guards
│ └── routes // Route definitions
├── store // State management (pinia)
│ └── modules // State modules
├── styles // Style files directory
├── utils // Utilities directory
│ ├── auth // Authentication related utilities
│ ├── common // Common utilities
│ ├── http // Encapsulated axios
│ └── storage // Encapsulated localStorage and sessionStorage
└── views // Views/Pages directory
├── error-page // Error pages
├── login // Login page
├── profile // Profile page
├── system // System management page
└── workbench // Workbench page
```
### Visitors Count
