- 博客(67)
- 收藏
- 关注
RSS订阅原创 Nginx域名跳转异常排坑：从HTTPS隐性问题到配置修复
摘要： 在配置Nginx子域名时，出现子域名访问跳转旧项目的异常。排查发现，旧项目HTTPS的HSTS强制跳转规则导致浏览器将HTTP请求自动转为HTTPS，而新项目未配置443端口，请求被旧项目接管。解决方案包括：补全新项目HTTPS反向代理配置，清除浏览器HSTS缓存。经验总结：Nginx需闭环配置端口转发与项目服务，主域名HSTS会影响子域名，浏览器缓存可能干扰测试结果。 （150字）
2025-09-16 01:21:12
1098
原创 个人开源项目推荐：小石榴——高仿小红书前后端分离实践
XiaoShiLiu是一个基于Express+Vue3的前后端分离仿小红书开源项目，提供完整的图文社区功能。项目包含用户端（注册登录、图文发布、社交互动等）和管理后台（内容管理、数据监控等），采用Vue3生态和Node.js技术栈，具备工程化配置、业务模块解耦和体验优化等特点。亮点包括完整的鉴权流程、响应式适配、组件复用和Docker部署支持，适合作为前后端分离开发的学习参考或二次开发基础。项目已在GitHub开源，提供在线体验地址。
2025-09-07 15:29:54
720
原创 【Vue进阶学习笔记】实现图片懒加载
本文介绍了如何在Vue 3中使用@vueuse/core的useIntersectionObserver实现图片懒加载功能。主要步骤包括：1）创建Vue项目并安装依赖；2）自定义v-img-lazy指令，利用IntersectionObserver监听图片进入视口时加载；3）注册全局指令插件；4）创建图片列表组件应用懒加载效果。通过这种方式可以显著优化页面性能，只有当图片进入可视区域时才加载资源，同时添加了淡入动画效果提升用户体验。
2025-07-21 13:11:41
398
原创 【Vue进阶学习笔记】Vue 路由入门指南
作为 Vue.js 初学者，路由配置往往是第一个需要跨越的技术门槛。本文将从零开始，用通俗易懂的语言讲解 Vue 路由的核心概念、配置流程以及一级路由、二级路由的实战用法，帮助你快速掌握单页面应用的导航实现。在传统的多页面应用中，页面跳转需要加载新的 HTML 文件，浏览器会整体刷新。而单页面应用 (SPA) 则通过路由技术实现页面内容的局部更新，整个过程不会刷新页面。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 核心深度集成，让构建单页面应用变得简单直观。简单来说，
2025-07-20 16:34:49
955
原创 【TypeScript学习笔记】TypeScript 核心知识点
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。// 定义 props 类型，通过 defineProps 泛型约束，明确接收的参数类型// 定义 props 类型，通过 defineProps 泛型约束，明确接收的参数类型 const props = defineProps < {
2025-07-19 00:41:50
1048
原创 【Vue进阶学习笔记】组件通信专题精讲
组件通信是 Vue 开发中的核心知识点，也是初学者理解组件化思想的关键环节。在 Vue 应用中，组件并非孤立存在，它们之间需要通过数据传递、事件通知等方式协同工作，实现复杂的业务逻辑。我系统整理了 Vue 中常用的组件通信方式，包括props 父传子自定义事件子传父Event Bus 兄弟通信v-model 双向绑定$attrs 透传ref 获取组件实例provide/inject 跨级通信Pinia 全局状态管理和Slot 插槽内容分发共 9 种方案。
2025-07-18 10:31:47
1093
原创 【Vue进阶学习笔记】组合式API（Composition API）
函数采用 Composition API 的方式组织代码，显著提升了代码的可读性和灵活性。两个参数，并返回一个包含响应式状态和方法的对象，这些内容可直接在模板中使用。这种设计不仅使组件结构更加清晰明了，还为逻辑复用提供了更好的支持。选项，用于定义组件的初始状态和核心逻辑。Vue.js 3 引入了全新的。
2025-07-17 11:52:42
295
原创 【JavaScript高级】函数进阶与闭包应用
/ 1.自定义函数（命名函数）// 2.函数表达式 (匿名函数)// new Function('参数1','参数2',...,'函数体') 构造函数');Function里面参数都必须是字符串格式第三种方式执行效率低也不方便数学，因此较少使用所有函数都是Function的实例（对象）函数也属于对象。
2025-07-16 20:21:02
700
原创 【Vue入门学习笔记】组件系统基础与通信
Vue组件系统详解：结构与嵌套关系 Vue组件系统的核心在于可复用性和模块化开发。单文件组件(SFC)将模板、脚本和样式封装在.vue文件中，通过import引入、components注册后使用。scoped样式确保样式隔离。组件间形成树状嵌套结构，如示例中的Header、Main、Aside组件分别包含Article和Item子组件，最终在App.vue中组合呈现完整页面。这种分层设计使UI开发更模块化，每个组件可独立维护，同时通过嵌套关系构建复杂界面。图片展示了组件嵌套后的页面布局效果。
2025-07-15 13:31:09
642
原创 【JavaScript高级】构造函数、原型链与数据处理
构造函数中的属性和方法称为成员，JavaScript的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性方法，就是因为对象有__proto__原型的存在。如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用construct指回原来的构造函数。
2025-07-11 18:35:00
1168
原创 【JavaScript高级】面向对象编程基础与实战
方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。面向过程就是分析超出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用。面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。可以调用父类的构造函数，也可以调用父类的普通函数。
2025-07-06 13:21:28
673
原创 【爬虫】逆向爬虫初体验之爬取音乐
打开F12中的网络页面，播放音乐后，筛选媒体，会发现当前这首歌曲音频链接地址，打开后，点击“标头”就能能看到截取“.mp3”前面的一部分进行搜索，搜索出来了很多数据包，但都是重复的，其实只有两个。一个就是我们已经找到的音频链接，另一个就是网易云音乐的接口文件打开这个“v1”数据包，在标头可以看到他的，在负载可以看到有两个表单数据分别是params和encSecKey在预览页面中，可以看到请求的返回值，是一个JSON格式的数据，而我们要的音乐链接就是url所对应的值。
2025-07-05 17:26:38
2373
原创 【Vue入门学习笔记】Vue核心语法与基础功能
Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。想要响应式地绑定一个 attribute，应该使用。双大括号将会将数据插值为纯文本，而不是HTML。如果有像这样的一个包含多个attribute的JavaScript对象。非常常用，所以有一个简写的语法，直接省略v-bind。最基本的数据绑定形式是。
2025-07-02 21:20:10
582
原创 【Vue入门学习笔记】项目的创建与基础认识
Vue 项目的运行和开发依赖于 Node.js 环境，它不仅提供了 JavaScript 的运行时，还包含了包管理工具 npm（Node Package Manager），用于安装项目所需的依赖。：访问，根据你的操作系统（Windows、Mac 或 Linux）下载对应的安装包。：运行下载的安装包，按照安装向导提示进行操作，一路点击 “下一步” 即可。安装时建议勾选 “Add to PATH” 选项，方便后续在命令行中直接使用 Node.js 和 npm 命令。
2025-07-02 20:16:19
296
原创 浏览器F12开发者工具的使用
F12是浏览器内置的开发调试工具，可通过快捷键F12或右键菜单启动。它包含多个核心功能模块：元素（Element）用于调试HTML/CSS、控制台（Console）执行JS命令、网络（Network）监控请求响应、性能（Performance）分析运行效率等。在测试中，元素模块常用于UI自动化定位，网络模块可抓取明文HTTPS报文分析接口交互。工具还支持调整布局、切换移动端视图等设置，为开发调试提供全面的技术支持。
2025-07-01 21:42:44
2857
原创 【前端】CSS实战之音乐播放器
当鼠标悬停在音量图标上的时候，通过一些衔接动画来改变透明度并设置。可以看到，整个播放器都变模糊了，并不是我们所希望的毛玻璃效果，为了不让边缘模糊，可以采用下面的办法。的时候仔细观察发现右边存在瑕疵，所以拉长一点点毛玻璃的宽度就能避免这个情况了。在播放器上覆盖了一个伪元素，并将内容设为了空，然后给这个伪元素添加模糊效果。可以让超出盒子的部分显示出来，所以我们可以把音量图标专门放进一个。伪类选择器，把出了音量图标以外的图标鼠标悬停时设置成下面的样式。来展示进度条的外壳和填充条，在填充条的最右侧再用一个。
2025-01-21 16:43:39
1205
原创 【前端】CSS学习笔记（2）
但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。适用于页面中频繁出现多个小图标或图片元素的情况，可减少 HTTP 请求，提升页面加载速度。上面的代码目的是，在手机上显示出蓝色，在平板上显示出绿色，在电脑上显示出红色。对小型装饰元素，如按钮的不同状态，将其合并为雪碧图可方便实现状态切换。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
2025-01-20 19:46:54
388
原创 【前端】CSS学习笔记（1）
CSS(CascadingStyleSheets)层叠样式表，又叫级联样式表，简称样式表CSS文件的后缀名为.cssCSS用于HTML文档中元素样式的定义。
2025-01-19 14:35:41
878
原创 【算法】树状数组
众所周知，通过前缀和，我们可以很快的在一个很大的数组中求出区间和，但是如果想要去修改数组中的一个数的值，前缀和就无法实现。所以来学习一个新的数据结构：树状数组。
2024-11-14 17:40:17
361
原创 【python刷题】Prepare Another Box
对于简单题，一定要注意时间复杂度的优化，考虑内置函数使用与否，或是同一个内置函数之间，使用方式的差异。
2024-10-19 22:13:42
704
1
原创 【Java基础】用Scanner类获取控制台输入
要在Java中实现输入一个字符并输出，可以使用 Scanner 类中的nextLine()方法来读取用户输入的一行，然后使用 charAt 方法从输入的字符串中提取第一个字符。包，并且提供了简单的方法来解析基本类型和字符串。本文将介绍如何用Scanner从控制台获取输入。是一个非常有用的类，用于从各种输入源（如键盘、文件或其他输入流）读取数据。获取用户输入，可以创建一个。作为参数传入，起名为。
2024-10-07 20:52:49
561
原创 【Python刷题】Atcoder Beginner Contest
但是通过观察发现，他又为以2和3为起点的子序列（绿色和紫色）贡献了一个唯一的元素，而且绿色和紫色的子序列的个数分别与蓝色子序列的个数相同。输入多组数据，每一组数据第一个值表示来自的家庭，第二个值表示出生孩子的性别，输入的数据已经按照出生时间来排序，对于每个家庭第一个出生的男孩输出Yes，其余输出No。对于每一个数，先给以所有它为起点的子序列贡献1，然后找到当前位置和这个数上一次出现的位置之间的数，给这些数为起点且包含当前数的子序列贡献1。有两个数组，每个数组对应的位置上分别记录村庄的位置以及村庄的人数。
2024-09-15 12:49:55
1056
原创 【深度学习】Pytorch基础
可以发现在当前这个区间范围内这个函数有两个极小值点，如果我们想寻找当前函数在这个区间内的最小值点，那么当然是第二个极小值点更合适一些，可是并不一定能够如我们所愿顺利地找到第二个极小值点，这时候只能够通过多次尝试。梯度下降算法在机器学习中应用十分的广泛，不论是在线性回归还是Logistic回归中，它的主要目的是通过迭代找到目标函数的最小值，或者收敛到最小值。
2024-09-11 17:08:16
1562
原创 【操作系统】Linux操作系统基础
操作系统是直接运行在计算机上的系统软件，它是与硬件打交道和控制软件运行的计算机程序。操作系统向下控制硬件，向上支持应用软件的运行，承上启下它是能够虚拟出来计算机的一个软件常用虚拟机软件VmwareVirtualBox注意：只有安装了虚拟机软件才可以创建虚拟机，当然通过虚拟机软件还可以创建多个虚拟机就是模拟一个真实的计算机，好比一个虚拟的电脑，对于学习一个新的操作系统可以通过虚拟机来完成。
2024-09-04 12:20:04
3030
原创 【算法】[NOIP2001 普及组] 数的计算-递归+记忆化搜索
请你求出，一共有多少个合法的数列。不同当且仅当两数列长度不同或存在一个正整数。输出一行一个整数，表示合法的数列个数。输入只有一行一个整数，表示。对于全部的测试点，保证。
2024-07-17 17:02:29
871
原创 【python刷题】【深基5.例5】旗鼓相当的对手
双重循环遍历所有的组合，因为自己不能和自己比，所以要注意内层遍历的起始位置。新建一个数组用来得出各个科目的分差，便于代码的书写。由于分差计算出来会出现负数，所以比较的时候都要套上。每找到一对符合条件的，变量。
2024-06-30 18:30:32
360
原创 【python刷题】蛇形方阵
给出一个不大于 99 的正整数n，输出n*n的蛇形方阵。从左上角填上1开始，顺时针方向依次填入数字，如同样例所示。注意每个数字有都会占用3个字符，前面使用空格补齐。
2024-06-30 17:54:53
688
原创 【算法】五子连线
棋盘一般为15X15的，横向为A～O，纵向为1～15，从棋盘的左下角开始标记，如下图所示。例如，图示中上面的5个棋子可标记为G13、H13、I13、J13、K13，正好形成横向五子连线的情况；图示中左下方的5个棋子可标记为H7、F5、E4、D3、C2，未能形成五子连线的情况。五子棋是世界智力运动会竞技项目之一，是一种两人对弈的纯策略型棋类游戏，通常双方分别使用黑白两色的棋子，下在棋盘直线与横线的交叉点上，先形成连续的五子连线（横、竖、斜）者获胜。接下来有n行数据，每行一组数据，每组数据包括5个棋子的位置。
2024-04-25 09:31:06
1044
2
原创 【算法】回形遍历N*N的二维数组
总共有上下左右四个方向的遍历，定义一个变量direction由于记录当前遍历的方向，采用分支结构，每次遍历前先对direction进行判定，遍历完当前这条后，使遍历范围-1，从而实现不断向回形内圈访问。通常，可以按照逐行、逐列等不同方法输出二维数组中的全部元素。如果按照回形的路线（如下图）输出数组中的全部元素，你能给出比较有效的解法吗？第一行为正整数N(1≤N≤10) 之后有N行、N列个正整数（即N×N二维整型数组中的全部元素）按回形路线遍历输出N×N二维整型数组中的全部元素，输出时每个元素占1行。
2024-04-01 18:29:22
571
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人