学习笔记（一）前后端的基础理论

网页内容是通过服务器运算得出的结果，将结果(网页代码)传输给浏览器，网页代码再通过浏览器运算(计算、渲染)，最终展示在用户的眼前的。

至此，我们知道了有2个运算过程：
1、服务器运算
2、浏览器运算

而让电脑(网站服务器、你的个人电脑)乖乖执行运算，就需要编写程序脚本即程序代码。而编写代码的过程就叫做：编程。编写代码的人叫做：程序员(又戏称：程序猿、攻城狮)。

所以，由运算演变出：
1、服务器运算 -> 服务器脚本
2、浏览器运算 -> 浏览器脚本

在行业内，将 服务器运算 称为 后端；将浏览器运算 称为 前端；后端更靠近服务器，前段更靠近用户，这样比较好记忆。

基础理论

• 访问一个网址的过程
  
• HTML是一种标记语言，在论坛上天机阿德富文本内容（论坛代码）也是一种标记语言
• 如果不加css，页面效果如下图
  
  所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS
• CSS代码的基本格式是

属性：值

• HTML5和XHTML
• JavaScript是做动态效果的，所谓的AJAX是不用刷新就能与服务器进行交互，更新页面
• xml/json（用于数据交互与存储）

xml是可扩展标记语言,通常用于传输和储存数据,相似的还有json.前端和服务器之间通常需要一种双方都认可的格式进行数据的传递和存储。
.xml/json或其他格式指定了数据内容的存储格式,使用该数据的双方只需按照规定的格式写入/读出内容即可完成数据的传输和存储.以json为例,其基本格式为：{标题：内容}，根据这个格式，后台从json文件中读出需要的内容，例如{我是标题：我是要被读出的内容}，并按照这种格式发送给前端，前端通过js等语言对这些内容进行解析即可。前端的一些配置信息，如用户登录名称、性别、网页底色等信息都可以暂存在xml/json文件中,根据需要随时读取.
服务器后台也可将前端需要的数据内容，以xml/json的格式发送给前端，达到数据交互的目的。

• AJAX

这不是一个全新的技术,而是利用已有的js/css/xml等技术达到前端数据及时更新的效果.对用户而言，前端页面的刷新就是点击页面刷新按钮
或者F5实现页面内容的刷新。甚至有很多人不知道页面刷新这个概念……
页面刷新的目的是让页面从新从服务器获取数据，通常是在页面长时间未更新数据，至于多长时间算长，没有定论，几分钟、半小时、n小时都可以说是长时间。例如，门户网站的新闻列表，可能1个小时之内，服务器后台已增加了很多条新的新闻，前端可以通过刷新，从新获取最新的新闻展示在页面上。
再如，网页文字直播NBA篮球比赛，可能后台服务器每几秒就会有一条新的动态，需要用户连续刷新页面内容来获取最新动态。以上的刷新方法是用户手动对整个页面内容进行刷新，针对以上的需求，明显是不合理的，AJAX就是实现了自动更新需要刷新的数据的效果。其基本思路是前端js与后台不断通讯,及时获取前端某部分数据的变化信息,及时进行自动数据获取更新,使用户无需刷新网页即可保持页面数据最新的状态。例如，球赛文字直播、股票实时信息等。

参考以下链接：

https://www.zhihu.com/question/22689579

后端的一些知识

Web Server 和 Web Services

• 浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是 HTTP 协议（超文本传输协议）。

https://mp.weixin.qq.com/s/EiMo8KFWQs3fRi6Gzz3SJw

图解HTTP 常见面试题！亲手绘制！

• AJAX，有点像浏览器和服务器之间的悄悄话~
• 要让形形色色的机器能够通过网络进行交互，我们就需要指明一种协议（比如 HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是这种协议+格式的交流体系。

PHP ，服务器脚本，Web Framework（框架）

• PHP 就是一种常见的用来写服务器脚本的语言，其实只要是能拿来写大家传输数据的通用接口（CGI）的语言都可以用来写服务器脚本（也就是说几乎所有编程语言都可以写 = =b）。
• 为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的 Web Framework 来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。如果你用 C# 或者 Visual Basic 写服务器脚本，就可以用 http://ASP.NET 这个框架实现这些功能，帮你省点麻烦。不过现在不少人是反过来为了一个好用的 Web Framework 去选择它对应的服务器脚本语言的。

一个普通网站访问的过程

• 用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
• 服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
• 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
• Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
• 客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
• 解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
• 浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
• 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
• 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

服务端语言

早年常见的服务器端语言有：

• 开源的 PHP
• Sun 公司的 JSP 中使用的 Java
• 微软的 ASP 中使用的 VBScript

现在火起来的语言：

• Python，对应常见的 Framework 包括知乎和Quora有用到的 Tornado（其实是自带 Framework 的 Web Server），社区很成熟的 Django （用户包括 Instagram、Pinterest）等
• Ruby，一般都用 Rails 这个 Framework，用户包括 Github、早期的 Twitter 等
• 逆天的 JavaScript，有了 Node.js 这个平台，Web Server、服务器脚本和浏览器脚本全都可以用
  JavaScript 来写……Node.js上最常用的 Framework是Express
• 微软家的则跟着 http://ASP.NET 转移到了C# 或者 Visual Basic
• Erlang，擅长大规模的并发，不少游戏公司拿来写服务器，靠几十个工程师支撑几亿用户的WhatsApp也是用的这个~

几种常用的架构

• LAMP = Linux + Apache + MySQL + PHP（P还可能是Python或Perl。有时候L会改成W=Windows。），也就是服务器上的操作系统是 Linux，Web Server 用 Apache，数据库用 MySQL，服务器脚本用 PHP，这些都是开源技术，网站起步时用起来的成本会比较低，所以是普通网站里非常常见的架构（虽然对于发展得很大的网站会遇到很多瓶颈），Facebook就是这种，淘宝也曾经是。
• J2EE，Java 世界的架构，通常是企业用的（银行、大型公司,.etc），比较常见地还会搭配一种 UNIX 做操作系统，Apache 做 Web Server，Tomcat 转换 JSP 到 Java 给服务器程序用（其实它也自带 Web Server），Oracle 数据库等等。不一定拿来建站，常常用来提供企业里的各种需要用到网络的业务。我们学校教务系统就是用J2EE做的=。= 淘宝现在也是从LAMP转型到了这个。
• ASP.NET，微软家的架构，通常会搭配 Windows Server 操作系统，SQL Server 数据库，IIS 做 Web Server。StackOverflow和京东（曾经）就是这个架构。
• 神奇的MEAN架构，MongoDB做数据库，Express做 Web Framework，Angular 做前端的 JavaScript 框架，Node.js 用于编写 Web Server。神奇之处在于这几个东西的语言都是 JavaScript （MongoDB的实现不是，但与外界沟通用的语言是）。因为是比较新的架构，还有待时间的考验，不过被很多人（尤其是靠 JavaScript 吃饭的前端程序猿们）热切关注。
• 一般来说重点不在技术而且在乎成本的新网站比较喜欢用 LAMP，重视安全稳定和速度的企业和机构喜欢 J2EE，想省事的网站喜欢 http://ASP.NET，比较 Geek 的网站和创业公司喜欢折腾各种 Python、Ruby、Node.js世界的东西，Google 这样现成的技术都解决不了需求的超大型网站就自己折腾解决方案。

前端后端数据库的关系

然后这一整套体系，有前端(表示层)、有后端(逻辑层)、有数据库(存储层)，一个独立的网站就开始运作了。

总结

1、初步了解了前后端关系，并且看到前端可以做出那么多好看的网页，对前端的兴趣愈发浓厚。

http://2014.artsy.net/ https://codepen.io/Yakudoo/full/rJjOJx
https://codepen.io/pissang/full/geajpX
https://codepen.io/tsuhre/full/BYbjyg
https://wangyasai.github.io/Stars-Emmision/
https://pissang.github.io/papercut-box-art/
https://demo.marpi.pl/biomes/
https://pissang.github.io/voxelize-image/
http://echarts.baidu.com/examples/index.html#chart-type-globe
https://tympanus.net/Development/AudioVisualizers/（推荐戴耳机）

2、使用codepen修改已经建好的页面，感受良好。
3、学习到的知识：

• 阅读了一些网站，了解了一些基本概念和知识，对于HTTP超文本传输协议有了更深的理解。可以把HTTP看做是两个机器进行交互，传输超文本的一种统一语言规范，其中超文本指的是超越普通文本，可以是文字、图片、视频等的混合体。HTTPS是在HTTP基础上增加了“加密”处理，使得HTTPS的安全性更高。
• 访问一个普通网站的过程
• 前端后端和数据库的关系，后端要和数据库打交道，将获得的信息传递给前端，而前后端用于传输数据的语言是xml/json

4、 还需要加强的知识：

• HTTP的常见字段
• 五大类HTTP常见的状态码
• DNS的概念
• 申请一个github账号
• 下载安装一个开发工具
• 申请一个Codepen账号
• 开一个博客，写今天的学习笔记