**WebAPP软件技术栈随笔** 记录学习的点滴心得、踩过的坑、趟过的雷。 [TOC] ## 0. Web应用（Web2.0） ### 0.1 B/S架构 Web应用是一种B/S架构（Browser/Server）的软件系统，以用户与系统交互为主，注重业务处理建立的工作平台。 Web2.0时代的动态网站注重的是用户与网站的交互。因为以数据库技术为基础，用户访问网站是通过读取数据库来动态生成网页方式，可以大大减少网站维护的工作量。网站上存在的主要是一些框架基础，网页的内容大都存储在数据库中，页面要根据用户的要求和选择，动态地改变和响应。可实现网站内容的在线更新和管理，还可结合一些应用系统达到特定的交互和管理功能。 - **客户端** 1. Browser。IE（Windows标配）、Chrome、Safari（iOS标配）、Mozilla/Firefox（Linux标配） 2. HTML。HyperText Mark-up Language，超文本标记语言。 3. CSS。Cascading Style Sheets，层叠/级联样式表。 4. 客户端脚本编程语言。JavaScript、VBScript、Applet等。 - **服务器端** 1. Web服务器。Apache、Nginx、TomCat、IIS等 2. 服务器端脚本编程语言。PHP、JSP、ASP等。 3. 数据库管理系统。MySQL、Oracle、SQL Server、MangoDB等 ### 0.2 程序开发语言 大多数网站开发使用的都是脚本语言，涉及2大类编程语言： - **编写客户端界面的语言**：HTML、CSS、JavaScript等。 - **编写服务器端业务流程的语言**：PHP（Zend）、Python、Ruby、ASP（Microsoft）、Perl、Shel、JSP（Sun）等 **脚本语言**：又称为动态语言，是使用一种特定的描述性语言、依据一定格式编写的可执行文件。脚本是一种纯文本（如ASCII码）保存的程序，只在被调用时进行解释或编译。脚本在执行时，是由系统的脚本解释器，将脚本中的文字命令一条一条翻译成机器可识别的指令，并按脚本中的顺序执行。 脚本语言的主要特性如下： - 语法和结果通常比较简单 - 学习和使用通常比较简单 - 通常以容易修改程序的“解释”作为运行方式，不需要“编译”。 - 系统上有相应的语言解释程序就可以做到跨平台。 - 程序的开发产能优于运行效能。 ### 0.3 Web开发标准 Web标准是由万维网联盟W3C（World Wide Web Consortium, http://www.w3.org ）创建于1994年，研究Web规范和指导方针，对Web进行标准化，创建并维护WWW标准。 大约有500名会员加入了W3C，它的主任Tim Berners-Lee 在1989年发明了Web。W3C推行的主要规范有`HTML`、`CSS`、`XML`、`XHTML`和`DOM`等由**浏览器进行解析的Web开发语言**。 W3C还与其他标准化组织协同工作，如IETF（Internet Engineering Task Force, Internet工程工作小组），WAP（无线应用协议），Unicode Consortium（Unicode联盟）。 多年来，W3C把那些没有被部分会员公司（如Netscape和Microsoft）严格执行的规范定义为“推荐”。自1998年开始，“Web标准组织”（www.Webstandards.org ）将W3C的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全支持那些规范。 符合Web标准的网站对于用户和搜索引擎更加友好。Google、百度、Bing等专业搜索引擎都有自己的搜索规则和判断网页等级的技术（网页蜘蛛/爬虫程序）。 网站的优化方向就是：符合标准，符合蜘蛛爬行的标准；符合网站访问者浏览的方便及易用性。 ### 0.4 网络协议 > **HTTP（HyperText Transfer Protocol，超文本传输协议）** HTTP是互联网上应用最为广泛的一种网络协议，所有的WWW文件都必须遵守这个协议/标准。我们今天普遍使用的版本：HTTP1.1，是W3C和IETF合作的结果，在他们发布的RFC2616中进行了定义。 HTTP是Browser或其他程序与WebServer之间的应用层通信协议。 在Internet上，HTTP通信通常发生在TCP/IP连接之上（是一个可靠的传输），默认端口是TCP 80，但也可指定其他端口。是一个客户端请求（request）和服务器端响应（response）的标准。选择TCP协议而不使用UDP协议，原因在于打开一个网页需要传送很多数据，TCP协议可以进行传输控制，按顺序组织数据和进行错误纠正。 **HTTP的信息交互过程** 一般来说HTTP协议的交互过程分为4步： - 客户端（Web浏览器、网络爬虫或其他工具）发起一个到服务器上指定端口（默认为80）的HTTP请求，再建立一个到服务器该端口的TCP连接。 - 客户端发出请求信息。 - 服务器端监听端口，接收请求，返回响应信息。 - 客户端接收响应信息，工具（Web浏览器、网络爬虫等）解析响应信息。客户端断开与服务器的连接。 在上述过程中某一步出现错误，产生的错误信息将返回客户端，由客户端解析/显示。对于网站用户来说，上述过程都是由HTTP自己完成，用户只要点击鼠标，等待信息显示就可以了。 **HTTP中的URL** URL（Uniform Resource Locator），统一资源定位符。 URL的格式为：` HTTP://<IP地址>/[端口号]/[路径][?<查询信息>]` 示例解析： `http://www.brophp.com/book/index.html` * `http://`：代表超文本传输协议，通知brophp.com服务器显示Web页。通常不用输入。 * `www`：代表一个Web（万维网）服务器。 * `brophp.com/`：装有网页的服务器的域名或站点服务器的名称（网站根目录）。 * `book/`：服务器上的子目录（根目录下的子目录）。 * `index.html`：book/目录下的一个HTML文件，也就是网页。 * 如果端口是默认的80可以不写，如果为非80端口就必须写明。 **HTTP的消息头** HTTP规范1.0和1.1（RFC 2616）定义了HTTP消息的格式。HTTP报文由从客户端到服务器的请求（request）消息和从服务器到客户端的响应（response）消息构成。每个消息都由3部分组成：`状态行`、`消息头`、`消息体`。 * HTTP请求消息 HTTP请求消息：从客户端向服务器请求时发送给服务器的消息，服务器根据该request做出相应的处理。每个HTTP请求消息都分为HTTP消息头和HTTP消息体2部分。 ~~~html GET / HTTP/1.1 Host: ipms.com Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Cookie: PHPSESSID=tqd5lbc4qspd8i0laooa0sj7g0; thinkphp_show_page_trace=0|0 ~~~ 解析： 第一行：请求行，必须。三个字段，`方法`、`URL`、`HTTP版本`，每个字段间以空格分隔。`方法`的内容有GET、POST、HEAD。HTTP请求的消息绝大多数用GET方法，是浏览器用来请求对象的方法，所请求的对象就在`URL`字段中标识。`HTTP版本`：“ HTTP/1.1”，浏览器实现的是HTTP1.1版本。 其他行都称为头部行。 Host：存放请求对象的主机。 Connection：发出请求的浏览器要使用持久连接，服务器发出响应后要保持连接。如果为“close”就为非持久连接，服务器发出响应后要关闭连接。 User-Agent：产生当前请求的浏览器类型。服务器可根据不同类型发送同一个对象的不同版本。 Accept-Language：所请求对象的语言版本。若服务器没有这个语言版本，发送默认版本。 * HTTP响应消息 ~~~html HTTP/1.1 200 OK Date: Wed, 23 May 2018 06:26:52 GMT Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.6.26 X-Powered-By: PHP/5.6.26 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 ~~~ 解析： 第一行：状态行，必须。三个字段，`协议版本`、`状态码`、`状态短语`，每个字段间以空格分隔。 其他行都称为头部行。 HTTP响应消息中常见状态消息（[https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status)） | 状态码 | 状态短语 | 解释 | | --- | --- | --- | | 200 | OK | 请求成功。| | 301 | Moved Permanently | 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。 | | 304 | Not Modified | 网页的内容（自上次访问以来或者根据请求的条件）并没有改变。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。 | | 400 | Bad Request | 当前请求无法被服务器理解。 | | 404 | Not Found | 请求失败，请求所希望得到的资源未被在服务器上发现。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。| | 500 | Internal Server Error | 服务器内部错误，服务器遇到了不知道如何处理的情况。 | | 502 | Bad Gateway | 服务器作为网关需要得到一个处理这个请求的响应，但是得到一个错误的响应。 | | 505 | HTTP Version Not Supported | 服务器不支持请求中所使用的HTTP协议版本。 | Date：服务器把请求的对象从其文件系统中取出，插入响应消息中发送出去的时间。不是对象本身创建或最后修改的时间。 Server：服务器的信息。与请求消息中的User-agent作用类似。 Content-Type：指出消息体中的对象的类型。是HTML文本。 ## 1. 开发环境 - **WAMP** - Windows - Apache - MySQL - PHP ## 2. 生产环境 - **LAMP** - Linux - Apache - MySQL - PHP ## 3. IDE/编辑器 - Note++ (Windows) - Ecllipse(Linux,Windows,Android??) - Xcode(iOS??) ## 4. 文档写作语言 - Markdown (后缀为“.md”文件) ## 5. 开发框架 - ThinkPHP 5.x - Spring Boot(JAVA Android??) * Bootstrap * React.js * Vue.js * Node.js * Angular.js ---