第一节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门

已于 2025-07-14 22:30:09 修改
阅读量4.8k 收藏 7
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： vben admin vue3 前端管理框架 前端框架 antd design vue
于 2025-04-17 14:27:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/147287444

Vben Admin vben5 系列文章目录

💻 基础篇
✅ 第一节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门
✅ 第二节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - Python Flask 后端开发详解(附源码)
✅ 第三节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 对接后端登录接口(上)
✅ 第四节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 对接后端登录接口(下)
✅ 第五节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 角色管理模块（上）
✅ 第六节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 角色管理模块（下）
✅ 第七节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 用户管理（上）
✅ 第八节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 用户管理（下）
✅ 第九节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 菜单管理（上）
✅ 第十节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 菜单管理（下）
✅ 第十一节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 角色菜单授权
✅ 第十二节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 两种权限控制方式（附前后端代码）
✅ 第十三节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 接口操作审计日志功能
✅ 第十四节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - Flask 后端 生产部署讲解
✅ 第十五节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - vue前端 生产部署

🏆 专栏链接
Vben Admin 框架实战(Python后端)

文章目录

前言

Vue Vben Admin(vben5)作为一个免费开源的中后台模板，它采用了最新的 Vue 3、Vite、TypeScript 等主流技术开发，开箱即用，可用于中后台前端开发，也适合学习参考。

目前github上的star数量是28.5K，还是非常高的，看来还是比较收到关注的一款后台管理模板。

官网地址:https://doc.vben.pro/
预览地址: https://www.vben.pro/#/analytics

一、Vben Admin V5.0

截至目前 Vben Admin 框架新出的版本V5.5.4(简称vben5)，而之前的Vben Admin 2.x 目前已存档，仅进行重大问题修复。
之前在2.x版本曾经简单完成了一版专栏文章，当时也是收获了一些好评和建议。本次决定在vben5 版本基础上再完成一次前后端的搭建。希望大家继续多多支持。

二、快速开始

1.前置准备

环境要求
在启动项目前，你需要确保你的环境满足以下要求：
Node.js 20.15.0 及以上版本，推荐使用 fnm 、 nvm 或者直接使用pnpm 进行版本管理。
Git 任意版本。
验证你的环境是否满足以上要求，你可以通过以下命令查看版本：

# 出现相应 node LTS版本即可
node -v
# 出现相应 git 版本即可
git -v

2.获取源码

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

# clone 代码
git clone https://github.com/vbenjs/vue-vben-admin.git

确认版本，我们本次使用的是5.5.4 版本
在这里插入图片描述

3. 安装依赖

# 进入项目目录
cd vue-vben-admin

# 使用项目指定的pnpm版本进行依赖安装
corepack enable

# 安装依赖
pnpm install

项目只支持使用 pnpm 进行依赖安装，默认会使用 corepack 来安装指定版本的 pnpm。:
如果你的网络环境无法访问npm源，你可以设置系统的环境变量COREPACK_NPM_REGISTRY=https://registry.npmmirror.com，然后再执行pnpm install。
如果你不想使用corepack，你需要禁用corepack，然后使用你自己的pnpm进行安装。

4. 运行项目

# 启动项目
pnpm dev

此时，你会看到类似如下的输出，选择你需要运行的项目：

│
◆  Select the app you need to run [dev]:
│  ○ @vben/web-antd
│  ○ @vben/web-ele
│  ○ @vben/web-naive
│  ○ @vben/docs
│  ● @vben/playground
└

三、精简版本

从 5.0 版本开始，Vben Admin不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能

应用精简

删除目录
apps/web-ele
apps/web-naive

演示代码精简

直接删除的playground文件夹

文档精简

如果你不需要文档，你可以直接删除docs文件夹。

Mock 服务精简

如果你不需要Mock服务，你可以直接删除apps/backend-mock文件夹。同时在你的应用下.env.development文件中删除VITE_NITRO_MOCK变量。

# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
VITE_NITRO_MOCK=false

其他删除

如果你想更进一步精简，你可以删除参考以下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：

.changeset 文件夹用于管理版本变更
.github 文件夹用于存放 GitHub 的配置文件
.vscode 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
./scripts/deploy 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除

总结

项目精简后，再次启动项目，执行

pnpm run dev

如下图，可以看到前端项目已经启动完成了！

点击登录，可以看到接口返回了500代码的报错，下一节我们开始准备后端代码。实现完整的登录。
在这里插入图片描述

第五节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 角色管理模块（上）
cuiwin的专栏
06-15 563
上节内容，我们已经实现了登录。接下来我们将完整的实现基于RBAC的权限控制。本节内容主要是通过Python实现角色管理的后端，主要包括添加，修改，分页列表，删除等。
第四节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 对接后端登录接口(下)
cuiwin的专栏
05-06 1243
上一节内容，实现了登录的/auth/login 接口，但是登陆没有完成，还需要完成下面两个接口。才能完成登录。
vben5.0快速搭建（第2版）
12-12
vben5.0快速搭建（第2版）
Vue Vben Admin 5.0：基于Vue3的现代化中后台管理框架深度解析—拥抱前沿技术，赋能高效开发
最新发布
chenchuang0128的博客
10-26 944
在前端技术快速迭代的今天，中后台管理系统的开发需求日益增长。如何选择一款高性能、易扩展且符合现代技术标准的框架，成为开发者关注的焦点。无论是快速搭建企业级应用，还是深入学习 Vue3 生态，它都是值得尝试的优质选择。本文将从技术架构、核心特性、开发体验及贡献指南等角度，全面解析这一现代化管理框架的独特价值。：无论是提交 Issue、优化文档，还是贡献代码，你的每一份努力都将推动框架进化！：提供完整的路由、权限、国际化等中后台核心功能，降低开发门槛；：从组件到工具函数，全链路类型安全，减少低级错误；
Abp Vnext Vue版本(Vben Admin5.0)
weixin_55010563的博客
11-23 3482
如果是通过lion.abp new -t pro.all创建的项目，请在Lion.AbpPro.EntityFrameworkCore目录下执行dotnet ef migrations add init 生成迁移文件。lion.abp new -t pro.module -c 公司名称 -p 项目名称 -m 模块名称 -o 输出路径(可选)lion.abp new -t pro.all -c 公司名称 -p 项目名称 -o 输出路径(可选)新版本(vben5)与旧版本(vben2.8)不兼容。
第十节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 菜单管理（下）
cuiwin的专栏
06-28 554
上一节我们通过Python Flask 实现了菜单管理的四个接口，本节内容是如何在Vben Admin (vben5) 框架的基础上，实现菜单管理功能。
vben-admin 手册
Tintin_wu的博客
04-15 4072
姓名
第七节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 用户管理（上）
cuiwin的专栏
06-17 490
本节的内容是用户管理，后端Python代码的实现。
第十五节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - vue前端 生产部署
cuiwin的专栏
07-14 1194
本节进入部署环节，一般我们的项目分三部分，包括面向普通用户的首页客户端，这里是PC客户端，也可以是小程序，APP等。PC 管理后台前端Python 后端程序下图是我们的部署效果项目访问备注首页前端vue3 pc 端 自建代码管理前端/adminpython 后端/apiflask 程序。
第十四节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - Flask 后端 生产部署讲解
cuiwin的专栏
07-08 1100
💻 基础篇✅✅✅✅✅✅✅✅✅✅✅✅✅🏆 专栏链接。
第二节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - Python Flask 后端开发详解(附源码)
cuiwin的专栏
06-11 1549
大家好，我是cuiwin！本节内容，我们从零开始开发基于Python(Flask)的后端项目，对接Vue Vben Admin(vben5)。登录mysql数据库执行： 创建数据库。
【爆款推荐】Vue Vben Admin 5.0震撼发布！28.6k Star的中后台王者全面升级！
chenchuang0128的博客
09-12 798
大家好，我是前端技术博主[前端组件开发]。这个在GitHub上狂揽28.6k Star的中后台解决方案，这次升级简直是把开发者体验做到了极致！👉 互动话题：你在使用Vben Admin时遇到过哪些问题？：本文由[前端组件开发]原创，转载请注明出处。更多技术干货，请持续关注本公众号！💡 博主实测：同样的功能开发，5.0版本比旧版节省40%编码时间！：完整的TypeScript支持，代码提示和类型检查爽到飞起。：Monorepo让代码组织更清晰，特别适合大型项目。：深入理解这些技术栈，大厂offer拿到手软
vben admin配置详解（Table, Form）
Web面试那些事儿的博客
12-16 8235
vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。
【免费下载】 Vue-Vben-Admin 快速入门教程
gitblog_00974的博客
08-08 2015
Vue-Vben-Admin 快速入门教程 【免费下载链接】vue-vben-admin vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多种数据库和插件...
Vben Admin 一 (初识框架)
热门推荐
为何这么帅
09-18 1万+
1、什么是Vben Admin Vue-Vben-Admin 是一个后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案， 总结就是一个后台管理模板。 项目开始前请仔细阅读 Vben Admin 官方文档 2、涉及的技术 Vue3.0、Vite、 Ant-Design-Vue、TypeScript等 3、项目结构 ├── build # 打包脚本相关 │ ├── config # 配置文件 │ ├── generate # 生成器 │ ├── script # 脚本 │ └── vi
Vben admin 5修改默认主题为渐变色
qq_42483780的博客
03-20 818
目前仅支持cls格式，如果新增的主题不是渐变色可以跟着文档走，文档讲的比较详细，如果是渐变主题可以往下面看。在dom里可以看到之前的css被覆盖。1.创建一个全局css文件并引入。v5版本的主题配置文件在这里。
vben admin的介绍
pjm2222的博客
01-17 3893
Vben Admin基于Vue3.0、Vite、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
Vben5中嵌套子表单
04-23
### Vben Admin v5 中嵌套子表单的实现方式 #### 背景介绍 Vben Admin 是一款基于 Vue3 和 TypeScript 构建的企业级管理后台框架，提供了丰富的功能模块和组件支持。其中，`form-design` 模块用于动态表单设计[^2]，而嵌套子表单则是复杂业务场景下的常见需求。 为了实现在 Vben Admin v5 中的嵌套子表单功能，可以利用其内置的 `FormSchema` 定义机制以及动态渲染能力来完成复杂的表单结构定义。 --- #### 解决方案概述 以下是实现嵌套子表单的主要方法： 1. **使用 FormItem 组件** 利用 Vben Admin 提供的 `FormItem` 来定义父表单和子表单的关系。 2. **动态加载子表单数据** 子表单可以通过 JSON Schema 或者动态 API 请求的方式获取字段配置并渲染。 3. **绑定父子关系的数据模型** 使用 Vue 的响应式特性，将父表单中的某个字段作为数组类型，存储多个子表单项的数据。 4. **自定义校验逻辑** 对于嵌套子表单，需确保每个子项都能独立验证，并最终汇总到整个表单的提交状态中。 --- #### 示例代码 以下是一个完整的嵌套子表单实现示例： ```typescript // 导入必要的组件和工具函数 import { useForm } from &#39;@vben/use&#39;; import { FormSchema } from &#39;@/components/Form&#39;; const parentSchemas: FormSchema[] = [ { field: &#39;parentField&#39;, component: &#39;Input&#39;, label: &#39;Parent Field&#39;, colProps: { span: 24 }, }, { field: &#39;childrenFields&#39;, component: &#39;ArrayItems&#39;, // 自定义 Array Items 渲染器 label: &#39;Children Fields&#39;, colProps: { span: 24 }, itemRender: ({ schema }) => ({ schemas: [ { field: &#39;childName&#39;, component: &#39;Input&#39;, label: &#39;Child Name&#39;, }, { field: &#39;childAge&#39;, component: &#39;InputNumber&#39;, label: &#39;Child Age&#39;, }, ], }), }, ]; export function useNestedForm() { const [register, methods] = useForm({ layout: &#39;vertical&#39;, schemas: parentSchemas, actionColOptions: { span: 24, }, }); return { register, ...methods }; } ``` --- #### 关键点解析 1. **动态子表单渲染** 在上面的例子中，`itemRender` 方法被用来定义如何渲染每一个子表单项。它返回一个新的 `schemas` 数组，描述了子表单的具体字段结构。 2. **数据绑定** 父表单中的 `childrenFields` 字段应设置为数组类型，以便能够容纳多个子表单项的数据。当用户新增或删除子项时，该数组会自动更新。 3. **校验规则** 可以为每个子表单项单独指定校验规则，例如： ```typescript { field: &#39;childAge&#39;, component: &#39;InputNumber&#39;, label: &#39;Child Age&#39;, rules: [{ required: true, message: &#39;Please enter the age&#39; }], } ``` 4. **样式调整** 如果默认的布局不符合需求，可以在 `colProps` 或其他属性中进一步定制样式[^2]。 --- #### 动态交互处理 对于更复杂的场景，比如通过按钮触发新增/删除操作，可以扩展如下逻辑： ```html <template> <BasicForm @register="register"> <!-- 新增按钮 --> <a-button type="primary" @click="addNewItem">Add Child</a-button> <!-- 删除按钮 (假设当前选中索引存放在 selectedChildIndex) --> <a-button danger @click="removeSelectedItem">Remove Selected</a-button> </BasicForm> </template> <script lang="ts"> import { ref } from &#39;vue&#39;; export default { setup() { const addNewItem = () => { methods.appendSchemaToField( { field: `newChild${Math.random().toString(36).substr(2, 8)}`, component: &#39;Input&#39;, label: &#39;New Child&#39;, }, &#39;childrenFields&#39; ); }; const removeSelectedItem = () => { const index = selectedChildIndex.value; if (index !== undefined && index >= 0) { methods.removeSchemaByFiled(`childrenFields.${index}`); } }; return { addNewItem, removeSelectedItem }; }, }; </script> ``` --- #### 总结 以上展示了在 Vben Admin v5 中实现嵌套子表单的核心思路和技术细节。通过合理运用 `FormSchema`、动态渲染能力和 Vue 的响应式特性，可以灵活应对各种复杂的表单需求。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值