问题

接口挂了，页面无法获取数据，导致白屏。

解决方案

一种简单的方法是将数据存储起来，以便在接口挂掉时仍然可以使用。

数据存储方式

有几种数据存储方式可供选择：

• Local Storage： 数据存储在本地浏览器中，直到用户清除浏览器缓存为止。
• Session Storage： 数据存储在本地浏览器中，但仅在当前会话期间有效。
• IndexedDB： 类似于本地存储，但具有更大的存储容量和更高级的功能。

选择 IndexedDB

考虑到需要存储的数据量（超过 5MB），我们选择了 IndexedDB。

综合解决方案

综合解决方案包括：

线上 CDN

CDN（内容分发网络）可用于缓存和分发静态资产，包括缓存的 API 数据。

线下 IndexedDB

对于新用户或长时间未访问老用户，IndexedDB 可用于存储离线缓存数据。

整体流程

整体流程图如下： [流程图图片]

劫持逻辑

劫持所有接口，并根据接口状态和缓存标识，进行以下操作： 更新数据 获取数据 缓存策略

缓存策略

当接口连续异常发生 maxCount 次后，开启缓存，expiresSeconds 秒后关闭。

总结

通过线上 CDN 和线下 IndexedDB 的结合，可以避免接口挂掉时页面白屏的问题。

完整代码

完整代码示例如下： javascript // 配置白名单来控制接口存与取 import { axios } from "axios"; const whiteList = ["/api/v1/users", "/api/v1/posts"]; axios.interceptors.response.use( async (resp) => { const { config } = resp; const { url } = config; // 是否有缓存标签，用于更新 CDN 数据 if (this.hasCdnTag() && this.isWhiteApi(url)) { this.updateCDN(config, resp); } return resp; }, async (err) => { const { config } = err; const { url } = config; // 是否命中缓存策略 if (this.isWhiteApi(url) && this.useCache()) { return this.fetchCDN(config).then((res) => { pushLog( `cdn缓存数据已命中，请处理`, SentryTypeEnum.error ); return res; }).catch(() => { pushLog( `cdn缓存数据未同步，请处理`, SentryTypeEnum.error ); }); } } ); // 缓存策略 useCache() { if (this.expiresStamp > +new Date()) { const d = new Date(this.expiresStamp); console.warn( `------------------------------------------------------------------------------启用缓存中关闭时间：${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}------------------------------------------------------------------------------` ); return true; } this.errorCount += 1; localStorage.setItem(CACHE_ERROR_COUNT_KEY, `${this.errorCount}`); if (this.errorCount > this.maxCount) { this.expiresStamp = +new Date() + this.expiresSeconds 1000; this.errorCount = 0; localStorage.setItem(CACHE_ERROR_COUNT_KEY, `0`); localStorage.setItem(CACHE_EXPIRES_STAMP_KEY, `${this.expiresStamp}`); return true; } return false; }

---

什么是网页的前端和后端开发

1.前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件(按钮，表单等等)。

2. 使用前段框架可以降低界面开发周期和提高界面的美观性。

3. 有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。

1.对用户的价值：

大部分产品对用户的核心价值是功能和内容提供的，而不是由表现层和交互。譬如支付、电商、新闻、交友。

后端解决有还是无的问题，开天辟地。

前端解决有了以后好用的问题，锦上添花，在竞争激烈的领域确实至关重要。

2.技术广度和难度：

广度上后端工作在服务器领域，能控制的硬件基本没有极限，CPU、存储、网络、集群等等，因此技术领域极广。一个优秀的后端需要掌握或了解大量技术如：并发、业务架构、数据库、几打流行框架、性能调优、分布式计算、集群架构、容灾、安全、运维等等，一层挖透了还有下一层。几十年计算机发展历史中大量的技术沉淀在服务器端。

Web前端一直工作在一个浏览器盒子里，先天不足，能承载的可能性太小，技术广度不足。

深度上，现代计算机领域的难题如大规模负载，海量数据处理，实时计算也是后端的，前端集中在表示层，这一层虽然也很复杂，但能称之为难题的技术几乎没有，也很容易复制。

前端要说深度也不是没有，但这一步需要跨到图形领域(如网页游戏)，不是常见场景。

说到底前端代码能控制的硬件确实不如后端，因此在技术上，前端更容易。现在为什么说前端会比后端更值钱呢?那是因为前端对硬件的控制能力提升了(html5\nodejs\mobile)，而后端分化得比较厉害，有一批后端专门只写业务逻辑，框架是别人写的，系统架构是别人搭的，服务器跑在云里，连机器物理地址都不知道。世人眼里可能觉得这种写MVC代码的人才是后端，这种被限制在一个“虚拟盒子”里的后端确实不怎么难上手。

一般而言网上说的互联网行业的技术含量排名大概是这样：

产品经理<设计师<前端<后端<其他更高级职位，比如算法工程师等等。

在广大中小公司，很多产品经理都是不会代码，不会设计。 很多技校学艺术设计的毕业生，当上了美工。这些都是真，所以能力低，干的人多，自然就低。然而，你问Google设计师挣多少了嘛?

门槛低不等于技术含量低。

OA软件的设计九大要点

伴随着产品线的丰富和客户数量的增加，我们发现烂尾项目也与日俱增，客户和OA公司之间的矛盾日益尖锐，一套好OA系统远非增加几个特色功能这么简单，套用孔子“君子有九思”的话，好的OA系统设计也有九思！1.“可行性和适应性”所谓可行性，是指需求提炼时，应该吻合适合核心需要，满足主要功能，而不是超越当前技术水平放卫星！所谓适应性，是指产品的实施条件和应用条件，要吻合企业当前的环境，超越环境搞亩产万斤粮的大跃进是注定要失败的。 核心需求的吻合度，是OA价值兑现的保障，用户在工作流程、公文管理等方面的核心需求的满足度是项目成功的基础。 2.“前瞻性和实用性”OA系统的开发设计，即要考虑到最大限度的增加系统的价值，最大限度的吻合各应用者的需求，充分考虑系统今后功能扩展、应用扩展、集成扩展多层面的延伸，实施过程应始终贯彻面向应用，围绕应用，依靠应用部门，注重实效的方针。 同时又要兼顾到成本控制、项目周期控制等因素，因此在功能的部署上也需要遵循实用主义。 3.“先进性和成熟性”先进的管理理念、技术和方法，可以提升企业的竞争力，延长系统的生命周期，但同时，任何创新都意味着小白兔实验，风险较大，因此又要注意软件系统、硬件设备、开发工具、软件产品的是否成熟，在先进性和成熟性之间找到平衡点，成为价值最大化的关键。 4.“开放性和标准性”数据孤岛、信息孤岛、应用孤岛，已经成为多年信息化建设后的后遗症，而解决这些孤岛的关键因素在于开放，解决这些孤岛的效率取决于标准化。 如同我们的插座和插头的关系、如同我们的外设和usb口的关系，OA系统是否足够开放和标准化，成为架构设计时首要考虑的问题。 5.“可靠性和稳定性”OA系统里流转了大量的管理数据，因此必须是可靠的，一般的人为和外部的异常事件不应该引起系统的崩溃；当系统出现问题后能在较短的时间内恢复，而且系统的数据是完整的，不会引起数据的不一致。 我们曾对OA系统组织过压力测试，在负载均衡的情况下，3000人同时在线时，系统登陆（包括整个主界面加载）不大于8秒。 数据浏览不大于8秒；数据查询不大于8秒；数据统计不大于15秒。 我们还对OA，运行在IBM服务器上的稳定性做过测试，基本上可以做到以下几点：平均无故障运行时间：大于小时；可用率：系统总体平均可用率在99.99%以上；稳定性：主机系统能够保持7*24稳定的不间断运行6.“安全性和保密性”OA系统的开发设计既考虑信息资源的充分共享，更要注意信息的保护和隔离，因此系统应分别针对不同的应用、不同的网络通信环境和不同的存储设备，采取不同的措施，包括系统安全机制、数据存取的权限控制等以确保系统的安全性。 其中，采取的措施包括但不限于以下平台安全：架构设计考虑安全性要求，平台软件达到安全设计标准。 应用安全：权限控制、支持身份认证接口、防篡改、防暴力破解等措施完善，并且可以跟USBkey、CA、IP地址限制等各种安全措施进行方案组合。 数据安全：支持文档安全软件整合技术，从而做到数据传输加密、远程安全访问、数据存储加密，并且可以VPN等各种安全方式进行绑定，支持入侵检测与防御系统、防火墙的应用。 容灾备份：支持各种容灾的软硬件设备的使用等。 管理安全：提供完善的日志功能，能够记录系统使用人员的关键操作，保证系统应用的安全密码策略：初始密码强制更改、启用图形验证码、支持USBkey接口、密码过期控制、密码错误次数控制、密码强度设置等，从而防止暴力破解和恶意攻击。 系统网卡MAC和IP的绑定；支持CA认证、数字签名加密技术；支持电子钥匙（Ukey）技术和指纹Ukey技术；支持安全套接（SSL）技术；软件系统严密、灵活的访问安全控制，功能授权与数据范围授权结合；系统有整体的用户/权限管理体系，可统一进行用户/权限的管理，实现到字段级的查询、修改、管理权限控制；系统提供用户认证、数据传输、数据存储、数字签名等安全手段接口，可在各个环节提供对第三方安全认证系统的支持。 7.“可扩展性和易维护性”为了适应未来的业务拓展和项目的功能扩展，必须充分考虑以最简便的方法、最低的投资，实现软件系统的扩展和维护扩展。 因此，在OA软件系统的开发设计中，需要考虑到应用及系统不断扩展的要求，以形成一个易于管理、可持续发展的体系结构。 未来业务的扩展只须在现有机制的基础上，增加新的应用与服务模块。 一方面当应用量增加，用户数增加时系统可以平滑增加服务器的方式来支撑新的压力要求发；一方面，当新的技术和产品出现进行升级时，系统能够平滑过渡而不影响用户的使用；另一方面，产品有新的功能增加时，可以通过插件和模块定制平台的方式，轻松实现业务的扩展。 在设备选择及网络方案上坚持开放性原则，使系统对各种硬件设备的互连互通；在软件上支持跨平台和开放数据接口，便于与其它系统软件互相集成，未来支持与业务系统、门户等系统的单点登录集成，在可获得相应系统的数据结构情况下，实现与这些系统的应用、门户、数据等各层面上无缝连接。 系统的管理和维护，应该采用集权和分权相平衡的思想，如九思设置了系统管理、应用管理和个人管理对系统进行分层授权和分层维护。 利用系统提供的工具，无须编写代码，方便用户自行进行客户化功能改造，方便用户自行定制界面数据项的显示；同时在网络或系统出现问题时能及时、快速地恢复系统的正常运行，保证系统的可恢复性，具有较高网络系统的抗干扰能力。 采用各种免代码的模块定制平台，帮助用户实现功能的DIY设计等。 8.“美观性和易用性”系统用户界面的设计采用Web2.0用户界面设计技术，界面根据用户需求灵活更改（增强标签分类特性），注重用户体验，使系统各项功能易见、易学、易用、易维护、易管理。 作为全员应用系统，易用性和用户体验是项目成败的关键要素。 所提供的产品采用B/S的登录方式、可以采用电脑、手机等各种方式下登录，采用了AJAX、图形化编辑器等各种新技术，并且易读、易理解、易操作，用户界面简洁、美观、友好，易于用户掌握、操作和使用；系统管理的使用及管理也以简便、易于操作、方便实用为准则。 严格遵循易用性六原则，实现从产品的部署、登录、使用、维护、升级、扩展的全方位易用，从而提升系统的黏着度； 提供统一的访问地址，便于用户使用。 在登录页为用户提供加入收藏、设为首页等操作，方便用户以后快速访问系统；具备风格一致的友好的用户界面，图形显示直观，工作流程从设计到使用全程图形化；美观性，相比易用性来讲并不是很重要，这如同一个美丽的姑娘，第一眼打动你的可能是表象，然后持续感动你的往往是她的内在。 9.“大并发能力支撑”作为集团化、多组织、大用户的单位，OA软件系统的开发设计，应该支持应用和数据库等多重负载均衡能力，支持附件服务器和数据库服务器分离技术，从而支持数万用户同时在线和同时操作的能力，不会因为用户数的增长或者信息量的增长，而导致系统响应能力下降。 系统并发能力：通过集群方式，在技术上没有并发上限，因此能完全保障用户未来的人员扩张需要。