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

简介: Web实战:基于Django与Bootstrap的在线计算器


写在前面

本期内容:基于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

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

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

2. 导入框架

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

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

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

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

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

后端代码

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 参数可以禁用自动重载机制,并避免这个问题的发生。

写在后面

我是一只有趣的兔子,感谢你的喜欢!

目录
相关文章
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
10天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【4月更文挑战第9天】本文对比了Python三大Web框架Django、Flask和Pyramid。Django功能全面,适合快速开发,但学习曲线较陡;Flask轻量灵活,易于入门,但默认配置简单,需自行添加功能;Pyramid兼顾灵活性和可扩展性,适合不同规模项目,但社区及资源相对较少。选择框架应考虑项目需求和开发者偏好。
|
1月前
|
JSON 算法 安全
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
35 0
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
|
1月前
|
设计模式 前端开发 数据库
Django是一个用Python编写的开源Web应用框架
Django是一个用Python编写的开源Web应用框架
12 1
|
1月前
|
安全 数据库 开发工具
Django实战:从零到一构建安全高效的Web应用
Django实战:从零到一构建安全高效的Web应用
47 0
|
1月前
|
开发框架 人工智能 前端开发
使用Python、Django和Bootstrap构建在线教育平台
使用Python、Django和Bootstrap构建在线教育平台
31 0
|
1月前
|
SQL 机器学习/深度学习 缓存
Go语言Web应用实战与案例分析
【2月更文挑战第21天】本文将通过实战案例的方式,深入探讨Go语言在Web应用开发中的应用。我们将分析一个实际项目的开发过程,展示Go语言在构建高性能、可扩展Web应用方面的优势,并分享在开发过程中遇到的问题和解决方案,为读者提供宝贵的实战经验。
|
1月前
|
前端开发 UED 开发者
构建响应式Web界面:Flexbox与Grid的实战应用
【2月更文挑战第17天】 在现代网页设计中,创建能够适应不同屏幕尺寸的响应式界面是至关重要的。随着移动设备的普及,传统的固定布局已无法满足用户体验的需求。本文将深入探讨CSS中的两种强大的布局模式——Flexbox和Grid,它们如何帮助我们快速实现灵活且高效的响应式设计。通过实例分析,我们将理解这两种技术的工作原理、适用场景以及它们如何相互补充,共同构建出流畅的用户体验。
|
2月前
|
存储 缓存 网络协议
Go语言并发编程实战:构建高性能Web服务器
【2月更文挑战第6天】本文将通过构建一个高性能的Web服务器实战案例,深入探讨如何在Go语言中运用并发编程技术。我们将利用goroutine和channel实现高效的请求处理、资源管理和并发控制,以提升Web服务器的性能和稳定性。通过这一实战,你将更好地理解和掌握Go语言在并发编程方面的优势和应用。
|
2月前
|
存储 数据库 Python
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
web应用实战:导入文件解析到DB,上传图片【2月更文挑战第25天】
56 0
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)