伙伴匹配系统遇到的坑(已解决)

# **Spring Boot 2.6.x + Springfox(Swagger) 3.0.0 的不兼容问题** ### **核心报错:** `Failed to start bean 'documentationPluginsBootstrapper' Caused by: java.lang.NullPointerException at springfox.documentation.spring.web.WebMvcPatternsRequestConditionWrapper.getPatterns` ### **问题描述:** Springfox 3.0.0 无法适配 Spring Boot 2.6.x 的路径匹配策略 ### **解决方案一:添加配置** 在application.yml添加下面的配置 ``` spring: profiles: active: dev mvc: pathmatch: matching-strategy: ANT_PATH_MATCHER ``` 注意嵌套结构! ### **解决方案二:直接换成 SpringDoc（新标准）** (1)删除 Springfox / Knife4j（Swagger 老体系）: pom.xml 删除这些： ``` springfox-boot-starter knife4j-spring-boot-starter ``` application.yml删掉这些: ``` spring: profiles: active: dev mvc: pathmatch: matching-strategy: ANT_PATH_MATCHER ``` (2)pom.xml添加下面的依赖: ``` <dependency> <groupId>org.springdoc</groupId> <artifactId>springdoc-openapi-ui</artifactId> <version>1.6.15</version> </dependency> ``` 访问地址: http://localhost:8080/api/swagger-ui.html 优点:不需要任何额外配置,100% 兼容 Spring Boot 2.6.x 

伙伴匹配项目Day02

今天学了06-08视频教程，08看到28分左右 ### 学习内容： **1.建数据库表，改表，建立索引能加快查询 2.用mybatis-plus生成代码 3.写了根据标签查询用户的后端代码** ----> 本人很菜,教程里用的很多方法之前没了解过，先自己用最原始的办法写了代码逻辑 ----> 思路：输入（标签，多个标签用List存储）；输出（用户，多个用户，List列表，类型为User类）； ----> 逻辑：1.判断输入是否为空，为空则报错；2.创建查询语句，拼接查询条件；3.执行sql，返回结果。 **4.写测试类：1.造输入的数据，即标签列表，调用方法，查看方法执行的结果。** **5.lombok一般用来简化get/set方法等，老是忘记，记录一下。。** 看完视频，一些写法感觉很精炼，但对我来说难度比较大，写不出，所以用很原始的方法先写了一遍，再对比鱼皮的代码学一些新的写法二次改进。今天就学到这，明天改进自己的代码。 看了下视频一共67集，目前8/67=12% 两天的学习进度。加油💪🏻

伙伴匹配项目Day01

拖延了好久，又开始打开伙伴匹配APP了 今天写了一下前端 1.挂载页面要记得在App.vue里引入页面 2.基础布局：顶部导航栏+底部tab标签页+中间内容（引入页面） vant ui 官网的组件怎么互组还不太会用，但能按基础的抄过来 今天学到第五个视频《5. 前端通用布局开发》 咸鱼翻身中 1%。。。。。

解决伙伴匹配项目vercel部署前端除主页外都报404的问题

问题：**伙伴匹配在前端除了根目录，手动加后缀/team或者/user/login都无法正常访问到页面**。这个问题困扰了我半天，在星球里半天找不到答案，找到了一些他人给的朱雀的网址却要密码，于是自己想办法解决。以下是解决办法 1、在前端的根目录（即与package.json同级）新增vercel.json文件，内容如下 ```json { "rewrites": [ { "source": "/(.*)", "destination": "/index.html" } ] } ``` 2、进入vercel，自行登录，点击deployment setting  找到build and deployment 重写build command 和 output directory如图  3、回到webstorm的终端重新输入vercel --prod再次部署就可以访问前端的所有页面了！！！ 

基于Redis+ES的高效LBS

# 基于Redis+ES的高效LBS ## 实现思路 ```aiignore 用户 → Redis GEO 筛选附近用户 → ES 排序（标签+距离+活跃时间） → 返回结果 ``` 标签相同个数按照从多到少排序，距离按照从近到远排序，活跃时间和当前时间的差从小到大排序，主要目标对象还是附近的人所以先用Redis筛选附近的人 ## 引入依赖 :warning: ES版本是8.18.2​ ```xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Spring Boot Redis Starter（默认 Lettuce 客户端）--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!-- Elasticsearch Java API Client --> <dependency> <groupId>co.elastic.clients</groupId> <artifactId>elasticsearch-java</artifactId> <version>8.18.2</version> </dependency> <!-- 必须：transport 客户端 --> <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId>elasticsearch-rest-client</artifactId> <version>8.18.2</version> </dependency> <!-- JSON 序列化（ES 官方默认使用 Jackson） --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> ``` ## 简单Web逻辑代码 实体类 ```java @Data public class Location { private Double lat; private Double lon; } ``` ```java @Data public class User { private Long id; private String name; private List<String> tags; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai") private Date lastLogin; private Location location; } ``` ```java @Data public class UserVO { private Long id; private String name; private List<String> tags; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai") private Date lastLogin; private Double distance; } ``` ES配置类 ```java @Configuration public class ElasticsearchConfig { @Value("${elasticsearch.host:localhost}") private String host; @Value("${elasticsearch.port:9200}") private Integer port; @Value("${elasticsearch.username:}") private String username; @Value("${elasticsearch.password:}") private String password; @Bean public RestClient restClient() { RestClientBuilder builder = RestClient.builder( new HttpHost(host, port, "http") ); // 如果配置了用户名和密码,则使用认证 if (username != null && !username.isEmpty()) { CredentialsProvider credentialsProvider = new BasicCredentialsProvider(); credentialsProvider.setCredentials( AuthScope.ANY, new UsernamePasswordCredentials(username, password) ); builder.setHttpClientConfigCallback(httpClientBuilder -> httpClientBuilder.setDefaultCredentialsProvider(credentialsProvider) ); } return builder.build(); } @Bean public ElasticsearchTransport elasticsearchTransport(RestClient restClient) { // ObjectMapper with JavaTimeModule ObjectMapper mapper = new ObjectMapper(); mapper.registerModule(new JavaTimeModule()); mapper.disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS); // JacksonJsonpMapper 使用自定义的 ObjectMapper JacksonJsonpMapper jsonpMapper = new JacksonJsonpMapper(mapper); return new RestClientTransport(restClient, jsonpMapper); } @Bean public ElasticsearchClient elasticsearchClient(ElasticsearchTransport transport) { return new ElasticsearchClient(transport); } } ``` Redis配置类 ```java @Configuration public class RedisConfig { /** * RedisTemplate 配置 */ @Bean public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) { RedisTemplate<String, Object> template = new RedisTemplate<>(); template.setConnectionFactory(redisConnectionFactory); // key 序列化 StringRedisSerializer stringSerializer = new StringRedisSerializer(); // value 序列化（JSON） GenericJackson2JsonRedisSerializer jsonSerializer = new GenericJackson2JsonRedisSerializer(); // key & hash key template.setKeySerializer(stringSerializer); template.setHashKeySerializer(stringSerializer); // value & hash value template.setValueSerializer(jsonSerializer); template.setHashValueSerializer(jsonSerializer); template.afterPropertiesSet(); return template; } } ``` controller类 ```java @RestController @RequestMapping("/user") public class UserController { @Resource private ElasticsearchClient elasticsearchClient; @Resource private UserService userService; @GetMapping("/createIndex") public String createIndex() throws IOException { if (elasticsearchClient.indices().exists(e -> e.index("user")).value()) { return "索引 user 已存在"; } TypeMapping mapping = new TypeMapping.Builder() .properties("id", new Property.Builder() .long_(l -> l) .build()) .properties("name", new Property.Builder() .keyword(k -> k) .build()) .properties("tags", new Property.Builder() .keyword(k -> k) .build()) .properties("lastLogin", new Property.Builder() .date(d -> d.format("yyyy-MM-dd HH:mm:ss||strict_date_optional_time")) .build()) .properties("location", new Property.Builder() .geoPoint(g -> g) .build()) .build(); CreateIndexRequest createIndexRequest = new CreateIndexRequest.Builder() .index("user") .mappings(mapping) .build(); CreateIndexResponse createIndexResponse = elasticsearchClient.indices().create(createIndexRequest); return "user 索引创建成功"; } /** * 初始化 50 条假数据（写入 Redis + ES） */ @GetMapping("/init") public String init() throws IOException { userService.generateUsers(); return "初始化数据成功"; } @PostMapping("/search") public List<UserVO> query(@RequestBody User user){ if(user==null){ throw new RuntimeException("未登录"); } if(user.getLocation()==null){ throw new RuntimeException("未开启位置定位，无法使用"); } return userService.searchUsers(user); } } ``` service接口 ```java public interface UserService { public void generateUsers() throws IOException; List<UserVO> searchUsers(User user); } ``` service实现类(ES实现使用的是低级客户端，高级客户端lambda一堆报错) ```java @Service public class UserServiceImpl implements UserService { @Resource private RedisTemplate<String, Object> redisTemplate; @Resource private ElasticsearchClient elasticsearchClient; @Resource private RestClient restClient; private static final String GEO_KEY = "user:geo"; private static final List<String> TAG_POOL = Arrays.asList( "唱歌", "跳舞", "Java", "LOL", "绘画", "健身", "旅游", "摄影", "美食", "篮球","C++","Rust","Go","C" ); private static final double R = 6371.0; @Override public void generateUsers() throws IOException { double baseLon = 116.403; double baseLat = 39.923; for (int i = 1; i <= 50; i++) { User user = new User(); user.setId((long) i); user.setName("用户" + i); user.setLastLogin(new Date(System.currentTimeMillis() - new Random().nextInt(600) * 60 * 1000L)); // 随机兴趣标签 Collections.shuffle(TAG_POOL); user.setTags(TAG_POOL.subList(0, 3)); // 随机坐标 double lon = baseLon + (Math.random() - 0.5) * 0.04; double lat = baseLat + (Math.random() - 0.5) * 0.04; // 使用 Location 类来设置坐标（关键修改点） Location location = new Location(); location.setLat(lat); location.setLon(lon); user.setLocation(location); // Redis GEO 使用 lon + lat redisTemplate.opsForGeo().add( GEO_KEY, new Point(lon, lat), user.getId().toString() ); // 写入 ES（自动序列化为 { "lat": xx, "lon": xx }） elasticsearchClient.index(k -> k .index("user") .id(user.getId().toString()) .document(user) ); } } @Override public List<UserVO> searchUsers(User requestUser) { double lat = requestUser.getLocation().getLat(); double lon = requestUser.getLocation().getLon(); List<String> tags = requestUser.getTags(); if (tags == null || tags.isEmpty()) { throw new RuntimeException("请至少传入一个兴趣标签"); } try { //1. Redis 查询附近用户（半径 5km） GeoResults<RedisGeoCommands.GeoLocation<Object>> nearby = redisTemplate.opsForGeo().radius( GEO_KEY, new Circle(new Point(lon, lat), new Distance(5, Metrics.KILOMETERS)), RedisGeoCommands.GeoRadiusCommandArgs.newGeoRadiusArgs().sortAscending() ); List<String> nearIds = nearby.getContent() .stream() .map(r -> r.getContent().getName().toString()) // ← 必须 toString .collect(Collectors.toList()); // 删除当前用户自身 nearIds.remove(requestUser.getId().toString()); // 附近没人直接返回空 if (nearIds.isEmpty()) { return Collections.emptyList(); } // 构造 terms id 过滤字段 String filterIds = nearIds.stream() .map(id -> "\"" + id + "\"") .collect(Collectors.joining(",")); // ========== 2. 构造 should (tags) ========== String shouldTags = tags.stream() .map(t -> "{\"term\":{\"tags\":\"" + t + "\"}}") .collect(Collectors.joining(",")); // ========== 3. painless 参数 ========== String paramsTags = tags.stream() .map(t -> "\"" + t + "\"") .collect(Collectors.joining(",")); // ========== 4. 当前时间（用于 lastLogin decay） ========== String nowStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()); // ========== 5. ES 查询 JSON ========== String jsonQuery = "{\n" + " \"size\": 5,\n" + " \"query\": {\n" + " \"bool\": {\n" + " \"filter\": {\n" + " \"terms\": { \"id\": [" + filterIds + "] }\n" + " },\n" + " \"must\": {\n" + " \"function_score\": {\n" + " \"query\": {\"bool\": {\"should\": [" + shouldTags + "], \"minimum_should_match\": 1}},\n" + " \"functions\": [\n" + " {\n" + " \"script_score\": {\n" + " \"script\": {\n" + " \"source\": \"int s=0; for(tag in params.tags){ if(doc['tags'].contains(tag)){s++;}} return s;\",\n" + " \"params\": {\"tags\": [" + paramsTags + "]}\n" + " }\n" + " },\n" + " \"weight\": 3\n" + " },\n" + " {\n" + " \"gauss\": {\"lastLogin\": {\"origin\": \"" + nowStr + "\", \"scale\": \"2h\", \"decay\": 0.5}},\n" + " \"weight\": 2\n" + " },\n" + " {\n" + " \"gauss\": {\"location\": {\"origin\": \"" + lat + "," + lon + "\", \"scale\": \"3km\", \"decay\": 0.5}},\n" + " \"weight\": 3\n" + " }\n" + " ],\n" + " \"score_mode\": \"sum\",\n" + " \"boost_mode\": \"sum\"\n" + " }\n" + " }\n" + " }\n" + " }\n" + "}"; // ========== 6. 调 ES ========== Request req = new Request("GET", "/user/_search"); req.setJsonEntity(jsonQuery); Response response = restClient.performRequest(req); String json = EntityUtils.toString(response.getEntity(), "UTF-8"); // ========== 7. 解析结果 ========== ObjectMapper mapper = new ObjectMapper(); mapper.registerModule(new JavaTimeModule()); mapper.disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS); JsonNode hits = mapper.readTree(json).path("hits").path("hits"); List<UserVO> result = new ArrayList<>(); for (JsonNode hit : hits) { User u = mapper.treeToValue(hit.path("_source"), User.class); UserVO vo = new UserVO(); BeanUtils.copyProperties(u, vo); // 计算真实距离（2位小数） double dist = calculateDistance(lat, lon, u.getLocation().getLat(), u.getLocation().getLon()); vo.setDistance(dist); result.add(vo); } return result; } catch (Exception e) { throw new RuntimeException("搜索失败：" + e.getMessage(), e); } } private double calculateDistance(double lat1, double lon1, double lat2, double lon2) { // 地球半径 km double dLat = Math.toRadians(lat2 - lat1); double dLon = Math.toRadians(lon2 - lon1); lat1 = Math.toRadians(lat1); lat2 = Math.toRadians(lat2); double a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2); double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); double distance = R * c; return new BigDecimal(distance) .setScale(2, RoundingMode.HALF_UP) .doubleValue(); } } ``` yml配置(ES未开始HTTPS) ```yml server: port: 8080 servlet: context-path: /api spring: redis: host: localhost port: 6379 elasticsearch: host: localhost port: 9200 ``` ## Postman测试 GET ```GET http://localhost:8080/api/user/createIndex ``` GET ``` http://localhost:8080/api/user/init ``` POST ``` http://localhost:8080/api/user/search ``` POST方法的body ```json { "id": 1, "name": "张三", "tags": ["Java", "摄影", "美食","跳舞"], "lastLogin": "2024-01-23 10:30:00", "location": { "lat": 39.89, "lon": 116.40 } } ``` 测试结果结果： 

"海底小纵队" 项目总结（伙伴匹配系统）

想想该从何谈起哈，我想这个项目总结当中，我不会太去谈论关于这个项目的具体的某个实现之类的，那是笔记应该去做的事情，**我想更多的去聊一聊在做这个项目期间我所收获的那些可以复用的内容**，当然不只是因为这个项目，和我去逛编程导航的帖子有很大的关系（自己对于编程导航的开发还是太少了，宝藏有那么多，之前都没有意识到）但确实是在做这个项目期间发生的事情 ### 1. 做完之后回头看 做完之后回头看的话，其实会和做用户中心时类似的一个感受，这个项目无论从业务逻辑上，还是具体的业务实现上来说都是极其清晰且简单的（但简单并不意味着容易哈），也大抵是因为做完之后回头看是一种全局视角，一种上帝视角； 而做项目的时候，其实是一种局部的视角，只缘身在此山中的视角，是无法做到一览众山小的，**如果之后做的多了，我想鱼皮现在就可以做到这种程度了，或者架构师在没做项目之前单纯去看项目就已经是一个上帝视角了，还是很帅的！** ### 2. 到底做了什么 这个项目的业务逻辑是很简单的，现在去复述一下的话，大抵就分为以下几个大的板块 1. 登录 & 注册 和用户中心那一套是一样的，对密码和账号这些内容进行一个校验，逻辑通过的话，就可以正常登录 / 注册 2. 用户 这个涉及的就是用户的个人信息，有哪些字段，比如基础的昵称，性别，邮箱，简介，头像啥的，**在这个项目当中最关键的一个字段就是标签嘛，不像用户中心只需要一张表，因为标签的存在，是需要实现类似 Obsidian 里 "双向链表" 的一个效果的**，后面根据标签搜索伙伴的时候会使用到，后面关于队伍板块当中的根据标签搜索队伍也是类似的实现，甚至可以说是一样的实现 因为这个项目当中是涉及到头像了嘛，其实用户中心当中也是有的，但是那时候我没做，总之就是要支持用户自定义上传图像的功能，是需要一个存储空间的嘛，我用的是阿里云，也**算是把关于文件存储相关的配置给跑通了，后面再去做云图库的时候就可以当到云图库上面了吧** 3. 队伍 队伍的话，其实没什么，就是创建队伍，队伍的状态分为公开，私密，加密三种状态；队长拥有解散队伍，更改队伍信息，转让队长权限，邀请成员，踢出普通队员的功能；普通成员可以选择退出队伍； 这里加了一个队伍内的成员可以实时聊天的功能，一方面是实时，一方面是持久化，用到的技术就是 WebSocket + Stomp，**不晓得鱼皮在这个项目当中有没有实现这个功能，因为我大部分其实是没有去看教程视频的** 在确定要做哪些内容之后就自己去做了，不过想到这个点的时候还是挺高兴的，有种开窍的感觉，毕竟这个算是自己想到的嘛，然后也实现出来了，虽然这是一个正常人就很容易想到的功能，但还是很开心(*^▽^*) **这也是一个契机，去学习一项新技术的契机**（虽然前面的缓存和并发什么的也是属于新技术，但确实没太往这边想），去沉淀下来一份关于快速入门一项新技术的 SOP，还是挺好用的，但在写 Demo 的时候也踩了一些坑 比如 WebSocket 的 Demo 我是直接在伙伴匹配系统当中去写的，一些配置上的问题就出现了，拦截器的问题也出现了...反正就是各种跑的不顺利，**后来干脆新建一个项目来单独写这个 Demo 就顺利多了，所以这也是在快速入门一项新技术当中需要注意的一个点，这次我是真的记住了** **也因此我打算在 GitHub 单独开一个新的仓库专门来放那些快速入门一项新技术的内容**，一方面算是为后面做自媒体的在铺路吧，这种快速入门应该还是很适合去做那种 **"两分钟教会你××" 的系列的**，后面大概率会去做，但什么时候会去做，我打不了一个保票；另一方面 GitHub 是一个程序员的脸面嘛，有这个仓库也算是展现自我的一个部分吧 接着又给个人和个人之间也添加了这个消息的同步和持久化的功能，相比在队伍当中，一对一的实现会稍微难一点，但核心是一样的 4. 性能优化 性能优化主要分为两个部分嘛，第一个部分是 Reids 缓存，第二个部分是并发，这里倒是太多想要说了的，去对比了有缓存，没缓存；有并发，没并发的一个性能上的区别，接着就是具体的实现 ### 3. 一些可以复用的内容 #### 3.1 上下文缺失的问题 这肯定是一个，直接解决我的心头大患，之前那期聊 Gemini 3 Pro 的文章是专门聊过的，在这里就不赘述了 https://www.codefather.cn/post/1991452355794612225 #### 3.2 开发流程的规范 想法 -> 需求设计分析拆解 -> 设计分析前端页面，获得初版的 UI 交互页面（交付是图片） -> 后端 API 设计 -> 编写后端代码 -> 后端的单元测试 -> 编写前端代码 -> 前后端连接 / 全栈测试 -> 上传到 GitHub（方便之后的回溯）-> 直到完成所有的功能 -> 项目总结 -> GitHub 开源 -> 部署 -> 上线 **这里的几乎每个环节，我都是有对应的专属于自己的提示词的，也是在做这个项目当中迭代出来的，迭代之后的版本在开发的过程舒服多了，但编程导航现在应该是没有上传 pdf 文件的功能吧，如果想要分享的话，篇幅太长了** #### 3.3 Git 说到上传到 GitHub 上方便回溯，这次也是真的使用到了，因为新开了一个对话，导致上下文的欠缺（当时没没有解决上下文缺失的问题），生成的代码是各种的报错...前后端项目都乌烟瘴气的，就想到直接回溯到之前的版本吧，确实方便 **还有关于 GitHub 的一点是，当拆解到最小功能实现的时候，每跑完一个后端 API 设计，单元测试，前端代码编写，测试之后，就上传到 GitHub 上**。这样一方面是方便回溯，不至于说要回溯的时候，一回溯回溯到老久之前；另一方面是可以增加自己项目的真实性嘛 **在昨天给项目的前端大更新的时候，我就忘记了这点，是在一波大改之后才去 Git 存档，这是之后做项目的过程务必要避免的** #### 3.4 前端页面设计 虽然是一名后端开发，但未来是去做自己的产品的，就算不去做自己的产品，未来也是需要求职的，求职需要项目嘛，项目美观一些给人的体验相比不美观的体验差距我觉得不是一点半点的 **就像做菜是讲究 "色香味俱全" 的，"色" 说的就是这道菜的视觉呈现，把 "色" 放到第一位是有原因的，我记得小时候看大耳朵图图的时候图图妈上一个烹饪班，还专门有对这个问题的讨论，印象还是挺深刻的（我确实喜欢吃，也喜欢自己琢磨吃，寒暑假的时候还是经常自己做饭的）** 对应的产品设计上也是一样的，网站的话更专业的讲是叫做 UI 设计吧，虽然说肯定做不到像 UI 设计师的那种程度，但至少做到让人看到之后不要觉得这个页面很丑就行，也就是做到一个及格分吧，能加一些小设计就更好了 为了实现这一点，其实是可以通过在需求设计分析拆解之后，划分到尽可能的最小子单元之后，把自己的设计想法告诉 AI 来生成一个 UI 设计稿的，虽然绝大概率不能完全的实现，但至少是有了那么一个方向嘛，大抵是比不进行这个操作要好上一些的，而且这个操作其实也不怎么花时间，**我打算之后大改前端页面之后的 UI 设计稿是下面这个样子的，最终的前端页面我会放到最下面，虽然说没有那么好看，但个人已经是很满意的了**   #### 3.5 对于代码和笔记的优化 先引用一下鱼皮对于代码的观点哈 --- 对于学编程来说，千万不要去背代码！ 本来编程知识这辈子都学不完了，背代码的话下辈子都学不完了。 学编程时，我们应该： **记住有什么，你能做什么，而不是具体怎么做** 。 举个例子，现在让你‎设计一个电梯调度系统。你只需要听说⁠过有个东西叫 电梯调度算法 ，以及​它能实现电梯的有序调度就行了，而并؜不需要记住怎么写代码。等到要做的时候，去搜该算法具体的实现就行了。 再举个例子，现在前端的类库那么多，假设让你做一个网页动画效果，那你在此前只需要知道 Animate.css 库可以实现，等用的时候查文档就好了，并不需要把它的每个类、每种用法都记下来。别忘了，代码更新换代很快的，即使有的东西你能记住，但它也有时效性。 尤其是对于编‎程的初学者，不要去背代⁠码，你只需要知道某个函​数大概能做什么事情，我؜要完成某个功能时能想到它（甚至是能搜到）就可以了。 --- 看完这段，大彻大悟！我之前是真的会因为具体业务逻辑的代码实现记不住而难受的，现在好起来了，如释重负，于是花了大概三个小时的时间去重塑一下关于代码和笔记的内容，然后融入到了自己的开发流程，我不知道怎么去讲解我到底是怎么做的了，因为花了三个小时去做的内容，很难通过三言两语讲述出来，总之，最后沉淀下来的是几份 SOP   笔记也由原来的近乎的全盘整理变成了"记住有什么，你能做什么，而不是具体怎么做" **只记录能做什么？** **为什么选择这项技术做？** **其他技术不选择的原因是什么？** **路径和参数是什么？** **可能遇到的挑战有哪些？** **这些挑战如何可以通过什么解决的？** 这些问题的对应的回答的就是下面的样子，我还加入检测文档，方便睡前复习，之前也会整理笔记，但是笔记太多了，就完全没有想要复习的欲望在，现在简单清晰了很少，还方便复习了，而且在采用这种方法之后，我的 Obsidian 就很难乱了，之前乱的原因也很好解释，就是我习惯把很多内容直接放到 Obsidian 里面，但是却不怎么整理，之前是全盘整理嘛，太反人性了，就...越积越多了，但现在不是了，在完成一个最小的功能之后，顺手就整理好了，心情愉悦~  #### 3.6 需求设计分析拆解到最小子单元 就比如下面这个样子，这可太重要了，这决定了闭环获得反馈的时间  ### 4. "海底小纵队" 展示 **下面再放一些图片，这篇项目总结就结束了，写到这里的时候，开源和部署上线还没做完，之后应该会单独发一篇来放网址啥的**       言尽于此，下次再见ヾ(￣▽￣)Bye~Bye~

🚀 编程导航成品项目（上百个真实项目）

编程导航已累计发布数十套项目教程：[课程地址](https://www.codefather.cn/course)。 为方便大家集中学习参考，也帮助已完成项目的同学获得更多曝光与真实用户，我们整理汇总了过往提交的优质项目帖。 🔍 如果你的项目已提交，欢迎确认是否被收录； 🚀 如果你正在开发中，不妨参考已有项目的实现思路与笔记总结，相信对你有帮助。 > 收录说明：若你的项目文章尚未被收录，欢迎评论区留言：项目文章链接 + 线上地址（如有），管理员会定期更新到汇总帖里，助力每一个认真分享的项目被更多人看见~ ## AI 零代码应用生成平台 企业级项目教程：https://codefather.cn/course/1948291549923344386 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### CodeLoom（已上线） 👉 线上地址：http://1.15.243.228:9010/CodeLoom/ 📚 原帖链接：https://codefather.cn/post/1960256724123316226   #### AI Code Mother（已上线） 👉 线上地址：https://joinoai.cloud/user/register?inviteCode=INVNJZKYSJH 📚 原帖链接：https://codefather.cn/post/1974436661408411649   #### 代码灵构 📚 原帖链接：https://codefather.cn/note/1957033275842670593   #### XiangAI 📚 原帖链接：https://codefather.cn/essay/1957335221259333633   #### AI Code easen 📚 原帖链接：https://codefather.cn/post/1954389275447824386   ## AI 超级智能体 企业级项目教程：https://codefather.cn/course/1915010091721236482 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### Crispix Agent 📚 原帖链接：https://codefather.cn/post/1962528203403792386  #### ApocalyxAI（智能助手平台） 📚 原帖链接：https://codefather.cn/post/1937413626668843010   #### 神农医慧库 📚 原帖链接：https://codefather.cn/post/1936010788000563201  #### AI 智能应用中心 📚 原帖链接：https://codefather.cn/post/1928019148442537985  #### CodeManus AI 助手 📚 原帖链接：https://codefather.cn/post/1966800552892235778   ## 智能协同云图库项目项目 企业级项目教程：https://codefather.cn/course/1864210260732116994 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 悦木图库（已上线） 👉 线上地址：https://lumenglover.com/ 📚 原帖链接：https://codefather.cn/essay/1890067861869486081   #### 暴龙图库（已上线） 👉 线上地址：https://picture.baolong.icu/ 📚 原帖链接：https://codefather.cn/post/1905997569888280577   #### Crispix AI 图库（已上线） 👉 线上地址：https://crispix.fun 📚 原帖链接：https://codefather.cn/post/1915861894909386754   #### 云图智联（已上线） 👉 线上地址：https://imagecore.netlify.app/ 📚 原帖链接：https://codefather.cn/post/1970098502037934081   #### 荒梦图库（已上线） 👉 线上地址：https://pichm.cloud/ 📚 原帖链接：https://codefather.cn/post/1960673049771610113   #### Picazza 图库（已上线） 👉 线上地址：https://picazza.com/ 📚 原帖链接：https://www.codefather.cn/post/1945659153240215554   #### 悦突突（已上线） 👉 线上地址：https://coder-live.cn/ 📚 原帖链接：https://codefather.cn/post/1950740016980426754   #### 图潮（已上线） 👉 线上地址：https://picwave.top/ 📚 原帖链接：https://codefather.cn/essay/1911024578559188993   #### 云相册（已上线） 👉 线上地址：https://pic.lin03.cn/ 📚 原帖链接：https://codefather.cn/post/1929477619980566530   #### HY 映像（已上线） 👉 线上地址：https://zhydoc.com/picture/ 📚 原帖链接：https://codefather.cn/post/1967843032026775553  #### 智图云链（已上线） 👉 线上地址：http://117.72.69.235/  #### han_picture 📚 原帖链接：https://codefather.cn/post/1974327430218887170   ## 面试刷题平台 企业级项目教程：https://codefather.cn/course/1826803928691945473 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 面试秘境（已上线） 👉 线上地址：http://mianshimijing.icu/ 📚 原帖链接：https://codefather.cn/post/1869660024067571713   ## AI 答题应用平台 企业级项目教程：https://codefather.cn/course/1790274408835506178 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 腾蛇问渊（已上线） 👉 线上地址：https://aianswerproj.vercel.app/ 📚 原帖链接：https://codefather.cn/essay/1809498338799878146  #### 智慧答 📚 原帖链接：https://codefather.cn/post/1826490068167761921   ## OJ 在线判题系统 企业级项目教程：https://codefather.cn/course/1790980707917017089 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 雪 OJ（已上线） 👉 线上地址：http://snowyee.cn/snowyee-oj/#/ 📚 原帖链接：https://codefather.cn/note/1810751001442844674   #### 流火 OJ 📚 原帖链接：https://codefather.cn/post/1827575600860672001   #### SSPU-OJ 📚 原帖链接：https://codefather.cn/post/1964988539086487554   #### 新 OJ 📚 原帖链接：https://codefather.cn/note/1806522941518364673   #### HHOJ 📚 原帖链接：https://codefather.cn/post/1895681485945774082   #### AICoder OJ 📚 原帖链接：https://codefather.cn/note/1811051057198858241  📚 原帖链接：https://codefather.cn/note/1829734814391640065   #### CsCS OJ 📚 原帖链接：https://codefather.cn/post/1836003849697837057  #### 疯 OJ 📚 原帖链接：https://codefather.cn/post/1913879429893369857   ## 代码生成器共享平台 企业级项目教程：https://codefather.cn/course/1790980795074654209 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 飞云代码生成 📚 原帖链接：https://codefather.cn/note/1816913082742140930  ## 智能 BI 项目 企业级项目教程：https://codefather.cn/course/1790980531403927553 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 灵犀 BI（已上线） 👉 线上地址：http://bi.hejiajun.icu/ 📚 原帖链接：https://codefather.cn/post/1876163793297530881  #### Kim 智能 BI 📚 原帖链接：https://codefather.cn/post/1908147328172138498   #### Liy 智能 BI 分析系统 👉 线上地址：https://8.141.7.82/login 📚 原帖链接：https://codefather.cn/essay/1853271746140782593   #### Admin 智能 BI 分析系统 📚 原帖链接：https://codefather.cn/post/1812563734513770498   #### Flance 智能 BI 系统 📚 原帖链接：https://codefather.cn/note/1813731731964133378   #### AI 洞察 📚 原帖链接：https://codefather.cn/post/1816913159401435138    #### hx BI 📚 原帖链接：https://codefather.cn/post/1812563043074367490   #### Solar BI 📚 原帖链接：https://codefather.cn/note/1816551710832824322   #### 哥布林智能 BI 分析系统 📚 原帖链接：https://codefather.cn/note/1811050100016742402   #### PS 智能 BI 分析系统 📚 原帖链接：https://codefather.cn/note/1810278024374505474   #### ToolVerse：一体化智能管理与创新服务平台 📚 原帖链接：https://codefather.cn/post/1810389203533025282   #### Nero 智能 BI 分析系统 📚 原帖链接：https://codefather.cn/note/1811010648561090562   #### GBC 智能 BI 分析系统 📚 原帖链接：https://codefather.cn/note/1808941076960215041   ### 聚合搜索平台 企业级项目教程：https://codefather.cn/course/1790979621621641217 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 空空-聚合搜索平台 📚 原帖链接：https://codefather.cn/note/1924150587763404802   #### 崽崽聚合搜索平台 📚 原帖链接：https://codefather.cn/note/1817637092455018497   #### 青年聚合搜索平台 📚 原帖链接：https://codefather.cn/post/1825764402195537921  ### API 开放平台 企业级项目教程：https://codefather.cn/course/1790979723916521474 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### Qi-API 接口开放平台（已上线） 👉 线上地址：https://api.qimuu.icu/user/login 📚 原帖链接：https://codefather.cn/note/1805877794735435778   #### 羊腿 API 开放平台（已上线） 👉 线上地址：http://api.panyuwen.top/user/login 📚 原帖链接：https://codefather.cn/note/1855478010485653505    #### Cxm-API 接口开放平台 📚 原帖链接：https://codefather.cn/essay/1905452207706185730    #### LeAPI 接口开放平台 📚 原帖链接：https://codefather.cn/note/1816551310788497409   #### X API 开放调用平台 📚 原帖链接：https://codefather.cn/note/1816913304989921281   #### Adagio 接口开放平台 📚 原帖链接：https://codefather.cn/note/1816551835571425281   #### 聚合 API 开放平台 📚 原帖链接：https://codefather.cn/note/1811049203207438337   #### EasyAPI 开放平台 📚 原帖链接：https://codefather.cn/note/1832713500474793986   #### 洛言接口开放平台 📚 原帖链接：https://codefather.cn/post/1828449609845428226  #### k 接口开放平台 📚 原帖链接：https://codefather.cn/note/1808772929765376001  #### 为-接口开放平台 📚 原帖链接：https://codefather.cn/note/1811050695448526849   #### API 接口服务平台 📚 原帖链接：https://codefather.cn/post/1839933551062880258  #### 银竹接口开放平台 📚 原帖链接：https://codefather.cn/post/1810389203533025282   #### Insight平台 📚 原帖链接：https://codefather.cn/post/1812563734513770498  ### 伙伴匹配系统 企业级项目教程：https://codefather.cn/course/1790950013153095682 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### homie 伙伴匹配系统（已上线） 👉 线上地址：http://hm.hejiajun.icu/ 📚 原帖链接：https://codefather.cn/note/1823592419365535746   #### 花语-伙伴匹配系统（已上线） 👉 线上地址：http://huayu.hanades.online  #### 速配 SUPER - 伙伴匹配系统（已上线） 👉 线上地址：https://ochiamalu.fun/ 📚 原帖链接：https://codefather.cn/essay/1909073423851560961   #### yes - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/post/1811047157863481345   #### 等闲 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1812741780545921026   #### 鱼泡 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1806571986623836161   #### Louis - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1806569725122228226  #### 知秋 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1816551544797106177   #### 小虎 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1814012455103463426  #### 龙 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1818361301050142721   #### w - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1838446471885594625   #### 云交友 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/post/1825763690480869378   #### 大学生 - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/note/1820898093159849986   #### Yz - 伙伴匹配系统 📚 原帖链接：https://codefather.cn/essay/1870039737155010561   ### 用户中心项目 企业级项目教程：https://codefather.cn/course/1790943469757837313 > 视频教程 + 项目文档 + 源码 + 简历写法 + 面试题解 + 专属交流群 #### 可乐用户中心（已上线） 👉 线上地址：http://user.xykcola.site/user/login 📚 原帖链接：https://codefather.cn/note/1811475602152685570   #### （NextJS 版）用户中心管理 📚 原帖链接：https://codefather.cn/post/1912880102888280065  #### chen 用户中心 📚 原帖链接：https://codefather.cn/note/1811050198691938306   #### Find Me 用户中心 📚 原帖链接：https://codefather.cn/note/1811342501757911041   #### 小汉用户中心 📚 原帖链接：https://codefather.cn/note/1810181026137473026   #### 用户中心 📚 原帖链接：https://codefather.cn/post/1925206864866131970   #### 吃鱼用户中心 📚 原帖链接：https://codefather.cn/post/1896897093685288961  📚 原帖链接：https://codefather.cn/note/1811049194567172097  #### 崽崽用户中心 📚 原帖链接：https://codefather.cn/note/1817637102550708225   #### Jiaxiong 用户中心 📚 原帖链接：https://codefather.cn/note/1815828758460895233  

伙伴匹配项目关于vant4组件不加载问题

```html <template> <form action="/"> <van-search v-model="searchText" show-action placeholder="请输入搜索标签" @search="onSearch" @cancel="onCancel" /> </form> <van-divider content-position="left">已选标签</van-divider> <van-tag :show="true" closeable size="medium" type="primary" @close="close"> 标签 </van-tag> <van-divider content-position="left">选择标签</van-divider> </template> <script setup> import {ref} from "vue"; import {showToast} from "vant"; const searchText = ref(''); const onSearch = (val) => showToast(val); const onCancel = () => showToast('取消'); </script> <style scoped> </style> ``` 这是我search搜索页面的代码，搜索页面没有展示出van-divider和van-tag，如下图（图一）所示，应该效果要像图2一样显示的，怎么回事，在main.ts中我也引入了divider和tag组件，也试过全部换成import Vant ，但是就是不显示出来，下面是我的main.ts代码，求助一下大家 ```ts import {createApp} from 'vue' import App from './App.vue' import {NavBar, Icon, Toast,Tabbar,TabbarItem,Search,Divider,Tag} from 'vant'; import * as VueRouter from 'vue-router'; import routes from "./config/router"; import 'vant/lib/index.css'; const app = createApp(App); app.use(NavBar); app.use(Icon); app.use(Toast); app.use(Tabbar); app.use(TabbarItem); app.use(Search); app.use(Divider); app.use(Tag); const router = VueRouter.createRouter({ // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 history: VueRouter.createWebHashHistory(), routes, // `routes: routes` 的缩写 }) app.use(router); app.mount('#app'); ```  

《伙伴匹配系统》 爆改 《花语》

添加了不少功能，比如说发送邀请啦，管理员啦，甚至还有聊天功能（包括私聊和群聊）基于rabbitmq 还有 stomp 协议的 websocket 实现的hhh，可能还有不少bug，请大家多多担待~（界面还是很好看的，就算是手机上打开，也和一个正常的聊天交友app所差无几）还有就是由于没有加 oss，所以可能头像不太能上传，所以我用的是随机头像的机制~ 把网址贴在这里！大家可以多多测试！[花语](http://huayu.hanades.online) 是个 http ^^ 大家轻点完，不要玩坏了😭🥲     

刚刚完成了伙伴匹配系统项目，在这个项目中学到的一些东西： 1、让长时间没敲代码的我快速培养起代码手感 2、更加熟悉了Map、Set、List以及lamda表达式的写法 整合Swagger文档 3、学习了vue中的组件传参，axios的整合以及ts相关内容 4、学习了Redis的基本知识以及使用日常使用方法，了解到redis可以做分布式锁 5、新学习了定时任务配合redis的用法，能够在处于庞大数据中，前端也能快速渲染页面 收获很大，准备下一步在优化一下项目细节，就投身学习AI智能体应用了！加油加油！