卓越之旅：在优秀案例中精进，编织技术梦想

本文最后更新于：1 个月前

不知道少了什么感觉，没有以前快乐。

写在前面

2024 年 7 月 12 日

为什么会突然想到写这样一篇博客呢？我简单反省过这半年来的学习规划，确实很长时间没有更新过专精编程技术的博客了。

在今年这个最关键的时间节点，我很清楚自己最需要做什么。

在今年上半年有过的唯一一段工作经历，让我越发清醒地意识到：在持续备战秋招的忙碌生活中，我必须要找到自己真正喜欢并愿意长期付之以时间的爱好。

最近很喜欢研究象棋，也在尝试了解学习视频剪辑的艺术，更多的是通过读书，写作来记录生活，陶冶情操。

那段工作经历让我真正意识到，工作只是生存的一部分，上班之余的时间才算是真正的生活。

所以我更希望能够在工作之余的闲暇时间，做点什么来充实自己的业余生活。

我发觉到长期处于烦闷无聊的工作中，我对编程学习的兴趣在逐渐消退了，我需要重新汲取外部优质资源。

站在巨人的肩膀上，开启我的编程精进之路。

正文

仿网易云音乐

🍖 推荐阅读：

网易云音乐 (163.com)

Node.js — Node.js, the difference between development and production (nodejs.org)

项目启动

2024 年 7 月 12 日

前端项目跑起来：

当在命令行中遇到 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件 这个错误时，这通常意味着你的系统中没有正确安装 Vue CLI 或者其可执行文件 vue-cli-service 没有被添加到系统的 PATH 环境变量中。以下是一些解决这个问题的步骤：

image-20240712170550777

  1. 确认 Vue CLI 是否已安装

首先，你需要确认 Vue CLI 是否已经安装在你的机器上。打开命令行工具，输入以下命令来检查 Vue CLI 是否安装以及其版本：

1
2
3
bash复制代码

vue --version

如果系统提示 vue 命令找不到，那么你需要安装 Vue CLI。

  1. 安装 Vue CLI

如果 Vue CLI 没有安装，你可以通过 npm（Node.js 的包管理器）来安装它。首先，确保你已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令来全局安装 Vue CLI：

1
2
3
bash复制代码

npm install -g @vue/cli

或者使用 yarn（如果你更倾向于使用 yarn）：

1
2
3
bash复制代码

yarn global add @vue/cli
  1. 尝试再次运行你的项目

在完成上述步骤后，回到你的 Vue 项目目录，并尝试再次运行：

1
2
3
bash复制代码

vue-cli-service serve

4.要是还是不行，就直接执行：

1
npm install

本项目后端依赖于这个开源的网易云音乐 API 接口项目，请自行下载并运行：NeteaseCloudMusicApi

后端启动

2024 年 7 月 21 日

本项目后端依赖于这个开源的网易云音乐 API 接口项目，请自行下载并运行：

NeteaseCloudMusicApi

image-20240721134317108

这个错误提示 CERT_HAS_EXPIRED 表示你尝试连接到 npm 注册表时使用的 SSL 证书已经过期。这通常是因为你的 npm 客户端配置使用了过时的注册表 URL 或者你的系统日期和时间设置不正确。以下是一些解决这个问题的步骤：

  1. 检查系统日期和时间：
    确保你的计算机的系统日期和时间设置是正确的。错误的日期和时间设置可能导致 SSL 证书验证失败。

  2. 检查 npm 配置：
    运行 npm config list 来查看当前的 npm 配置，特别是 registry 的值。它应该指向 https://registry.npmjs.org/。如果指向的是 http 而非 https，或者是一个其他非官方镜像，请考虑修改它。

    你可以使用以下命令来设置 npm 的默认注册表地址：

    1
    2
    3
    bash复制代码

    npm config set registry https://registry.npmjs.org/

  3. 清除 npm 缓存：
    有时候清除 npm 缓存可以解决奇怪的安装问题。你可以使用以下命令来清除缓存：

    1
    2
    3
    bash复制代码

    npm cache clean --force

  4. 检查网络设置：
    如果你在公司或学校网络环境中，可能存在网络代理或防火墙设置阻止了 https 连接的正确验证。你可以尝试暂时关闭这些设置或使用其他网络环境来查看问题是否仍然存在。

  5. 更新 npm 和 Node.js：
    确保你的 npm 和 Node.js 都是最新版本。旧版本的 npm 可能不支持 TLS 1.2 或更高版本。你可以通过运行以下命令来更新 npm：

    1
    2
    3
    bash复制代码

    npm install -g npm

    如果需要更新 Node.js，你可以从 Node.js 官网 下载最新版本。

  6. 检查代理和 SSL 证书：
    如果你在使用代理或 SSL 证书，请确保它们是最新的，并且正确配置在你的系统上。

  7. 尝试使用 VPN：
    有时网络问题可能由地理位置或 ISP 限制引起。尝试使用 VPN 连接到其他网络，看看是否可以解决问题。

再次执行，又出现这个问题：

image-2024072113500477

1
`ERR_SOCKET_TIMEOUT` 错误表明 npm 在尝试从 npm 注册表下载包时，由于网络问题导致连接超时。这通常与网络连接质量、代理设置、防火墙规则或 npm 服务器的响应速度有关。以下是一些解决这个问题的步骤：

如果你在中国大陆或其他地区，使用 npm 官方注册表可能受到网络延迟或限制的影响。你可以考虑使用 npm 镜像，如淘宝的 npm 镜像（cnpm）：

1
2
3
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 然后使用 cnpm 代替 npm
cnpm install

我尝试安装 cnpm，结果有报错：

image-20240721135453761

遇到 CERT_HAS_EXPIRED 错误通常意味着你尝试连接的服务器使用的 SSL 证书已经过期。然而，在这个情况下，你尝试访问的是淘宝的 npm 镜像（https://registry.npm.taobao.org），这是一个被广泛使用的、应该保持证书有效的镜像。

这个问题可能由以下几个原因引起：

  1. 系统时间设置错误：检查你的计算机的系统时间是否正确。错误的系统时间会导致 SSL 证书验证失败，因为证书的有效期是基于时间的。
  2. 网络中间人攻击（MITM）：虽然不太可能，但你的网络可能被配置为拦截 SSL/TLS 连接，并使用自己的证书。这通常发生在公司网络或受限制的网络环境中。
  3. 本地 SSL/TLS 证书存储问题：你的系统可能无法正确访问或验证 SSL 证书链。
  4. npm 配置问题：尽管你已经检查了 proxy 配置，但还有其他与 SSL 相关的配置可能需要检查，如 strict-ssl。

为了解决这个问题，你可以尝试以下步骤：

  • 检查系统时间：确保你的系统时间是准确的。

  • 使用命令行工具检查 SSL 证书：你可以使用如 openssl 的命令行工具来检查 https://registry.npm.taobao.org 的 SSL 证书是否有效。例如：

    1
    2
    3
    bash复制代码

    openssl s_client -connect registry.npm.taobao.org:443

    查看输出中的证书信息，特别是有效期部分。

  • 暂时禁用 SSL 验证（仅作为测试，不推荐长期使用）：
    你可以通过设置 strict-ssl 为 false 来暂时禁用 npm 的 SSL 验证。但请注意，这会使你的连接容易受到中间人攻击。

    1
    2
    3
    4
    npm config set strict-ssl false
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    # 记得之后将其设置回 true
    npm config set strict-ssl true

  • 清理 npm 缓存：
    虽然这不太可能是证书问题的直接解决方案，但清理缓存有时可以解决一些奇怪的问题。

    1
    2
    3
    bash复制代码

    npm cache clean --force

  • 使用其他网络：尝试连接到其他网络（如家庭网络或移动热点），以查看问题是否仍然存在。

  • 更新 npm 和 Node.js：确保你的 npm 和 Node.js 都是最新版本。

  • 联系淘宝 npm 镜像的支持：如果以上步骤都不能解决问题，可能需要联系淘宝 npm 镜像的支持团队，询问他们是否有关于证书过期的已知问题。

请注意，禁用 SSL 验证（strict-ssl=false）应该只作为最后的手段，并且仅在你完全信任你的网络环境时使用。在生产环境中，始终应该保持 SSL 验证启用。

执行成功！

image-20240721140507470

执行以下命令，启动后台：

1
node app.js

image-20240721142332268

启动前台页面：

image-20240721142357687

访问，项目效果如下：

image-20240721142531038

image-20240721142503392

image-20240721142511135

仿 B 站项目

项目启动

2024 年 7 月 21 日

了解整体代码结构，熟悉数据库库表和字段，修改数据库配置。

暂时不做 Elasticsearch 和 阿里云 OSS 对象存储的配置。

image-20240721190614043

👆 这是 Category 表没有默认主键，添加上即可：

1
2
3
4
5
6
7
8
9
10
11
12
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Category {
    @TableId(type = IdType.AUTO)
    private String mcId;
    private String scId;
    private String mcName;
    private String scName;
    private String descr;
    private String rcmTag;
}

image-20240721192005290

ES 配置问题，直接注销掉 ElasticsearchConfig 配置，以及 ESUtils 自动注入。

OSS 配置问题，同样的，只不过引用的地方比较多，暂时都注释掉相关代码。

当然，可以简单配置自己本地的 Elasticsearch 和 阿里云 OSS ，现在为了简便就直接注释掉部分代码，先把项目跑起来再说。

后端直接启动 BackendApplication 即可。

前端更容易了，执行 npm install 安装依赖无误后，直接执行 vue-cli-service serve 启动项目：

image-20240721193910677

至此，项目启动成功，效果如下：

image-20240721193959515

image-20240721194005561

配置更改

2024 年 7 月 27 日

这天一直在抽空学习 Vue 基础，今晚也总算抽出时间来观摩观摩这个项目。

修改了 Redis 和 Elasticsearch 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
spring:
  redis:
    database: 4
    host: localhost
    port: 6379
    password: Dw990831
    jedis:
      pool:
        min-idle: 10
        max-idle: 10
        max-active: 100
        max-wait: -1
    timeout: 5000
1
2
3
4
5
6
# Elasticsearch
elasticsearch:
  host: localhost
  port: 9200
  username: root
  password: 123456

image-20240727235753087

这个问题是连接本地 Redis 客户端失败了：

image-20240728000254042

这样问题虽然没解决，但是起码注册流程跑通了，登陆还有问题，归根结底还是 Jedis 数据库连接至配置问题，这部分内容明天学习。

2024 年 8 月 21 日

image-20240821233613716

今天晚上回来分别把 Redis 和 Elasticsearch 在本地配置完善并启动后，成功实现了视频上传功能，视频已经能正确上传至阿里云存储桶中。

前后台用户注册登录也令人相当满意，视频审核也测试完成，就是上传视频的封面显示有些问题，而且目前不支持在线浏览视频。

待解决。

windows 脚本编程

2024 年 7 月 13 日

image-20240713075227778

image-20240713075309570

毕设小项目

2024 年 7 月 21 日

今天尝试跑几个 Spring + Vue 项目，看看能不能成功运行。

疯狂 Java

Vue 基础

2024 年 7 月 26 日

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue.js 基础理论实操 - itsOli 的专栏 - 掘金 (juejin.cn)

安装

MemorySearch 忆搜阁

2024年8月8日

今天早上刷知乎，看到了这样一段有意义的话，原文我已经记不大清楚，大致意思是这样的：

我面试过很多求职者，现在的IT行业求职的人普遍太水了，只要你稍微努努力都能甩开身边人一大截。

像我以前面试过的那些人，问的那些简单的八股文都很难回答上来，计算机专业最基本的科学素养都没有。

没什么可问的就盘问项目吧，可很多人也是支支吾吾说不清楚，不论是个人项目还是工作中参与到的企业项目，开发过程都跟自己没关系一样好像。

我来教你怎么把项目说清楚，面试官不管从哪个角度问都能回答得滴水不漏：

你整体回顾一遍项目，分别从三个角度来写这个项目是做什么用的，里面涉及到了哪些技术亮点或难点，你又是怎么解决的。

写这个的目的不是为了再巩固一遍如何分析这个项目所用到的技术栈，完全不需要这样细致入微的描述。

只需要从宏观角度上简洁明了的介绍这个项目到底是怎么回事就行，不管别人怎么问，你都能从容不迫面不改色地聊项目，这样在面试中会很加分。

那么，开始吧，我已经完全过了一遍这个项目了，开始动手写一篇文章。

2024年8月8日

这个项目是一个基于 Spring Boot + Elastic Stack 技术栈 + Vue.js 的聚合搜索中台。它不仅是一个强大的搜索引擎，更是一个内容丰富的社区平台。

什么是聚合搜索中台，它最核心的功能就是给使用者提供了丰富的搜索搜索体验。我们经常逛浏览器，打开任何一个搜索引擎，比如百度必应谷歌，在搜索框中查找资料检索数据很方便，体验很好。

所以我也想动手实现这样一个搜索中台，不需要实现很多花哨的操作。像平时做那些简单的后台管理系统项目时，也有实现过简单的搜索功能，根据某个字段的 id 或者描述，写最简单的 SQL 语句加上简单的条件判断，就实现简单的数据查询。

但这样的搜索功能是远远不够的，我注意到了 Elasticsearch，了解到了 Elastic Stack 技术栈，这样的工具很适合用来实现在海量数据中作检索和分析，借此机会也能真正实践运用 Elastic Stack 技术栈。

我连接到了 Elastic Stack 技术栈中的很多有意思的东西：ES 的安装，DSL 查询语句（布尔查询，聚合查询，复合查询等），下载了 Kibana ，在 dash Board 处能清晰地写 DSL 语句。Elasticseach 是一个文档型数据库，ES 和 MySQL 之间经常会有比较。我学习了如何插入索引，更新索引，新增文档数据，作简单的布尔查询。除此之外还有分词器的安装和使用，让我更清晰地理解了 ES 构建索引和基于倒排索引查询文档的底层原理。

我最关心的还是两点：如何使用 Elasticseach 实现高级的查询效果呢，我学习了关键词语高亮，搜索词条建议，热门话题分析等 DSL 语句的编写，用很多的 Demo 语句实践了这些丰富的查询功能。

ElastidSearch 中的数据都要从数据库 MySQL 中同步过来，所以我掌握了 Logstash 数据同步管道的相关配置，学会了如何使用 Logstash 监听本地 MySQL 变更的数据，并同步指定的字段到 Elasticsearch 中。比如说我要实现诗词的关键词语高亮，搜索词条建议和热门话题分析等功能，我会选择同步 MySQL 数据库中诗词数据对应的几个字段，同步这些字段的数据到 Elasticseach 中。

可说的太多了吧，我怎么感觉这种方式不太靠谱，因为写完这段文字之后我都不想再回头看一遍。。

除了简历上提到的：使用 Spring AOP 切面编程实现权限校验和全局请求拦截，配置定时任务抓取外源数据并解析到本地数据库，深入学习 Elastic Stack 技术栈，掌握倒排索引，分词机制，查询 DSL，实现关键词语高亮，搜索词条建议，热门话题分析等功能，运用多种设计模式简化编码提高效率，自主搭建 Logstash 数据同步管道同步数据，使用 CompletableFuture 异步编程减少批量插入数据的等待时间。

还有：限流，Redis 实现热门搜索统计以及缓存性能优化，互动创作平台等功能。

项目 > Vue > 毕设
#项目 #Vue #毕设
卓越之旅：在优秀案例中精进，编织技术梦想
https://test.atomgit.net/blog/2024/07/12/卓越之旅：在优秀案例中精进，编织技术梦想/
作者
Memory
发布于
2024年7月12日
更新于
2024年8月20日
许可协议