前后端分离：fastapi-vue-admin的探索

引言

在当今快速发展的技术领域，快速开发平台成为了许多项目的首选。fastapi-vue-admin 作为一套全部开源的快速开发平台，采用了一系列现代化技术，旨在提供高效、便捷的开发体验。本文将深入探讨 fastapi-vue-admin 的技术选型与优势，探索其在实践中的价值和创新。

介绍

fastapi-vue-admin 是一套全部开源的快速开发平台，提供免费使用。

• 后端：采用 FastAPI（现代、高性能异步框架） + Swagger（自动生成交互式API文档） + Pydantic（强制类型约束） + SQLAlchemy 2.0。
• 前端：基于 Vue3 + Ant Design Vue + TypeScript + Vite 等主流技术开发。
• 权限认证：使用哈希密码和 JWT Bearer 令牌的 OAuth2。
• 权限架构：基于 RBAC 权限架构设计，支持加载动态权限菜单、按钮级别权限控制、数据级别权限控制。
• 用途：开箱即用的中后台解决方案，可以用来作为新项目的启动模版，也可用于学习参考。

特点和优势

1. 后端：

   • FastAPI 是一个现代、高性能的异步框架，提供了快速、可靠的后端服务。

2. 前端：

   • 基于 Vue3 和 Ant Design Vue，结合 TypeScript 和 Vite 等主流技术，实现了现代化、响应式的用户界面。

3. API文档：

   • 使用 Swagger 自动生成交互式API文档，提高了API文档的可读性和可维护性。

4. 权限认证：

   • 基于 OAuth2 的权限认证机制，包括哈希密码、JWT令牌等，保障了系统的安全性和可靠性。

5. RBAC权限架构：

   • 支持动态权限菜单加载、按钮级别权限控制、数据级别权限控制，满足了复杂应用场景下的权限管理需求。

在线体验

• PC端演示地址：https://fastapi-vue-admin.senqiweb.cn

• 管理员账户：

  • 账号：senqi
  • 密码：senqi1010

• 测试账户：

  • 账号：test
  • 密码：test1010

安装和使用

获取代码

git clone https://gitee.com/senqi666/fastapi-vue-admin.git

准备工作

• Python：版本要求 3.10（其他版本均未测试）
• Node.js：版本 >= 20.0（推荐使用最新版）
• PgSQL：推荐使用最新版
• Redis：推荐使用最新版

后端

1. 安装依赖：

   cd backend
   pip3 install -r requirements.txt
   

2. 修改项目数据库配置信息：

   在 app/core/config.py 文件中的 SQL_DB_URL 和 REDIS_URL 修改为你自己的数据库配置。

3. 创建数据库：

   创建名为 fastapi_vue_admin 的数据库。

4. 初始化数据库数据：

   # 进入后端根目录 backend 下运行
   # 运行命令后会自动生成数据库内的表和数据
   # 如已初始化数据库数据，此命令可不执行
   python3 main.py init
   

5. 启动后端服务：

   # 进入后端根目录 backend 下运行
   python3 main.py run
   

前端

1. 安装依赖：

   cd web
   npm install
   

2. 运行前端开发服务器：

   npm run dev
   

3. 打包前端代码：

   npm run build
   

访问项目

• 前端地址：http://127.0.0.1:5180
• 账号：senqi
• 密码：senqi1010
• 接口地址：http://127.0.0.1:8080/docs

项目截图

总结

fastapi-vue-admin 凭借其先进的技术选型和创新的功能设计，成为了开箱即用的中后台解决方案的佼佼者。其采用的现代化技术架构，不仅提高了开发效率和代码质量，还为项目的可维护性和扩展性提供了良好的基础。随着对前后端一体化开发需求的不断增加，相信 fastapi-vue-admin 将在未来继续发挥重要作用，成为更多项目的首选框架。