建设网站松岗,电子商务网站建设jsp考卷,百姓网招聘,网站建设参考文献英文书籍文章目录 写在前面实验目标实验内容1. 创建项目2. 导入框架3. 配置项目前端代码后端代码 4. 运行项目 注意事项写在后面 写在前面
本期内容#xff1a;基于Django与Bootstrap的在线计算器
实验环境#xff1a;
vscodepython(3.11.4)django(4.2.7)bootstrap(3.4.1)jquery(3… 文章目录 写在前面实验目标实验内容1. 创建项目2. 导入框架3. 配置项目前端代码后端代码 4. 运行项目 注意事项写在后面 写在前面
本期内容基于Django与Bootstrap的在线计算器
实验环境
vscodepython(3.11.4)django(4.2.7)bootstrap(3.4.1)jquery(3.7.1)
实验目标
项目功能主要是实现一个在线计算器。在输入框中输入计算式单击“计算”按钮可以在输出框中输出结果。前端采用了 Bootstrap进行制作提供输入框和按钮让用户进行信息输入然后将计算式通过 Ajax方式传输给后台进行计算。后台采用Django 进行开发获取到前端发送的数据后利用Python的子进程模块subprocess来计算式子并将计算结果返回给前端进行显示。 实验内容
1. 创建项目
1.打开vscode命令行输入以下命令创建一个名为jsq的项目
django-admin startproject jsq2.利用cd命令切换到manage.py文件所在目录输入以下命令创建一个名为app的应用
cd jsqpython manage.py startapp app3.输入以下命令启动项目
python manage.py runserver4.在浏览器中输入“http://127.0.0.1:8000”检查web界面是否启动成功
出现如下界面说明web界面启动成功 2. 导入框架
1.在官网下载bootstrap源代码后解压 2.在app文件夹下创建一个static子文件夹
3.在解压的文件中找到dist文件夹将该文件夹中的cssfontsjs三个子文件夹复制到static文件夹下面并在static文件夹中新建一个名为img的子文件夹用于存放图片 4.进入jQuery官网复制网页内容保存为jquery.min.js文件放到static目录下的js子文件夹中。 3. 配置项目
前端代码
1.在app文件夹下创建一个templates子文件夹然后在templates文件夹下面创建一个index.html文件编辑该文件填入以下代码
{% load static %}
!DOCTYPE html
htmlheadmeta charset utf-8meta http-equiv X-UA-Compatible content IEedgemeta name viewport content widthdevice-width,initial-scale1title在线计算器/titlelink rel stylesheet href {% static css/bootstrap.min.css %}/link rel stylesheet href {% static css/style.css%}/script src {% static js/jquery.min.js %}/scriptscript src {% static js/bootstrap.min.js %}/script/headbodydiv classcontainer-fluiddiv class rowdiv class col-xs-1 col-sm-4/divdiv id computer classcol-xs-10 col-sm-6input typetext idtxt_code nametxt_code value classform-control input_show placeholder公式计算 disabled/input typetext idtxt_result nametxt_result value classform-control input_show placeholder结果 disabled/br /divbutton typebutton classbtn btn-default btn_num onclickfun_7()7/buttonbutton typebutton classbtn btn-default btn_num onclickfun_8()8/buttonbutton typebutton classbtn btn-default btn_num onclickfun_9()9/buttonbutton typebutton classbtn btn-default btn_num onclickfun_div()÷/buttonbr/button typebutton classbtn btn-default btn_num onclickfun_4()4/buttonbutton typebutton classbtn btn-default btn_num onclickfun_5()5/buttonbutton typebutton classbtn btn-default btn_num onclickfun_6()6/buttonbutton typebutton classbtn btn-default btn_num onclickfun_mul()×/buttonbr/button typebutton classbtn btn-default btn_num onclickfun_1()1/buttonbutton typebutton classbtn btn-default btn_num onclickfun_2()2/buttonbutton typebutton classbtn btn-default btn_num onclickfun_3()3/buttonbutton typebutton classbtn btn-default btn_num onclickfun_sub()-/buttonbr/button typebutton classbtn btn-default btn_num onclickfun_0()0/buttonbutton typebutton classbtn btn-default btn_num onclickfun_00()00/buttonbutton typebutton classbtn btn-default btn_num onclickfun_dot()./buttonbutton typebutton classbtn btn-default btn_num onclickfun_add()/button/divdivbr/button type button class btn btn-success btn-lg btn_clearid lgbut_clear onclickfun_clear()清空/buttonbutton type button class btn btn-success btn-lgid lgbut_compute计算/button/div/divdiv classcol-xs-1 col-sm-2/div/div/divdiv classextendContent/divscriptvar x document.getElementById(txt_code);var y document.getElementById(txt_result);function fun_1(){x.value 1;}function fun_2(){x.value 2;}function fun_3(){x.value 3;}function fun_4(){x.value 4;}function fun_5(){x.value 5;}function fun_6(){x.value 6;}function fun_7(){x.value 7;}function fun_8(){x.value 8;}function fun_9(){x.value 9;}function fun_add(){x.value ;}function fun_sub(){x.value -;}function fun_mul(){x.value *;}function fun_div(){x.value /;}function fun_0(){x.value 0;}function fun_00(){x.value 00;}function fun_dot(){x.value .;}function fun_clear(){x.value ;y.value ;}/scriptscriptfunction ShowResult(data){var y document.getElementById(txt_result)y.value data[result]}/scriptscript$(#lgbut_compute).click(function(){$.ajax({url:/compute/,type:POST,data:{code:$(#txt_code).val()},dataType:json,success:ShowResult})})/script/body/html2.在css文件夹中创建一个style.css文件并填入以下内容
body{background-image:url(../img/bg.jpg);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;
}.extendContent{height:300px;
}后端代码
1.配置视图处理函数编辑views.py文件填入以下代码
from django.shortcuts import render
import subprocess
from django.views.decorators.http import require_POST
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import warningswarnings.filterwarnings(ignore)# Create your views here.
def home(request):return render(request, index.html)def run_code(code):try:code print( code )output subprocess.check_output([python, -c, code],universal_newlinesTrue,stderrsubprocess.STDOUT,timeout30)except subprocess.CalledProcessError as e:output 公式输入有误return outputcsrf_exempt
require_POST
def compute(request):code request.POST.get(code)result run_code(code)return JsonResponse(data{result:result})2.配置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, #在此处添加应用
]找到ALLOWED_HOSTS字段并修改编辑代码如下
ALLOWED_HOSTS [*,]3.配置访问路由编辑urls.py文件填入以下代码
from django.contrib import admin
from django.urls import path
from app.views import home, computeurlpatterns [path(admin/, admin.site.urls),path(, home, namehome),path(compute/, compute, namecompute),
]4. 运行项目
在终端切换到manage.py文件所在目录输入以下命令运行项目然后在浏览器中输入“http://127.0.0.1:8000”查看运行结果
python manage.py runserver出现以下结果说明运行成功 注意事项
若计算时遇到问题 0.01s - Debugger warning: It seems that frozen modules are being used, which may0.00s - make the debugger miss breakpoints. Please pass-Xfrozen_modulesoff0.00s - to python to disable frozen modules.0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION1 to disable this validation. 可以尝试在启动 Django 服务时添加 --noreload 参数来解决这个问题。如下所示
python manage.py runserver --noreload这个问题是由于 Django 的自动重载机制导致的自动重载机制会导致 Python 解释器重新加载模块从而导致调试器无法正确地识别断点位置。使用 --noreload 参数可以禁用自动重载机制并避免这个问题的发生。
写在后面
我是一只有趣的兔子感谢你的喜欢
