Django Bootstrap Toolkit 表单提交

107 阅读1分钟

在使用 Django Bootstrap Toolkit 美化网站时,遇到了一个表单提交问题。我计划在基础 HTML 中嵌入一个表单,供用户切换账户。网站是内部的,不需要凭证认证,因此用户可以选择是否切换账户而不是以“Guest”的身份登录。为了实现这个功能,需要在视图中定义一些方法:

from django.shortcuts import render, render_to_response, redirect
from django.template import RequestContext
from django.http import HttpResponse, Http404

import datetime

myUsers = ['User A', 'User B', 'User C', 'User D', 'User E', 'Guest']

def index(request):
    # make login default guest if not logged in
    if not 'myUser' in request.session:
        request.session['myUser'] = 'Guest'
    # grab user if we've submitted login form from this page
    if request.method == 'POST':
        if 'myUser' in request.POST:
            request.session['myUser'] = request.POST['myUser']
    return render(request, 'home/index.html', {'myUsers': myUsers})

def login(request, myUser):
    request.session['myUser'] = myUser
    return redirect('index')

同时,在基础 HTML 模板中包含了如下表单:

{% load bootstrap_toolkit %}
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    {% bootstrap_javascript_tag %}
</head>
<body>
    {% block header %}
        <h3 style="font-family: Source Sans Pro, Myriad Pro; font-size: 16px; margin-left: 20px">
        {% if request.session.myUser %}
            Current User: {{ request.session.myUser}}
            <div class="navbar">
                <form class="navbar-form pull-left" action="" method="post" id="myUser">
                {% csrf_token %}
                    <select name id class="form-control" style="width: 200px;">
                        {% for myUser in myUsers %}
                            <option value="{{ myUser }}">{{ myUser }}</option>
                        {% endfor %}
                    </select>
                    <button id="formSubmit" type="submit" class="btn btn-default">Change User</button>
                </form>
            </div>
        {% else %}
            No User Logged In
            <div class="navbar">
                <form class="navbar-form pull-left" action="" method="post" id="myUser">
                {% csrf_token %}
                    <select name id class="form-control" style="width: 200px;">
                        {% for myUser in myUsers %}
                            <option value="{{ myUser }}">{{ myUser }}</option>
                        {% endfor %}
                    </select>
                    <button id="formSubmit" type="submit" class="btn btn-default">Login</button>
                </form>
            </div>
        {% endif %}
        </h3>
    {% endblock %}
    <hr>
    <h1 style="text-align:center; font-family: Myriad Pro; font-size: 60px; padding: 10px">MySite</h1>
    <div style="text-align:center" name="content">
        {% block content %}

        {% endblock %}
    </div>
    {% block footer %}
    {% endblock %}
</body>
</html>

问题在于,可以默认以 Guest 的身份登录,但用户在点击下拉菜单并选择其他用户时,却无法切换用户。

2、解决方案

解决这个问题的方法是检查登录表单中的操作是否正确。在定义视图时,没有处理 POST 请求来更新用户会话。因此,需要在代码中添加以下部分:

def login(request, myUser):
    request.session['myUser'] = myUser
    return redirect('index')

修正后的登录视图应该如下所示:

def login(request):
    if request.method == 'POST':
        if 'myUser' in request.POST:
            request.session['myUser'] = request.POST['myUser']
            return redirect('index')
    else:
        return render(request, 'login.html')

此外,还需要在模板中添加 {% url 'login' %} 来链接到登录视图:

<form class="navbar-form pull-left" action="{% url 'login' %}" method="post" id="myUser">

现在,用户应该能够在下拉菜单中选择一个新的用户并切换到该用户。