代码地址

Github地址：https://github.com/bbhhe/thumbs-backend.git

章节内容

高可用得架构方案
AI生成前端代码

1. 高可用的架构方案

在真实的企业级应用场景中，为了保持系统的可用性和稳定性，通常会采用分布式架构实现系统的高可用性。

高可用性是指系统在面对各种故障时仍能保持服务的能力，特别是在高流量、高并发场景下，任何组件的故障都可能导致整个系统的崩溃。

比如目前系统仍然存在单点故障风险。当 Redis、Pulsar 或 TiDB 出现故障时，可能导致整个服务不可用，缺乏有效的降级机制和容错策略。

基于我们的项目从4个角度进行高可用的优化方案设计：

数据库高可用
缓存高可用
消息队列高可用
应用层高可用

1.1 数据库的高可用

TiDB 的高可用性主要通过其分布式架构、多副本机制、自动故障恢复等特性来实现

单数据中心高可用:

部署至少 3 个 TiDB Server、3 个 TiKV 节点和 3 个 PD 节点。
使用负载均衡器分发 SQL 请求到 TiDB Server。
确保 TiKV 副本分布在不同的物理节点上。

多数据中心高可用:

在多个数据中心部署 TiDB 集群，每个数据中心部署至少 2 个 TiKV 节点。
配置 TiKV 的副本策略，确保每个数据中心的 TiKV 节点包含完整数据的副本。
使用 PD 的调度策略，优先将读写请求路由到本地数据中心，减少延迟。

灾备方案：

使用 TiDB 的备份工具（如 BR 或 Dumpling）定期备份数据。
在灾备数据中心部署 TiDB 集群，并定期同步数据。
在主数据中心故障时，快速切换到灾备数据中心。

1.2 缓存的高可用

Redis 的高可用一般有三种方案：

主从复制一主多从
哨兵模式哨兵监控主从节点
集群模式集群模式下，每个节点都可以处理请求，当一个节点出现故障时，其他节点可以接管请求。

极端情况下，当 Redis 服务不可用时，可以扩大 Caffeine 本地缓存容量，临时存储热点数据，同时对非热点数据降级为直接查询数据库。

▼
java
复制代码
// 伪代码: 缓存访问策略  
public Object getWithFallback(String key) {  
    try {  
        // 尝试从Redis获取  
        return redisTemplate.opsForValue().get(key);  
    } catch (RedisConnectionException e) {  
        // Redis不可用，激活降级策略  
        if (isHotKey(key)) {  
            // 热点数据从本地缓存获取  
            return localCache.get(key, k -> loadFromDatabase(k));  
        } else {  
            // 非热点直接查库  
            return loadFromDatabase(key);  
        }  
    }  
}

在 Redis 中引入布隆过滤器（Bloom Filter）来实现针对缓存的防护机制，可以有效防止缓存穿透问题。缓存穿透是指大量请求查询不存在的数据，导致请求直接打到数据库，增加数据库的负载。布隆过滤器可以快速判断一个元素是否可能存在于集合中，从而减少对数据库的无效查询。

设计思路：

布隆过滤器的初始化：

在 Redis 中创建一个布隆过滤器，用于存储所有可能存在的缓存键。
布隆过滤器可以通过 Redis 的 BF.RESERVE 命令来初始化，指定预期的元素数量和误判率。

缓存查询流程：

当客户端请求一个缓存键时，首先查询布隆过滤器，判断该键是否可能存在。
如果布隆过滤器返回“可能存在”，则继续查询 Redis 缓存。
如果布隆过滤器返回“一定不存在”，则直接返回空结果，避免查询数据库。

缓存更新流程：

当数据被写入缓存时，同时将该键添加到布隆过滤器中。
如果数据被删除或过期，布隆过滤器中的键不需要删除（因为布隆过滤器不支持删除操作）。

布隆过滤器的维护：

定期检查布隆过滤器的误判率，并根据需要重新初始化或调整布隆过滤器的参数。

1.3 消息队列的高可用

Pulsar 集群架构 Pulsar 天生支持地理复制和多租户，可实现跨区域容灾，官方架构图：

消息队列降级策略

当 Pulsar 不可用时，将异步点赞处理转为同步处理，也可以采用我们已经实现过的策略：使用 Redis 暂存点赞信息，然后批量同步到数据库。

1.4 应用的高可用

应用的高可用常用的策略是限流、降级和熔断可以使用开源高可用流控防护组件 Sentinel 实现针对外部依赖的服务调用实现熔断保护，实现应用的高可用性。

1.5 高可用监控

首先要建立全方位的监控体系：

硬件监控：收集服务器CPU使用率、内存占用、磁盘IO状态、网络吞吐量等基础指标

中间件监控：Redis命中率与内存分片情况、Pulsar队列堆积量、TiDB集群健康状态与查询响应时间

应用监控：接口响应时间、QPS、错误率、JVM堆内存与GC状况、虚拟线程数量

监控数据通过 Prometheus 采集，配置多维度告警阈值，重要指标变化时通过钉钉、企微、邮件等渠道实时通知运维人员。

定期进行健康检查，然后通过系统能智能判断整体健康度，如果有异常，则自动触发相应级别的降级策略。

还可以根据监控指标在高峰期提前预热资源，低峰期释放空闲资源。

1.6 灾备演练与容灾切换

根据"混沌工程"思想，定期模拟各类故障场景，比如随机关闭服务组件、模拟网络延迟和分区等，测量恢复时间(RTO)、数据丢失量(RPO)和用户体验影响，根据这些数据来持续改进我们的高可用方案。

除此之外，我们的系统还需要清晰明确的容灾切换流程，用于保证在紧急情况下系统可以平稳过渡。比如基于多指标综合判断触发预设的切换脚本，同时保留手动切换能力，配备详细的操作手册和责任人分工。

2. AI生成前端代码

最近一段时间我也发现ai生成前端代码效果很好

使用trea生成前端代码

下面是prompt,试下tare效果claude-3.7-Sonnet

▼
yaml
复制代码
我需要使用Vite+Vue3+Tailwind CSS(3.x 版本)实现一个博客点赞系统，系统要尽可能的简单，样式简约整齐大气，多使用弹窗而不是跳转页面，包含以下功能：  
  
1. 博客模块：  
   - 博客列表页：使用/blog/list接口获取数据，展示博客封面图、标题、摘要、点赞数、发布时间  
   - 博客详情页：通过/blog/get?blogId=xxx获取详情，显示完整内容  
   - 设计要求：响应式网格布局，悬停效果，封面图使用aspect-ratio保持比例  
  
2. 点赞模块：  
   - 实现/thumb/do和/thumb/undo接口调用  
   - 点赞按钮需实时更新状态（包括列表页和详情页）  
   - 显示动态点赞数变化（使用过渡动画）  
   - 按钮状态：未登录禁用，已点赞显示取消状态  
  
3. 用户模块：  
   - 登录功能：通过/user/login?userId=xxx实现  
   - 显示当前登录用户：使用/user/get/login接口  
   - 用户未登录时显示登录按钮  
  
技术要求：  
1. 使用Vue3 Composition API（setup语法）  
2. 状态管理使用Pinia：  
   - 用户状态（登录状态、用户信息）  
   - 博客列表缓存  
   - 点赞状态全局同步  
3. API请求使用axios并封装：  
   - 请求拦截器处理loading状态  
   - 错误统一处理（401跳转登录）  
4. Tailwind样式规范：  
   - 颜色主题：primary #4F46E5，danger #DC2626  
   - 移动优先的响应式设计  
   - 使用@apply提取通用样式  
5. 需要实现的组件：  
   - BlogCard.vue（列表项）  
   - ThumbButton.vue（带状态的点赞按钮）  
   - LoginBadge.vue（用户状态显示）  
   - ApiLoader.vue（加载状态组件）  
  
特别需求：  
- 点赞操作需要防抖处理  
- 博客列表需要实现虚拟滚动  
- 详情页访问记录本地存储  
- 所有API调用需要类型定义（根据提供的OpenAPI生成）  
- 使用Vue Router实现页面导航  
  
请按照以下顺序实现：  
1. 创建Pinia store结构  
2. 封装axios实例  
3. 实现基础布局框架  
4. 开发各个Vue组件  
5. 添加页面级交互逻辑  
  
接口文档：  
……  
将接口文档的内容 copy 过来，地址是 http://localhost:8080/api/v3/api-docs  
……

2.1 配置跨域，启动后端项目

首先启动后端项目，增加跨域配置CorsConfig

▼
java
复制代码
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
                // 允许发送 Cookie
                .allowCredentials(true)
                // 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}