咱们打开新浪微博，然后随便找个带皇冠的，按下F12键(Mac用户按command+option+i)然后选中控制台的箭头，再点击皇冠：再点开这个图片可以发现：可以看到那些大 V 图标皇冠图标以及各种微博认证等图标，都是放在了一张雪碧图里(即使再牛的大 V，身份标志也是放在雪碧图中的)。

uni-app 的 API 与微信小程序 API 基本一致。掌握微信小程序 API 对后面的开发很有帮助。微信小程序 API 文档:https://developers.weixin.qq.com/miniprogram/dev/api/

注册微信小程序账号，获取到 AppID，我们后面配置的时候会用到。在 HBuilderX 工具栏，点击发行，选择小程序-微信。输入小程序名称和 AppID，单击发行就可以了。这样我们就会获得一个微信小程序的打包文件，接下来我们来发布微信小程序项目，打开微信小程序开发者工具，导入刚刚生成的微信小程序项目的打包文件，在微信小程序开发者工具中先测试一下，项目运行是否正常，项目测试没有问题后，点击右上角>>按钮，上传代码就可以发布微信小程序了，最后等待微信团队审核通过，别人就可以在线上访问到你的项目了。

Flask 是一个 Python 实现的 Web 开发微框架，但是这个“微”并不代表着 Flask 功能比较简陋、有所欠缺。微框架中的 “微” 意味着：Flask 旨在保持核心简单而易于扩展；Flask 不会替用户做出太多决策，比如使用何种数据库；Flask 的选项（比如使用何种模板引擎) 通常有多个，用户很容易替换。默认情况下，Flask 不包含数据库抽象层、模板引擎、身份认证或其它任何已有多种库可以胜任的功能，如下图所示。然而，Flask 支持用扩展来给应用添加这些功能，应用程序可以很方便的集成这些扩展。众多的扩展提供了数据库集成、表单验证、上传处理、各种各样的开放认证技术等功能。

模板方法模式是定义一个操作中的算法的骨架，从而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。通常对于一些重要的复杂方法和多个子类共有的方法且逻辑相同的情况下会使用模板方法模式。比如用户第三方用户认证的时候就比较适合使用模板方法。我们来看一个例子：假设我们现在需要用到微信、微博的第三方用户授权来获取用户的信息。//使用模板方法模式描述获取第三方用户信息的过程 public abstract class Authentication{ public void checkUserAuthentication(){ checkIdentity(); fetchInfo(); } ​ protected abstract void checkIdentity(); protected abstract void fetchInfo(); } ​ //微信用户 public class WechatAuthenication extends Authentication{ @Override protected void checkIdentity() { System.out.println("获得微信用户授权"); } ​ @Override protected void fetchInfo() { System.out.println("获取微信用信息"); } } ​ //微信用户 public class WeiboAuthenication extends Authentication{ @Override protected void checkIdentity() { System.out.println("获得微博用户授权"); } ​ @Override protected void fetchInfo() { System.out.println("获取微博用信息"); } } ​ //调用模板方法 public class Demo{ public static void main(String...s){ Authentication auth = new WechatAuthenication(); auth.checkUserAuthentication(); auth = new WeiboAuthenication(); auth.checkUserAuthentication(); } }输出结果：获得微信用户授权 获取微信用信信息 获得微博用户授权 获取微博用信信息现在我们使用 Lambda 表达式换个角度来思考模板方法模式。如果我们用函数式接口来组织模板方法中的调用过程，相比使用继承来构建要显得灵活的多。//定义一个处理接口，用来处理一项事务，如授权或者获取信息。 public interface Processer{ public void process(); } ​ //封装调用过程 public class Authentication{ private final Processer identity; private final Processer userinfo; public Authentication(Criteria identity,Criteria userinfo){ this.identity = identity; this.userinfo = userinfo; } ​ public void checkUserAuthentication(){ identity.process(); userinfo.process(); } } ​ //使用模板方法 public class Demo{ Authentication auth = new Authentication(()->System.out.println("获得微信用户授权"), ()->System.out.println("获取微信用户信息")); auth.checkUserAuthentication(); auth = new Authentication(()->System.out.println("获得微博用户授权"), ()->System.out.println("获取微博用户信息")); auth.checkUserAuthentication(); }输出结果：获得微信用户授权 获取微信用信信息 获得微博用户授权 获取微博用信信息此时，我们的模板方法得到了大幅的简化，同时通过函数接口让模板方法获得了极大的灵活性。

国际化的功能离不开错误码的支持，客户端指定语言到服务端去请求，当出错了服务端会根据错误码和语言找到对应的国际化提示语。从上面图中我们发现，错误码不仅仅是客户端与服务端的交互，后台各个服务间的交互也需要约定的一套错误码。一般一个系统的错误码 code 都是唯一确定的。msg 不同场景下可能不一样，提供给用户的肯定是需要友好且不能暴露底层细节，给开发人员看的就要详细专业的错误内容。网关服务上面维护着多套不同语言的错误码提示语，响应的时候会根据客户端带的 Lang 信息进行国际化转译。模块模块编码错误编码底层描述中文提示语英文提示语库存10001商品规格表关联有误商品不存在goods don’t exist一般国际化的系统中会有多份 xxx_lang.properties文件，每一份代表一种语言的消息提示语。中文一般会转为 Unicode 编码进行存储（这个过程一般开发工具可以设置自动转），这样的处理可以规避不同开发环境下不同编码导致中文乱码。

微前端 尚处在发展时期，其核心概念和 微服务 相似。现阶段较为常用的微前端框架为 single-spa 和 qiankun，后者是基于前者实现的。该技术能做到 技术栈无关，即一个应用，能由多个不同技术的子应用构成，同时做到子应用的相互隔离，这里的隔离就可以选择采用 Web Components 实现。

上一节我们介绍了「密码认证」的实现方法，本节我们讨论如何通过 OAuth2.0 方式直接从第三方机构获取用户身份信息的方法。OAuth（开放授权）是一个开放标准，允许用户授权第三方移动应用访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方移动应用或分享他们数据的所有内容，OAuth2.0 是 OAuth 协议的延续版本，但不向后兼容 OAuth1.0 即完全废止了 OAuth1.0。除了自建认证中心外，常用的互联网 OAuth2.0 认证中心还包括：QQ、微信、微博、Github 等，例如 imooc.com 的登录选项里，我们能看到「微博登录」、「微信登录」和「QQ 登录」，这些其实就是对 OAuth2.0 认证的应用。慕课网登录页面 /center>本节将以 Github 作为第三方认证中心为例，讨论如何使用 Spring security 实现 OAuth2 登录的功能。本节开发环境JDK 1.8Maven 3.5.3 依赖项：spring-security-config:5.3.2.RELEASEspring-security-oauth2-client:5.3.2.RELEASEspring-security-oauth2-jose:5.3.2.RELEASEspring-boot-starter-thymeleaf:2.3.0.RELEASEspring-boot-starter-web:2.3.0.RELEASEthymeleaf-extras-springsecurity5:3.0.4.RELEASE

上述例子发现输出的结果是英文的，显然是不适合在国内环境使用，moment.js 提供了国际化支持，在现有的库中，moment 支持的语言可以说是相对完备了。通过引入对应的国际化资源（语言文件），来切换语言。<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/locale/zh-cn.min.js"></script><script> var now = moment().calendar(); console.log(now);// 输出当前日历时间 moment().startOf('hour').fromNow(); // 相对这个小时过去了多少分钟 var timestamp = 1593933593236; // 2020年7曰5日下午15点20分38秒 moment(timestamp).fromNow(); // 相对时间戳多久前</script>有关国际化的更多内容可以参考文档。

本节我们讨论了如何利用第三方平台做我们系统的 OAuth2.0 认证中心，主要的知识点如下：Spring Security 实现了 OAuth2.0 客户端的常用功能，开发者可以轻松的将 Spring Boot 应用作为 OAuth2.0 客户端集成到安全体系中；在使用第三方作为 OAuth2.0 认证服务器时，首先要在第三方平台上完成应用注册，并获取到 Client ID 和 Client Secret 两个重要参数；使用第三方 OAuth2.0 认证源，可以简化系统开发中的关于认证的操作，并且可以更轻易的实现单点登录；使用第三方 OAuth2.0 认证源的时候，用户在本系统内的权限、详细用户信息等，仍需要在本地系统内维护；目前在国内支持度比较好的第三方认证源有：QQ、微信、微博、Github 等。下一节中，我们继续在 OAuth2.0 协议的基础上，构造出属于自己的认证中心。

有些同学乍一听九宫格可能不知道是什么，但其实它在我们的日常生活中很常见：顾名思义，九宫格通常为如图这种三行三列的布局。微信客户端就用到了这种布局方式：大家最熟悉的朋友圈也采用了九宫格：还有微博：

据不完全统计（其实就统计了自己身边的朋友和同事），在刨除抖音或快手这一类短视频 APP 后，每天在手机上花费时间最长的就是刷微博和逛朋友圈。在刷微博和逛朋友圈的时候经常会看到这种东西：它有一个高大上的名字：九宫格。它在移动端的运用十分的广泛，而且不仅仅是在移动端的运用，它甚至还运用到了一些面试题中，因为九宫格可以很好的考察面试者的 CSS 功底。有些同学可能觉得九宫格看上去非常的简单，但实际上一些边框问题却还是很考验人的。借助市面上已有的 CSS 库，我们可以很轻易的做到九宫格布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的CSS库来美化我们的界面：chinese-gradient。

技巧 1如果我们的微服务监控平台没有任何数据，或者说，在打开微服务平台之后，各参数一直处于 loading 状态，这个时候，我们只需要在服务端调用任意一个服务接口即可，这样在微服务监控平台，我们就能看到被监控实例的参数了。技巧 2如果我们在访问 /actuator/hystrix.stream 路径时，系统找不到对应的路径，即报 404 异常，那么我们需要在对应项目的启动类中添加一个 Bean ：@Beanpublic ServletRegistrationBean hystrixMetricsStreamServlet() { ServletRegistrationBean registration = new ServletRegistrationBean(new HystrixMetricsStreamServlet()); registration.addUrlMappings("/hystrix.stream"); return registration;}这样我们就能正常访问 /actuator/hystrix.stream 下的路径了。

1. 独立的页面维护了全局 错误码错误码由5位整数构成2. 每个接口一个独立的 参数说明页面正常情况下出参只返回业务实体异常情况才有 errCode errMsg每个接口下也可能有自己的业务错误码

小程序的开发需要使用小程序主体提供的开发者工具，以 微信小程序 为例，就是要下载 微信开发者工具。也就是说，如果需要开发多个平台下的小程序，那每个平台提供的工具都需要安装一遍。通常开发者工具会使用其预览、调试功能，以及其他的一些生态链工具，如上传、预览代码等，编辑工作会放在自己的编码工具上进行，因为官方提供的编辑器的功能相比其他主流编辑器或者 IDE 还有许多不足。

首先我们随便添加一个书籍到书架上，然后进行清楚，请看下图，通过 Chrome 开发者工具我们可以找到删除书架上书籍的 URL 请求以及相应携带参数：删除书架上的书籍该请求一共有三个参数：_csrfToken：可以从 cookie 中获取；bids：书籍编号，可以从这一行的 html 元素中提取；gid：发现是固定的100；于是我们在请求到书架上的书籍信息时，解析得到书籍编号，然后对应发送删除该书籍的请求，对应的代码如下：from .get_cookie import get_cookies_from_chromefrom ..items import QidianSpiderItem# 删除书籍信息 https://my.qidian.com/ajax/BookShelf/DelBook?_csrfToken=YJklLmhEFpEfuSmqZZGaK72D4sUVJty52gyKw0TJ&bids=1022282526&gid=-100class BookCaseSpider(Spider): name = "bookcase" # 构造函数 def __init__(self): self.cookie_dict = get_cookies_from_chrome( "qidian.com", ["_csrfToken", "e1", "e2", "newstatisticUUID", "ywguid", "ywkey"] ) def start_requests(self): url = "https://my.qidian.com/bookcase" # http请求时附加上cookie信息 yield Request(url=url, cookies=self.cookie_dict) def parse(self, response): item = QidianSpiderItem() books = response.xpath('//table[@id="shelfTable"]/tbody/tr') for book in books: # ... # 删除该书籍信息 query_data = { 'bids': book.xpath('td[6]/div[@class="ui-datalist"]/div[@class="ui-datalist-datalist"]/a[1]/@data-id').extract_first(), 'gid': '-100', '_csrfToken': self.cookie_dict['_csrfToken'] } url = "https://my.qidian.com/ajax/BookShelf/DelBook?{}".format(parse.urlencode(query_data)) print('对应删除url请求={}'.format(url)) yield Request(url=url, method='get', cookies=self.cookie_dict, callback=self.parse_delete_book) def parse_delete_book(self, response): """ 删除结果：{"code":0,"data":{"1022354901":{"code":0,"message":"操作成功"}},"msg":"成功"} """ data = response.text print('删除响应:{}'.format(data)) if isinstance(data, str): data = json.loads(data) print('msg = {}'.format(data['msg']))是不是非常简单？来看看最后运行的效果：启动清除书架信息爬虫最后用户书架数据是不是很有意思？基于这样的操作，我们想想淘宝一键清除购物车功能，是不是也能这样实现？还有每次明星的恋情有变，连夜删除上千条微博，导致手指酸痛，我们是否能提供一键清除微博的功能，解决他们的痛点？这些事情是不是想想就很激动？还等什么，心动不如行动，这个就作为课后作业吧，希望你能独立完成淘宝的一键清除购物车代码。

慕课手记技术文章。前端开发规范（节选）：<p> <span>关注</span></p> <div> <span> JAVA开发工程师 </span></div><div> <a> <span></span> 篇手记 </a> <a> 贡献 <span></span> 字 </a></div>新浪新闻：<div> <span >2020年06月14日 13:00</span></div><div> <span> 缩小字体 </span> <span> 放大字体 </span> <span> 收藏 </span> <span> 微博 </span> <span> 微信 </span> <span> 分享 </span> <span >0 </span><div> <span> 腾讯QQ </span> <span> QQ空间 </span></div>

可以通过 CDN 引入 ECharts 文件：<!-- bootstrap 服务 --><!-- bootstrap 提供的免费CDN服务，亲测非常稳定 --><script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script><!-- 七牛云存储服务 --><!-- 国内速度稳定，开放性强 --><script src="//cdn.staticfile.org/echarts/4.5.0/echarts.common.js"></script><!-- jsdeliver 服务 --><!-- 微软的CDN服务，虽然国内访问速度比不上国内CDN，但速度不至于太慢，有国际化需求的可以试试 --><script src="//cdn.jsdelivr.net/npm/echarts@4.5.0/echarts.common.js"></script><!-- cdnjs 服务 --><!-- 一个非常全的CDN服务，存储了大多数主流的js、css、图片库 --><script src="//cdnjs.cloudflare.com/ajax/libs/echarts/4.5.0/echarts.common.js"></script>

2.1.1 原生开发原生开发一般是指用原生语言进行开发，原生开发语言就是官方提供的开发语言，比如 IOS 是利用 Objective-C 和 Xcode 进行开发、小程序是用微信小程序原生语言和微信开发者工具进行开发。2.1.2 混合开发混合开发是指开发一个项目应用时，为了提高运行效率或者开发效率，将各种开发技术进行混合应用的开发形式。混合开发将各种开发方式取长补短，虽然比原生开发更难上手，但是架不住开发效率和运行效率的优势，现在比较大型的应用项目都会用混合开发来进行项目开发。uni-app 的混合开发主要是为了实现一些 uni-app 框架无法实现的功能，或者扩展接入一些第三方的 SDK。

我们都知道，什么事情都不可能是十全十美的。抛开 RabbitMQ 不说，在互联网行业中的其他工具，也不能百分百保证每时每刻都在正常工作，更何况是涉及到消息通信的工具。RabbitMQ 在传递消息时，由于一些客观原因或者是其本身的原因，可能会出现，在有大批量消息传递时，所有的消息不能百分百传递到目的地的问题。RabbitMQ 在设计之初就考虑到了这个问题的出现，所以，RabbitMQ 提供了内置的消息补偿机制，这里我们简单做一下介绍。当存在大批量的消息都需要经过 RabbitMQ 来投递时，RabbitMQ 会将这些消息划分成若干组，然后通过为组设置顺序的方式，来依次投递这些消息。如果在任意一组中，出现了消息未能投递到目的地的现象，那么， RabbitMQ 会将该条消息进行短暂的存储，待其他消息都到达目的地后，RabbitMQ 会重新将该条消息进行投递，然而，这个过程执行的时间是微乎其微的，几乎近于实时。

点击工具栏–运行–运行到内置浏览器，测试H5平台。点击工具栏–运行–运行到小程序模拟器–微信开发者工具，测试微信小程序平台。

点击工具栏–运行–运行到内置浏览器，测试H5平台。点击工具栏–运行–运行到小程序模拟器–微信开发者工具，测试微信小程序平台。

single-spaqiankunmicro-appwujie

信息的搜集往往不是单一的，是由类似上面列举的很多方式的组合。我们经常听到一个词 人肉搜索，大家都很惊讶网络神人技术太强，其实主要还是因为我们散布在网上的资料信息太多了。这些零碎的资料拼一拼还是能获得很全的信息的。搜索引擎随便输入你的名字，或者外加几个关键词可能查到你在哪所学校，参加了某某活动，获得了某某名次的奖励你在哪所公司，缴交的一些社保信息你在某个网站的评论根据你的昵称到 QQ 上面搜索，同一个昵称到处用概率还是很大的，如果有手机号那就更加准确了，紧接着可以根据你的 QQ 空间获取更多你私人的信息。（这以前是非常好查的，现在腾讯也一直在完善信息安全这块）也可能是到其他平台去搜索：微博，头条，人人网，58同城 等照片网上搜索相似百度搜索引擎就有根据图片搜索到功能到政府的一些网站，如 信用xx ，上面根据法人名字也能搜索不少有价值的东西。

小程序是近两年发展非常迅速的一个生态。小程序赖于应用主体，基于这个主体提供的开放能力创建应用，如微信小程序，利用微信提供的能力，向上构建应用，最后将开发好的小程序应用进行上传发布，即可在微信内打开。本篇幅不会介绍如何开发小程序，小程序有非常完善的一套体系，其可以作为相对独立的技能进行学习，主要目的是提示读者可以向小程序方向进阶。

业务场景描述有这样一个真实的业务场景：在某大厂某销售业务项目中，由于某大厂销售业务板块业务的持续增加，导致之前原本设计好的项目架构出现了问题，不足以支撑持续增长的业务需要，于是，某大厂程序员对项目架构做了拆分，并最终形成了以 Spring Cloud 为基础架构的微服务分布式项目架构。在拆分了项目架构之后，虽然可以支撑持续增长的业务需要，但是，在拆分后的项目架构中，Hystrix 无法对所有项目进行监控，即 Hystrix 服务监控平台只能监控一个分散的项目，无法对项目整体进行监控。问题原因分析在解决问题之前，我们首先来分析一下这种问题产生的原因。上述场景场景中，项目的架构方式是微服务的分布式架构，而一般来说的 Hystrix 微服务监控平台默认只对一个项目实例起作用，所以，也就导致了一个微服务平台只对一个微服务实例起作用。

MutableList<*> 实际上是投影成 MutableList<out Any?> 类型：我们来分析下为什么会这样投影，我们知道 MutableList<*> 只包含某种特定类型的集合，可能是 String、Int 或者其他类型中的一种，可想而知对于该集合操作需要禁止写操作，不能往该集合中写入数据，无法确定该集合的特定类型，写操作很可能引入一个不匹配类型到集合中，这是一件很危险的事。但是反过来想下，如果该集合存在只读操作，读出数据元素类型虽然不知道，但是始终是安全的。只存在读操作那么说明是协变，协变就会存在保留子类型化关系，也就是读出数据元素类型是不确定类型子类型，那么可想而知它只替换 Any? 类型的超类型，因为 Any? 是所有类型的超类型，那么保留型化关系，所以 MutableList<*> 实际上就是 MutableList<out Any?> 的子类型了。

Hystrix 中的服务监控平台，就是对微服务项目进行监控的平台，包括服务运行的状态、服务有无宕机、服务异常信息监控等内容，为开发者和运维者提供了比较友好地界面支持，开发者和运维者可以直接通过观察服务平台界面，来判断具体微服务的状态信息，从而更好地对微服务进行控制。默认的 Hystrix 中间件已经为我们封装好了微服务监控平台，但是需要通过引入依赖的方式来使用它，接下来就让我们来看一下如何搭建该服务监控平台吧。

星投影是一种特殊的星号投影，它一般用来表示不知道关于泛型实参的任何信息，换句话说就是它表示一种特定的类型，但是只是这个类型不知道或者不能被确定而已。

这种布局是主内容处于页面的正中央位置，常见于登录、注册、提示用户、或点击头像查看大图等场景： 除了上图那样为了美观而添加的白色透明遮罩，还有一种是为了突出主题，添加的是一层灰色的透明遮罩： 图片来源 微博这么做的目的除了突出主题之外，还有一个比较重要的点就是可以令用户感觉到自己并没有离开当前页面，只不过是在当前页面中出现了一个小框而已，这样可以有效减少用户的陌生感。 图片来源 慕课网@imooc不仅如此，居中布局还能够有效引导用户进行自己希望用户所进行的操作，用强烈的对比感去引导用户： 图片来源 慕课网@imooc