pythonweb全栈开发_Web全栈开发穿插路程(python+js)

简介:

穿插路程,是指快去快回,来去一阵风,走的快,走马观花,没有细品。细品那就要慢慢熬功夫喽。

1.完成后的效果是:

用户访问入口页面,录入信息,提交后结果以逐步添加的形式展现在页面上,可以对历史输入信息进行再次快捷录入。

4011b09d9fbf0c866cac05e15fc1766e.png

2.技术结构为:后端采用python-django,前端采用原生js,使用ajax方式交互

处理流程为:用户访问入口页面时,django返回一个页面,用户在页面上录入数据提交后,django不再返回一个页面,而是返回JSON格式的数据,此时前端页面展示只做部分刷新。

其他:前端页面只有结构,没有CSS效果。JS实现AJAX异步提交、页面部分加载、历史信息快捷录入功能。后端django没有业务处理代码,没有持久化层,只是将输入获取到后转换为JSON格式返回。

框架介绍

前端后端的划分,是一个逻辑上的划分,也是一个物理上的划分。

逻辑上的划分在于,物理上前端后端的代码是在一起的,所谓在一起,是指他们物理上都存储在后台服务器上,用户的一切操作从浏览器获取后台的入口页面开始。因为物理上在一起,所以我们说是从逻辑上划分出前端和后端。

物理上的划分在于,后端返回页面或数据后,前端的执行在用户的浏览器侧,前端提交数据到后台后,业务的执行在后端服务器侧。物理上是分开的。

334e6a0831ba1d01910b0bdd0b930500.png

django的WEB框架叫做MTV,不是K歌的MTV,是Model-Template-View。这里不涉及Model,模板语言也没有使用,所以只说一下View,View是视图,和我们普遍理解的视图不一样,而是和数据库里的视图概念类似,可以理解为在后端决定如何返回数据,而不是前端决定如何展示。另外还有一个很重要的框架功能,路由,却没有出现在MTV这个名称里。

从后台开始

先安装好django模块,然后新建项目p1和应用a1

python -m django startproject p1

cd p1

python manage.py startapp a1

mkdir a1/templates

得到项目结构

b292e64136dd9c0867c4be6e6d3d4b19.png

可以看到项目内有全局路由(p1/urls.py),应用内有V(a1/views.py)和M(a1/models.py),T我们手工建立了目录(a1/templates)

完成后台的代码;配置模板目录、静态文件目录;配置路由,就简单的在全局路由里配置了

这里只放一个后台代码图:当访问路径/hei时,返回页面;访问/hei/ha时,返回JSON数据

92803ece313c725392e89f9f021d7b30.png

到前端结束

前端文件都放在模板目录里,有HTML页面文件、JS文件

HTML页面文件简单定义页面结构,输入部分,和输出表格部分

JS文件,实现输入后的异步提交(从雨神老师的WEB全栈里学的AJAX方法),以及使用历史消息快捷录入(自己琢磨写的)

首先设置按钮的提交函数:获取输入值,定义对ajax返回数据进行回调处理的函数,调用ajax函数,定义ajax函数

回调函数里,新增一个表格行,用返回数据填充前二列,第三列新建一个按钮,定义它的点击事件处理函数。

点击事件处理函数里,获取事件发生对象的前面二列的值,赋值给输入框

4269ce684eb16100b0d3449d0e6be5f4.png

代码可能比较不美,但是,都是自己手敲出来的。见附件。

在chrome上测试过(已知在IE8上有JS兼容性问题,当然是自己写的部分不太好啦)

使用CloudIDE,省事。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/503890.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++和Rust_Kotlin、Rust两个充满了骚操作的编程语言,值得一玩

Kotlin和Rust都是两个年轻的编程语言,而且相比现在流行的Python、JavaScript/Typescript语言来说,Kotlin和Rust更接近底层,对于学习理解计算机原理,学习Kotlin和Rust应该是更好的选择。与C/C相比,Kotlin、Rust做上层应…

理发店管理系统java_美容美发店管理系统的设计与实现(JSP,SQLServer)(含录像)

美容美发店管理系统的设计与实现(,SQLServer)(含录像)(开题报告,论文12700字,程序代码,SQLServer数据库)系统功能结构本系统是根据我国美容业的现状及中小型美容院的发展需要进行详细的分析, 对美容院信息管理系统进行合理的设计, 实现集成员工管理、工资…

cpu频率_新版win10修复CPU频率显示不正确的bug

在此前win10 2020年5月更新后,有用户反馈win10任务管理器无法正确显示CPU使用率和频率,比如会出现CPU频率为0.00GHz。现在有外媒报道,微软在win10测试版19042.608中修复了CPU频率显示不正确的bug。这一消息也得到了微软的确认表示已经修复了某…

sap fiori导出列表到excel_介绍一种Fiori标准应用的增强方式

2015年,Jerry还在SAP成都研究院CRM Fiori开发团队工作时,担任了德国一个著名的灯具制造商客户的CRM Fiori项目的dev angel. 当时客户提出了若干对CRM Fiori标准应用的增强需求,总的来说分为前台Fiori UI界面的增强(比如增添新的自定义字段)以…

电脑ip地址设置_路由器动态IP和静态IP上网方式怎么设置【设置教程】

在我们设置路由器的过程中,路由器设置界面一般会给我们提供4种上网方式选项,分别是:“让路由器自动选择上网方式(推荐)”、“PPPoE(ADSL虚拟拨号)”、“动态IP(以太网宽带,自动从服务商获取IP地址)”、“静态IP(以太网宽带&#x…

钉钉关键字回复功能_在家办公首日:钉钉、企业微信集体“崩溃”,只能选择 QQ、微信...

今日是春节假期结束后的第一个工作日,不少企业规定2月3-7日可以在家远程办公。不过尴尬的是,今日上午,钉钉、企业微信等在线办公App集体出现问题。不少网友反馈钉钉出现Bug,“不知道大家工作的怎么样,我的钉钉刚才一直…

python决策树 value_机器学习 | 算法笔记(四)- 决策树算法以及代码实现

概述上一篇讲述了《机器学习 | 算法笔记(三)- 支持向量机算法以及代码实现》,本篇讲述机器学习算法决策树,内容包括模型介绍及代码实现。决策树决策树(Decision Tree)在机器学习中也是比较常见的一种算法,属于监督学习中的一种。看字面意思应…

监听手指是否离开屏幕android_Flutter事件监听

一. 事件监听 在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击、手指滑动、双击、长按等等。所有内容首发于公众号:coderwhy在Flutter中,手势有两个不同的层次:第一层:原始指针事件&#…

@excel注解_Excel导入导出Java解决方案推荐

今天锋哥介绍一款Excel导入导出Java解决方案Easy-POI,以前我们用POI,麻烦点,Easy-POI是封装好的,用起来Easy点,封装过,性能好,所以大伙有空可以研究下;Easy-POIEasy-POI是一款Excel导…

wind 下装mysql,windows 下安装MySQL

下载压缩包首先到官网下载安装包,可联系提供配置环境变量找到系统属性(windows10在高级系统设置)在这里插入图片描述找到系统变量的 Path 点击编辑在这里插入图片描述点击新建,然后添加进去自己压缩包位置的bin目录在这里插入图片描述之后点击三个确当 (同时自动关闭…

打开word2007总是出现配置进度_实战经验:Word 2007每次打开都弹出正在配置

在一次清理注册表之后,发现每次打开Word 2007时,都会弹出”正在配置”的对话框。经过实验,发现可以使用如下的方法解决此问题:1) 打开cmd命令行2) 对于Word 2007,执行如下的指令:reg add HKCUSoftwareMicro…

chrome github上不去 mac_码农大叔打赌,github上快速搜索优质开源项目,这些技能你不懂?...

GitHub的流行, GitHub在开源世界的受欢迎程度自不必多言。再加上今天,GitHub官方又搞了个大新闻:私有仓库也改为免费使用,这在原来可是需要真金白银的买的。可见微软收购后,依然没有改变 GitHub 的定位,甚至…

matlab保存数据到excel_Excel意外退出数据未保存?这个方法可以帮你找回所有数据...

老师们每天都需要完成大量的教学工作,且他们的每一个工作都是跟文字或数据打交道,Excel也逐渐成为了大家日常办公中的必备软件。在利用Excel办公时,通常是这么一个操作流程——新建、编辑、保存。编辑的时间可能是几分钟,也可能是…

c 调用matlab文件路径,C/C++下调用matlab函数操作说明

1.matlab的安装连接:http://pan.baidu.com/s/1qXuF7aO安装32位版本的matlab(在目录下bin文件夹中有两个文件夹,选择win32文件夹下的setup进行安装)2.matlab mex编译器配置安装完matlab之后,需要设定对应的c编译器才能编译.m文件生成可供c调用…

linux tomcat环境变量配置_Tomcat

Tomcat介绍1.Web服务器介绍Web服务器可以解析HTTP协议,收到请求后可以进行响应,比如响应静态资源、进行页面跳转等Web服务器响应可委托给CGI脚本、JSP脚本、ASP脚本、服务器端JS等程序或其它服务器端技术Web服务器通常产生一个html响应以便浏览器浏览2.常…

一直未运行_【直击一线】延一转三相分离器投运成功,盘活全区生产运行一盘棋...

喜 讯4月30日上午17点30点,新安边作业区延一接转注水站上新更换的三相分离器一次投运成功,这个好消息不胫而走传遍了全区收获获赞声一片,这也是对连日来奋战在施工作业现场的新安边人最大的褒奖。 延一接转注水站全貌延一接转注水站是新安边…

python字符串长度_在python中如何获取字符串的长度

python中如何获取字符串的长度?本篇文章就给大家介绍4种在python中计算并输出字符串长度的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 Python中的字符串是Unicode代码点的不可变序列。给定一个字符串&#xff0c…

oracle rowed,oracle bitmap索引内部揭密,欢迎补充

位图(bitmap)索引是另外一种索引类型,它的组织形式与B树索引相同,也是一棵平衡树。与B树索引的区别在于叶子节点里存放索引条目的方式不同。从前面我们知道,B树索引的叶子节点里,对于表里的每个数据行,如果被索引列的值…

asp.mvc 4项目发布文件目录结构_Spring Boot项目搭建与启动

Spring Boot简介Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Spring Boot致力于在蓬勃发…

windows7系统适合哪个python_Python3.6.4在Windows7系统下安装配置教程

Python3.64在Windows7系统下安装配置教程 工具/原料 Windows7系统 python3.6.4版本 方法/步骤 1 双击应用程序打开如图所示的界面这里是应用程序向导界面 这里建议勾选底部的自动写入path,然后点击自定义选项(如图)(当然你也可以选…