第三节：Vben Admin登录对接后端login接口

原创 已于 2024-05-03 20:09:43 修改 · 4.1k 阅读 · 25 GEO检测
于 2024-02-25 10:33:30 首次发布
本文是关于Vben Admin与Flask后端整合的教程，详细讲解了如何创建User模型，进行数据库迁移，生成Token，编写并注册蓝图以实现登录接口。在测试登录过程中遇到前端请求地址与后端蓝图不匹配的问题，并解决了该问题，但发现还需要完成/api/getUserInfo接口以完成完整的登录流程。

系列文章目录

基础篇
第一节：Vben Admin介绍和初次运行
第二节：Vben Admin 登录逻辑梳理和对接后端准备
第三节：Vben Admin登录对接后端login接口
第四节：Vben Admin登录对接后端getUserInfo接口
第五节：Vben Admin权限-前端控制方式
第六节：Vben Admin权限-后端控制方式
第七节：Vben Admin权限-后端获取路由和菜单

实战篇
第八节：Vben Admin登录页面自定义
第九节：Vben Admin实战-系统管理之角色管理实现-上
第十节：Vben Admin实战-系统管理之角色管理实现(分页查询，修改)-中
第十一节：Vben Admin实战-系统管理之角色管理实现(删除，状态修改)-下
第十二节：Vben Admin实战-系统管理之用户管理
第十三节：Vben Admin实战-系统管理之菜单管理

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

文章目录

前言

上一节，我们梳理的Vben Admin登录功能接口的逻辑，本节开始正式开启后端的开发

一、Flask项目介绍

后端我们采用Python的Flask项目，Flask-SQLAlchemy管理数据库模型，Flask-Migrate进行模型迁移。
参考版本如下：
Flask3.0.2
Flask-SQLAlchemy3.1.1

二、使用步骤

1.User模型创建

#用户表
class User(db.Model):
    __tablename__ = 'user'
标签
#anti-design-vue #vue #前端框架 #flask #python
#vben admin
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vben Admin v5.0与Flask后端登录对接实战：从JWT认证到权限路由
weixin_30847939的博客
07-02 331
在前后端分离架构中，RESTful API与前端框架的对接是核心开发环节，涉及跨域通信、状态管理和安全认证等关键技术。其基本原理是通过HTTP协议进行数据交换，前端通过代理或配置处理跨域，后端则提供标准化的数据接口。JWT（JSON Web Token）作为一种无状态的认证机制，通过加密的Token在客户端与服务器间安全传递身份信息，是实现登录认证的主流方案，具有易于扩展和分布式友好的技术价值。这一技术组合广泛应用于管理后台、中台系统等需要精细权限控制的Web应用场景。本文聚焦于Vben Admin v5.
【Vue Vben Admin 实战指南：目录结构、权限与请求原理、从 Mock 到生产部署】
XiaoMu_001的博客
08-14 2070
深入了解前端框架 Vue Vben Admin ，为开发增效
第四节：Vben Admin登录对接后端getUserInfo接口
cuiwin的专栏
02-25 2789
上一节，我们完成了/api/auth/login接口的创建，通过login接口，我们完成了登录和Token的生成。但是登陆还是报404返回，发现是Vben Admin又请求了一个/api/getUserInfo接口，本节我们就来分析完成这个接口本节，我们完成了getUserInfo接口，完成了登录操作，成功的进入到工作台页面。
第一节：Vben Admin介绍和初次运行
cuiwin的专栏
02-20 7310
本文是【实战Vben Admin + Python】的第一节，本文内容主要是介绍Vben Admin框架和我们后端使用的技术，开发环境和工具的准备本节文章的目的是Vben Admin的简单介绍，通过配置可以让项目前端运行起来，由于项目默认开启了mock，展示的都是静态模拟数据，我们在此基础上，下一节将研究分析下Vben Admin的目录。为我们后端搭建准备。
Vben精讲：01-Vben Admin简介
赵庆明老师
06-28 262
Vben Admin是一款开箱即用的中后台管理系统前端模板，具有工程化、高性能和跨组件库的特点。提供演示站点(vben.pro)、详细文档(doc.vben.pro)和GitHub源码(vue-vben-admin)，方便开发者快速搭建企业级管理系统。
实战SpringBoot2+Vue3-Vben-Admin整合之前端篇
05-14
【※  购买前提醒  ※】本课程分为前端+后端共计2个课程，本课属于前端部分，后端属于另外课程。 后端部分：https://download.csdn.net/course/detail/37057适用人群Java生态开发人员、Vue生态开发人员、IT类从业者课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue3-Vben-Admin+可视化等技术栈开发的项目，采用多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Vue-Vben-AdminI 前端 UI 框架 前端模板【开发工具】IntelliJ IDEA 开发 IDESQLyog 数据库连接客户端Postman HTTP 请求工具【开发环境】工具 版本JDK 1.8MySQL 5.7
Vben Admin 的介绍以及使用
热门推荐
YZRHANYU的博客
11-17 3万+
Vben Admin 的介绍以及使用
第四节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门 - 对接后端登录接口(下)
cuiwin的专栏
05-06 1638
上一节内容，实现了登录的/auth/login 接口，但是登陆没有完成，还需要完成下面两个接口。才能完成登录。
vben-admin学习004：Login.vue 构建
askein的博客
09-03 1108
响应式设计: 使用 Vue 3 的 Composition APITypeScript 支持: 使用接口定义表单数据类型平滑动画: 通过 CSS transform 和 transition 实现表单验证: HTML5 原生验证（required 属性）组件化: 整个登录/注册功能封装在一个组件中。
vben 登录，权限控制（后端访问权限控制）
m0_65559999的博客
12-20 831
这里存放了5种登录方式的路由, 布局组件使用的是下的组件这是账密登录的路由，更具component找到对应组件路径：注意：#号是路径映射，官方文档:这里介绍了#的申明地址，不建议修改为@，框架 内部也用了#，不好修改；具体位置在找到账密登录的组件：formSchema可以调整表单结构这是账密加验证码的表单结构，表单组件的api：authStore.authLogin这是登录方法，存放于仓库中他的具体实现在。
vben admin 项目学习day2：登录首页 Login
buchibingqilin的博客
07-25 1186
1. AppLocalePicker # 切换语言的下拉菜单2. AppLogo # 左上角的logo部分3. LoginForm # 登录4. ForgetPasswordForm # 忘记密码5. RegisterForm # 注册6. MobileForm # 手机登录。
Vben Admin：基于Vue 3与Vite的企业级中后台开发实战指南
最新发布
weixin_30399155的博客
08-15 344
在现代前端开发中，构建高效、规范的中后台管理系统是常见的工程挑战。Vue 3框架凭借其Composition API和出色的性能，已成为构建复杂单页应用的主流选择。结合Vite构建工具提供的极速热更新和冷启动能力，开发者能够获得流畅的开发体验。这种技术组合的核心价值在于提升开发效率、保障代码可维护性，并统一团队技术规范。在企业级应用场景中，如运营平台、数据看板和内部管理系统，快速搭建一套功能完备、权限清晰且UI统一的前端架构尤为关键。本文以Vben Admin这一开箱即用的解决方案为例，深入解析其如何基于V
Vue Vben Admin：现代化中后台管理系统的终极解决方案
gitblog_00067的博客
07-08 353
你是否正在为构建企业级中后台系统而烦恼？面对复杂的权限管理、多主题切换、国际化支持等需求，传统的开发模式往往需要投入大量时间和精力。Vue Vben Admin 正是为解决这些痛点而生的现代化管理后台框架，基于 Vue 3、Vite、TypeScript 和 Monorepo 架构，为开发者提供开箱即用的高效解决方案。 ## 痛点分析与解决方案 在传统中后台系统开发中，开发者常常面临以下挑战：
Vue Vben Admin 5.0：从零构建企业级中后台的现代解决方案
gitblog_00449的博客
07-07 778
在当今快速迭代的前端开发领域，你是否曾为搭建一个既美观又功能完善的中后台系统而头疼？面对复杂的权限管理、多主题切换、国际化支持等需求，传统开发模式往往需要投入大量时间在基础设施搭建上。Vue Vben Admin 5.0正是为解决这一痛点而生的现代化解决方案，它不仅仅是一个模板，更是经过实战检验的企业级开发框架。 ## 🚀 为什么选择Vue Vben Admin 5.0？ 想象一下这样的场景
vue-vben-admin权限系统设计：RBAC模型与权限粒度控制
gitblog_00173的博客
10-08 1190
在现代Web应用开发中，权限系统是保障数据安全和用户体验的核心组件。vue-vben-admin作为基于Vue3和TypeScript的企业级中后台解决方案，其权限系统采用RBAC（Role-Based Access Control，基于角色的访问控制）模型，结合多维度权限粒度控制，实现了灵活且安全的权限管理架构。本文将深入剖析vue-vben-admin权限系统的设计理念、实现方式及最佳实践。 ...
3步快速上手：Vue Vben Admin现代化中后台管理模板完全指南
gitblog_01187的博客
07-17 269
你是否正在寻找一个既能快速上手又具备企业级功能的前端中后台管理模板？Vue Vben Admin正是这样一个基于Vue 3、Vite和TypeScript的现代化解决方案，它提供了开箱即用的功能和灵活的配置选项，让你在短时间内构建出专业的管理系统界面。本文将带你从零开始，全面掌握这个高效的前端模板的使用方法。 ## 🔍 为什么选择Vue Vben Admin？ 在开发中后台管理系统时，我们常
30分钟掌握vue-vben-admin路由元信息：从权限控制到动态标题
gitblog_01116的博客
10-08 573
在vue-vben-admin开发中，你是否遇到过以下痛点：权限控制逻辑分散在各个页面、动态标题需要重复编写代码、路由配置与业务逻辑纠缠不清？本文将系统讲解路由元信息（Route Meta）在vue-vben-admin中的核心应用，通过统一配置实现权限控制、动态标题、菜单显示等功能，让你的项目架构更清晰。 ## 路由元信息基础架构 vue-vben-admin的路由系统核心定义在[src/r...
解决90%权限问题！vue-vben-admin路由守卫与动态权限控制方案
gitblog_00619的博客
10-08 1078
在后台管理系统开发中，你是否遇到过以下痛点：用户登录后看不到对应权限的菜单、页面跳转时权限校验漏洞、动态路由加载异常导致404？vue-vben-admin的路由守卫机制通过permissionGuard与精细化权限控制，可一站式解决这些问题。本文将从实际业务场景出发，详解路由守卫工作流程、动态权限加载逻辑及常见问题解决方案。 ## 路由守卫架构：从注册到执行的完整链路 vue-vben-ad...
解决90%的权限白屏问题：vue-vben-admin路由守卫异步处理全解析
gitblog_00135的博客
10-08 572
你是否还在为Vue路由守卫中的异步权限判断导致页面白屏而烦恼？是否遇到过动态路由加载时机不当引发的404错误？本文将通过vue-vben-admin的源码实例，详解如何利用Promise链和状态管理优雅处理路由守卫中的异步操作，让你彻底掌握复杂权限场景下的路由控制方案。 ## 路由守卫架构概览 vue-vben-admin采用多层次守卫设计，在[src/router/guard/index.t...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值