前端采用了Bootstrap进行制作，提供输入框和按钮让用户进行信息输入，然后将计算式通过Ajax方式传输给后台进行计算。后台采用django方式进行开发，获取到前端发送的数据利用python的子模块进程subprocess来计算式子，并将计算结果返回给前端进行显示。(笔者所采用的django版本是3.1.4,Bootstrap所用版本是3.3.7)
了解python Web前后端交互方式(并不是完全分离)，熟悉Ajax局部刷新方法， 掌握完整的项目开发流程。
1、创建名为calculator的项目:
django-admin startproject calculator
2、然后使用cd命令切换到项目工作目录下输入下述命令创建一个名为app的应用。
py manage.py startapp app
3、输入以下代码启动项目。
py manage.py runserver
项目启动后，通过浏览器访问http://127.0.0.1:8000/，查看是否正常创建了项目。
写到后面觉得还是先把整个项目的文件层次放在这里供参考和创建。（需要自主创建的文件夹已用红框标记）
1、找到calculator的settings.py文件，找到INSTALLED_APPS字段将创建的app应用添加进来。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app' #在此处添加应用
]
2、接下来为了后期项目部署和访问的方便，需要开放访问权限，找到ALLOWED_HOSTS字段并进行修改。
ALLOWED_HOSTS = ['*',] #注意后面有个','号
3、配置视图处理函数，编辑app文件夹下的views.py文件，代码如下
from django.shortcuts import render #用于页面的渲染
def home(request):
return render(request,'index.html')
因为仔细分析需要的篇章过长，所以假设读者有着框架基础(小白的我努力记录所学)
梳理一下页面访问的基本流程：
1、用户输入网址请求访问页面，例如http://127.0.0.1:8000/
2、后端服务器接收到请求后开始解析网址，根据路由配置文件urls.py中定义的路由，将网址映射到指定的视图处理函数。如：本项目中的home()。
3、视图处理函数处理请求并返回请求的页面内容。如：本项目中的index.html
操作：在项目文件夹(本项目中的app文件夹)下创建一个templates子文件夹，这里注意文件夹的名字必须为templates,因为django框架会自动搜索每个应用下的templates文件夹，如果拼写错误后面运行项目会出现报错。
在templates文件夹项目下创建一个index.html文件，编写如下代码。
{% load static %}
<html lang="zh-cn"> {# 表示支持中文#}
<head>
<meta charset="UTF-8"> {# 告知浏览器此页面属于utf-8中文编码，让浏览器做好“翻译”工作#}
<meta http-equiv="X-UA-Compatible" content="IE=edge">{# http-equiv="X-UA-Compatible"用来避免制作出的页面在IE8下面出现错误，通过设定IE=edge模式通知Internet Explorer以最高级别的可用模式显示内容。即如果用户最高IE版本是IE9的话就调用IE9#}
<meta name="viewport" content="token punctuation">"> {# initial-scale=1 用于设置页面首次被显示时可视区域的缩放级别。取值1则使页面按实际尺寸显示，无任何缩放。#}
<title>在线计算器title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/jquery.min.js' %}">script>
<script src="{% static 'js/bootstrap.min.js' %}">script>
head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-md-5">div>
<div class="col-xs-10 col-md-5">
<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()">7button>
<button type="button" class="btn btn-default btn_num" onclick="fun_8()">8button>
<button type="button" class="btn btn-default btn_num" onclick="fun_9()">9button>
<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()">4button>
<button type="button" class="btn btn-default btn_num" onclick="fun_5()">5button>
<button type="button" class="btn btn-default btn_num" onclick="fun_6()">6button>
<button type="button" class="btn btn-default btn_num" onclick="fun_mul()">xbutton>
<br>
<button type="button" class="btn btn-default btn_num" onclick="fun_1()">1button>
<button type="button" class="btn btn-default btn_num" onclick="fun_2()">2button>
<button type="button" class="btn btn-default btn_num" onclick="fun_3()">3button>
<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()">0button>
<button type="button" class="btn btn-default btn_num" onclick="fun_00()">00button>
<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>
<br>
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-md-2">div>
div>
div>
body>
html>
在app应用中创建static文件夹，然后将从官网下载下来的Bootstrap文件中的三个文件夹放入static文件中方便接下来在html文件中对Bootstrap进行引用。
在head中引入三个必要的Bootstrap文件分别为bootstrap.min.css，jquery.min.js，bootstrap.min.js。注意的是其中的jquery.min.js文件在下载的Bootstrap中没有包含，所以自己的官网进行保存然后将其放入js从官网下载下来的文件夹中。
另外还需要注意的是在static文件夹找到css子文件夹，创建一个style.css文件，该文件主要是为了定制一些特殊的css样式，尽管Bootstrap的默认样式可以满足基本的页面设计需求。但是很多情况需要我们对Bootstrap的样式进行一定的改写。
html代码的部分用到的知识有：Bootstrap栅格布局，Javascript基础，html基础，Bootstrap使用方法。需要读者自行去了解学习，然后再来看代码就很容易理解了。（因为小白的我也写不出你们看不懂的(T_T)）
编辑css文件夹中的style.css文件（如果之前没有创建请自主创建）
/*设置整体的背景样式*/
body{
background-image: url("../img/flag.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /*背景图片不会随着页面的滚动而滚动。*/
background-size: cover; /*此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
/*为了防止有些浏览器不支持background-size语法,需要添加下述CSS样式设置来满足浏览器的兼容性*/
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
}
/*显示文本框样式*/
.input_show{
/*前面有个点是类的意思*/
margin-top: 35px;
max-width: 260px;
height: 35px;
}
/*数字按钮样式*/
.btn_num{
margin: 1px;
width: 60px;
}
/*清空按钮样式*/
.btn_clear{
margin-left: 40px;
margin-right: 20px;
}
/*将背景拉伸，否则在手机上浏览时背景会显示不全*/
.extendContent{
height: 300px;
}
此处需要注意的是在static下的img文件夹放入一张名为flag.jpg的图片(自行修改代码为读者所用图片的名字)作为body的默认图片背景。
具体地在body的末尾添加下述js代码
<script>
var x = document.getElementById('txt_code');
var y = document.getElementById('txt_result');
function fun_7() {
x.value += '7';
}
function fun_8() {
x.value += '8';
}
function fun_9() {
x.value += '9';
}
function fun_div() {
x.value += '/';
}
function fun_4() {
x.value += '4';
}
function fun_5() {
x.value += '5';
}
function fun_6() {
x.value += '6';
}
function fun_mul() {
x.value += '*';
}
function fun_3() {
x.value += '3';
}
function fun_2() {
x.value += '2';
}
function fun_1() {
x.value += '1';
}
function fun_sub() {
x.value += '-';
}
function fun_0() {
x.value += '0';
}
function fun_00() {
x.value += '00';
}
function fun_dot() {
x.value += '.';
}
function fun_add() {
x.value += '+';
}
function fun_clear() {
x.value = '';
y.value = '';
}
</script>
<script>
function Showresult(data) {
var y = document.getElementById('txt_result');
y.value = data['result'];
}
</script>
<script>
$('#lgbut_compute').click(function () {
$.ajax({
url:'/compute/', ///调用django后台服务器计算公式
type:'POST', ///请求类型
data:{
'code':$('#txt_code').val() ///获取文本框中的公式
},
dataType:'json', ///期望获得的相应类型为json
success:Showresult ///在请求成功之后调用改回调函数输出结果
})
})
</script>
前半部分是使得用户输入点击的计算公式在界面显示，后半部分将“公式计算”文本框中的数据通过Ajax发送给后端服务器，同时能够接受后端服务器发回来的执行结果并显示在“结果”的文本框中。之所以采用Ajax。是因为该下项目适宜采用局部刷新的方式提交数据并更新结果，这样可以具有较好的用户体验。
此处解析一下Ajax的写法(下面总结会给出Ajax在Python Web中的典型调用形式)。
其中url用来设置请求路径，即将请求提交到“当前根网址/compute/”进行运算。请求类型为POST方式，需要发送的公式通过data字段进行发送，通信数据格式采用JSON字符串进行数据交换。最后success字段用来定义请求成功后需要执行的回调函数，这里将请求成功后由后台返回的计算结果通过调用ShowResult()函数显示出来。ShowResult()函数通过txt_result文本框来输出显示内容。
编辑app文件夹中的views.py文件，添加如下代码
import subprocess #引入子进程模块用于执行发送过来的计算公式
from django.views.decorators.http import require_POST #获取后台服务器的POST请求权限(否则发过来的请求会被后台服务器阻止)
from django.http import JsonResponse #将计算得到的结果封装成JSON字符串
from django.views.decorators.csrf import csrf_exempt #引入csrf_exempt装饰器用于规避csrf校验(防止网站被跨站攻击)
def run_code(code):
try:
code = 'print(' + code + ')'
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')
result = run_code(code)
return JsonResponse(data={'result':result})
解析：
1、进行库函数导入，功能已经写在注释中。
2、视图处理函数。
3、公式计算函数。主要通过子进程模块subprocess的check_output函数进行公式计算。
4、最后需要对访问路由urls进行配置，编辑calculator中的urls.py文件，在urlpatterns字段中添加代码，具体如下：
from django.contrib import admin
from django.urls import path,include
from app.views import home,compute #导入对应的处理函数
urlpatterns = [
path('admin/', admin.site.urls),
path('',home,name='home'), #添加首页路由
path('compute/',compute,name='compute') #添加针对公式计算compute路由
]
至此前后端开发完毕，将上述代码进行整合即可得到完整代码实现功能。运行项目查看效果
1、总结引用bootstrap对应的配置文件
{% load static %}
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="token punctuation">">
<title>xxxtitle<
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有