为django项目加上flash message-优快云博客

本文链接：https://blog.youkuaiyun.com/gumengkai/article/details/83349122

本文介绍了如何在Django项目中使用message框架，包括框架简介、启用方法、配置存储引擎，以及在views和templates中的具体应用。通过message框架，可以方便地在处理用户输入后显示一次性通知消息。在实际项目中，如登录场景，message框架能够帮助向用户展示反馈信息。

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

一. Django的message框架

官方文档：https://docs.djangoproject.com/en/1.9/ref/contrib/messages/

1. 简介

在web应用程序中，可能在处理表单或其他类型的用户输入后向用户展示一次性通知消息，也成为flash message。

django为匿名和经过身份验证的用户提供了对基于cookie和会话的消息的全支持，其消息框架允许在一个请求中临时存储消息，并检索它们在后续请求中显示(通常是下一个请求)。每条message都使用特定级别标记来确定其优先级。

2. 启用消息框架

消息框架通过Django中间价类和上下文处理时限。

默认的settings.py设置已包含启用消息框架所需的全部设置。

--在installed_app中包含'django.contrib,messages'

--在MIDDLEWARE_CLASSES 中包含 'django.contrib.sessions.middleware.SessionMiddleware' and 'django.contrib.messages.middleware.MessageMiddleware'.

消息默认存储在sessions，这也是必须要启用SessionMiddleware，并且需要放置在MessageMiddleware之前的原因。

--在django templates的context_processer选项中包含django.contrib.messages.context_processors.messages

3. 配置消息引擎

--存储后端

Django在django.contrib.messages中提供三种内置存储类：

storage.session.SessionStorage
存储请求会话内的所有消息。需要Django的contrib.sessions应用程序。

storage.cookie.CookieStorage
将消息数据存储在cookie中（使用秘密哈希签名以防止操作）在请求之间保留通知。如果cookie数据大小超过2048字节，则丢弃旧消息。

storage.fallback.FallbackStorage
首先使用CookieStorage，然后回退使用 SessionStorage不适合单个cookie的消息。它还需要Django的contrib.sessions应用程序。

此行为可以避免尽可能写入会话。一般情况下能提供最佳性能。

--消息级别和message tags

Level Constant	Tag
`DEBUG`	`debug`
`INFO`	`info`
`SUCCESS`	`success`
`WARNING`	`warning`
`ERROR`	`error`

--在views和templates中使用messages

添加消息：

from django.contrib import messages
messages.add_message(request, messages.INFO, 'Hello world.')

在template中显示消息：

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

二. 在实际项目中使用messages

以web站点登录为例

1. views：

from django.contrib import messages

def login_in(request):
    error_msg = ''
    if request.method == "POST":
        username = request.POST.get('username',None)
        password = request.POST.get('password',None)
        user = authenticate(username=username,password=password)
        if user is not None and user.is_active:
            login(request,user)
            return HttpResponseRedirect('/begin/')
        else:
            error_msg = '登录失败'
            messages.add_message(request, messages.ERROR, '请输入正确的用户名密码')

    return  render(request,"login.html", {'error_msg': error_msg})

注：返回http请求时需要视同render，而不能使用render_to_response，因为message需要从request中读取，render的第一个参数才为request

2. templates

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>DB monitor | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="/static/plugins/iCheck/square/blue.css">

 <link href="/static/css/font-awesome.min.css" rel="stylesheet">

 <link rel="stylesheet" type="text/css" href="/staticcss/demo.css">

 <link rel="stylesheet" href="/static/css/style.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="#"><b>DB</b>monitor</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">登录以开始操作</p>
    <form action="" method="post">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="用户名" name="username">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="密码 " name="password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat"  >登录</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    <!-- /.social-auth-links -->

    <a href="register.html" class="text-center">注册新用户</a>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/static/plugins/iCheck/icheck.min.js"></script>

<script src="/static/js/hullabaloo.js"></script>

<script type="text/javascript">
	$.hulla = new hullabaloo();

	{% if messages %}
    {% for message in messages %}
	setTimeout(function() {
	  $.hulla.send("{{ message }}", "{{ message.tags }}");
	}, 1000);
	{% endfor %}{% endif %}



</script>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' /* optional */
    });
  });

</script>
</body>
</html>

这里使用了bootstap模板和jq的message插件，需要自行下载

3. 效果