马克一下

傷城~ 2024-04-18 10:44 31阅读 0赞

**目录**

基于angular-cli配置代理，解决跨域请求问题

代理服务器

Service workers

PWA模型

h5新特性

## 基于angular-cli配置代理，解决跨域请求问题 ##

方法1：html5的CROS，后端配置一个正确的Access-Control-Allow-Origin。

方法2：配置代理服务器。（tomcat, nginx, angular-cli）

![format_png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

*比如：访问 http://localhost:4200/mail/upload 就会转为 http://localhost:8080/mail/upload*

--------------------

## 代理服务器 ##

**代理服务器（Proxy Server）的功能是代理网络用户去取得网络信息。**形象地说，它是网络信息的中转站，是个人网络和Internet服务商之间的中间代理机构，负责转发合法的网络信息，对转发进行控制和登记。

代理服务器是网络信息的中转站。一般情况下，使用网络浏览器直接去链接其它Internet站点并取得网络信息时，须送出请求信号来得到应答，然后对方再把信息传送回来。代理服务器是介于浏览器和Web服务器之间的一台服务器，有了它之后，浏览器不是直接到Web服务器去取回网页而是向代理服务器发出请求，请求信号会先送到代理服务器，由代理服务器来取回浏览器所需要的信息并传送给你的浏览器。而且，大部分代理服务器都具有缓冲的功能，就好像一个大的[Cache][]，它不断将新取得数据包存到它本机的存储器上**，如果浏览器所请求的数据在它本机的存储器上已经存在而且是最新的，那么它就不重新从Web服务器取数据，而直接将存储器上的数据传送给用户的浏览器**，这样就能显著提高浏览速度和效率。

--------------------

## Service workers ##

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。在目前阶段，**ServiceWorker的主要能力集中在网络代理和离线缓存上。**具体的实现上，**可以理解为ServiceWorker是一个能在网页关闭时仍然运行的WebWorker。 使用[Service Workers][]来进行缓存, 以此来节省带宽和时间。**

service workers是web workers的一种。**web worker 是运行在后台的 JavaScript，不会影响页面的性能，是h5新特性。**

> Angular 提供了一份 Service Worker 的实现。

--------------------

## PWA模型 ##

PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。** [通过 Service workers 让 PWA 离线工作][Service workers _ PWA]是PWA的实现之一。**

--------------------

## h5新特性 ##

>  *  用于绘画的 canvas 元素
>  *  用于媒介回放的 video 和 audio 元素
>  *  对本地离线存储的更好的支持
>  *  新的特殊内容元素，比如 article、footer、header、nav、section
>  *  新的表单控件，比如 calendar、date、time、email、url、search
>  *  WebSocket

**主要是localStorage，sessionStorage，cache，WebSocket**

--------------------

ngOnInit() {
        super.ngOnInit();
        console.log('in init',this.model);  //调试用
      }

打印如下：

![20190905155039824.png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC81LzE3LzE2MzZlNDUyNjJmN2NhNDA?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/16b5ad73165c476c988001ba8bd7c597.png
[Cache]: https://baike.baidu.com/item/Cache/7108256
[Service Workers]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
[Service workers _ PWA]: https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Offline_Service_workers
[20190905155039824.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dffcf16106b84ae8a1bbd78d3d561167.png