Django小实战——在线Web计算器(利用Bootstrap进行前端开发)

最新推荐文章于 2023-11-19 15:48:06 发布
最新推荐文章于 2023-11-19 15:48:06 发布
阅读量3.4k 收藏 36
点赞数 5
分类专栏： django 文章标签： django 后端 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forces_/article/details/112289582
版权

文章目录

前言

前端采用了Bootstrap进行制作，提供输入框和按钮让用户进行信息输入，然后将计算式通过Ajax方式传输给后台进行计算。后台采用django方式进行开发，获取到前端发送的数据利用python的子模块进程subprocess来计算式子，并将计算结果返回给前端进行显示。(笔者所采用的django版本是3.1.4,Bootstrap所用版本是3.3.7)

一、目的

了解python Web前后端交互方式(并不是完全分离)，熟悉Ajax局部刷新方法， 掌握完整的项目开发流程。

二、步骤

1.创建项目

1、创建名为calculator的项目:

django-admin startproject calculator

2、然后使用cd命令切换到项目工作目录下输入下述命令创建一个名为app的应用。

py manage.py startapp app

3、输入以下代码启动项目。

py manage.py runserver

项目启动后，通过浏览器访问http://127.0.0.1:8000/，查看是否正常创建了项目。

写到后面觉得还是先把整个项目的文件层次放在这里供参考和创建。（需要自主创建的文件夹已用红框标记）
在这里插入图片描述

2.项目配置

1、找到calculator的settings.py文件，找到INSTALLED_APPS字段将创建的app应用添加进来。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app'  #在此处添加应用
]

2、接下来为了后期项目部署和访问的方便，需要开放访问权限，找到ALLOWED_HOSTS字段并进行修改。

ALLOWED_HOSTS = ['*',]  #注意后面有个','号

3、配置视图处理函数，编辑app文件夹下的views.py文件，代码如下

from django.shortcuts import render  #用于页面的渲染

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

3.页面制作

因为仔细分析需要的篇章过长，所以假设读者有着框架基础(小白的我努力记录所学)
梳理一下页面访问的基本流程：
1、用户输入网址请求访问页面，例如http://127.0.0.1:8000/
2、后端服务器接收到请求后开始解析网址，根据路由配置文件urls.py中定义的路由，将网址映射到指定的视图处理函数。如：本项目中的home()。
3、视图处理函数处理请求并返回请求的页面内容。如：本项目中的index.html

操作：在项目文件夹(本项目中的app文件夹)下创建一个templates子文件夹，这里注意文件夹的名字必须为templates,因为django框架会自动搜索每个应用下的templates文件夹，如果拼写错误后面运行项目会出现报错。
在templates文件夹项目下创建一个index.html文件，编写如下代码。

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">  {# 表示支持中文#}
<head>
    <meta charset="UTF-8">  {#    告知浏览器此页面属于utf-8中文编码，让浏览器做好“翻译”工作#}
    <meta http-equiv="X-UA-Compatible" content="IE=edge">{#    http-equiv="X-UA-Compatible"用来避免制作出的页面在IE8下面出现错误，通过设定IE=edge模式通知Internet Explorer以最高级别的可用模式显示内容。即如果用户最高IE版本是IE9的话就调用IE9#}
    <meta name="viewport" content="width=device-width,initial-scale=1">  {#    initial-scale=1 用于设置页面首次被显示时可视区域的缩放级别。取值1则使页面按实际尺寸显示，无任何缩放。#}
    <title>在线计算器</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-1 col-md-5"></div>
        <div class="col-xs-10 col-md-5">
            <input type="text" id="txt_code" name="txt_code" value="" class="form-control input_show" placeholder="公式计算" disabled>
            <input type="text" id="txt_result" name="txt_result" value="" class="form-control input_show" placeholder="计算结果" disabled>
            <br>
            <div>
                <button type="button" class="btn btn-default btn_num" onclick="fun_7()">7</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_8()">8</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_9()">9</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_div()">÷</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_4()">4</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_5()">5</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_6()">6</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_mul()">x</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_1()">1</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_2()">2</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_3()">3</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_sub()">-</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_0()">0</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_00()">00</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_dot()">.</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_add()">+</button>
                <br>
            </div>
            <div>
                <br>
                <button type="button" class="btn btn-success btn-lg btn_clear" id="lgbut_clear" onclick="fun_clear()">清空</button>
                <button type="button" class="btn btn-primary btn-lg" id="lgbut_compute">计算</button>
            </div>
        </div>
        <div class="col-xs-1 col-md-2"></div>
    </div>
</div>

</body>
</html>

在app应用中创建static文件夹，然后将从官网下载下来的Bootstrap文件中的三个文件夹放入static文件中方便接下来在html文件中对Bootstrap进行引用。
在这里插入图片描述

在head中引入三个必要的Bootstrap文件分别为bootstrap.min.css，jquery.min.js，bootstrap.min.js。注意的是其中的jquery.min.js文件在下载的Bootstrap中没有包含，所以自己的官网进行保存然后将其放入js从官网下载下来的文件夹中。

另外还需要注意的是在static文件夹找到css子文件夹，创建一个style.css文件，该文件主要是为了定制一些特殊的css样式，尽管Bootstrap的默认样式可以满足基本的页面设计需求。但是很多情况需要我们对Bootstrap的样式进行一定的改写。

html代码的部分用到的知识有：Bootstrap栅格布局，JavaScript基础，html基础，Bootstrap使用方法。需要读者自行去了解学习，然后再来看代码就很容易理解了。（因为小白的我也写不出你们看不懂的(T_T)）

4.界面美化

编辑css文件夹中的style.css文件（如果之前没有创建请自主创建）

/*设置整体的背景样式*/
body{
    background-image: url("../img/flag.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;   /*背景图片不会随着页面的滚动而滚动。*/
    background-size: cover;   /*此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
    /*为了防止有些浏览器不支持background-size语法,需要添加下述CSS样式设置来满足浏览器的兼容性*/
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}

/*显示文本框样式*/
.input_show{
    /*前面有个点是类的意思*/
    margin-top: 35px;
    max-width: 260px;
    height: 35px;
}
/*数字按钮样式*/
.btn_num{
    margin: 1px;
    width: 60px;
}

/*清空按钮样式*/
.btn_clear{
    margin-left: 40px;
    margin-right: 20px;
}

/*将背景拉伸，否则在手机上浏览时背景会显示不全*/
.extendContent{
    height: 300px;
}

此处需要注意的是在static下的img文件夹放入一张名为flag.jpg的图片(自行修改代码为读者所用图片的名字)作为body的默认图片背景。

5.逻辑功能实现

具体地在body的末尾添加下述js代码

<script>
    var x = document.getElementById('txt_code');
    var y = document.getElementById('txt_result');

    function fun_7() {
        x.value += '7';
    }
        function fun_8() {
        x.value += '8';
    }
        function fun_9() {
        x.value += '9';
    }
        function fun_div() {
        x.value += '/';
    }
        function fun_4() {
        x.value += '4';
    }
        function fun_5() {
        x.value += '5';
    }
        function fun_6() {
        x.value += '6';
    }
        function fun_mul() {
        x.value += '*';
    }
        function fun_3() {
        x.value += '3';
    }
        function fun_2() {
        x.value += '2';
    }
        function fun_1() {
        x.value += '1';
    }
        function fun_sub() {
        x.value += '-';
    }
        function fun_0() {
        x.value += '0';
    }
        function fun_00() {
        x.value += '00';
    }
        function fun_dot() {
        x.value += '.';
    }
        function fun_add() {
        x.value += '+';
    }
        function fun_clear() {
        x.value = '';
        y.value = '';
    }
</script>

<script>
    function Showresult(data) {
        var y = document.getElementById('txt_result');
        y.value = data['result'];
    }
</script>

<script>
    $('#lgbut_compute').click(function () {
        $.ajax({
            url:'/compute/',  ///调用django后台服务器计算公式
            type:'POST',      ///请求类型
            data:{
                'code':$('#txt_code').val()  ///获取文本框中的公式
            },
            dataType:'json',      ///期望获得的相应类型为json
            success:Showresult    ///在请求成功之后调用改回调函数输出结果
        })
    })
</script>

前半部分是使得用户输入点击的计算公式在界面显示，后半部分将“公式计算”文本框中的数据通过Ajax发送给后端服务器，同时能够接受后端服务器发回来的执行结果并显示在“结果”的文本框中。之所以采用Ajax。是因为该下项目适宜采用局部刷新的方式提交数据并更新结果，这样可以具有较好的用户体验。

此处解析一下Ajax的写法(下面总结会给出Ajax在Python Web中的典型调用形式)。
其中url用来设置请求路径，即将请求提交到“当前根网址/compute/”进行运算。请求类型为POST方式，需要发送的公式通过data字段进行发送，通信数据格式采用JSON字符串进行数据交换。最后success字段用来定义请求成功后需要执行的回调函数，这里将请求成功后由后台返回的计算结果通过调用ShowResult()函数显示出来。ShowResult()函数通过txt_result文本框来输出显示内容。

6.后端计算模块

编辑app文件夹中的views.py文件，添加如下代码

import subprocess  #引入子进程模块用于执行发送过来的计算公式
from django.views.decorators.http import require_POST  #获取后台服务器的POST请求权限(否则发过来的请求会被后台服务器阻止)
from django.http import JsonResponse  #将计算得到的结果封装成JSON字符串
from django.views.decorators.csrf import csrf_exempt   #引入csrf_exempt装饰器用于规避csrf校验(防止网站被跨站攻击)

def run_code(code):
    try:
        code = 'print(' + code + ')'
        output = subprocess.check_output(['python','-c',code],
                                         universal_newlines=True,
                                         stderr=subprocess.STDOUT,
                                         timeout=30)
    except subprocess.CalledProcessError as e:
        output = '公式输入有误'
    return output

@csrf_exempt
@require_POST
def compute(request):
    code = request.POST.get('code')
    result = run_code(code)
    return JsonResponse(data={'result':result})

解析：
1、进行库函数导入，功能已经写在注释中。
2、视图处理函数。
3、公式计算函数。主要通过子进程模块subprocess的check_output函数进行公式计算。
4、最后需要对访问路由urls进行配置，编辑calculator中的urls.py文件，在urlpatterns字段中添加代码，具体如下：

from django.contrib import admin
from django.urls import path,include
from app.views import home,compute  #导入对应的处理函数

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),  #添加首页路由
    path('compute/',compute,name='compute')  #添加针对公式计算compute路由
]

7.效果展示

至此前后端开发完毕，将上述代码进行整合即可得到完整代码实现功能。运行项目查看效果
在这里插入图片描述
在这里插入图片描述

三、总结

1、总结引用bootstrap对应的配置文件

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>xxx</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

</head>
<body>

</body>
</html>

2、总结Python Web中Ajax的典型调用形式

<script>
    $('#myid').click(function () {
        $.ajax({
            url:'/compute/',		 ///提交网址
            type:'POST', 			 ///提交类型
            data:{
                'code':'测试'		   ///发送给后台的数据
            },
            dataType:'json', 		 ///期望获得的相应类型，一般为json
            success:Showresult 		 ///在请求成功之后调用改回调函数输出结果
        })
    })
</script>

3、通过此项目主要目的还是熟悉前端常用命令以及了解Bootstrap的部分组件，能够使用django创建简单的Web应用。仅以此篇简单记录的django框架初学，同时希望给予初学者一些启发并激励自己坚持学习下去的耐心。

最后感谢钱彬师傅的书籍教学。

佛系的新仔
关注
  • 5
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
Python Web 开发 – 在线web计算器
qq_52825925的博客
03-24 4270
Python Web 开发 – 在线web计算器 本文环境： Python—3.10.2 Visual Studio Code—1.65.2 Django—4.0.3 Bootstrap—5.1.3 jQuery—3.6.0 ##1. 创建项目 ###1）新建文件夹(code)用以存放VS Code项目，打开Visual Studio Code，点击File->Open Folder,选中建好的文件夹(code)。跳转至VS Code后，点击Terminal->New Terminal,在命令行
python3.7+django+bootstrap+sqlite3 恒达科技官网实战web开发例子
11-02
在本实践项目中，"python3.7+django+bootstrap+sqlite3 恒达科技官网实战web开发例子"，我们将深入探讨如何使用这些技术构建一个功能完备的网站。Python 3.7 是一个强大而易读的编程语言，特别适合Web开发；Django是...
Python基于Django的实战项目源码——美多商城.zip
05-08
Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目源码——美多商城 Python基于Django的实战项目
python Django在线计算器
MYF_12的博客
02-04 1万+
功能：实现在线计算器的功能，可以算加减乘除等等。技术：Python django。pythonDjango在线计算器。前端：html css js。
Web开发丨基于Django与Bootstrap的在线计算器
热门推荐
兔子王
11-19 2万+
本期内容：基于Django与Bootstrap的在线计算器。
textarea输入框实时 统计字数（可统计中文，英文字数）
mh的63
08-12 2378
textarea输入框实时 统计字数（可统计中文，英文字数） 效果图如下所示： html部分： <textarea name="des" id="" rows="10" class="form-control" placeholder="描述一下房源内部的空间和设施、周边的环境和交通路线等等......."></textarea> &...
WEB网页版计算器（HTML、CSS、JavaScript实现）
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
django 中进行计算
weixin_33834679的博客
08-25 449
为什么80%的码农都做不了架构师？>>> ...
基于django与bootstrap的在线web计算器
01-06
后台采用Django 进行开发，获取到前端发送的数据后利用Python的子进程模块subprocess来计算式子，并将计算结果返回给前端进行显示。 实验内容 1. 创建项目 1.打开vscode命令行输入以下命令创建一个名为jsq的项目 ...
django制作的在线计算器
01-15
这个项目为我们提供了一个学习Django和Web开发的实际案例，可以帮助我们理解如何将Python后端与前端技术如Bootstrap结合起来，创建一个完整的Web应用。通过分析和修改源代码，我们可以进一步提升自己的Django开发...
Python实现django开发的在线计算器实例-ComputeDemo
12-26
django开发的在线计算器实例，也可以通过访问http://106.12.16.193:5000/浏览效果。 One more thing... Before running this project, you may want to create a super user. Synchronize the Database This project has default settings for the database (it uses sqlite). If you need a super user, you'll need to create one before running the project.
基于Django创建卡路里计算器
最新发布
03-11
项目使用Python进行开发，Django 框架为 Web 开发提供内置库。编写模型，添加认证和搜索功能，django管理站点创建，并构建卡路里计算器项目的最终GUI。
web 简易计算器
12-27
简易计算器
WEB实现的计算器
10-20
JSP实现的计算器，基于MVC模式的计算器。适合新手学习！
Flask+Web开发实战,flaskweb开发实战pdf,Python
09-10
**Flask Web开发实战——Python Web开发的轻量级选择** Flask，作为一个轻量级的Python Web框架，自2010年开源以来，已经在开发者社区中积累了极高的声誉。与Django这样的全功能框架相比，Flask以其灵活性、简单性...
Django-08数据处理(获取、返回)
weixin_47761086的博客
04-01 786
获取数据 url拼接的参数 request.GET.get('键') # 获取单个值，get('键',默认值) request.GET.getlist('键') # 获取多个值，getlist('键',默认值) 表单 request.POST.getlist('键') 非表单 Non-Form Data json.loads(request.body) # 直接获取请求体，再转化为字典 请求头headers中 request.META['CONTENT_TYPE'] 常见的请求头： CONTENT_
Web初学笔记（1）——Web应用（在线计算器）
qq_40735196的博客
11-10 3028
一个简单的在线计算器应用。使用html编写计算器的布局和结构，使用css更改样式和细节，使用javascript编写按键响应函数及计算逻辑。可作为初学入门的一个小参考。
前端实现一个简单的计算器
m0_51710745的博客
03-28 1682
这是基于上午的完善实现了基本的计算器运算功能，睡个午觉在继续完善一些bug（顺便宣传一下B站蜗牛学院课程） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
Web开发中可以用到的一些在线计算工具（一）
bukunu的专栏
04-05 602
在线景深计算器-景深的计算-网页摄影景深计算工具摄影 Web物理 天圆地方计算 Web建筑 ASCII 在线转换器-ASCII码-十六进制-二进制-八进制-十进制-字符串-ascii查询器-在线计算Web数学 繁体字转换器-繁简字在线转换-中文繁体字转换简体 生活Web计算机 ip地址在线计算器-ip掩码计算工具-网络子网掩码计算方法-十进制转二进制- 计算机Web数学 RGB网页颜
django 前端框架
07-28
回答: Django是一个高级的Python Web框架，它鼓励快速开发和清洁，务实的设计。在Django的前端开发中，可以使用多种前端框架来加快开发速度和提高研发效率。一些常用的前端框架包括：jQuery、Bootstrap、Bootswatch、Pure、Materializecss和Bluma。这些框架都适配于不同的产品，可以根据项目需求选择合适的前端框架来使用。\[1\]\[3\] #### 引用[.reference_title] - *1* [使用Python进行网站页面开发——Django框架介绍与安装](https://blog.csdn.net/weixin_63994459/article/details/125841782)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [【Django】简介](https://blog.csdn.net/huajiu520/article/details/125172348)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Django项目中常使用的前端框架](https://blog.csdn.net/qq_36581961/article/details/113344689)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值