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

系列文章目录

第一节:Vben Admin介绍和初次运行
第二节:Vben Admin 登录逻辑梳理和对接后端准备


文章目录

  • 系列文章目录
  • 前言
  • 一、Flask项目介绍
  • 二、使用步骤
    • 1.User模型创建
    • 2.迁移模型
    • 3. Token创建
    • 4. 编写蓝图
    • 5. 注册蓝图
  • 三. 测试登录
  • 总结


前言

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


一、Flask项目介绍

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

二、使用步骤

1.User模型创建

#用户表
class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    uuid = db.Column(db.String(150),unique=True,nullable=False)
    name = db.Column(db.String(50),unique=True,nullable=False)
    pwd = db.Column(db.String(255),nullable=False)
    email = db.Column(db.String(100),nullable=False)
    role_code = db.Column(db.String(100),nullable=False)
    status = db.Column(db.SmallInteger,default='1')  #状态 1:有效 0:无效

    def __repr__(self):
        return "<User %r>" % self.name

2.迁移模型

在这里插入图片描述

3. Token创建

class Token:
    @classmethod
    def generate_token(cls, key, expire=43200):
        """
        @Args:
            key: str (用户给定的key,需要用户保存以便之后验证token,每次产生token时的key 都可以是同一个key)
            expire: int(最大有效时间,单位为s)
        @Return:
            state: str
        :param key:
        :param expire:
        :return:
        """
        ts_str = str(time.time() + expire)
        ts_byte = ts_str.encode("utf-8")
        sha1_tshex_str = hmac.new(key.encode("utf-8"), ts_byte, 'sha1').hexdigest()
        token = ts_str + ':' + sha1_tshex_str
        b64_token = base64.urlsafe_b64encode(token.encode("utf-8"))

        return b64_token.decode("utf-8")

    @classmethod
    def certify_token(cls, key, token):
        """
        @Args:
            key: str
            token: str
        @Returns:
            boolean
        :param key:
        :param token:
        :return:
        """
        if key is None:
            return False
        token_str = base64.urlsafe_b64decode(token).decode('utf-8')
        token_list = token_str.split(':')
        if len(token_list) != 2:
            return False
        ts_str = token_list[0]
        if float(ts_str) < time.time():
            return False
        known_sha1_tsstr = token_list[1]
        sha1 = hmac.new(key.encode("utf-8"), ts_str.encode('utf-8'), 'sha1')
        calc_sha1_tsstr = sha1.hexdigest()
        if calc_sha1_tsstr != known_sha1_tsstr:
            # token certification failed
            return False
        # token certification success
        return True

4. 编写蓝图

代码如下(示例):

# 登录
@bp.route('/login',methods=['GET','POST'])
def login():
    data = request.get_json()
    username = data['username']
    password = data['password']
    user = User.query.filter_by(name=data["username"]).first()
    if user is None:
        error_result = {
            'message': '用户不存在!',
            'result': {},
            'code': -1,
            'type': 'error',
        }
        return error_result
    if not user.check_password(data["password"]):
        error_result = {
            'message': '用户密码错误!',
            'result': {},
            'code': -1,
            'type': 'error',
        }
        return error_result
    else:
        token = Token.generate_token(str(user.uuid))
        session['username'] = user.name
        session['role_code'] = user.role_code
        session['uuid'] = str(user.uuid)
        success_result = {
            'message': '',
            'result': {
                'userId': user.uuid,
                'username': user.name,
                'token': token,
                'realName':''
            },
            'code': 0,
            'type': 'success',
        }
        return success_result

5. 注册蓝图

import os

from flask import Flask
from apps.config import config
from apps.exts import db
from flask_migrate import Migrate

def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__)

    app.config.from_object(config['default'])

    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass


    from apps.api.auth import views as view_auth

    
    app.register_blueprint(view_auth.bp,url_prefix="/api/auth")

    # a simple page that says hello
    @app.route('/hello')
    def hello():
        return 'Hello, World!'

    
    db.init_app(app)
    migrate = Migrate(app, db)    

    return app

三. 测试登录

重写运行Vben Admin,再次尝试登录。
在这里插入图片描述
哎,还是404呢,经过排查,原理上次,我们前端有一个地方遗漏了,如下图,vite.config.ts指向的我们的后端地址好像不太对
在这里插入图片描述
这里我们改成我们后端真实数据
在这里插入图片描述
再次尝试登录,还是404? 继续排查。。。
原来如此,我们后端注册的蓝图地址是/api/auth + /login,而前端请求地址是/api/login,我们修改下第一节介绍的src/api/sys/user.ts 里面的Api.Login地址:
在这里插入图片描述
我们再次尝试登录。
在这里插入图片描述
这次我们发现我们的login接口已经成功返回了,但是还是没登录上去,这里我们看到请求了login接口后,VbenAdmin马上又请求了/api/getUserInfo接口,这个接口我们还没有编写。
通过Flask的输出,也可以看到
在这里插入图片描述
看来要完成登录,我们还需要完成/api/getUserInfo接口的编写


总结

本节,我们已经开启的后端的开发,因为是主要介绍Vben Admin的登录逻辑,所以Flask开发这里只截取了部分主要代码。我们目前已经完成了登录接口,但是要进入主页,还需要完成/api/getUserInfo接口,下一节,我们来看看这个接口的逻辑和如何开发。
码字不易,请大家多多点赞,谢谢支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/409585.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1904_ARM Cortex M系列芯片特性小结

1904_ARM Cortex M系列芯片特性小结 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) ARM Cortex M系列的MCU用过好几款了&#xff0c;也涉及到了不同的内核。不过&#xff0c;关于这些内核的基本的特性还是有些不了解。从ARM的官方网站上找来了一个对比…

皓学IT:WEB05-Servlet

一、Servlet 1.1.概述 Servlet是SUN公司提供的一套规范&#xff0c;名称就叫Servlet规范&#xff0c;它也是JavaEE规范之一。我们可以像学习Java基础一样&#xff0c;通过API来学习Servlet。这里需要注意的是&#xff0c;在我们之前JDK的API中是没有Servlet规范的相关内容&am…

k8s笔记26--快速实现prometheus监控harbor

k8s笔记26--快速实现prometheus监控harbor 简介采集指标&配置grafana面板采集指标配置grafana面板 说明 简介 harbor是当前最流行的开源容器镜像仓库项目&#xff0c;被大量IT团队广泛应用于生产、测试环境的项目中。本文基于Harbor、Prometheus、Grafana介绍快速实现监控…

H5多用途的产品介绍展示单页HTML5静态网页模板

H5多用途的产品介绍展示单页HTML5静态网页模板 源码介绍&#xff1a;一款H5自适应多用途的产品介绍展示单页HTML静态网页模板&#xff0c;可用于团队官网、产品官网。 下载地址&#xff1a; https://www.changyouzuhao.cn/13534.html

MYSQL安装及卸载

目录 一、下载 二、解压 三、配置 1. 添加环境变量 2. 初始化MySQL 3. 注册MySQL服务 4. 启动MySQL服务 5. 修改默认账户密码 四、登录MySQL 五、卸载MySQL 一、下载 点开下面的链接&#xff1a;MySQL :: Download MySQL Community Server 点击Download 就可以下载对…

vim恢复.swp [BJDCTF2020]Cookie is so stable1

打开题目 扫描目录得到 关于 .swp 文件 .swp 文件一般是 vim 编辑器在编辑文件时产生的&#xff0c;当用 vim 编辑器编辑文件时就会产生&#xff0c;正常退出时 .swp 文件被删除&#xff0c;但是如果直接叉掉&#xff08;非正常退出&#xff09;&#xff0c;那么 .swp 文件就会…

爬虫入门五(Scrapy架构流程介绍、Scrapy目录结构、Scrapy爬取和解析、Settings相关配置、持久化方案)

文章目录 一、Scrapy架构流程介绍二、Scrapy目录结构三、Scrapy爬取和解析Scrapy的一些命令css解析xpath解析 四、Settings相关配置提高爬取效率基础配置增加爬虫的爬取效率 五、持久化方案 一、Scrapy架构流程介绍 Scrapy一个开源和协作的框架&#xff0c;其最初是为了页面抓取…

基于springboot+vue的音乐网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【其他】简易代码项目记录

1. KeypointDetection 1.1. CharPointDetection 识别字符中的俩个关键点。 1.2. Facial-keypoints-detection 用于检测人脸的68个关键点示例。 1.3. Hourglass-facekeypoints 使用基于论文Hourglass 的模型实现人体关键点检测。 1.4. Realtime-Action-Recognition containing:…

15.4K Star,超强在线编辑器

Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 今天推荐一款非常棒的开源实时协作编辑器&#xff0c;可用于多人同时编…

复旦大学EMBA联合澎湃科技:共议科技迭代 创新破局

1月18日&#xff0c;由复旦大学管理学院、澎湃新闻、厦门市科学技术局联合主办&#xff0c;复旦大学EMBA项目、澎湃科技承办的“君子知道”复旦大学EMBA前沿论坛在厦门成功举办。此次论坛主题为“科技迭代 创新破局”&#xff0c;上海、厦门两地的政策研究专家、科学家、科创企…

JavaScript流程控制

文章目录 1. 顺序结构2. 分支结构2.1 if 语句2.2 if else 双分支语句2.3 if else if 多分支语句三元表达式 2.4 switch 语句switch 语句和 if else if语句区别 3. 循环结构3.1 for 循环断点调试 3.2 双重 for 循环3.3 while 循环3.4 do while 循环3.5 contiue break 关键字 4. …

3.WEB渗透测试-前置基础知识-快速搭建渗透环境(上)

上一个内容&#xff1a;2.WEB渗透测试-前置基础知识-web基础知识和操作系统-CSDN博客 1.安装虚拟机系统 linux Kali官网下载地址&#xff1a; https://www.kali.org/get-kali/#kali-bare-metal Centos官网下载地址&#xff1a; https://www.centos.org/download/ Deepin官网下…

Flask基础学习4

19-【实战】问答平台项目结构搭建_剪_哔哩哔哩_bilibili 参考如上大佬的视频教程&#xff0c;本博客仅当学习笔记&#xff0c;侵权请联系删除 问答发布的web前端页面实现 register.html {% extends base.html %}{% block head %}<link rel"stylesheet" href&q…

软件应用场景,物流货运配货单打印模板软件单据打印查询管理系统软件教程

软件应用场景&#xff0c;物流货运配货单打印模板软件单据打印查询管理系统软件教程 一、前言 以下软件以 佳易王物流快运单打印查询管理系统软件V17.1 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、打印模式可以分为 直打模式和套打模式 直打模…

在IDEA中创建vue hello-world项目

工作中最近在接触vue前端项目&#xff0c;记录一下从0搭建一个vue hello world项目的步骤 1、本地电脑安装配置node、npm D:\Project\vue\hello-world>node -v v14.21.3 D:\Project\vue\hello-world>npm -v 6.14.18 D:\Project\vue\hello-world> 2、设置npm国内淘…

2024最新前端面试题

一、css 浏览器渲染机制 定位margin 定位transform flex布局 二、js 数组是属于Object类型的&#xff0c;也就是引用类型&#xff0c;所以不能使用 typeof 来判断其具体类型。下面这些方法是判断数组的几种方法&#xff1a; 1、instanceof运算符 主要是判断某个实例&#xff08…

Movelt使用笔记-Movelt Setup Assistant

目录 Setup Assistant配置1 Start 加载urdf模型3 Virtual joints 虚拟关节5 Robot Poses 机器人位姿7 Passive Joints 被动关节8 Controllers 控制器9 Simulation 仿真10 3D Perception 3D感知11 Author Information 作者信息12 Configuration Files 配置文件启动MoveIt!Setup…

贪心算法学习

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法在有最优子结构的问题中尤为有效。然而&#xff0c;要注意的是贪心…

推荐莹莹API管理系统PHP源码

莹莹API管理系统PHP源码附带两套模板,PHP版本要求为5.6至8.0之间&#xff0c;已测试通过的版本为7.4。 需要安装PHPSG11加密扩展。 已测试&#xff1a;宝塔/主机亲测成功搭建&#xff01; 演示地 址 &#xff1a; runruncode.com/php/19698.html 安装说明&#xff08;适用于宝…