spa

单页应用SPA做SEO的一种清奇的方案 网上有好几种单页应用转seo的方案，有服务端渲染ssr、有预渲染prerender、google抓AJAX、静态化。。。这些方案都各有优劣，开发者可以根据不同的业务场景和环境决定用哪一种方案。本文将介绍另一种思路比较清奇的SEO方案，这个方案也是有优有劣，就看读者觉得适不适合了。 项目分析 我的项目是用react+ts+dva技术栈搭建的单页应用，目前在线上已经有几十个页面，若干个sdk和插件在里面。 考虑想用服务端渲染来做seo，但是我的项目已经开发了这么多，打包配置、代码分割、语法兼容、摒弃浏览器对象，服务端思想，这么多的点需要考虑，还不如换个框架重新开发呢，所以改造成本太大😱，服务端渲染不适合我这种情况。 预渲染虽然是开发成本最低的，但毕竟是生成一张一张的静态html，而我的seo需求是能够让蜘蛛抓取到我的社区论坛下的每一篇帖子，这样子下来一篇帖子就是一份html,再加上分页，那得多大的量级来存储啊😰，而且网站更新就更麻烦了，这个方案也不太适合。 google.....Emmmm.........................下一个 静态化也是跟预渲染差不多。。。 隆重介绍 以前写过一种单页应用seo的方案，就是自己先在本地用爬虫做预渲染，生成同样目录结构的静态化的html

前不久徐飞写了一篇很好的文章： Web 应用的组件化开发 。本文尝试从历史发展角度，说说各种研发模式的优劣。 一、简单明快的早期时代 可称之为 Web 1.0 时代，非常适合创业型小项目，不分前后端，经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成，浏览器负责展现。基本上是服务端给什么浏览器就展现什么，展现的控制在 Web Server 层。 这种模式的好处是：简单明快，本地起一个 Tomcat 或 Apache 就能开发，调试什么的都还好，只要业务不太复杂。 然而业务总会变复杂，这是好事情，否则很可能就意味着创业失败了。业务的复杂会让 Service 越来越多，参与开发的人员也很可能从几个人快速扩招到几十人。在这种情况下，会遇到一些典型问题： 1、**Service 越来越多，调用关系变复杂，前端搭建本地环境不再是一件简单的事。**考虑团队协作，往往会考虑搭建集中式的开发服务器来解决。这种解决方案对编译型的后端开发来说也许还好，但对前端开发来说并不友好。天哪，我只是想调整下按钮样式，却要本地开发、代码上传、验证生效等好几个步骤。也许习惯了也还好，但开发服务器总是不那么稳定，出问题时往往需要依赖后端开发搞定。看似仅仅是前端开发难以本地化，但这对研发效率的影响其实蛮大。 2、**JSP 等代码的可维护性越来越差。**JSP 非常强大，可以内嵌 Java 代码

写在前面：通常 SPA 中前端路由有2种实现方式： window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与在浏览器中点击按钮向前相同 history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面 如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败 在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。 2.history.pushState pushState(stateObj, title, url)

在【One by One系列】IdentityServer4（四）授权码流程中提过一句： “ 为了安全，IdentityServer4是带有PKCE支持的授权码模式 ” 我们来回顾一下授权码流程 （A）用户访问客户端，后者将前者导向认证服务器。 （B）用户选择是否给予客户端授权。 （C）假设用户给予授权，认证服务器将用户导向客户端事先指定的"重定向URI"（redirection URI），同时附上一个授权码。 （D）客户端收到授权码，附上早先的"重定向URI"，向认证服务器申请令牌。这一步是在客户端的后台的服务器上完成的，对用户不可见。 （E）认证服务器核对了授权码和重定向URI，确认无误后，向客户端发送访问令牌（access token）和更新令牌（refresh token）。 --摘自阮一峰老师-理解OAuth 2.0，自认为阮老师这块已经写比较清晰了，正所谓”眼前有景道不得,崔颢题诗在上头“。 1.什么是PKCE PKCE，全称Proof Key for Code Exchange,上篇讲到SPA，这是一种没有后端服务器的原生客户端，代码都在用户本地设备上运行，比如SPA在用户浏览器上运行，Win/Mac客户端，iOS/Android APP，如果让这些原生客户端安全地存放密钥(client secret)并不现实，且容易被破解。 Implicit Flow

在【One by One系列】IdentityServer4（四）授权码流程中提过一句： “ 为了安全，IdentityServer4是带有PKCE支持的授权码模式 ” 我们来回顾一下授权码流程 （A）用户访问客户端，后者将前者导向认证服务器。 （B）用户选择是否给予客户端授权。 （C）假设用户给予授权，认证服务器将用户导向客户端事先指定的"重定向URI"（redirection URI），同时附上一个授权码。 （D）客户端收到授权码，附上早先的"重定向URI"，向认证服务器申请令牌。这一步是在客户端的后台的服务器上完成的，对用户不可见。 （E）认证服务器核对了授权码和重定向URI，确认无误后，向客户端发送访问令牌（access token）和更新令牌（refresh token）。 --摘自阮一峰老师-理解OAuth 2.0，自认为阮老师这块已经写比较清晰了，正所谓”眼前有景道不得,崔颢题诗在上头“。 1.什么是PKCE PKCE，全称Proof Key for Code Exchange,上篇讲到SPA，这是一种没有后端服务器的原生客户端，代码都在用户本地设备上运行，比如SPA在用户浏览器上运行，Win/Mac客户端，iOS/Android APP，如果让这些原生客户端安全地存放密钥(client secret)并不现实，且容易被破解。 Implicit Flow

作者 | aoho 来源 | Serverless 公众号 Serverless 是什么？ Serverless 架构是不是就不要服务器了？回答这个问题，我们需要了解下 Serverless 是什么。 Serverless 架构近几年频繁出现在一些技术架构大会的演讲标题中，很多人对于 Serverless，只是从字面意义上理解——无服务器架构，但是它真正的含义是开发者再也不用过多考虑服务器的问题，当然，这并不代表完全去除服务器，而是我们依靠第三方资源服务器后端，从 2014 年开始，经过这么多年的发展，各大云服务商基本都提供了 Serverless 服务。比如使用 Amazon Web Services(AWS) Lambda 计算服务来执行代码。 国内 Serverless 服务的发展相对 AWS 要晚一点，目前也都有对 Serverless 的支持。比较著名的云服务商有阿里云、腾讯云。它们提供的服务也大同小异：函数计算、对象存储、API 网关等，非常容易上手。 架构是如何演进到 Serverless ？ 看看过去几十年间，云计算领域的发展演进历程。总的来说，云计算的发展分为三个阶段：虚拟化的出现、虚拟化在云计算中的应用以及容器化的出现。云计算的高速发展，则集中在近十几年。 总结来说有如下的里程碑事件： 通过虚拟化技术将大型物理机虚拟成单个的 VM 资源。

作者段清华，「最懂金融的 AI 工程师，微软 AI 领域最有价值专家（MVP），谷歌开发者专家（GDE），希望加速人类的生产力，让智能比电力与宽带更普及。」 为什么需要云身份验证和单点登录 简单来说是为了降低维护用户注册登录系统、权限、统计等各方面的成本。 应用结构简述 通过 Authing 实现身份验证和单点登录，有很多种方法，这篇文章的例子是根据自身软件架构，实现了其中一种相对简单的方法，并不适用所有情况，Authing 本身还提供了多种的登录解决方案，包括直接嵌入到网站上、APP 上的等等。 前端采用纯 React/React-router/Ant.design 开发，没用 Redux/Server Rendering 之类比较复杂的东西，就使用 create-react-app 的最基本方案，没用 TypeScript（因为懒，我有罪）。 后端采用 Python + FastAPI 的简单 API。 登录流程 第一阶段，前端 通过检测本地 localStorage，未发现保存的登录 token 信息时，提示用户需要登录，给出登录链接，用 HTML 的 a 标签直接跳转到 Authing 提供的 SSO 网址上，例如 xxxx.authing.cn ，其中 xxxx 是可以用户自定义的。 第二阶段，Authing SSO 网站 完成登录，可以自由配置，例如注册方式

最近社区里有些招聘的需求，我们汇总了下，有兴趣的朋友请自行联系。 如果你的团队也在招聘，可以和我们联系，我们汇总后，会不定时的发出。 币信 区块链工程师： 岗位描述 主要负责公链基础设施研究与开发； 负责公链上层的应用产品的设计和研发工作； 不限技术栈，可根据个人开发偏好进行技术选型； 职位要求 对区块链技术有浓厚兴趣； 熟悉常用的数据结构和算法； 有区块链, 分布式网络、应用密码学、网络安全等研发经验； 熟悉 Golang 、C/C++，Rust，java，Javascript，Python 等至少一种编程语言，良好的编程习惯 优先 有过区块链钱包开发经验； 熟悉以太坊 ETH 及 Solidity 合约语言； 熟悉常用加密算法 币信 前端工程师: 岗位描述 主要负责加密货币钱包的浏览器插件开发； 单页应用 SPA 的开发和桌面端封装（ Electron ）； 不限技术栈，可根据个人开发偏好进行技术选型 职位要求 独立思考、分析、解决、归纳问题的能力； 2 年及以上相关工作经验，编码能力和编码风格良好，精通常用的数据结构与算法； 熟悉 Javascript / HTML / CSS / HTTP，熟悉 W3C 标准与 ES 规范，熟悉 Web 语义化和相关前端技术； 熟练使用目前各类主流前端框架（ React / Vue / Angular 选之一 ）并理解相关实现原理 优先

1.什么是OAuth2 OAuth（开放授权）是一个开放标准，允许用户授权第三方移动应用访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方移动应用或分享他们数据的所有内容，OAuth2.0是OAuth协议的延续版本，但不向后兼容OAuth 1.0即完全废止了OAuth1.0。 2.应用场景 第三方应用授权登录：在APP或者网页接入一些第三方应用时，时长会需要用户登录另一个合作平台，比如QQ，微博，微信的授权登录。 原生app授权：app登录请求后台接口，为了安全认证，所有请求都带token信息，如果登录验证、请求后台数据。 前后端分离单页面应用（spa）：前后端分离框架，前端请求后台数据，需要进行oauth2安全认证，比如使用vue、react后者h5开发的app。 3.名词定义 （1） Third-party application：第三方应用程序，本文中又称"客户端"（client），比如打开知乎，使用第三方登录，选择qq登录，这时候知乎就是客户端。 （2）HTTP service：HTTP服务提供商，本文中简称"服务提供商"，即上例的qq。 （3）Resource Owner：资源所有者，本文中又称"用户"（user）,即登录用户。 （4）User Agent：用户代理，本文中就是指浏览器。 （5）Authorization server：认证服务器

点击上方“ Java知音 ”，选择“置顶公众号” 技术文章第一时间送达！ 作者： 猿码道 www.jianshu.com/p/c81008b68350 推 荐 阅 读 1. Java 性能优化：教你提高代码运行的效率 2. 基于token的多平台身份认证架构设计 3. Spring Boot整合JWT实现用户认证（附源码） 4. Springboot启动原理解析 1. 前言 随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自干各自的，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。 2. 为何要分离 参考两篇文章： http://blog.jobbole.com/65509/ http://blog.jobbole.com/56161/ 目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示： 后端为主的MVC时代