> 웹 프론트엔드 > 부트스트랩 튜토리얼 > Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

青灯夜游
풀어 주다: 2022-01-28 18:04:51
앞으로
2758명이 탐색했습니다.

이 글은 Django+Bootstrap을 사용하여 계산기를 만드는 방법을 단계별로 설명합니다. 도움이 되길 바랍니다!

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

준비

애플리케이션 만들기

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

구성에 애플리케이션 추가

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

html 만들기

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

뷰 기능 작성

from django.shortcuts import render


# Create your views here.

def home(request):
    return render(request, 'index.html')
로그인 후 복사

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

라우팅 구성

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'),
]
로그인 후 복사

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

Bootstrap 프런트 엔드 프레임워크 가져오기

다운로드 주소

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

Css를 배치하고, 글꼴, js static 폴더에 복사하면 폴더가 생성됩니다. [관련 권장사항: "부트스트랩 튜토리얼"]

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

프런트엔드 콘텐츠 작성

{% 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>
로그인 후 복사

뷰 기능 작성

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})
로그인 후 복사

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

테스트

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

부트스트랩에 대한 추가 관련 지식 , 방문하실 수 있습니다: 부트스트랩 기본 튜토리얼! !

위 내용은 Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿