瞎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看作是界面，把asp\jsp\PHP等看作是后台代码。(最后经过服务器处理后成为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 }}的模板。

web前端学习笔记(python)（一）的更多相关文章

  1. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  2. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  3. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  4. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  5. web前端学习笔记：文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  6. web前端学习笔记（二）---Django

    [前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...

  7. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  8. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  9. Web前端学习笔记之BootStrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

随机推荐

  1. OLAP、OLTP的介绍和比较(转载)

    OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...

  2. CF-1333F Kate and imperfection

    F. Kate and imperfection 假设一个一个的往集合里面放元素,显然在放某个元素之前,我们不想让它的倍数已经在集合里面.因为在这之前,我们不如先把这个数放进去,再把它的倍数放进去更优 ...

  3. SCZ 20170812 T2 MFS

    题面照例十分暴力,我再次重写一下吧-- 题目描述 有\(n\)个数构成的数列\(A\)元素为\(a_i\),你要构造一个数列\(B\),元素为\(b_i\),使得满足\(b_{i}>0,a_{i ...

  4. Codeforces Global Round 8 C. Even Picture（构造）

    题目链接:https://codeforces.com/contest/1368/problem/C 题意 构造一个只含有灰.白块的网格,要求: 所有灰块为一个连通块 每个灰块与偶数个灰块相邻 恰有 ...

  5. python的threading的使用（join方法，多线程，锁threading.Lock和threading.Condition

    一.开启多线程方法一 import threading,time def write1(): for i in range(1,5): print('1') time.sleep(1) def wri ...

  6. 六、Python集合定义和基本操作方法

    一.集合的定义方法及特点 1.特点: (1)由不同元素组成 #集合由不同元素构成 s={1,2,3,3,4,3,3,} print(s)#运行结果:{1, 2, 3, 4} (2)集合无序 #集合无序 ...

  7. Python_小程序（云开发）

    一.云开发API初始化 wx.cloud.init({ env:'test-x1dzi', //环境ID traceUser:true //是否在控制台查看用户信息 }) 二.云开发API初始化-服务 ...

  8. Nginx基础 - 常用模块配置

    1.Nginx状态监控http_stub_status_module记录Nginx客户端基本访问状态信息 location /mystatus { stub_status on; access_log ...

  9. Go语言中时间轮的实现

    最近在工作中有一个需求,简单来说就是在短时间内会创建上百万个定时任务,创建的时候会将对应的金额相加,防止超售,需要过半个小时再去核对数据,如果数据对不上就需要将加上的金额再减回去. 这个需求如果用Go ...

  10. go modules——HelloWorld示例

    go modules--HelloWorld示例 go modules 存在的意义是方便代码的共享(虽然这会使自己开发过程中有一些小小的麻烦) 开发第一步,创建一个github仓库,然后克隆到本地 首 ...