使用 Django 中的 request.session 构建一个简单的计数器应用


在本文中,我们将了解如何制作一个超简单的计数器应用,单击一个按钮将添加一个数字,即使关闭选项卡,它仍会执行该操作并将数据保存在对话中。我们将了解如何使用对话来制作一个简单的应用以及如何使用对话传输数据

示例

urls.py 中,添加以下几行 −

from django.urls import path
from django.urls.resolvers import URLPattern
from .import views

urlpatterns = [
   path('', views.counterView, name='counter'),
]

我们在此设置了 home url 上的视图。

views.py 中,添加以下几行 −

from django.shortcuts import render

# Create your views here.
def counterView(request):
   if request.method == "POST" and 'count' in request.POST:
      try:
         request.session['count'] +=1
      except:
         request.session['count'] = 0
   elif request.method == 'POST' and 'reset' in request.POST:
      request.session['count'] = 0
      return render(request,'counter.html')

我们在此创建了一个 POST 请求处理程序,我们将在前端发送一个数字,并将其储存在对话的 count 变量中。当前端发送 reset 时,对话 count 将变成 0

现在在应用目录中创建一个 templates 文件夹,并在其中创建一个 counter.html 并编写此代码 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=devicewidth, initial-scale=1.0">
   <title>Counter</title>
   <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
   <style>
      body{
         background-color: palevioletred;
      }
      .counter form .count{
         border:none;
         outline: none;
         background-color:black;
         color: white;
      }
      .counter form .reset{
         border:none;
         outline: none;
         background-color:rgb(50, 181, 204);
      }
   </style>
   <div class="container counter text-center" style="margintop: 150px;">
      <h1 class="display-1 text-white">
         {% if request.session.count%}
         {{request.session.count}}
         {%else%}
         0
         {%endif%}</h1> <br> <br>
         <form method="post"> {% csrf_token %}
            <button name="count" class="count px-5 py-3 textwhite shadow-lg">Count</button>
         </form>
<br> <br>
      <form method="post"> {% csrf_token %}
         <button name="reset" class="reset px-5 py-3 textwhite shadow-lg">Reset</button>
      </form>
   </div>
</body>
</html>

这里是在 home url 上呈现的前端。

输出

单击 计数 按钮将在数字中添加 1,单击重置按钮将计数器 重置 为 0。

更新于: 2021-08-26

623 次浏览

开启你的职业生涯

完成课程并获得认证

开始
广告
© . All rights reserved.