2-3实战项目（在线Web计算器）_第1页
2-3实战项目（在线Web计算器）_第2页
2-3实战项目（在线Web计算器）_第3页
2-3实战项目（在线Web计算器）_第4页
2-3实战项目（在线Web计算器）_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实战项目：在线Web计算器教材第2章·2.12项目目标与场景在掌握了Python基础与Web前端技术后，我们将这些离散的知识点熔铸于一个完整的实战应用中，打通前后端交互的全链路。🎯知识融合将教材2.1至2.11节的Python语法、HTML布局、CSS样式与JS交互逻辑有机整合，构建完整的Web应用。🧮交互流程用户在前端点击按钮输入表达式，通过网络请求发送至后端，FastAPI计算后返回结果并在屏幕显示。📏严格规范严格遵循教材2.12节定义的目录结构与代码实现，保持工程规范性，为后续大型项目打下严谨基础。目录结构总览在开始编码之前，首先构建清晰的项目骨架，分离静态资源、模板与应用代码。📂核心组成static/

存放CSS、JS等静态资源文件templates/

存放index.html等前端模板main.py

FastAPI应用入口与路由定义project_root/├──static/│└──bootstrap/│├──css/││└──bootstrap.min.css│└──js/│└──bootstrap.bundle.min.js├──templates/│└──index.html└──main.py模板与渲染前端页面通过模板文件承载，后端负责配置渲染引擎，二者协同工作。UI结构templates/index.html作为用户交互的唯一入口引入Bootstrap构建布局包含容器(Container)、卡片(Card)与网格(Grid)渲染配置main.py使用Jinja2Templates引擎指定目录directory="templates"通过TemplateResponse返回页面templates=Jinja2Templates(directory="templates")静态资源与挂载本地化管理静态资源能提高应用的加载速度与稳定性，我们需要正确配置其挂载路径。📦资源组织将Bootstrap下载到本地，避免外部CDN依赖。/static/bootstrap/css/

bootstrap.min.css/static/bootstrap/js/

bootstrap.bundle.min.js🔗代码挂载在main.py中配置静态文件服务：fromfastapi.staticfilesimportStaticFiles#...app.mount("/static",StaticFiles(directory="static"),name="static")index.html：head区域Head区域定义了页面的元数据与样式引用，是响应式布局的基石。<head><metacharset="UTF-8"><!--移动优先的关键设置--><metaname="viewport"content="width=device-width..."><title>在线Web计算器</title><!--引入本地BootstrapCSS--><linkrel="stylesheet"href="/static/bootstrap/css/..."></head>关键配置Viewport设置确保页面宽度跟随设备屏幕宽度，实现移动端适配。CSS引用指向/static路径下的本地Bootstrap文件，而非外部CDN链接。index.html：容器与卡片利用Bootstrap的经典组件结构，快速搭建出计算器的主体框架。.container.card.calculator.card-body（承载显示屏与按钮）<divclass="container"><divclass="cardcalculator"><divclass="card-body"><!--内容区域--></div></div></div>显示屏控件设置显示屏是一个禁用的输入框，用于展示用户的输入表达式及计算结果。12+56_显示屏效果预览⚙️关键属性id="display"JavaScript获取元素的唯一标识。class="form-controlform-control-lg"Bootstrap样式，lg表示大号控件，显示更清晰。disabled禁用键盘输入，强制用户通过点击按钮交互。按钮区域网格合理的布局将按钮区分为两大功能块，使用网格系统轻松实现对齐与间距控制。.row.gx-2.mt-3.col-9数字/功能区.col-3运算区📐布局逻辑GridGap(gx-2)设置水平方向的列间距，避免按钮紧贴，增加呼吸感。MarginTop(mt-3)在按钮区顶部增加外边距，与上方的显示屏拉开视觉距离。9:3黄金比例左侧占据3/4宽度容纳密集按键，右侧1/4放置主要操作符。左侧按钮布局利用row-cols-3属性，让12个按钮自动整齐排列，无需手动计算宽度。C/789...自动换行排列...✨实现细节class="rowrow-cols-3"父容器设置，强制子元素每行显示3个，自动换行。btn-secondary灰色背景，用于第一行的功能键(C,/,*)，区分层级。btn-light浅色背景，用于数字键，突出内容主体。右侧按钮布局利用Flexbox的强大能力，轻松实现非等高按钮的垂直对齐与填充。-+=自适应填充🚀Flexbox魔法d-flexflex-columnh-100启用垂直方向的Flex布局，并强制高度占满父容器（与左侧等高）。flex-grow-1应用于(+)和(=)按钮，使它们自动伸展，平分剩余垂直空间。btn-primary为等号设置主色调（蓝色），强调它是最终触发计算的关键动作。自定义样式要点Bootstrap提供了坚实的基础，而自定义CSS则赋予了计算器独特的拟物风格与交互体验。body{/*浅灰背景突出卡片*/background-color:#f0f2f5;}.calculator{/*悬浮立体阴影*/box-shadow:08px16pxrgba(...);max-width:400px;}.btn{/*增大触控面积*/height:80px;font-size:1.5rem;}🎨设计意图沉浸式背景使用#f0f2f5浅灰色背景，避免纯白背景的刺眼，同时让白色计算器卡片形成鲜明对比。拟物化阴影通过较深的box-shadow营造悬浮感，模拟真实计算器的物理存在。移动端适配将按钮高度设为80px并增大字号，确保在手机屏幕上也能轻松点击。引入Bootstrap脚本遵循最佳实践，在页面底部引入脚本，确保页面渲染不受阻塞。<!--放在body标签结束前--><scriptsrc="/static/bootstrap/js/bootstrap.bundle.min.js"></script>Bundle版本内含Popper.js，支持下拉菜单等交互组件。本地引用路径指向/static，不依赖外部网络。底部加载优先显示HTML内容，提升首屏速度。JS交互框架前端脚本的核心任务是监听用户的每一次点击，并根据按钮内容分发处理逻辑。//1.获取DOM元素constdisplay=document.getElementById('display');constbuttons=document.querySelectorAll('.btn');//2.批量绑定事件buttons.forEach(button=>{button.addEventListener('click',()=>{consttext=button.textContent;//3.业务分支...});});⚡逻辑流Select使用querySelectorAll('.btn')选中页面上所有按钮。Listen遍历按钮集合，为每一个按钮添加click监听器。Dispatch获取被点击按钮的文本内容，进入if/else分支判断。事件分支：清空与追加基础交互逻辑：处理用户输入与重置操作，构建数学表达式。constbuttonText=button.textContent;if(buttonText==='C'){//1.清空逻辑display.value='';}elseif(buttonText==='='){//(下一页讲解计算逻辑)}else{//2.追加字符display.value+=buttonText.trim();}🔘逻辑分支Clear(C)重置输入框的值为空字符串，允许用户重新开始。Append(Other)将数字和运算符依次拼接到display.value后，形成完整的数学表达式字符串。注：使用trim()去除可能存在的空白。事件分支：触发计算当表达式构建完成，等号键不仅意味着结束输入，更触发了与后端的关键交互。elseif(buttonText==='='){//仅当显示屏有内容时才发送请求if(display.value){sendForCalculation(display.value);}}1.Check验证display.value是否非空。2.Call调用异步函数执行fetch请求。sendForCalculation实现使用现代FetchAPI发起异步请求，实现无刷新计算体验。asyncfunctionsendForCalculation(expression){constresponse=awaitfetch('/calculate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({expression})});constdata=awaitresponse.json();if(data.error)display.value=data.error;elsedisplay.value=data.result;}📡关键实现Method:POST向/calculate接口发送数据。Content-Type声明发送的是JSON格式数据。Async/Await优雅处理异步网络请求，等待结果返回后再更新UI。main.py：应用与静态/模板后端服务的基石：初始化FastAPI应用，挂载资源，配置模板引擎。app=FastAPI()#挂载静态文件app.mount("/static",StaticFiles(directory="static"),name="static")#配置模板引擎templates=Jinja2Templates(directory="templates")🛠️初始化配置StaticFiles使/static路径可被访问，服务于CSS和JS文件。Jinja2Templates绑定templates目录，为后续渲染HTML页面做好准备。main.py：模型与首页定义数据规范，并设置应用的入口路由。📦数据模型classCalculationRequest(BaseModel):expression:str使用Pydantic确保前端传来的数据包含字符串类型的expression字段，自动处理数据校验。🏠首页路由@app.get("/")asyncdefread_root(request:Request):returntemplates.TemplateResponse("index.html",{"request":request})当用户访问根路径时，渲染并返回index.html页面。main.py：计算路由核心业务逻辑：接收表达式，执行计算，并安全地返回结果。@app.post("/calculate")asyncdefcalculate(data:CalculationRequest):try:#核心计算result=eval(data.expression)return{"error":"","result":str(result)}exceptException:return{"error":"无效的表达式","result":""}⚡执行流程Execute使用Python内置的eval()函数解析并执行字符串表达式。Catch捕获所有异常（如除以零、语法错误），防止服务崩溃。Response返回统一结构的JSON对象，包含result或error字段。运行与验证完成所有代码编写后，启动服务并访问页面，见证全栈应用的即时反馈。$uvicornmain:app--reloadINFO:Uvicornrunni

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论