在线Web计算器

转载

mb5ff2f2ed7d163 2021-08-13 20:31:00

文章标签 文本框 json ajax css bootstrap 文章分类 代码人生

1.创建项目django-admin startproject compute

2.创建应用python manage.py startapp app # app是应用名

3.在app应用下，也就是该文件夹下创建templates文件夹，里面创建个index.html文件

4.配置settings.py,找到INSTALLED_APPS字段，将创建的appp应用添加进来(不添加进来会报什么错呢，没试过)

5.在settings.py中找到ALLOWED_HOSTS<==为了后期项目部署和访问方便，需要开放访问权限

ALLOWED_HOSTS = ['*',]

6.编写views.py视图函数

def home(request):
    return render(request,'index.html') # render函数返回index.html页面

然后再配置url:path()3参数

 path('',home,name='home'), # ''不写，默认是首页

7.导入Bootstrap前端框架,静态资源文件的配置：把css,fonts,img,js文件夹放在命名为static的文件夹下。

static文件夹可放在app文件夹下(也就是该应用)，还可以放在项目根目录文件夹下(企业门户网站的搭建就是这样做的)

8.编写前端页面

使用了Bootstrap搭建

container容器对内容排布进行了分配，将整个内容分成12个网格，依据这12个网格进行内容的布局并且实现响应式布局

公共包括2个文本框组件：一个用于显示计算公式、一个用于显示计算结果

16个公式编辑按钮，包含数字、小数点和加减乘除等

两个逻辑按钮：一个用于清空文本框内容，一个用于执行计算公式

<body>
    <!--公共包括2个文本框组件：一个用于显示计算公式、一个用于显示计算结果-->
    <!--16个公式编辑按钮，包含数字、小数点和加减乘除等-->
    <!--两个逻辑按钮：一个用于清空文本框内容，一个用于执行计算公式-->
    <div class="container-fluid">
        <!--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" name="txt_code" id="txt_code" value="" class="form-control input_show"
                    placeholder="公式计算" disabled />
                <!--class="form-control input_show"不理解作用-->
                <input type="text" name="txt_result" id="txt_result" value="" class="form-control input_show"
                    placeholder="结果" disabled />
                <br>
                <div>
                    <!--class属性btn_num是啥，设置数字按钮属性-->
                    <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>
                </div>
                <div>
                    <br>
                    <!--调节2按钮之间的距离有问题-->
                    <!--之前这里写的是btn-clear而style.css样式中用的是 btn_clear-->
                    <button type="button" class="btn btn-primary btn-lg btn_clear" id="lgbut_clear"
                        onclick="fun_clear()">
                        清空
                        <!--btn-clear不知这属性是啥，fun_clear应该是函数，lgbut_clear是个id暂且记录-->
                    </button>
                    <!--lgbut_comput==>这钱这里写成了lgbut_compute没有后端响应，因为没有定位到按钮-->
                    <!--如果在style.css中很难改变样式，或者2个有关联，可以在行内样式进行改变<p style=""></p>-->
                    <button type="button" class="btn btn-primary btn-lg btn_1" id="lgbut_comput" style="margin-top: auto;">
                        计算
                        <!--btn-clear不知这属性是啥,设置清空按钮属性，fun_clear应该是函数，lgbut_clear是个id暂且记录-->
                    </button>
                </div>
            </div>
            <div class="col-xs-1 col-sm-2" bg-success>我在右边</div>
            <!--这总的一行有点高,最后一列用来空着的，也可写字-->

        </div>
        <div class="extendContent"></div>
        <!--class="extendContent"这是干啥的，css属性，将背景拉升，否则在手机上浏览不全-->
    </div>

需要导入的静态文件

<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>
    <!--static要和引号后面的内容用空格隔开，不然报错Invalid block tag on line 13: 'static'js/jquery.min.js''. Did you forget to register or load this tag?-->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

9.前端页面的逻辑功能实现

逻辑功能实现分为以下2个部分

1.单击数字按钮可以在公式计算文本框中显示添加的数字或者运算符号

2.单击清空按钮，可以对文本框中的数据进行清除

<script>
        //逻辑功能实现分为以下2个部分
        //1.单击数字按钮可以在公式计算文本框中显示添加的数字或者运算符号
        //2.单击清空按钮，可以对文本框中的数据进行清除
        var x = document.getElementById('txt_code') //document.getElementById加上input函数还可以这样用，就变成了个及时计算显示器
        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_1() {
            x.value += '1'
        }

        function fun_2() {
            x.value += '2'
        }

        function fun_3() {
            x.value += '3'
        }

        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>

10.通过Ajax将文本框中的数据发送给后端服务器（重点）

<script>
        function ShowResult(data) {
            var y = document.getElementById('txt_result');
            y.value = data['result']; //result应该是js计算的结果，可以自己拆分验证;不是js计算的，是python后端子进程模块subprocess中的check_output函数计算的
        }
    </script>
    <script>
        $('#lgbut_comput').click(function () {
            $.ajax({//后端处理计算模块如何调试
                url: '/compute/',
                type: 'POST',
                data: { //data这里要加:
                    //.val()方法，一个是带参：给输入框赋值，一个是不参数的方法：获取输入框的值
                    'code': $('#txt_code').val() //获取文本框中的公式,在传入result参数直接返回结果
                },
                dataType: 'json', //期望获得的响应类型为json
                success: ShowResult // 调用回调函数输出结果
            })
        })
    </script>

Ajax

Ajax不是一种新的编程语言，而是一种使用现有标准的新算法，其实Ajax本质上是几门技术的综合，包括DOM、XML、Javascript、JSON、CSS等

常用的Ajax调用形式如下

'code'后是关键

$('#myid').click(function(){
    $.ajax({
        url:'/compute/', //访问网址
        type:'POST', //提交类型
        data:{//data这里要加:
            'code':$('#txt_code').val() //获取文本框中的公式
        },
        dataType:'json', //期望获得的响应类型为json
        success:ShowResult // 调用回调函数输出结果

    })
})

11.难点

开发后端计算模块

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

# 开发计算后端模块
# 由Python模块执行计算然后将计算结果以json字符串形式返回给前端
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校验(防止网站被跨站攻击)

# Create your views here.
def home(request):
    return render(request,'index.html') # render函数返回index.html页面
def home1(request):
    return HttpResponse('hello world!')



def run_code(code):
    try:

        code = 'print(' + code + ')' # 这句不理解
        # 调用子进程模块的check_output函数进行公式计算
        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') # 这应该是ajax请求传过来的公式
    result = run_code(code) # 运用函数计算
    return JsonResponse(data={'result':result})# 将计算结果进行json封装并返回