【九层之台】Web开发教程：7. 网络

7. 网络

在之前的章节里面，我们已经介绍完毕了所有web应用开发所需要的技术和框架，有了这些技能，你已经可以轻松完成一个很不错的交互式网页应用，把精彩纷呈的内容呈现给用户了。

从本章开始，我将补充介绍一些细节技术（和原理），它们经常在网页应用中有重要的作用。例如本章所讲的网络，就是是网页应用无法避免的问题：如何获取数据？

本章很多内容可能都是后端的内容，我在这里稍稍拓展。那为啥要讲呢？“这就是我们想要的！”

模型与架构

网页应用也不能逃离所有应用的限制，纵使你的UI有千般变化，也无法脱离核心数据而存在。如果没有商品数据，怎么显示购买界面？如果没有天气数据，怎么显示天气预报？如果没有用户数据，怎么显示用户中心？此乃巧妇难为无米之炊也。

也许有的人一定要较真：“单机应用不也玩的挺好！”，那我就要回一句：“那你何必用网页应用？”
网页应用本身就是依托网络而存在的，网络也是网页应用的灵活性所在。

因此，我们必然需要通过一定的方法来获得这些数据。在逻辑上，我们把这种数据写入、存储、调取、显示的过程称为应用架构。在架构中，一类数据（例如：每天的天气预报数据）被称为模型。这其实本来是后端（服务器端）需要关心的问题，但是随着前端网页的日益复杂，也渐渐出现在前端。可还记得我们说过，Vuejs的架构是MVVM，即Model-View-ViewModel？

无论采取什么架构，我们无法避免的矛盾在于：数据放在天南海北的某个服务器上，但却需要在你的手机（客户端）上显示出来。在web发展的这么多年当中，解决方法也在不断地更新。让我们来了解一下！

数据与视图

之前说过，视图就是用户看到的用户界面。如何把服务器上的数据放进客户端的视图？
举个例子说明：如果用户A访问了自己的个人信息页面，用户B也访问了自己的个人信息页面，怎么把数据库中的A和B的信息分别显示在两个页面上呢？

静态分页面

已淘汰，可考古

web最早最古老的方法。简单想想，我对每个不同的用户都生成一个网页文件，包含了不同的信息，不就好了吗？用户A访问到的是A.html，B用户访问到的是B.html，搞定！

网页是从网页文件中加载的，网页文件的内容是固定的，因此这是静态页面。

问题也是显著的：大量的代码被重复书写，即使使用程序去生成不同的网页文件，在用户数量变多以后也是一种极大的浪费。

服务端渲染

数十年中的主流做法

随着web的发展，人们发现一个惊喜的事实：只要我用一个程序去接收、处理、响应http请求，并且动态生成需要返回的网页代码，就可以实现对不同的用户显示不同的网页！

例如，用户A向服务器发起了http请求，服务器通过检查http请求中包含的信息，验证数据库中的用户数据发现这是用户A的请求。这时候服务端程序通过查询数据库获得用户A的个人数据，将这些个人数据拼接成一个HTML代码并响应http请求。这样，用户A看到的页面就成功地显示了他的个人数据。同理，用户B也可以通过在http请求中包含他的信息（例如用户名和密码）来获取属于他的页面。

在这种方案中，网页代码都是服务端动态生成的。在服务器上，服务端程序把数据塞进固定的网页样式当中，并把整个网页的代码作为http请求的响应。因此，我们把这一类方法叫做服务端渲染。

这种方法虽然很成熟，也诞生了很多很多的框架，但是有如下一些问题：

• 服务端计算压力大，需要进行网页内容组合
• 每次信息获取都需要加载整个网页，浪费流量也不利于交互

最著名的服务端渲染语言可能是PHP（世界最美语言）。PHP的代码作为HTML的一个元素被插入到HTML代码当中。当http请求到来的时候，PHP解释器（运行在服务器上的程序）将HTML代码中的PHP代码解释运行，并用代码运行的结果替换掉PHP代码元素，形成一个没有PHP代码的纯HTML代码。
这时HTML代码中的一部分内容是PHP代码运行的结果，通过这种方式可以实现动态网页内容。
如果有兴趣可以去学习一下哦！这是后端的内容啦！

AJAX

“藕断丝连”

新一代的网络数据获取方式，被称为AJAX。简单来说，在网页文件加载完毕以后，通过网页的JS代码发起http请求获取核心数据，并通过JS代码把获取到的数据显示在页面上。

这种方式的网页代码依然是固定的，动态内容只是根据JS代码中获取到的数据变量显示的网页内容而已。因此，这样的网页是静态页面，却实现了动态页面的效果，甚至更好。在页面数据发生变化的时候，只需要JS代码重新发起请求更新数据，然后显示在页面上即可。

此外，从整个网络应用的访问情况上来看，这种方式可以允许前端页面的CDN缓存（因为前端页面代码不会变），大大降低了服务器的计算压力和流量压力。

CDN是Content Delivery Network的缩写，即内容分发网络，这个我们下次再说。

axios

如何才能在JS代码中发起请求呢？JS自带了一种方式是fetch，但是我认为axios这个JS库更好用。

你可以通过CDN的方式直接引入axios（使用了jsdelivr）：

<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/index.min.js"></script>

对于VueCli的项目来说，你也可以说使用

npm i axios -S

来安装依赖包，或者使用VueCli控制台。然后需要在main.js中引入：

import axios from "axios";
Vue.prototype.$ajax = axios;

通过绑定Vue对象的原型，我们接下来就可以在VueCli的组件中使用this.$ajax来调用axios了。

具体如何使用呢？以发送http的get请求获取百度首页的HTML代码为例（VueCli中用this.$ajax替换axios）：

axios
  .get("https://www.baidu.com/")
  .then((resp) => {
    console.log(resp.data);
  })
  .catch((err) => {
    alert(err);
  });

可以看到，axios整体采用了Promise结构，为了好看我们通常把axios单独写一行，然后.get发起get请求，.then内部是一个箭头函数处理正确的响应，.catch内部也是一个箭头函数处理错误响应。axios会自动等待请求返回，然后执行对应的函数。（需要注意：整个axios结构不会阻塞处理进程，也就是说，后面的代码不会理会请求是否返回，而是会继续执行。如果需要让后面的代码等待，需要在axios之前使用await）。

执行了这段代码以后，百度首页的HTML代码就会被输出到控制台上。

http状态码：http协议中规定，http响应必须包含一个状态码用来标定请求的响应情况。如果状态码是2开头的（200或201等），表示请求正确响应；3开头的状态码（301等）表示需要继续请求，例如重定向等；4开头的状态码（404等）表示客户端发起请求错误，服务端不能理解或不能响应；5开头的状态码（502等）表示服务端错误，请求不能响应。

如果需要在请求的时候传入数据，可以在url字符串后面增加一个参数，传入一个对象作为请求参数。axios的请求数据和响应数据都默认使用了JSON格式，在JS代码中可以像访问对象中的变量一样使用。

JSON格式：一种数据在网络中传递的格式，与JS的对象格式非常相似。

这就是axios的基本用法啦！axios还有很多例如baseURL和intercept的高级功能，有需要的可以自学哦！同时axios还经常和Vuex一起使用，放在Vuex的action部分当中，各位可以自行实践。

相信各位已经具有一定的自学能力了！