Giter Site home page Giter Site logo

mizhexiaoxiao / vue-fastapi-admin Goto Github PK

View Code? Open in Web Editor NEW
349.0 4.0 64.0 1.79 MB

⭐️ 基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台 A modern and lightweight management platform based on FastAPI, Vue3, and Naive UI.

Home Page: http://139.9.100.77:9999

License: MIT License

Makefile 1.03% Python 25.61% Shell 0.02% JavaScript 26.94% CSS 0.94% Vue 44.18% SCSS 0.62% Dockerfile 0.67%
fastapi naive-ui naive-ui-admin python vite vue vue3 admin fastapi-admin fastapi-vuejs-template

vue-fastapi-admin's Introduction

Vue FastAPI Admin Logo

vue-fastapi-admin

English | 简体中文

基于 FastAPI + Vue3 + Naive UI 的现代化前后端分离开发平台,融合了 RBAC 权限管理、动态路由和 JWT 鉴权,助力中小型应用快速搭建,也可用于学习参考。

特性

  • 最流行技术栈:基于 Python 3.11 和 FastAPI 高性能异步框架,结合 Vue3 和 Vite 等前沿技术进行开发,同时使用高效的 npm 包管理器 pnpm。
  • 代码规范:项目内置丰富的规范插件,确保代码质量和一致性,有效提高团队协作效率。
  • 动态路由:后端动态路由,结合 RBAC(Role-Based Access Control)权限模型,提供精细的菜单路由控制。
  • JWT鉴权:使用 JSON Web Token(JWT)进行身份验证和授权,增强应用的安全性。
  • 细粒度权限控制:实现按钮和接口级别的权限控制,确保不同用户或角色在界面操作和接口访问时具有不同的权限限制。

在线预览

登录页

image

工作台

image

用户管理

image

角色管理

image

菜单管理

image

API管理

image

快速开始

方法一:dockerhub拉取镜像

docker pull mizhexiaoxiao/vue-fastapi-admin:latest 
docker run -d --restart=always --name=vue-fastapi-admin -p 9999:80 mizhexiaoxiao/vue-fastapi-admin

方法二:dockerfile构建镜像

docker安装(版本17.05+)
yum install -y docker-ce
systemctl start docker
构建镜像
git clone https://github.com/mizhexiaoxiao/vue-fastapi-admin.git
cd vue-fastapi-admin
docker build --no-cache . -t vue-fastapi-admin
启动容器
docker run -d --restart=always --name=vue-fastapi-admin -p 9999:80 vue-fastapi-admin
访问

http://localhost:9999

username:admin

password:123456

本地启动

后端

启动项目需要以下环境:

  1. 创建虚拟环境
poetry shell
  1. 安装依赖
poetry install
  1. 启动服务
make run

服务现在应该正在运行,访问 http://localhost:9999/docs 查看API文档

前端

启动项目需要以下环境:

  • node v18.8.0+
  1. 进入前端目录
cd web
  1. 安装依赖(建议使用pnpm: https://pnpm.io/zh/installation)
npm i -g pnpm # 已安装可忽略
pnpm i # 或者 npm i
  1. 启动
pnpm dev

目录说明

├── app                   // 应用程序目录
│   ├── api               // API接口目录
│   │   └── v1            // 版本1的API接口
│   │       ├── apis      // API相关接口
│   │       ├── base      // 基础信息接口
│   │       ├── menus     // 菜单相关接口
│   │       ├── roles     // 角色相关接口
│   │       └── users     // 用户相关接口
│   ├── controllers       // 控制器目录
│   ├── core              // 核心功能模块
│   ├── log               // 日志目录
│   ├── models            // 数据模型目录
│   ├── schemas           // 数据模式/结构定义
│   ├── settings          // 配置设置目录
│   └── utils             // 工具类目录
├── deploy                // 部署相关目录
│   └── sample-picture    // 示例图片目录
└── web                   // 前端网页目录
    ├── build             // 构建脚本和配置目录
    │   ├── config        // 构建配置
    │   ├── plugin        // 构建插件
    │   └── script        // 构建脚本
    ├── public            // 公共资源目录
    │   └── resource      // 公共资源文件
    ├── settings          // 前端项目配置
    └── src               // 源代码目录
        ├── api           // API接口定义
        ├── assets        // 静态资源目录
        │   ├── images    // 图片资源
        │   ├── js        // JavaScript文件
        │   └── svg       // SVG矢量图文件
        ├── components    // 组件目录
        │   ├── common    // 通用组件
        │   ├── icon      // 图标组件
        │   ├── page      // 页面组件
        │   ├── query-bar // 查询栏组件
        │   └── table     // 表格组件
        ├── composables   // 可组合式功能块
        ├── directives    // 指令目录
        ├── layout        // 布局目录
        │   └── components // 布局组件
        ├── router        // 路由目录
        │   ├── guard     // 路由守卫
        │   └── routes    // 路由定义
        ├── store         // 状态管理(pinia)
        │   └── modules   // 状态模块
        ├── styles        // 样式文件目录
        ├── utils         // 工具类目录
        │   ├── auth      // 认证相关工具
        │   ├── common    // 通用工具
        │   ├── http      // 封装axios
        │   └── storage   // 封装localStorage和sessionStorage
        └── views         // 视图/页面目录
            ├── error-page // 错误页面
            ├── login      // 登录页面
            ├── profile    // 个人资料页面
            ├── system     // 系统管理页面
            └── workbench  // 工作台页面

进群交流

进群的条件是给项目一个star,小小的star是作者维护下去的动力。

你可以在群里提出任何疑问,我会尽快回复答疑。

Vue FastAPI Admin Logo

Visitors Count

Loading

vue-fastapi-admin's People

Contributors

inouekenta avatar mizhexiaoxiao avatar nicozhang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vue-fastapi-admin's Issues

api详情

您好 能不能增加一个数据模型,比如我想查看某个 api 具体的参数、数据格式、返回值等等

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.