Django+Bootstrap实现计算器的示例代码 Django+Bootstrap实现计算器的示例

准备工作
导入Bootstrap前端框架
编写前端内容
编写视图函数

准备工作创建一个应用

文章图片

添加应用到配置

文章图片

创建一个html

文章图片

编写视图函数

from django.shortcuts import render# Create your views here.def home(request):return render(request, 'index.html')

文章图片

配置路由

from django.contrib import adminfrom django.urls import path,includefrom app.views import homeurlpatterns = [path('admin/', admin.site.urls),path('',home,name='hoome'),]

文章图片

导入Bootstrap前端框架下载地址
将css、fonts、js复制到static文件夹下没有则创建该文件夹

文章图片

编写前端内容

{% load static %}计算器 - 锐客网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; }

编写视图函数

import subprocessfrom django.http import JsonResponsefrom django.shortcuts import render# Create your views here.from django.views.decorators.csrf import csrf_exemptfrom django.views.decorators.http import require_POSTdef home(request):return render(request, 'index.html')@csrf_exemptdef 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=https://www.it610.com/article/{'result': result})