flask消息闪现

最新推荐文章于 2024-05-31 07:17:19 发布

破晓aa

最新推荐文章于 2024-05-31 07:17:19 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签： python flask

本文链接：https://blog.youkuaiyun.com/aqa2037299560/article/details/94435708

python 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何在Flask框架中使用消息闪现机制，实现跨视图函数传递信息，特别是在用户登录失败时向其反馈具体原因，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在开发web的时候很多情况下都需要给用户反馈信息，比如在登录界面，如果用户登录失败不能仅仅是把页面重定向到login页面，最好还是给用户一个提示（类似于：登录失败，请重新登录之类的信息）让用户明白是自己输入的信息有误，而不是网站有问题（或许还真会有这样的想法，如果多次登录不上的话。。。。）

以下都按照登录系统为例子来说

闪现系统使得在一个请求结束的时候记录一个信息，然后在且仅仅在下一个请求中访问这个数据。这通常配合一个布局模板实现

上面的话是来自flask官方文档的原话，也就是说我们在视图函数返回之前记录信息，然后在返回的模板中可以显示这些消息，可能你会有疑问了，不用消息闪现，直接使用模板也可以这样吧。

对，是这样的，没错。我们要使用它是因为他可以和重定向联系起来，我们通过重定向就可以实现将消息通过视图函数1传递到视图函数2所返回的模板中，我们这样做是因为有一些逻辑处理只能在函数1中进行，但是会有情况需要重新跳转到函数2的模板中。

就拿登录系统来说，我们的登录页面url是’/’，处理表单信息的url是’/result’，如果用户密码错误我们就需要将url重定向到’/’，以供用户继续输入，同时提醒用户之前的输入有问题。这就涉及到了从’/result’向’/'传递消息，也就用到了消息闪现。当然类似的效果可以有多中方法实现，也可以使用javascript的ajax实现

下来拿代码来详细讲解一下(注释应该解释的很详细)

关于消息闪现我们使用了两个函数，分别是flash(), get_flashed_messages()，都在flask模块中

from flask import Flask
from flask import render_template, request, url_for, redirect, flash
from Models import use_mysql

app = Flask(__name__)
app.secret_key = "jJInfewp(8efkd*9&jfkl"      # flash的消息都存储在session，需要一个会话密匙，密匙随便输入就行，如果对保密性要求高的话，可以使用相关的密匙生成函数，不在细讲

@app.route('/')            # 登录界面
def index():
    return render_template('index.html')

@app.route('/result', methods=['POST', 'GET'])    # 登录信息处理界面，处理由'/'传送过来的表单信息
def result():

    # 如果使用post方法传送过来的数据才验证
    if request.method == 'POST':
        name = request.form.get('user')   # 获取表单数据
        pwd = request.form.get('pass')

        # 从数据库中验证信息是否正确
        sqlcmd = use_mysql.Conn()
        res = sqlcmd.command("select *  from stu_info where sign=\'%s\' and pass=\'%s\'" % (name, pwd))

        if res == None:      # 如果用户名密码有误
            flash("您的输入有误，请重新登录")       # flash存储的信息即将应用于redirect(url_for('index'))所指向的视图函数所返回的模板文件，在这里就是index.html,我们只需要在index.html接收信息即可
            return redirect(url_for('index'))      # 密码错误重定向至登录页面
        else :
            return '登录成功'

    else:
        return redirect(url_for('index'))


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>登录页面</title>
    <link href="{{url_for('static', filename='css/style.css')}}" rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="App Loction Form,Login Forms,Sign up Forms,Registration Forms,News latter Forms,Elements"./>
    <script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
    </script>
</head>

<body>
	<h1>App Location Form</h1>

		<div class="app-location">
			<h2>Welcome to Locaticus</h2>
<!-- 这是核心,其他地方不用看****************************************************************-->
			
            <!--flask消息闪现-->
            {% with messages = get_flashed_messages() %}    <!--使用get_flashed_message函数读取消息-->
                {% if messages %}    <!--如果有消息就显示出来-->
                    <ul> 
                        {% for message in messages %}
                            <li>
                                {{ message }}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endwith %}
            
<!-- 这是核心*******************************************************************************-->
			<div class="line"><span></span></div>
            <script>
                {{ scr }}
            </script>
			<form action="/result" method="POST">
				<input name="user" type="text" class="text" value="用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '用户名';}" />
				<input name="pass" type="password" value="密码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '密码';}" />
				<div class="submit"><input type="submit"  value="登录"></div>
				<div class="clear"></div>
				<div class="new">
					<h3><a href="#">Forgot password ?</a></h3>
					<h4><a href="#">New here ? Sign Up</a></h4>
					<div class="clear"></div>
				</div>
			</form>
		</div>

</body>
</html>