search

Home >Web Front-end >Bootstrap Tutorial >How to make a calculator with Django and Bootstrap (practical)

How to make a calculator with Django and Bootstrap (practical)

青灯夜游
青灯夜游forward
2021-12-13 19:02:162761browse

This article will take you step by step to use Django Bootstrap to make a calculator. I hope it will be helpful to everyone!

How to make a calculator with Django and Bootstrap (practical)

Preparation

Create an application

How to make a calculator with Django and Bootstrap (practical)

Add application to configuration

How to make a calculator with Django and Bootstrap (practical)

Create an html

How to make a calculator with Django and Bootstrap (practical)

Write view function

from django.shortcuts import render


# Create your views here.

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

How to make a calculator with Django and Bootstrap (practical)

Configure routing

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'),
]

How to make a calculator with Django and Bootstrap (practical)

Import Bootstrap front-end framework

Download address

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

Copy css, fonts, and js to the static folder, then create the folder if not found. [Related recommendations: "bootstrap Tutorial"]

How to make a calculator with Django and Bootstrap (practical)

Writing front-end content

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="{% static &#39;css/bootstrap.min.css&#39; %}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="{% static &#39;js/bootstrap.min.js&#39; %}"></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>
</head>
<body>
<div>
    <div>
        <div class="col-xs-1 col-sm-4"> </div>
        <div id="computer" class="col-xs-1 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-primary btn-lg" id="lgbut_compute" >
    计算
</button>
    </div>
        </div>
            <div class="col-xs-1 col-sm-2"></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>
</body>

</html>

Writing view functions

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, &#39;index.html&#39;)


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

    return JsonResponse(data={&#39;result&#39;: result})

How to make a calculator with Django and Bootstrap (practical)

Test

How to make a calculator with Django and Bootstrap (practical)

How to make a calculator with Django and Bootstrap (practical)

How to make a calculator with Django and Bootstrap (practical)

##More related knowledge about bootstrap , you can visit:

bootstrap basic tutorial! !

The above is the detailed content of How to make a calculator with Django and Bootstrap (practical). For more information, please follow other related articles on the PHP Chinese website!

django css bootstrap html 前端框架 Static JS github https
Statement：
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete
Previous article：How to achieve loading effect in Bootstrap? Read the icon (Spinners) componentNext article：How to achieve loading effect in Bootstrap? Read the icon (Spinners) component

Related articles

See more