Web实战：基于Django与Bootstrap的在线计算器

文章目录

  • 写在前面
  • 实验目标
  • 实验内容
    • 1. 创建项目
    • 2. 导入框架
    • 3. 配置项目
      • 前端代码
      • 后端代码
    • 4. 运行项目
  • 注意事项
  • 写在后面

写在前面

本期内容：基于Django与Bootstrap的在线计算器

实验环境：

  • vscode
  • python(3.11.4)
  • django(4.2.7)
  • bootstrap(3.4.1)
  • jquery(3.7.1)

实验目标

项目功能主要是实现一个在线计算器。在输入框中输入计算式，单击“计算”按钮可以在输出框中输出结果。前端采用了 Bootstrap进行制作，提供输入框和按钮让用户进行信息输入，然后将计算式通过 Ajax方式传输给后台进行计算。后台采用Django 进行开发，获取到前端发送的数据后利用Python的子进程模块subprocess来计算式子，并将计算结果返回给前端进行显示。

在线计算器

实验内容

1. 创建项目

1.打开vscode命令行输入以下命令创建一个名为jsq的项目

django-admin startproject jsq

2.利用cd命令切换到manage.py文件所在目录，输入以下命令创建一个名为app的应用

cd jsq

python manage.py startapp app

3.输入以下命令启动项目

python manage.py runserver

1

4.在浏览器中输入“http://127.0.0.1:8000”检查web界面是否启动成功

出现如下界面说明web界面启动成功

2

2. 导入框架

1.在官网下载bootstrap源代码后解压

3

2.在app文件夹下创建一个static子文件夹

3.在解压的文件中找到dist文件夹，将该文件夹中的css，fonts，js三个子文件夹复制到static文件夹下面，并在static文件夹中新建一个名为img的子文件夹（用于存放图片）

4

4.进入jQuery官网，复制网页内容，保存为jquery.min.js文件放到static目录下的js子文件夹中。

5
6
7

3. 配置项目

前端代码

1.在app文件夹下创建一个templates子文件夹，然后在templates文件夹下面创建一个index.html文件，编辑该文件，填入以下代码：

{% load static %}
<!DOCTYPE html>
<html>
    <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>在线计算器</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-sm-4"></div>
                <div id = "computer" class="col-xs-10 col-sm-6">
                    <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()">×</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>
                    </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-success btn-lg"
                        id = "lgbut_compute">计算</button>
                    </div>
                </div>
                <div class="col-xs-1 col-sm-2"></div>
            </div>
        </div>
        <div class="extendContent"></div>

        <script>
            var x = document.getElementById("txt_code");
            var y = document.getElementById("txt_result");
            function fun_1(){
                x.value += '1';
            }
            function fun_2(){
                x.value += '2';
            }
            function fun_3(){
                x.value += '3';
            }
            function fun_4(){
                x.value += '4';
            }
            function fun_5(){
                x.value += '5';
            }
            function fun_6(){
                x.value += '6';
            }
            function fun_7(){
                x.value += '7';
            }
            function fun_8(){
                x.value += '8';
            }
            function fun_9(){
                x.value += '9';
            }
            function fun_add(){
                x.value += '+';
            }
            function fun_sub(){
                x.value += '-';
            }
            function fun_mul(){
                x.value += '*';
            }
            function fun_div(){
                x.value += '/';
            }
            function fun_0(){
                x.value += '0';
            }
            function fun_00(){
                x.value += '00';
            }
            function fun_dot(){
                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/',
                    type:'POST',
                    data:{
                        'code':$('#txt_code').val()
                    },
                    dataType:'json',
                    success:ShowResult
                })
            })
        </script>

    </body>

</html>

2.在css文件夹中创建一个style.css文件并填入以下内容：

body{
    background-image:url("../img/bg.jpg");
    background-position:center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;

}

.input_show{
    margin-top:35px;
    max-width:280px;
    height:35px;
}

.btn_num{
    margin:1px 1px 1px 1px;
    width:60px;
}

.btn_clear{
    margin-left:40px;
    margin-right:20px;
}

.extendContent{
    height:300px;
}

8

后端代码

1.配置视图处理函数，编辑views.py文件，填入以下代码：

from django.shortcuts import render
import subprocess
from django.views.decorators.http import require_POST
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import warnings

warnings.filterwarnings('ignore')

# Create your views here.
def home(request):
    return render(request, 'index.html')

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})

2.配置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', #在此处添加应用
]

找到ALLOWED_HOSTS字段并修改，编辑代码如下：

ALLOWED_HOSTS = ['*',]

3.配置访问路由，编辑urls.py文件，填入以下代码：

from django.contrib import admin
from django.urls import path
from app.views import home, compute

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home, name='home'),
    path('compute/', compute, name='compute'),
]

4. 运行项目

在终端切换到manage.py文件所在目录，输入以下命令运行项目，然后在浏览器中输入“http://127.0.0.1:8000”查看运行结果

python manage.py runserver

出现以下结果说明运行成功！

在线计算器

注意事项

若计算时遇到问题：

0.01s - Debugger warning: It seems that frozen modules are being used, which may0.00s - make the debugger miss breakpoints. Please pass-Xfrozen_modules=off0.00s - to python to disable frozen modules.0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.

可以尝试在启动 Django 服务时添加 --noreload 参数来解决这个问题。如下所示：

python manage.py runserver --noreload

这个问题是由于 Django 的自动重载机制导致的，自动重载机制会导致 Python 解释器重新加载模块，从而导致调试器无法正确地识别断点位置。使用 --noreload 参数可以禁用自动重载机制，并避免这个问题的发生。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/164571.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

1、cvpr2024

1、cvpr2024

CVPR2024官网&#xff1a; Overleaf模板&#xff1a; 更改作者&#xff08;去掉CVPR标识&#xff09; % \usepackage{cvpr} % To produce the CAMERA-READY version \usepackage[review]{cvpr} % To produce the REVIEW version改成 \usepackage{cvpr} …
阅读更多...
性格懦弱怎么办？如何改变懦弱的性格？

性格懦弱怎么办？如何改变懦弱的性格？

性格懦弱是一个比较常见的话题了&#xff0c;懦弱带来的苦恼和困扰&#xff0c;深深影响着我们的生活&#xff0c;人际关系&#xff0c;以及事业的发展。然后如何摆脱懦弱&#xff0c;却并非易事&#xff0c;尤其是对于成年人来说&#xff0c;这种懦弱的性格特征&#xff0c;已…
阅读更多...
Prometheus+Grafana监控

Prometheus+Grafana监控

Prometheus是一种开源监控系统&#xff0c;可用于收集指标和统计数据&#xff0c;并提供强大的查询语言&#xff0c;以便分析和可视化这些数据。它被广泛用于云原生和容器化环境中&#xff0c;可以嵌入到Kubernetes集群中&#xff0c;并与其他Kubernetes工具进行集成。 Grafan…
阅读更多...
大模型的交互能力

大模型的交互能力

摘要&#xff1a; 基础大模型显示出明显的潜力&#xff0c;可以改变AI系统的开发人员和用户体验&#xff1a;基础模型降低了原型设计和构建AI应用程序的难度阈值&#xff0c;因为它们在适应方面的样本效率&#xff0c;并提高了新用户交互的上限&#xff0c;因为它们的多模式和生…
阅读更多...
代码随想录算法训练营|五十六天

代码随想录算法训练营|五十六天

回文子串 647. 回文子串 - 力扣&#xff08;LeetCode&#xff09; dp含义&#xff1a;表示区间内[i,j]是否有回文子串&#xff0c;有true&#xff0c;没有false。 递推公式&#xff1a;当s[i]和s[j]不相等&#xff0c;false&#xff1b;相等时&#xff0c;情况一&#xff0c;…
阅读更多...
图书管理系统 保姆级教学 手把手教你图书管理系统设计！

图书管理系统 保姆级教学 手把手教你图书管理系统设计！

天梯无捷径&#xff0c;唯有苦攀登。 一起加油&#xff0c;小伙伴们&#xff01;&#xff01; 目录 1. 实现思路: 2. 那么如何找对象呢? 3. Book类的实现 Book类总代码&#xff1a; 4. BookList类的实现 BookList类总代码&#xff1a; 5. 用户的操作 5.1 AddOperation类…
阅读更多...
在线识别二维码工具

在线识别二维码工具

具体请前往&#xff1a;在线二维码识别解码工具--在线识别并解码二维码网址等内容
阅读更多...
10、背景分离 —— 大津算法

10、背景分离 —— 大津算法

上一节学习了通过一些传统计算机视觉算法，比如Canny算法来完成一个图片的边缘检测，从而可以区分出图像的边缘。 今天再看一个视觉中更常见的应用，那就是把图片的前景和背景的分离。 前景和背景 先看看什么是前景什么是背景。 在图像处理和计算机视觉中，"前景"…
阅读更多...
Go——一、Go语言安装及介绍

Go——一、Go语言安装及介绍

Go 一、Windows下安装Go1、下载Go2、配置环境变量3、下载Jetbrain下的GoLang4、编写hello world5、编译和执行 二、Go语言介绍1、开发文档2、Go语言核心开发团队3、为什么要创建Go4、Go语言发展史5、Go语言特点6、Golang执行过程6.1 执行过程分析6.2 编译是什么 7、开发注意事项…
阅读更多...
线性变换概论

线性变换概论

线性变换 定义 设 V V V 和 W W W 都是在域 K K K上定义的向量空间&#xff0c; T : V → W T :V \rightarrow W T:V→W 对任二向量 x , y ∈ V x,y \in V x,y∈V,与任何标量 a ∈ K a \in K a∈K&#xff0c;满足&#xff1a; T ( x y ) T ( x ) T ( y ) T(xy)T(x)T(…
阅读更多...
c语言：解决数组有关的删除，排序，合并等问题。

c语言：解决数组有关的删除，排序，合并等问题。

题目1&#xff1a;判断数组是否有序&#xff08;升序或者降序&#xff09; 思路和代码&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {int a 0;scanf("%d", &a);int arr[50];int flag1 0;//是降序int flag2 0;//是升序…
阅读更多...
系列十一、你平时工作用过的JVM常用基本配置参数有哪些？

系列十一、你平时工作用过的JVM常用基本配置参数有哪些？

一、常用参数 1.1、-Xms 功能&#xff1a;初始内存大小&#xff0c;默认为物理内存的1/64&#xff0c;等价于 -XX:InitialHeapSize 1.2、-Xmx 功能&#xff1a;最大分配内存&#xff0c;默认为物理内存的1/4&#xff0c;等价于 -XX:MaxHeapSize 1.3、-Xss 功能&#xff1a;设置…
阅读更多...
解决在pycharm中使用matplotlib画图问题

解决在pycharm中使用matplotlib画图问题

第一&#xff0c;再导入包后直接绘图出现&#xff1a; AttributeError: module backend_interagg has no attribute FigureCanvas表明版本不兼容&#xff0c;我们需要加入&#xff1a;matplotlib.use(‘TkAgg’) 导入函数就变成了&#xff1a; import matplotlib matplotlib.…
阅读更多...
项目点使用Redis作为缓存技术-自用

项目点使用Redis作为缓存技术-自用

在spring boot项目中&#xff0c;使用缓存技术只需在项目中导入相关缓存技术的依赖包&#xff0c;并在启动类上使用EnableCaching开启缓存支持即可。 例如&#xff0c;使用Redis作为缓存技术&#xff0c;只需要导入Spring data Redis的maven坐标即可。 描述 使用Redis缓存高频数…
阅读更多...
正则表达式去掉代码末尾的数字

正则表达式去掉代码末尾的数字

[\n](\d)[\n]
阅读更多...
趣学python编程 (三、计算机基础知识)

趣学python编程 (三、计算机基础知识)

如果不了解些计算机的基础知识上来就编程&#xff0c;往往容易“不识庐山真面目&#xff0c;只缘身在此山中”。因此对于计算机的一些基础知识&#xff0c;在开始编程前&#xff0c;需要理解和掌握。 计算机软件系统 计算机软件是控制计算机实现用户需求的计算机操作以及管理计…
阅读更多...
Django 简单入门（一）

Django 简单入门（一）

一、配置虚拟环境 1、安装虚拟环境库vitualenv 与vitualenvwrapper-win 2、创建虚拟环境 myenv 3、在此环境中安装django 二、创建一个Django项目 1、使用命令来创建&#xff1a;django-admin startproject Django2023 工程名为Django2023 2、 使用PyCharm专业版创建Django项…
阅读更多...
【C++初阶】STL详解（四）vector的模拟实现

【C++初阶】STL详解（四）vector的模拟实现

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…
阅读更多...
OpenCV快速入门：图像形态学操作

OpenCV快速入门：图像形态学操作

文章目录 前言一、图像形态学基础1.1 背景介绍1.2 像素距离1.2.1 什么是像素距离&#xff1f;1.2.2 常见的像素距离度量方法1.2.3 计算像素距离的代码实现 1.3 图像连通性1.3.1 什么是图像连通性&#xff1f;1.3.2 连通类型1.3.3 连通组件标记1.3.4 连通性在图像处理中的应用 1…
阅读更多...
【Linux】21、软中断、网络小包、SYN FLOOD 攻击、sar tcpdump

【Linux】21、软中断、网络小包、SYN FLOOD 攻击、sar tcpdump

文章目录 一、通俗理解&#xff1a;从“取外卖”看中断二、软中断2.1 网卡收发数据包2.2 查看软中断和内核线程2.3 案例2.3.1 案例&#xff1a;动态库 sleep 导致软中断2.3.2 Nginx 进程的不可中断状态是系统的一种保护机制&#xff0c;可以保证硬件的交互过程不被意外打断。所…
阅读更多...
最新文章

Copyright @ 2022~2023