继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 – 第 2 部分

在本系列的前一部分中,我们了解了如何开始使用 python flask 和 mysql 并实现应用程序的用户注册部分。在本教程中,我们将通过为我们的应用程序实现登录和注销功能,将其提升到一个新的水平。

开始使用

首先从 GitHub 克隆上一个教程的源代码。

git clone https://github.com/tutsplus/create-a-web-app-from-scratch-using-python-flask-and-mysql/.git

克隆源代码后,导航到 part-1 目录并启动服务器。

python app.py

将浏览器指向 https://localhost:5000,应用程序应该正在运行。

创建登录界面

导航到FlaskApp/templates并创建一个名为signin.html的新文件。打开 signin.html 并添加以下 HTML 代码:

立即学习“Python免费学习笔记(深入)”;

        Python Flask Bucket List App - Sign In        
        
            Python Flask App                                

Bucket List App

        
            

© Company 2022

Designify
Designify

拖入图片便可自动去除背景✨

Designify 90
查看详情 Designify
        
    

打开app.py并为登录界面添加新路由。

@app.route('/signin')def showSignin():    return render_template('signin.html')

接下来,打开index.htmlsignup.html,并在两个页面上添加用于登录的 href 链接: /signin。保存所有更改并重新启动服务器。

python app.py

将浏览器指向 http://localhost:5000 并单击登录链接,您应该能够看到登录页面。

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

实现登录

现在,我们需要创建一个函数来验证用户登录。单击登录后,我们会将输入的电子邮件地址和密码发布到验证用户功能。

创建存储过程

为了验证用户,我们需要一个 MySQL 存储过程。因此创建一个MySQL存储过程如图:

DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_validateLogin`(IN p_username VARCHAR(20))BEGIN    select * from tbl_user where user_username = p_username;END$$DELIMITER ;

我们将使用 sp_validateLogin 从 MySQL 数据库中获取基于 用户名 的用户详细信息。获得哈希密码后,我们将根据用户输入的密码对其进行验证。

验证用户方法

创建一个方法来验证用户,我们将在用户提交表单时调用该方法:

@app.route('/api/validateLogin',methods=['POST'])def validateLogin():    try:        _username = request.form['inputEmail']        _password = request.form['inputPassword']    except Exception as e:        return render_template('error.html',error = str(e))

如上面的代码所示,我们已将发布的电子邮件地址和密码读取到 _username_password 中。现在我们将使用参数 _username 来调用 sp_validateLogin 过程。因此,在 validatelogin 方法内创建一个 MySQL 连接:

con = mysql.connect()

创建连接后,使用 con 连接创建 cursor

cursor = con.cursor()

使用游标,调用MySQL存储过程,如下所示:

cursor.callproc('sp_validateLogin',(_username,))

从游标中获取获取的记录,如下所示:

data = cursor.fetchall()

如果数据有一些记录,我们会将检索到的密码与用户输入的密码进行匹配。

if len(data) > 0:    if check_password_hash(str(data[0][3]),_password):        return redirect('/userhome')    else:        return render_template('error.html',error = 'Wrong Email address or Password.')else:    return render_template('error.html',error = 'Wrong Email address or Password.')

如上面的代码所示,我们使用了一个名为 check_password_hash 的方法来检查返回的哈希密码是否与用户输入的密码匹配。如果一切顺利,我们会将用户重定向到 userHome.html。如果出现任何错误,我们将显示 error.html 以及错误消息。

这是完整的 validateLogin 代码:

@app.route('/api/validateLogin',methods=['POST'])def validateLogin():    try:        _username = request.form['inputEmail']        _password = request.form['inputPassword']        # connect to mysql        con = mysql.connect()        cursor = con.cursor()        cursor.callproc('sp_validateLogin',(_username,))        data = cursor.fetchall()        if len(data) > 0:            if check_password_hash(str(data[0][3]),_password):                session['user'] = data[0][0]                return redirect('/userHome')            else:                return render_template('error.html',error = 'Wrong Email address or Password')        else:            return render_template('error.html',error = 'Wrong Email address or Password')    except Exception as e:        return render_template('error.html',error = str(e))    finally:        cursor.close()        con.close()

在 templates 文件夹中创建一个名为 userhome.html 的页面,并添加以下 HTML 代码:

        Python Flask Bucket List App - Home        
        
            Python Flask App                                

Welcome Home!

        
            

© Company 2022

        
    

此外,在 templates 文件夹中创建一个名为 error.html 的错误页面,并添加以下 HTML 代码:

        Error - Python Flask App        
        
            Python Flask App                                

{{error}}

        
            

© Company 2022

        
    

error.html 中,我们有一个元素,如下所示:

{{error}}

变量的值可以从 render_template 函数传递,并且可以动态设置。

成功登录后,我们将用户重定向到用户主页,因此我们需要创建一个名为 /userHome 的路由,如下所示:

@app.route('/userHome')def userHome():    return render_template('userHome.html')    

保存所有更改并重新启动服务器。单击主页上的登录链接,然后尝试使用有效的电子邮件地址和密码登录。成功的用户验证后,您应该看到如下所示的页面:

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

用户验证不成功时,用户将被重定向到错误页面,如下所示:

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

这里我们使用了一个单独的错误页面来显示错误。如果您想使用同一页面来显示错误消息也可以。

限制未经授权访问用户主页

用户验证成功后,用户将被重定向到用户主页。但现在,即使是未经授权的用户也可以通过简单地浏览 URL http://localhost:5000/userhome 来查看主页。

为了限制未经授权的用户访问,我们将检查会话变量,并在用户成功登录时设置该变量。因此从 Flask 导入 session

from flask import session

我们还需要为会话设置一个密钥。因此,在 app.py 中,在应用程序初始化后,设置密钥,如下所示:

app.secret_key = 'why would I tell you my secret key?'

现在,在 validateLogin 方法中,在成功登录后将用户重定向到 /userhome 之前,设置 session 变量,如下所示:

session['user'] = data[0][0]

接下来,在 userhome 方法内,在渲染 userhome.html 之前检查会话变量。如果未找到会话变量,则重定向到错误页面。

@app.route('/userhome')def userHome():    if session.get('user'):        return render_template('userhome.html')    else:        return render_template('error.html',error = 'Unauthorized Access')

保存所有更改并重新启动服务器。在不登录的情况下,尝试导航到 http://localhost:5000/userhome,由于您尚未登录,因此您应该被重定向到错误页面。

继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分

实现注销

实现注销功能是最简单的。我们需要做的就是将会话变量 user 设置为 null 并将用户重定向到主页。

app.py中,为 logout 创建一个新的路由和方法,如下所示:

@app.route('/logout')def logout():    session.pop('user',None)    return redirect('/')

我们已经将注销按钮的 href 设置为 /logout。因此,保存所有更改并重新启动服务器。在主页上,单击登录并尝试使用有效的电子邮件地址和密码登录。登录后,单击用户主页中的注销按钮,您应该会成功从应用程序注销。

结论

在本教程的这一部分中,我们了解了如何实现用户登录和注销功能。我们还了解了如何限制对应用程序页面的未经授权的访问。在本教程的下一部分中,我们将实现登录用户在应用程序中添加和编辑博客文章的功能。

这篇文章已根据 Jacob Jackson 的贡献进行了更新。 Jacob 是一名 Web 开发人员、技术作家、自由职业者和开源贡献者。

以上就是继续旅程:从头开始构建 Python Flask 和 MySQL Web 应用程序 – 第 2 部分的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551484.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:46:07
下一篇 2025年12月21日 21:46:39

相关推荐

  • 当在JavaScript中将某个值转换为布尔值时会发生什么?

    使用 JavaScript 中的 Boolean() 方法转换为布尔值。您可以尝试运行以下代码来了解如何在 JavaScript 中将 [50, 100] 转换为布尔值。 示例 实时演示 Convert [50,100] to Boolean var myVal = [50,100]; docume…

    好文分享 2025年12月21日
    000
  • iframe之间靠什么链接

    iframe之间靠超链接、JavaScript、父级窗口和消息传递等方法链接。详细说明:1、使用超链接,在iframe中嵌入一个超链接,当用户点击链接时,会在同一个iframe中加载新的网页;2、JavaScript,在一个iframe中的按钮上绑定一个JavaScript函数,当用户点击按钮时,该…

    2025年12月21日
    000
  • iframe有什么标记

    iframe的标记有src、srcdoc、name、sandbox、allowfullscreen、width和height、frameborder、scrolling、allow和deny等等。详细说明:1、src,指定要嵌入的文档的URL;2、srcdoc,指定要嵌入的文档的内容;3、name,…

    好文分享 2025年12月21日
    000
  • 内联JavaScript如何与HTML一起工作?

    在本文中,您将了解内联 JavaScript 如何与 HTML 配合使用。内联 JavaScript 表示在 html 文件中的 标记之间编写的代码块。在 HTML 文件中使用内联 JavaScript 的优点是减少 Web 浏览器到服务器的往返。 示例 1 让我们了解如何使用内联 JavaScri…

    2025年12月21日
    000
  • HTML DOM表单集合

    html dom 表单集合用于以集合形式返回 html 文档中存在的所有表单元素。集合中的元素按照它们在 html 文档中出现的顺序进行排序和显示。 属性 以下是表单集合的属性 – 属性 描述 length它是一个只读属性,返回集合中 方法 以下是表单收集的方法 – 方法 描…

    2025年12月21日
    000
  • 如何在HTML5中居中画布?

    要在HTML 5中居中画布,请在div标签中包含canvas标签。然后我们可以居中对齐div标签。通过这样做,画布也会居中对齐。 例子 . This is my canvas 以上就是如何在HTML5中居中画布?的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • setTimeout()和setInterval()在JavaScript中有什么区别?

    setTimeout(function,duration) – 该函数在duration毫秒后调用函数。这适用于一次执行。让我们看一个例子 – 它等待 2000 毫秒,然后运行回调函数alert(‘Hello’) – setTimeout(function() {…

    2025年12月21日
    000
  • 如何通过W3C DOM获取可访问的文档属性列表?

    以下是可以使用 W3C DOM 访问的文档属性 – 高级编号 属性& 说明 1 Body 对表示此文档 标记的 Element 对象的引用. Ex – document.body 2 DefaultView 其只读属性,代表 Ex – document.d…

    2025年12月21日
    000
  • html文本框代码如何写

    html文本框代码:1、单行文本框【】;2、多行文本框【textarea style=”;height:;”> html文本框代码 单行文本框: 多行文本框(文本域): 文本框是单行的,而文本域可以输入多行,不过文本框也可以通过设置变成成多行。一般来说如果要填写的内容很…

    2025年12月21日
    000
  • iPad上的Safari浏览器(iOS6)无法将HTML5视频缩放至填满页面宽度的100%

    本文将教您 ipad IOS6 上的 safari 如何不缩放 HTML5 视频填充 100% 的页面宽度在响应式 HTML5 页面上,可以通过应用以下 CSS 以全宽 (100%) 显示视频。视频的原始分辨率为 480×270。在所有桌面浏览器上,视频都会调整大小以跨越页面的整个宽度,同…

    2025年12月21日
    000
  • 如何为表格设置水平表头?

    tables in html can have horizontal header and vertical header. for the horizontal header, we need to set all inside a single  tag. 语法 以下是设置表格水平标题的语法: …

    2025年12月21日
    000
  • 匹配由十六进制数字XXXX指定的Unicode字符

    要将十六进制数字 xxx 指定的 Unicode 字符与 JavaScript 正则表达式相匹配,请使用以下代码 – uxxxx 示例 您可以尝试运行以下代码来匹配十六进制数字字符 xxxx。它匹配十六进制数 53,即 S – JavaScript Regular Expre…

    2025年12月21日
    000
  • HTML中的表格rowspan和colspan是什么意思?

    rowspan和colspan是 标签的属性。这些用于指定单元格应合并的行数或列数。 rowspan 属性用于合并行,colspan 属性用于合并 html 中表格的列。 这些属性应放置在 标记内,如下图所示 – 语法 以下是在 HTML 中合并表格单元格的语法 – cell…

    2025年12月21日
    000
  • 在网页文档中,物体是如何组织的?它是如何按照层次结构排列的?

    对象按层次结构组织。这种层次结构适用于web文档中对象的组织。 Window对象 − 层次结构的顶部。它是对象层次结构的最高元素。Document对象 − 加载到窗口中的每个HTML文档都成为一个文档对象。文档包含页面的内容。Form对象 − 所有包含在标签中的内容设置为表单对象。表单控件元素 − …

    2025年12月21日
    000
  • XML和HTML的区别

    在这篇文章中,我们将了解 html 和 xml 之间的区别。 HTML 它指的是超文本标记语言。 它有助于创建网页和应用程序。 它是一种标记语言。 它也有助于创建静态页面。 立即学习“前端免费学习笔记(深入)”; 它有助于显示数据。 它不传输数据。 超文本有助于定义多个网页之间的链接。 标记语言有助…

    2025年12月21日 好文分享
    000
  • 添加颜色类型和上传类型选项:Titan 框架初学者分步指南

    向 wordpress 主题添加动态颜色选项非常常见。 titan framework 允许您创建颜色选项。让我们看看如何使用 titan 框架在管理面板、元框或主题定制器部分中添加颜色选择器。 Titan Framework 中的颜色类型选项 Titan 框架中有一个 color 类型字段,如下所…

    2025年12月21日 好文分享
    000
  • 如何清除HTML表单中的所有输入?

    使用html表单,您可以轻松获取用户输入。使用标签来添加表单元素以获取用户输入。不同类型的表单元素包括文本输入、单选按钮输入、提交按钮等。 标签通过使用type属性帮助您获取用户输入。要清除HTML表单中的所有输入,请使用带有type属性为reset的标签。 Example 1 以下示例演示了如何清…

    2025年12月21日
    000
  • 如何在HTML中为元素添加唯一标识?

    使用HTML中的id属性来添加元素的唯一标识。 示例 您可以尝试运行以下代码来实现id属性− Tutorialspoint We provide Tutorials! More… function display() { document.getElementById(“myid”).inner…

    2025年12月21日
    000
  • index.html是什么

    index.html是一种默认的网站首页文件命名约定,用于展示网站的主页内容。常用于网站的根目录下作为默认的网站首页文件,在index.html文件中,开发者可以编写HTML代码来创建网站的布局和内容。HTML代码由一系列的标签组成,每个标签都有特定的含义和作用。通过使用不同的标签和属性,开发者可以…

    2025年12月21日
    000
  • iframe跳转是什么

    iframe跳转是一种在网页中加载和显示其他网页内容的技术。通过使用iframe标签,可以在一个网页中嵌入另一个网页,并且可以在不离开当前页面的情况下加载和显示嵌入的网页内容。使用iframe跳转的好处是可以在不离开当前页面的情况下加载和显示其他网页的内容,对于需要在页面中显示外部内容的情况非常有用…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信