Django配合Bootstrap怎么制作计算器（实战）

本篇文章手把手带大家使用django+bootstrap制作一个计算器，希望对大家有所帮助！

准备工作

创建一个应用

添加应用到配置

创建一个html

编写视图函数

from django.shortcuts import render


# Create your views here.

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

配置路由

from django.contrib import admin
from django.urls import path,include

from app.views import home

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

导入Bootstrap前端框架

下载地址https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip

将css、fonts、js复制到static文件夹下 没有则创建该文件夹。【相关推荐：《bootstrap教程》】

编写前端内容

{% load static %}
nbsp;html>


    <meta>
    <title>计算器</title>
    <link>
    <script></script>
    <script></script>

    <style>
        body{
            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;
        }
        .extenContent{
            height: 300px;
        }
    </style><div>
    <div>
        <div> </div>
        <div>
            <input>
            <input>
            <br>
            <div>
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button>/</button>
                <br>
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>*</button>
                <br>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>-</button>
                <br>
                <button>0</button>
                <button>00</button>
                <button>.</button>
                <button>+</button>
            </div>
        <div>
        <br>
        <button>
    清空
</button>
<button>
    计算
</button>
    </div>
        </div>
            <div></div>
</div>
    </div>
<div></div>
<script>
    var x=document.getElementById("txt_code");
    var y=document.getElementById("txt_result");
    function fun_7() {
        x.value+=&#39;7&#39;;
    }
    function fun_8() {
        x.value+=&#39;8&#39;;
    }
    function fun_9() {
        x.value+=&#39;9&#39;;
    }
    function fun_div() {
        x.value+=&#39;/&#39;;
    }
    function fun_4() {
        x.value+=&#39;4&#39;;
    }
    function fun_5() {
        x.value+=&#39;5&#39;;
    }
    function fun_6() {
        x.value+=&#39;6&#39;;
    }
    function fun_mul() {
        x.value+=&#39;*&#39;;
    }
    function fun_1() {
        x.value+=&#39;1&#39;;
    }
    function fun_2() {
        x.value+=&#39;2&#39;;
    }
    function fun_3() {
        x.value+=&#39;3&#39;;
    }
    function fun_sub() {
        x.value+=&#39;-&#39;;
    }
    function fun_0() {
        x.value+=&#39;0&#39;;
    }
    function fun_00() {
        x.value+=&#39;00&#39;;
    }
    function fun_dot() {
        x.value+=&#39;.&#39;;
    }
    function fun_add() {
        x.value+=&#39;+&#39;;
    }
    function fun_clear() {
        x.value=&#39;&#39;;
        y.value=&#39;&#39;;

    }
</script><script>
    function ShowResult(data) {
        var y = document.getElementById(&#39;txt_result&#39;);
        y.value = data[&#39;result&#39;];
    }
</script><script>
    $(&#39;#lgbut_compute&#39;).click(function () {
        $.ajax({
            url:&#39;compute/&#39;,
            type:&#39;POST&#39;,
            data:{
                &#39;code&#39;:$(&#39;#txt_code&#39;).val()
            },
            dataType:&#39;json&#39;,
            success:ShowResult
        })
    })
</script>

编写视图函数

import subprocess

from django.http import JsonResponse
from django.shortcuts import render

# Create your views here.
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_POST


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


@csrf_exempt
def compute(request):
    code = request.POST.get('code')
    try:
        code = 'print(' + code + ')'
        result = subprocess.check_output(['python', '-c', code], universal_newlines=True, stderr=subprocess.STDOUT,timeout=30)
    except:
        result='输入错误'

    return JsonResponse(data={'result': result})

测试

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！