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做上层应…

vue 渲染函数处理slot_vue render 渲染函数

vue render 渲染函数经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波render函数分析函数式组件基础的使用方式Link.vue// https://github.com/…

理发店管理系统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界面的增强(比如增添新的自定义字段)以…

打桩时不修改源码_考研网上报名点了修改报名,修改后到报名点时,出现部分信息不符合参考条件,请修改或重新报名...

展开全部用户直接填写2113页面底部的黄色显示5261的验证码信息后4102,点击确认1653无误按钮,完成专报名操作,再修改相关信属息即可。但招生单位、考试方式和报考点几项不允许修改,若填写错误,只能再新增一份新的报名信…

ios 图片居中裁剪_[ iOS Shortcuts / Workflow ] 分享一个给照片批量加「底部居中偏上」水印的捷径,可适应不同水印的尺寸...

首先放链接效果示意图捷径特点本捷径的水印位置位于图片底部局中偏上的位置可自适应不同水印的尺寸可多选照片批量操作在加水印操作完成后会弹出预览,完成后点击保存或放弃选择保存后还可选择是否删除原图受益于捷径 app 本身,加水印后的图片分辨率、拍摄…

java检测kafka是否连接成功,kafka代码测试连接

1.发送:package kafka.test;import java.util.Date;import java.util.Properties;import java.util.Random;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessage;import kafka.producer.ProducerConfig;public class KafkaProduct {public …

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

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

PHP调整图片饱和度,window_Win10系统电脑屏幕的饱和度如何调整?,什么是饱和度? 对电脑来说 - phpStudy...

Win10系统电脑屏幕的饱和度如何调整?什么是饱和度?对电脑来说,饱和度是指色彩的鲜艳程度,也称之为色彩的纯度。Win10系统电脑屏幕的饱和度如何调整?很多朋友都不是很清楚,其实方法很简单的,下面小编就为大家详细介绍…

vue加跨域代理静态文件404_vue-cli 设置跨域代理 线上地址报404

vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?vue-cli中跨域代理设置:module.exports {dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/api: {target: https://xxx.xxx-xxx.co…

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

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

hive 配置用户名_配置HiveServer2的安全策略之自定义用户名密码验证

具体从网上看http://doc.mapr.com/display/MapR/UsingHiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication一共提供了三种安全认证方式,我们通常采用的为第三种自定义的方式。To implement custom authentication for HiveServer2, create a custom Auth…

电力系统潮流计算程序 matlab,大神们,求个电力系统潮流计算的matlab程序。

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼ninput(Please input n\n); %n表示系统的节点数d0input(Please input d0\n); %d0表示系统的误差minput(Please inpit m\n); %m表示系统的pq节点的个数p0ones(n-1,1);q0ones(m,1);d1;dpvones(n-1,1);dqvones(m,1);dpzeros(n-1,1);dq…

matlab 数字调制函数,matlab用于数字调制,几个函数的使用问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼help dmodDMODWARNING: This is an obsolete function and may be removed in the future.Please use PAMMOD, QAMMOD, GENQAMMOD, FSKMOD, PSMMODMSKMOD instead.请教FSKMOD中的几个参数应该如何选取!>> help fs…

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

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

image pil 图像保存_使用PIL保存图像

我正在尝试使用PIL保存我从头开始创建的图像newImg1 PIL.Image.new(RGB, (512,512))pixels1 newImg1.load()...for i in range (0,511):for j in range (0,511):...pixels1[i, 511-j](0,0,0)...newImg1.PIL.save("img1.png")我收到以下错误:Traceback(最…

php布尔类型转为字符串,php将布尔值类型转为了字符串类型,比如传入isAnalog:true,处理后isAnalog:true...

传入参数:{"cpid":"111","ipid":0,"pointType":1,"isAnalog":true,"scpid":"","name":"","alias":"","isArchive":false,"rangeLo…

python自动发送邮件不需要发件邮箱_python使用QQ邮箱实现自动发送邮件

最近用到Python自动发送邮件,主要就是三步,登录邮件、写邮件内容、发送,用到的库是 smtplib 和 email,直接使用pip安装即可我使用的是QQ邮箱,首先需要设置QQ邮箱POP3/SMTP服务记住这个授权码,这个授权码就是…

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

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