『掘金酱的下午茶』团队全体成员预祝各位掘友新春快乐，岁岁平安，生活美满，兔年大吉！ 🧧🧧🧧

来年我们将继续努力，为大家带来更多优质的内容，让我们一起共同努力，共同进步！

Hello，又到了每天一次的下午茶时间。酱酱们的下午茶新增优质作者介绍和码上掘金板块，专注于发掘站内优质创作者和优质内容，欢迎大家多提宝贵意见！

• 【本期掘金酱的下午茶】亮点：
• 2023年 icon 图标的升级方案
• 分布式微服务系统的跨库查询/操作的解决思路（关系型数据库）
• 如何在uniapp中设置隐私政策弹窗
• 如何让 vite 完美接入 qiankun 子应用
• ……

筛选规则：文章发布时间在本期「掘金酱的下午茶」发布时间的 1-3 天内，且符合社区推荐标准，也会同步发布在掘金相关技术社群。

今日主理人｜下午茶

本期每日掘金由  丘山子  负责制作，需要投稿下午茶请私信我的助理 小岳 。

PS：主理人目前正在招募中，有感兴趣的掘友们可以联系Captain

每日干货｜下午茶

主理人们会对近期（1-3 天）社区深度技术好文进行挖掘和筛选，优质的技术文章有机会出现在下方列表，排名不分先后。

『前端』

• 2023年 icon 图标的升级方案

iconfont 的方案其实是在 2016 年公开，到现在也已经有 6 年之久，它确实在这一段时期的设计领域中，独树一帜的解决了图标的问题，这么多年也有了丰富的积累沉淀。但是前端的发展是日新月异的，图标领域其实这些年也出现了很多新起之秀。

满足现在的方案，往往是因为眼界还不够。（没见过更好的）

• 登录校验的两种方式详解

在现在的大部分网站登录接口的实现，根据 用户名 和 密码 调用登录接口，成功之后登录接口返回 token 信息，在请求其他接口时，就会携带上，用于登录认证。

那么自己是否思考过，为什么需要登录认证？以前是怎么实现的？现在是怎么实现的？

• Lottie 动画库使用与原理浅析

之前做运营活动的时候，写了一个比较有趣的打开盲盒的交互动画，流程如下：一个挣扎的未打开的盲盒，点击出现确认弹窗，确认后集齐的5张卡片会飞入盲盒，盲盒开启弹出礼品。怎么实现的呢？其中挣扎的效果是使用的CSS3做的一个呼吸加抖动的 Animation，飞入的效果是使用JS获取到盲盒的中心点坐标并设置弹窗只展示5张卡片和要改变后样式，盲盒开启的过程则是一个 Lottie 动画。

• 如何让 vite 完美接入 qiankun 子应用

因为公司有使用微前端技术，技术栈为 qiankun，为了保证对 qiankun 的支持，使用了开发模式走 vite，构建走 webpack：如何在 webpack 项目中使用 vite 加速。

但是 vite 的开发体验实在是太爽了，于是寻找了一波 qiankun 的 vite 插件，都没有对生产环境 js，css 沙箱的集成，于是只能自己动手写了一个：vite-plugin-legacy-qiankun

• JS闭包函数与柯里化完全解析

手写实现函数柯里化、闭包

『后端』

• Seata AT模式：MySQL自增ID的场景下个人推荐使用 useGeneratedKeys

Seata AT 模式在 构建 insert 操作的 afterImage 时，如果是自增 ID 的情况下，需要获取刚插入记录的自增 ID 值是什么。在《Seata-AT 模式+TDDL：排查 构建 Insert 操作的 afterImage 时执行 SELECT LAST_INSERT_ID()报错》 中有描述因为上下文环境中没有激活 useGeneratedKeys ，复用 insert 操作对应的PreparedStatement在执行 SELECT LAST_INSERT_ID()时，因 TDDL 内还会执行 insert 遗留的三个占位符对应参数设置的逻辑，而导致了报错。对于报错之处statementProxy.getTargetStatement().executeQuery("SELECT LAST_INSERT_ID()");来说以下两种修复方案似乎都可以考虑：

1. 执行 SELECT LAST_INSERT_ID()时，新建一个PreparedStatement
2. 若复用PreparedStatement，也可用clearParameters()方法将 insert 时设置的三个参数清除掉

当然从 Seata AT 下的源码中梳理可知，采用useGeneratedKeys，可完全规避 Seata 内置的SELECT LAST_INSERT_ID()相关逻辑的执行。

• 聊透spring @Configuration配置类

本章节我们来探索Spring中一个常用的注解@Configuration。我们先来了解一下该注解的作用是：用来定义当前类为配置类。

 那啥是配置类啊，有啥用啊。这个我们得结合实际使用场景来说，通常情况下。加了@Configuration的配置类内部，都会包含一个或多个@Bean注解的方法。

为了简化定义，在后续我们称@Bean注解的方法为工厂方法。

 配置类的奥秘就在这里，Spring会保证多次调用@Bean标注的工厂方法，不会重复产生新的对象，始终是同一个，这也贯彻了Spring的单例哲学。

 多次调用创建方法，产生的竟然是同一个对象，这貌似违背了编程的基础原理。怎么可能😱，一定是Spring做了什么，那就跟随着贰师兄的脚步一起解开@Configuration的神秘面纱吧。

这里大家很容易产生一个误解，认为只有在加了@Configuration的配置类中，使用@Bean，才能将自定义创建的对象放入Spring容器中。其实不然，在Spring中：万物皆为配置类。在任何能够被Spring管理的类(比如加了@Component的类)中，定义@Bean方法，都能将自定义对象放入到Spring容器，@Bean本身的能力和@Configuration无关哦。

• 两段式轻松梳理SpringCloudGateway源码核心脉络

那这篇文章重点讲述两个事情，通过这两大块，我们就可以对SCG核心源码有一个比较清晰的脉络：

1. 服务启动阶段在搞啥？
2. 接口调用阶段在搞啥？

• Openmp Runtime 库函数汇总（下）——深入剖析锁🔒原理与实现

在本篇文章当中主要给大家介绍一下 OpenMP 当中经常使用到的锁并且仔细分析它其中的内部原理！在 OpenMP 当中主要有两种类型的锁，一个是 omp_lock_t 另外一个是 omp_nest_lock_t，这两个锁的主要区别就是后者是一个可重入锁，所谓可冲入锁就是一旦一个线程已经拿到这个锁了，那么它下一次想要拿这个锁的就是就不会阻塞，但是如果是 omp_lock_t 不管一个线程是否拿到了锁，只要当前锁没有释放，不管哪一个线程都不能够拿到这个锁。在后问当中将有仔细的例子来解释这一点。本篇文章是基于 GNU OpenMP Runtime Library !

• 分布式微服务系统的跨库查询/操作的解决思路（关系型数据库）

在后端开发过程中，我们绕不开的就是数据结构设计以及关联的问题。

然而在传统的单体架构的开发中，解决数据关联的问题并不难，通过关系型数据库中的关联查询功能，以及MyBatis的级联功能即可实现。

但是在分布式微服务中，整个系统都被拆分成了一个个单独的模块，每个模块也都是使用的单独的数据库。这种情况下，又如何解决不同模块之间数据关联问题呢？

事实上，分布式微服务是非常复杂的，无论是系统架构，还是数据结构设计，都没有一个统一的方案，因此根据实际情况进行确定即可，对于数据关联的跨库查询，事实上也有很多方法，在网上有如下思路：

• 数据冗余法
• 远程连接表
• 数据复制
• 使用非关系型数据库
• ...

今天，我就来分享一个简单的分布式微服务跨库查询操作，大家可以参考一下。

我们还是从一对多，多对多的角度来解决这个问题。

『移动端』

• ViewModel中的StateFlow和SharedFlow，使用建议以及单元测试

以读取数据库数据为例，Repository负责从数据库读取相应数据并返回一个flow，在ViewModel收集这个flow中的数据并更新状态(StateFlow)，在MVVM模型中，ViewModel中暴露出来的StateFlow应该是UI层中唯一的可信数据来源，注意是唯一，这点跟使用LiveData的时候不同。

• 如何在uniapp中设置隐私政策弹窗

在uniapp中Android可以使用uniapp内置的隐私政策弹窗，可以在应用程序启动前弹出弹窗。但iOS并没有，因此需要通过页面的方式进行设置，这种方式会在应用启动后弹窗弹窗。

趣味码上掘金分享｜下午茶

• 码上掘金精选，收集优秀的码上掘金项目，供大家一起学习：github.com/akira-cn/jc…
• 码上掘金游戏精选：g.jcode.pub/#/716133153…

作者	简介
alphardex	3D模型中展示网页

📖 投稿专区｜下午茶

大家可以在评论区推荐认为不错的文章，并附上链接和推荐理由，有机会登上下一期。文章创建日期必须在近 1-3 天内；可以推荐自己的文章、也可以推荐他人的文章。