web前端学习笔记(python)(一)

瞎JB搞】感觉自己全栈了,又要把数据库里面的内容,以web形式展示出来,并支持数据操作。占了好多坑。。。。。慢慢填(主要参考廖雪峰的官网,不懂的再百度)

一、web概念

  Client/Server模式简称CS架构,就是本地需要下载一个客户端的。随着互联网的兴起CS架构不适合Web,最大的原因是Web应用程序的修改和升级非常迅速,而CS架构需要每个客户端逐个升级桌面App,因此Browser/Server模式开始流行,简称BS架构。在BS架构下,客户端只需要浏览器,应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器,获取Web页面,并把Web页面展示给用户即可。而且服务器端升级后,客户端无需任何部署就可以使用到新的版本。如此,web可以第一时间得到用户的请求,在提供基础应答时还可以做出针对性服务。这就涉及到推荐系统了,人工智能。

二、js、jsp、html

  HTML(Hypertext Markup Language)是文本标记语言,它是静态页面。是一种解释性语言,所谓解释性语言就是指可以在浏览器上显示出来,不需要编译工具的言。所有的网页最终显示的都是HTML代码,我们现在所看到的网页都是静态页面,都是由HTML组成的。任何的动态语言都不能脱离HTML而单独存在于一个网站上,因为没有静态的页面显示,无法给用户返回数据。

  JSP(Java server page )是通过java语言实现的,是Java语言的一种使用方式,从其英文全称就可以看出它是Java服务器端页面,所以是动态页面。需要经过JDK编译后发送给客户端显示。

        JS(javaScript) 是一种脚本语言。可以以<script>  code </script>的形式混合在HTML页面中,使页面产生动态效果。

1 <html>
2 <head>
3   <title>Hello</title>
4 </head>
5 <body>
6   <h1>Hello, world!</h1>
7 </body>
8 </html>

上面就是最简单的html语言,包含head和body两部分。保存hello.htlm拖入浏览器就会自动加载,显示“Hello,world!”

HTML文档就是一系列的Tag组成,最外层的Tag是<html>。规范的HTML也包含<head>...</head><body>...</body>注意不要和HTTP的Header、Body搞混了

   差异比较

  1.javaScript是脚本语言,像c,java一样,具有逻辑功能;而html是标记语言,没有逻辑功能;

  2.javaScript的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。

  3.JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

  4.JavaScript是依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并且浏览器支持javaScript,就可以正确执行。

  5.javaScript是区分大小写的,而html不是很严格;

       6、jsp是在java服务器端编译好传给页面,全名为Java Server Pages,中文名叫java服务器页面,是动态语言,它是在传统的网页HTML(标准通用标记语言的子集)文件(.htm,.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为(*.jsp)。需要先编译成servlet程序,再编译成servlet字节码(.class文件),再动态生成HTML页面返回给客户端(浏览器)。jsp只能发布在Tomcat等其它的Servlet容器上才能打开。 

  可以把HTML看作是界面,把aspjspPHP等看作是后台代码。(最后经过服务器处理后成为html代码呈现在用户眼前)

三、Web客户端和服务器通信HTTP

  HTTP协议:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432011939547478fd5482deb47b08716557cc99764e0000

  1、在浏览器很方便地调试我们的Web应用,HTTP响应由headers和body组成。headers主要是请求信息,element是网页结构,network是通信的数据包;body就是HTML源码,浏览器读取到新浪首页的HTML源码后,它会解析HTML,显示页面。然后根据HTML里面的各种链接,再发送HTTP请求给新浪服务器,拿到相应的图片、视频、Flash、JavaScript脚本、CSS等各种资源,最终显示出一个完整的页面。所以我们在Network下面能看到很多额外的HTTP请求。这些请求都是解析html自动触发的。

  2、HTTP请求顺序

  跟踪了新浪的首页,我们来总结一下HTTP请求的流程:

步骤1:浏览器首先向服务器发送HTTP请求,请求包括:

  方法:GET还是POST,GET仅请求资源,POST会附带用户数据;

  路径:/full/url/path;

  域名:由Host头指定:Host: www.sina.com.cn

  以及其他相关的Header;

  如果是POST,那么请求还包括一个Body,包含用户数据。

步骤2:服务器向浏览器返回HTTP响应,响应包括:

  响应代码:200表示成功,3xx表示重定向,4xx表示客户端发送的请求有错误,5xx表示服务器端处理时发生了错误;

  响应类型:由Content-Type指定;

  以及其他相关的Header;

  通常服务器的HTTP响应会携带内容,也就是有一个Body,包含响应的内容,网页的HTML源码就在Body中(html里面又包括head和body)。

步骤3:如果浏览器还需要继续向服务器请求其他资源,比如图片,就再次发出HTTP请求,重复步骤1、2。

  Web采用的HTTP协议采用了非常简单的请求-响应模式,从而大大简化了开发。当我们编写一个页面时,我们只需要在HTTP请求中把HTML发送出去,不需要考虑如何附带图片、视频等,浏览器如果需要请求图片和视频,它会发送另一个HTTP请求,因此,一个HTTP请求只处理一个资源。

  HTTP协议同时具备极强的扩展性,虽然浏览器请求的是http://www.sina.com.cn/的首页,但是新浪在HTML中可以链入其他服务器的资源,比如<img src="http://i1.sinaimg.cn/home/2013/1008/U8455P30DT20131008135420.png">,从而将请求压力分散到各个服务器上,并且,一个站点可以链接到其他站点,无数个站点互相链接起来,就形成了World Wide Web,简称WWW。

四、web应用的本质

    由上分析总结: Web服务最基本的模型,通过socket和HTTP协议,提供Web服务。http属于tcp/ip的应用层,我们从应用层开始。

  1. 浏览器发送一个HTTP请求;

  2. 服务器收到请求,生成一个HTML文档;

  3. 服务器把HTML文档作为HTTP响应的Body发送给浏览器;

  4. 浏览器收到HTTP响应,从HTTP Body取出HTML文档并显示。

  5. 浏览器解析html,里面可能会包含其他的请求,比如图片,音乐,等等。

五、WSGI接口及基于此的流行框架(WSGI-->框架-->MVC)

  1、WSGI是一个统一的接口,让我们专心用Python编写Web业务,无需考虑http请求通信的底层。最简单的本质就是写一个一个WSGI的处理函数,针对每个HTTP请求进行响应。http://django-practice-book.com/chapter2/section2.html   接口的定义:

1 def application(environ, start_response):
2     method = environ['REQUEST_METHOD']
3     path = environ['PATH_INFO']
4     if method=='GET' and path=='/':
5         return handle_home(environ, start_response)
6     if method=='POST' and path='/signin':
7         return handle_signin(environ, start_response)
8     ...

  2、如何处理HTTP请求不是问题,问题是如何处理100个不同的URL。每一个URL可以对应GET和POST请求,当然还有PUT、DELETE等请求,但是我们通常只考虑最常见的GET和POST请求。一个最简单的想法是从environ变量里取出HTTP请求的信息,然后逐个判断:(上面代码)

  如果仍然代码这么写没法维护的原因是因为WSGI提供的接口虽然比HTTP接口高级了不少,但和Web App的处理逻辑比,还是比较低级,我们需要在WSGI接口之上能进一步抽象,让我们专注于用一个函数处理一个URL,至于URL到函数的映射,就交给Web框架来做。

  常见框架:

  • Django:全能型Web框架;http://django-practice-book.com/chapter2/section2.html

  • web.py:一个小巧的Web框架;

  • Bottle:和Flask类似的Web框架;

  • Tornado:Facebook的开源异步Web框架。

  3、MVC。基于框架,我们不可能手把手写那么多html语言(看着就繁琐),我们可以使用模板。MVC是python和html编写的一种方式,比较出名的模板比如jinjia2。

      参考链接:https://www.cnblogs.com/diyunfei/p/6752618.html

  • M全拼为Model,主要封装对数据库层的访问,对数据库中的数据进行增、删、改、查操作。

  • V全拼为View,用于封装结果,生成页面展示的html内容。

  • C全拼为Controller,用于接收请求,处理业务逻辑,与Model和View交互,返回结果。

  

  MVC举例一:

  最典型的MVC就是jsp+servlet+javabean模式。

  1. JavaBean作为模型,既可以作为数据模型来封装业务数据,又可以作为业务逻辑模型来包含应用的业务操作。其中,数据模型用来存储或传递业务数据,而业务逻辑模型接收到控制器传过来的模型更新请求后,执行特定的业务逻辑处理,然后返回相应的执行结果。
  2. JSP作为表现层,负责提供页面为用户展示数据,提供相应的表单(Form)来用于用户的请求,并在适当的时候(点击按钮)向控制器发出请求来请求模型进行更新。
  3. Serlvet作为控制器,用来接收用户提交的请求,然后获取请求中的数据,将之转换为业务模型需要的数据模型,然后调用业务模型相应的业务方法进行更新,同时根据业务执行结果来选择要返回的视图。
  • Mako:用<% ... %>${xxx}的一个模板;

  • Cheetah:也是用<% ... %>${xxx}的一个模板;

  • Django:Django是一站式框架,内置一个用{% ... %}{{ xxx }}的模板。

原文地址:https://www.cnblogs.com/huangfuyuan/p/9366954.html