Python Web 开发 – 在线web计算器

本文环境：
Python—3.10.2
Visual Studio Code—1.65.2
Django—4.0.3
Bootstrap—5.1.3
jQuery—3.6.0

##1. 创建项目
###1）新建文件夹(code)用以存放VS Code项目，打开Visual Studio Code，点击File->Open Folder,选中建好的文件夹(code)。跳转至VS Code后，点击Terminal->New Terminal,在命令行输入:

###2）浏览器访问http://127.0.0.1:8000/，查看是否正常：

##2. 配置并访问页面
###1）在app文件夹下新建子文件夹（templates）,并打开文件夹（templates）继续新建index.html文件。

###2）打开项目配置文件夹（compute）,找到settings.py文件，用Visual Studio Code打开，修改代码，将app导入工程并开放访问权限：

###3）打开文件夹（compute）下的子文件夹（app）, 找到views.py文件，用Visual Studio Code打开，修改代码，创建视图处理函数：

###4）打开项目配置文件夹（compute）,找到urls.py文件，用Visual Studio Code打开，修改代码，配置访问路由：

##3. 导入Bootstrap前端框架
###1)浏览器进入Bootstrap官网 https://getbootstrap.com/，下载Bootstrap中CSS和JS文件的压缩包,并解压：

###2)在compute项目的（app）文件夹下新建（static）子文件夹，然后将Bootstrap中解压后的css和js文件夹复制到（static）文件夹下。

###3）打开jQuery地址：https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js,按Ctrl+S组合键保存为jquery.min.js，并存放在所建static目录下的（js）子文件夹中：

###4）编辑index.html文件，引用Django中的静态文件，并测试效果：

##4. 设计前端页面和交互逻辑
###1）制作计算器前端界面，完善index.html中的部分：

###2)在css文件夹中新建style.css文件用以美化界面，用Visual Studio Code编辑（提前在(img）文件夹下准备一张背景图片bg.jpg)，并启动项目查看效果：

###3）设计逻辑功能，控制两个文本框中的数据显示，并实现清空功能，在index.html文件中末尾添加JavaScript代码：

###4）完善逻辑实现计算功能，采用Ajax提交数据并更新结果，在末尾添加代码：

##5. 开发后端计算模块
###1）编写执行计算的视图处理函数，用Visual Studio Code编辑（app）文件夹中的views.py文件，修改代码：

###2）对访问路由urls进行配置，用Visual Studio Code编辑（compute）文件夹中的urls.py文件，修改代码：

###3)运行项目查看效果：

Python Web 开发 – 在线web计算器相关推荐

高性能WEB开发(6) - web性能测试工具推荐
Posted on 2010-04-28 12:57 BearRui(AK-47) 阅读(9341) 评论(14) 编辑收藏所属分类: 高性能WEB开发本来这篇文章应该在写在前面的,因本人写 ...
MyEclipse教程：Web开发——创建Web片段项目
MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载本教程向用户展示了使用关联的Web项目创建Web片段项目的机制. 用户还可以获得要检查的示例项目. 在 ...
pythonweb项目源码下载_最新Python WEB开发在线教育项目之谷粒教育软件源码齐全...
[课程内容]项目准备 01.根据模板页面抽象app 02.app当中模型类(表)的抽象(1) 03.app当中模型类(表)的抽象(2) 04.项目的创建和配置 05.创建其余app配置子路由,创建自主 ...
Python后台开发基础——Web前端基础
1 Html 1.1 Html介绍 HTML是 HyperText Mark-upLanguage 的首字母简写,意思是超文本标记语言, HTML不是一种编程语言,而是一种标记语言超文本指的是超链接 ...
web开发在线，CSS定位
阿里中间件高级技术专家钟华.高级技术专家泠茗.中间件技术专家玄难,在公开分享和访谈中提到阿里技术中台建设实践,包括:技术中台.移动中台.业务数据双中台.研发中台.组织中台等等. 本文整理了其中的 ...
python可以开发web程序吗_【分享|python部署开发的web程序有9种方法】- 环球网校...
[摘要]当今世界充满了各种数据,而python是其中一种的重要组成部分.然而,若想其有所应用,我们需要对这些python理论进行实践.其中包含很多有趣的的过程,然后将其用于某些方面.其中python部 ...
11款有用的Web开发在线工具
作为Web开发者,我发现我非常依赖于一些在线工具.在线工具通常是易于创建和使用,并且可以使工作表现的更好.更快. 比如htaccess generator.JSON formatter.以下是我分享的 ...
web开发在线培训，前端英文自我介绍
1 transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...

Python Web 开发 – 在线web计算器

Python Web 开发 – 在线web计算器

Python Web 开发 – 在线web计算器相关推荐

最新文章

热门文章