记录开发在线网站计算器的坑

{% load staticfiles %}

1.这里要注意的是静态资源模板配置：

static要和引号后面的内容用空格隔开,引号的内容最好也要与%用空格隔开

 <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?-->

2.class = ""中的属性与style.css中的属性不一样(也就是粗心写错了，常犯的错误)

之前这里写的是btn-clear而style.css样式中用的是 btn_clear

<!--调节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没有后端响应，因为没有定位到按钮-

 <!--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>

3.关于css图片背景万能通用，为手机服务(bootstrap)

css属性，将背景拉升，否则在手机上浏览不全

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

4.如果在style.css中很难改变样式，或者2个有关联，可以在行内样式进行改变

我之前在style.css中把计算这个按钮的属性margin改了，只改了离左边界的距离，但是没有改变
但在行内样式进行改变他在页面上就直接改变了。有时候项目小的话：覆盖样式最快的方法就是用行内样式(单个标签)

<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

5.Ajax传参时，data:{}后的冒号没加

<script>
        $('#lgbut_comput').click(function () {
            $.ajax({//后端处理计算模块如何调试
                url: '/compute/',
                type: 'POST',
                data: { //data这里要加:
                    //.val()方法，一个是带参：给输入框赋值，一个是不参数的方法：获取输入框的值
                    'code': $('#txt_code').val() //获取文本框中的公式,在传入result参数直接返回结果
                },
                dataType: 'json', //期望获得的响应类型为json
                success: ShowResult // 调用回调函数输出结果
            })
        })
    </script>

难点

不理解子进程模块的check_output函数如何进行公式计算的

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封装并返回