在django中实现一个网页来计算两个数字的和

最新推荐文章于 2024-08-23 10:02:50 发布
最新推荐文章于 2024-08-23 10:02:50 发布
阅读量316 收藏 2
点赞数 9
文章标签： django python 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45805209/article/details/139681298
版权

以下是如何在 Django 中实现一个网页来计算两个数字的和，并在后台处理计算过程的详细步骤：

1. 创建 Django 项目和应用

首先，在你的 Django 项目中创建一个新的应用，例如 calculator：

sh

django-admin startproject myproject
cd myproject
python manage.py startapp calculator

2. 配置 Django 项目

2.1 修改 settings.py

在 settings.py 中，将新创建的应用 calculator 添加到 INSTALLED_APPS 列表中：

python

INSTALLED_APPS = [
    ...
    'calculator',
]

2.2 修改 urls.py

在项目的 urls.py 中，将根 URL 映射到 calculator 应用：

python

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('calculator.urls')),  # 将根 URL 映射到 calculator 应用
]

3. 创建 calculator 应用的 URL 和视图

3.1 创建 calculator/urls.py

在 calculator 应用目录中创建 urls.py 文件，并设置 URL 路由：

python

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),  # 设置首页
    path('calculate/', views.calculate, name='calculate'),  # 设置计算路径
]

3.2 创建 calculator/views.py

在 calculator/views.py 中创建视图函数：

python

from django.shortcuts import render
from django.http import JsonResponse

def index(request):
    return render(request, 'calculator/index.html')

def calculate(request):
    if request.method == 'POST':
        a = int(request.POST.get('a', 0))
        b = int(request.POST.get('b', 0))
        result = a + b
        return JsonResponse({'result': result})
    return JsonResponse({'error': 'Invalid request'}, status=400)

4. 创建模板

4.1 创建模板目录

在 calculator 应用目录下创建 templates/calculator/ 目录：

sh

mkdir -p calculator/templates/calculator

4.2 创建 calculator/templates/calculator/index.html

创建 index.html 文件，并编写前端代码：

html

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Calculator</h1>
    <form id="calculator-form">
        <label for="a">Enter number a:</label>
        <input type="number" id="a" name="a" required>
        <br>
        <label for="b">Enter number b:</label>
        <input type="number" id="b" name="b" required>
        <br>
        <button type="submit">Calculate</button>
    </form>
    <h2>Result: <span id="result"></span></h2>

    <script>
        $(document).ready(function(){
            $('#calculator-form').on('submit', function(event){
                event.preventDefault();
                $.ajax({
                    url: "{% url 'calculate' %}",
                    type: "POST",
                    data: {
                        'a': $('#a').val(),
                        'b': $('#b').val(),
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    success: function(response){
                        $('#result').text(response.result);
                    },
                    error: function(response){
                        $('#result').text('Error');
                    }
                });
            });
        });
    </script>
</body>
</html>

5. 配置 CSRF 中间件

确保你的 settings.py 中包含 CSRF 中间件：

python

MIDDLEWARE = [
    ...
    'django.middleware.csrf.CsrfViewMiddleware',
    ...
]

6. 运行 Django 开发服务器

在终端中，导航到你的项目目录，并运行 Django 开发服务器：

sh

python manage.py runserver

现在，你可以访问 http://127.0.0.1:8000 来查看你的计算器网页。输入两个数字，点击“Calculate”按钮，结果会在页面上显示。

达人007
关注
  • 9
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django实现CMS内容管理系统内容访问累计求和
Mr数据杨
12-08 3万+
通常在CMS管理平台中需要记录该单篇内容阅读（访问）的数量，进行数据的求和功能，用于后续的数据分析等业务。
【Django】对符合条件的某个字段进行求和,聚合函数annotate()
10相濡以沫
07-05 1万+
开发环境：Ubuntu16.04+Django 1.11.9+Python2.7 对符合条件的某个字段求和 　　之前在开发的时候,有同事问Django是否存在着这样的方法,可以直接将符合条件的某个字段直接求和. 　　当时不知道这样的方法是否存在,但是想了想自己解决这类似问题的方法,先用filter将符合条件的取出来,然后进行for循环,取出需要的字段,进行求和.感觉是挺low的,于是一起...
django 聚合函数
cyan-blue
06-04 3748
Talk is cheap,show you the code! 聚合函数
五、Django ORM高级用法
魏志标的博客
05-22 1258
前两节讲述了使用orm进行基本的增删改查，本章节来讲述下orm的一些高级用法 一、模糊查询 contains 查询某个属性中包含某个数据结果 def stuinfo(request): ##查询字段中包含某个内容 data_list = stu.objects.filter(name__contains="华") for item in data_list: print(item.name) return HttpResponse("查询成功") st
基于Django模板中的数字自增(详解)
09-21
通过这些内置的循环变量，你可以实现很多复杂的需求，比如计算当前元素的索引、判断是否是第一个或最后一个元素，以及在嵌套循环中获取上下文关系。需要注意的是，这些变量都是在模板渲染过程中动态计算的，而不是...
Django url,从一个页面调到另个页面的方法
09-18
在`calc/views.py`文件中定义一个视图函数`add`，该函数接受用户通过GET方式发送的请求，并从中提取参数`a`和`b`，计算它们的和，最后返回结果。 ```python from django.shortcuts import render from django....
python Django框架实现自定义表单提交
09-21
例如，我们可以创建一个计算两个数字之和的表单： ```python from django import forms class CalculateForm(forms.Form): ValueA = forms.IntegerField() ValueB = forms.IntegerField() ``` 然后，在视图...
addtwo:将两个数字相加并显示结果
03-30
在描述中提到，“该存储库包含一个将两个数字相加的网站的源代码”，这意味着这个项目可能是一个Web应用，用户可以在网页上输入数字并看到结果。源代码存储在一个版本控制系统（如Git）的仓库中，供开发者查看、下载...
基于python的基于小波变换的数字水印研究(django).zip
06-11
描述中的信息与标题一致，没有提供额外的技术细节，但表明这可能是一个毕业设计或课程项目，可能包含实现数字水印的完整流程，包括数据处理、小波分析、水印嵌入和检测，以及使用Django来构建一个交互式的Web应用。...
【Django框架】——15 Django模型——06 聚合函数、排序函数
学Python的小白！
10-24 594
使⽤aggregate()过滤器调⽤聚合函数。聚合函数包括：Avg平均，Count数量，Max最⼤，Min最⼩，Sum求和，被定义在django.db.models中。
Django创建加法计算器
陈十一yi
04-03 1131
创建网页加法计算器 创建html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
Django 对符合条件的字段求和 aggregate
QQ1752506968的博客
08-14 7393
1，数据库 class OrderData(models.Model): product=models.ForeignKey(Product,verbose_name='产品') ltem_name=models.CharField('产品规格',max_length=50) number=models.BigIntegerField('数量',default=0) ...
django中聚合aggregate和annotate GROUP BY的使用方法
热门推荐
AyoCross的专栏
04-02 3万+
提高查询数据库效率的方案有两种：第一种，是使用原生的SQL语句来进行查询，这样的优点在于能够完全按照开发者的意图来执行，效率会很高，但是缺点也很明显：1.开发者需要非常熟悉SQL语句，加大开发者的工作量，不利于以后程序的维护，增大程序的耦合度。2.若查询条件是动态变化的，则会使开发变得更加困难。django为了解决这一难题，提供了aggregate(类似于COUNT(*))和annotate(GROUP BY)
Django对符合条件的值求和和分组求和（aggregate）
小涛Dirge
01-07 7481
文章详情地址：https://tengxiaotao.top/blog/7
Django后端架构开发：构建在线云媒资系统思路解析
最新发布
weixin_52392194的博客
08-23 633
构建一个在线云媒资系统涉及多方面的技术实现，尤其是Django框架的应用在后端架构中扮演了关键角色。这个系统的核心在于高效的API组件开发、云空间环境搭建、媒资系统环境配置以及与百度云媒资系统的对接。以下将详细解析这些步骤，展示如何通过Django实现一个功能强大、可靠的在线云媒资系统。
Django | 从中间件的角度来认识Django发送邮件功能
HG0724的博客
08-20 896
|从中间件的角度来认识Django发送邮件功能
实现功能： 用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。 要求： 求和计算功能必须使用SQL技术实现
06-09
好的，根据你的需求，我可以为你提供一个简单的实现方案： 1. 创建一个名为 "sum_app" 的 Django 应用程序。 2. 在 "sum_app" 应用程序下的 "models.py" 文件中定义一个名为 "Number" 的模型，代码如下： ``` from django.db import models class Number(models.Model): num1 = models.IntegerField() num2 = models.IntegerField() ``` 3. 在 "sum_app" 应用程序下的 "views.py" 文件中定义一个名为 "calculate_sum" 的视图函数，代码如下： ``` from django.shortcuts import render from django.db import connection from .models import Number def calculate_sum(request): if request.method == 'POST': num1 = request.POST.get('num1') num2 = request.POST.get('num2') # 将 num1 和 num2 存入数据库中 Number.objects.create(num1=num1, num2=num2) # 使用 SQL 查询计算和 with connection.cursor() as cursor: cursor.execute("SELECT num1 + num2 FROM sum_app_number ORDER BY id DESC LIMIT 1") result = cursor.fetchone()[0] context = {'result': result} return render(request, 'sum_app/result.html', context) return render(request, 'sum_app/index.html') ``` 4. 在 "sum_app" 应用程序下的 "urls.py" 文件中定义一个名为 "calculate_sum" 的 URL，代码如下： ``` from django.urls import path from . import views urlpatterns = [ path('', views.calculate_sum, name='calculate_sum'), ] ``` 5. 在 "sum_app" 应用程序下的 "templates" 文件夹中创建两个 HTML 文件，分别为 "index.html" 和 "result.html"，代码如下： index.html： ``` <!DOCTYPE html> <html> <head> <title>Calculate Sum</title> </head> <body> <h1>Enter two numbers to calculate their sum:</h1> <form method="post"> {% csrf_token %} <label for="num1">Number 1:</label> <input type="number" name="num1" id="num1"> <br> <label for="num2">Number 2:</label> <input type="number" name="num2" id="num2"> <br> <input type="submit" value="Calculate Sum"> </form> </body> </html> ``` result.html： ``` <!DOCTYPE html> <html> <head> <title>Sum Result</title> </head> <body> <h1>The sum of the two numbers is:</h1> <p>{{ result }}</p> </body> </html> ``` 6. 最后，在项目的 "urls.py" 文件中包含 "sum_app" 应用程序的 URL 配置，代码如下： ``` from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('sum_app.urls')), ] ``` 这样，当用户访问应用程序的首页时，将会看到一个表单，要求输入两个数字。当用户提交表单后，将会计算这两个数字的和，并显示在另一个页面上。计算和的过程中使用了 SQL 查询，从数据库中获取最新的两个数字并计算它们的和。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值