其他

我目前对Web开发的一些认知

最早，我从一个讲解电脑软件知识的杂志上看到的一篇文章，讲的是1元建站，心中植下了也要搞一个网站的想法。在很长一段时间，我都没有系统性的学习过相关知识，就导致我脑中的知识很混杂。不过，当相关知识积累到一定程度时，你可能就会在某一刻顿悟，惊呼，原来是这样！

想要在别人通过互联网访问到你提供的资源，最关键的一步，是需要有一个拥有一个公网IP的服务器。由于早年设计互联网的时候，没有想到会有那么多人上网，于是IP地址非常有限，（特指的IPv4,目前的IPv6暂时不存在这个问题），因此并非所有的机器都拥有可被直接访问的地址，绝大部分都是内网地址。为方便理解，你可以认为服务器的IP地址就如同小区的门牌号码，小区里面有很多楼，因此每个楼还有一个内部编号，好比是内网地址。你住在A小区，告诉一个B小区的人自己在A小区的楼号，那个人在自己小区即便找到了那个楼，那个楼里面也没有你。

为了获取一个独立公网IP的服务器，你有如下几个选择。

  1. 联系你的网络运营商，让他给你家分配一个独立IP；
  2. 购买一台独立的云服务器，然后自己在上面配置环境；
  3. 购买别人搭建好环境的服务器，托管自己的应用。
  4. GitHub Page

独立的云服务器

托管服务器

早年间绝大部分小白建站，都是走的第三条路，自己在本机上用Adobe Dreamweaver这类工具把网站设计好，然后打包资源，将结果上传到对方要求的一个地方。

如果全部是静态资源，目前一个很好的选择就是用GitHub Page免费构建一个网页，然后购买一个域名，将域名解析到GitHub Page对应的地址。

这里提到了两个新的知识点，静态资源和域名。先讲最简单的域名，因为所谓的域名， 无非就是用更好记的单词去替代一串数字。访问域名的时候，会有一个DNS服务器（Domain Name System）帮你做相应的转换。注意，域名的注册是要钱的，好的域名还可以用来交易。

价格不菲的域名

购买后的域名，需要在域名提供商的管理后台设置一个解析，即让域名提供商去告诉其他DNS服务器，域名实际对应的IP地址。

下一部分，我们来讲讲静态资源和动态资源。这两者的区分并不是网页上的元素能不能动，比如说图片的切换（由JavaScrip控制），而是网页返回的内容是不是动态生成的，例如你搜索时，返回的内容就是经过数据库查询后返回给你，你在购物网站搜索商品也是如此。

举个例子：很久之前，我是通过HUGO框架搭建我自己的个人博客。HUGO会将我写好的Markdown文本进行处理，得到可以直接在本地查看的网页，我只要将其上传到服务器某个目录下，或者GitHub Page下，就算部署了我的博客。

目前，我的博客用的是Halo进行建站，它有一套后台管理系统，我在后台编辑文章，编辑好的文章会记录在底层的数据库。用户访问时，会先去进行数据查询，查询的数据返回到前端，进行渲染。

Halo

我们说的Web开发分为两个部分，一部分是别人在浏览器上可以看到的元素（前端），一部分是别人看不到后台处理工作（后端）。

前端开发有3个组成

  • HTML: 控制页面的整体结构，相当于房子的结构
  • CSS: 控制页面的样貌，相当于给房子做装修
  • JavaScript: 控制页面的行为，相当于房子里面的各种开关

后端包括

  • 应用: 不同编程语言开发的工具，用于处理数据，返回结果
  • 应用服务器：负责运行编写的应用。例如Tomcat运行Java的Servlet应用，Python的Django，R的ShinyServer。应用服务器通常会实现一部分HTTP服务器的功能，因此，当网站没有那么大需求时，一个应用服务器就可以了。
  • HTTP服务器: 负责HTTP的响应，获取用户端的请求，将服务端的结果发送给用户端。如Apache，Nginx。相当于应用服务器，HTTP服务器专注于并发，负载均衡。

在Web发展的初期，绝大部分网站都是静态网页，只要把网页写好，放在服务器上就行。但是这样子效率太低了，毕竟对于一个新闻资讯类网站而言，总不可能为条新闻都写一个页面吧。于是，就有了JSP技术，也就是在HTML里面混入Java代码，查询什么数据，就从数据库检索什么数据，填充到HTML指定位置即可。早期，这类数据获取操作每次都要刷新整个页面，在宽带不足的年代，会浪费不少的网页加载时间。另外，这也不利于分工合作，毕竟一个前端开发者未必懂Java（或许他懂PHP），一个Java开发者也未必能处理好HTML，最后出现bug，两方互相甩锅

题外话: R的shiny是可以把HTML,CSS,JS和数据处理逻辑全部混在一个脚本中的。一个简单的应用还好，可能就几百行代码，以一个相对少的代码实现了一个相对好的页面。但是一旦业务复杂起来，动辄上千的代码，混杂了前端的页面展示，后端的数据处理，可能就是灾难。

后来出现了Ajax技术（描述一类动态加载资源的技术），使得前端可以异步的获取数据并且刷新页面（目前不太会写原生的Ajax代码，主要用框架，如Axios），前后端的数据交互基于统一的数据格式（JSON），前端拿到数据后去改变页面上的展示（早年前用JQuery做DOM操作，后来则是AngularJS, Vue，React这类框架）。

如此一来，前后端分离，分工就更加精细了，写网页的只要负责好网页应该怎么展示，我预期从后端拿到什么样的数据，这类数据会如何改变当前的网页，完成开发后把项目部署在网络速度比较快的服务器上。而写后端的人，也不用考虑前端页面怎么展示，专心写数据处理逻辑，把项目部署在性能比较高的服务器上，以便于把要求的内容返回给前端即可。

最后小结一下

  • 公网IP地址是允许公开访问的基础
  • 域名会通过DNS服务商转换成IP地址
  • 静态网站只需要懂HTML/CSS/JS即可
  • 动态网站开发在技术发展前期，会在HTML里混入开发语言的代码。
  • 在后期通过Ajax，让前后端通过JSON交互，前端使用JS改变页面展示。