Websauna项目教程：构建投票表单与结果展示系统-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00827/article/details/148647572

Websauna项目教程：构建投票表单与结果展示系统

websauna Websauna is a full stack Python web framework for building web services and back offices with admin interface and sign up process 项目地址: https://gitcode.com/gh_mirrors/we/websauna

前言

在Web开发中，表单处理是构建交互式应用的核心功能之一。本文将基于Websauna框架，详细讲解如何为投票应用创建表单、处理用户输入以及展示投票结果。我们将从基础的表单构建开始，逐步深入到安全性和最佳实践的讨论。

表单模板设计

首先，我们需要创建一个投票表单模板。在Websauna中，我们使用Jinja2模板引擎来构建前端界面。以下是投票详情页面的模板设计要点：

{% extends "site/base.html" %}

{% block extra_head %}
<style>
  .form-vote {
    margin: 20px 0;
  }
</style>
{% endblock %}

{% block content %}
    <h1>{{ question.question_text }}</h1>

    {% if error_message %}
      <div class="alert alert-danger">
        {{ error_message }}
      </div>
    {% endif %}

    <form class="form-vote" action="{{ 'detail'|route_url(question_uuid=question.uuid|uuid_to_slug) }}" method="post">
      <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">

      {% for choice in question.choices %}
        <div class="radio">
          <label for="choice{{ loop.counter }}">
            <input type="radio"
                   name="choice"
                   value="{{ choice.uuid|uuid_to_slug }}">
            {{ choice.choice_text }}
          </label>
        </div>
      {% endfor %}

      <button type="submit" class="btn btn-default">
        Vote
      </button>
    </form>
{% endblock %}

关键设计要素

表单布局：使用Bootstrap样式确保表单美观且响应式
错误处理：通过alert组件显示验证错误
安全措施：包含CSRF令牌防止跨站请求伪造攻击
数据绑定：将选项与后端模型数据动态绑定

表单处理逻辑

在Websauna中，表单处理通常在视图函数中完成。以下是处理投票提交的核心逻辑：

@simple_route("/questions/{question_uuid}", route_name="detail", renderer="myapp/detail.html")
def detail(request: Request):
    question_uuid = slug_to_uuid(request.matchdict["question_uuid"])
    question = request.dbsession.query(Question).filter_by(uuid=question_uuid).first()
    
    if not question:
        raise HTTPNotFound()

    if request.method == "POST":
        if "choice" in request.POST:
            chosen_uuid = slug_to_uuid(request.POST['choice'])
            selected_choice = question.choices.filter_by(uuid=chosen_uuid).first()
            selected_choice.votes += 1
            messages.add(request, msg="Thank you for your vote", kind="success")
            return HTTPFound(request.route_url("results", question_uuid=uuid_to_slug(question.uuid)))
        else:
            error_message = "You did not select any choice."

    return locals()

关键处理流程

请求方法判断：区分GET和POST请求
数据验证：检查用户是否选择了选项
数据转换：将表单提交的slug转换为UUID
业务逻辑：更新投票计数
用户反馈：使用消息系统提供操作反馈
重定向：投票成功后跳转到结果页面

结果展示页面

投票结果页面需要清晰展示各选项的得票情况：

{% extends "site/base.html" %}

{% block content %}
  <h1>{{ question.question_text }}</h1>

  <ul>
    {% for choice in choices %}
        <ol>{{ choice.choice_text }} -- {{ choice.votes }} votes</ol>
    {% endfor %}
  </ul>

  <a href="{{ 'detail'|route_url(question_uuid=question.uuid|uuid_to_slug) }}">Vote again?</a>
{% endblock %}

对应的视图函数负责准备数据：

@simple_route("/questions/{question_uuid}/results", route_name="results", renderer="myapp/results.html")
def results(request: Request):
    question_uuid = slug_to_uuid(request.matchdict["question_uuid"])
    question = request.dbsession.query(Question).filter_by(uuid=question_uuid).first()
    
    if not question:
        raise HTTPNotFound()
        
    choices = question.choices.order_by(Choice.votes.desc())
    return locals()