Southblock'Blog

docker容器-基础篇1、docker容器的安装1.1 初始化安装安装docker容器需要先配置好一台centos虚拟机，并配置好网络连接，以及挂载完iso镜像文件。确保yum可以正常使用 1234先安装必要的包yum -y install gccyum -y install gcc-c++yum install -y yum-utils 配置stable镜像仓库 并从国内下载 123456(阿里)yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo (官网)yum-config-manager --add-repo https://download.docker.com/linux/linux/centos/docker-re.repo配置完后可以使用yum install vim 测试一下yum是否还能正常使用，如不能，请检查当前网络环境，然后重新执行上一句命令。 更新yum软件包索引（可以跳过、缓存yum加快下载速度） 1yum makeca ...

MySQL MVCC & 并发更新实验笔记 本文记录了使用 HeidiSQL 和 MySQL InnoDB 引擎进行的 MVCC 实验过程，验证版本链行为、事务隔离可见性以及连接行为。 ⚠️ 一、数据库并发问题并发读写会引发以下四类经典问题： 脏读（Dirty Read） 读取到了其他事务尚未提交的数据。 不可重复读（Non-Repeatable Read） 在同一事务中多次读取同一行数据，每次结果不同（其他事务修改了这行并提交）。 幻读（Phantom Read） 同一事务中两次执行相同条件的 SELECT，结果集行数不同（其他事务插入或删除了符合条件的行）。 🔒 二、事务隔离级别（SQL 标准） 隔离级别 脏读 不可重复读 幻读 实现方式 READ UNCOMMITTED ✅ 可能 ✅ 可能 ✅ 可能 无 MVCC READ COMMITTED ❌ 防止 ✅ 可能 ✅ 可能 部分 MVCC REPEATABLE READ ❌ 防止 ❌ 防止 ✅ 可能 完整 MVCC SERIALIZABLE ❌ 防止 ❌ 防止 ❌ 防止 加锁 ...

CSS 高斯模糊背景图的实现技巧：完整实战与原理拆解在现代 Web 页面中，常见一种视觉效果：清晰的前景图 + 虚化的背景图层。这类设计可以让页面更加美观、聚焦重点，并广泛应用于音乐播放器、视频平台、官网头图等界面。 本文将通过一个完整 HTML 示例，逐步剖析如何使用 padding + margin + blur 高效、安全地实现该效果，并详解背后的盒模型原理。 📷 效果预览与结构概览我们最终实现的页面包含以下几种状态的背景展示： 原始背景图（无处理） 只加 padding 加 padding + margin 模糊背景图 + 清晰前景图 ✅ 核心原理：三步实现“模糊不偏移”的背景图步骤一：使用 padding 为模糊留出空间padding: 10px; 模糊（blur）会向外扩散一定像素，因此必须预留空间。否则边缘会出现白边或被裁剪。 视觉效果：图片像是“缩进”了，显示更多边缘内容。 步骤二：使用 margin: -10px 拉回视觉偏移margin: -10px; 因为上一步原内容区域被缩小了，所以我们使用负外边距将原区域拉回正确的位置，避免内容视觉错位 ...

JWT 鉴权中的单 Token 与双 Token 方案对比：控制力、安全性与实用性解析在使用 JWT 进行身份验证与续签时，常见有两种方案： 方案一：双 Token 模式（Access Token + Refresh Token） 方案二：单 Token 模式（JWT 中嵌入续签时间） 这两种方案都在社区中被使用，但在安全性、控制力和设计合理性上存在关键差异。本文将系统性地比较这两种方案，并解释为什么“双 Token 模式”在实际项目中被广泛采用。 ✅ 背景介绍方案一：双 Token 模式 access_token：短期有效，用于访问受保护资源，通常 15-30 分钟过期； refresh_token：长期有效，用于换发新的 access_token，通常存放在 HttpOnly Cookie，1 小时~7 天过期。 续签过程必须通过服务器验证 refresh_token，服务器主动决定是否签发新 token。 方案二：单 Token 模式 仅使用一个 JWT； JWT 中添加一个自定义字段，如 renew_after； 当 token 尚未过期但已超过 renew_after ...

目标效果：右侧滚动条在最上方时，左侧导航栏距离顶端有一定距离当滚动条往下滑动时，左侧导航栏不会被划到画面外 演示代码：html 12345678<div class="container"> <div class="left"> <div class="sticky-box"> 我是 sticky，滚动时会粘在视口顶部 10px </div> </div> <div class="right"> <p>右侧内容</p> </div></div> css 123456789101112131415161718.container { display: flex; align-items: flex-start; } .left & ...

这里未使用flex，grid等布局，只是使用float等操作实现主流网页的基本布局草图效果如下： 首先整体是一个container容器，其中分成三部分header，body，foot。body中又分成三部分，第一部分是一行两列，第二部分是一行三列，第三部分是多行多列。三部分都是使用float实现浮动，自动先左/右贴近。注意点：在元素浮动后，需清除浮动这里展示至少两种方法第一种方法：使用clear:both的div跟在后面清除浮动 在第一行里追加了一个clear:bath的div，适用于没有对div有统一样式的情况第二种方法：在父级容器上使用CSS中的::after实现自动在最后追加一个高度为0，clear:both的空div完整代码如下： 代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858 ...

概况：目前使用一个私有仓库myHexBlogSource 存放笔记markdown等源文件，使用一个公开仓库hutbzc.github.io存放经过hexo处理渲染加工后的html等文件，便于挂在github上直接查看。图床使用去不图床储存图片 博客发布流程：使用obsidian作为编辑器，后台挂好PicGo，图片直接粘贴进obsidian，即可自动上传至图床，并使用正确的链接 本地调试检查使用命令npm ci 按照package-lock.json安装依赖或 npm install 自动调整版本，安装依赖 npx hexo server 即可启动 搭建大体步骤只是换电脑后需要重新操作的部分PicGo 2.3.1 及其插件提供服务端口，便于Obsidian调用 LanKong 1.1.3 web-uploader 1.1.1（未启用备选） 拉好私有仓库myHexBlogSource Obsidian v1.8.10 及其插件Image auto upload Plugin上传接口: http://127.0.0.1:36677/upload删除接口: http://127.0 ...

CSS中的flex布局，主要选项及可选值的含义附带实例代码及效果图 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911 ...

原视频: 尚硅谷Node.js零基础视频教程，nodejs新手到高手 原文链接：【前端】尚硅谷Node.js零基础视频教程笔记 1.基础node.js官网中文官网 1.1. 基础命令 node -v 查看版本号 node hello.js 运行js文件 1.2. 注意事项Node.js中不能使用BOM和DOM的API 123console.log('hello world');console.log(window);//报错console.log(document);//报错 说明:浏览器中的javascript语法包括如下内容组成部分 node.js语法的组成部分 2.Buffer（缓冲器）介绍与创建2.1 概念 Buffer 是一个类似于数组的 对象 ，用于表示固定长度的字节序列Buffer 本质是一段内存空间，专门用来处理 二进制数据 。 2.2 特点 Buffer 大小固定且无法调整Buffer 性能较好，可以直接对计算机内存进行操作每个元素的大小为 1 字节（byte） 2.3 使用 创建 Buffer Node.js 中创建 Bu ...

说明：此文为视频笔记，转自他人，只为个人复习使用 视频链接：禹神：一小时彻底搞懂跨域&解决方案 原文链接: 跨域&解决方案 1浏览器的同源策略1.1同源策略概述同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。W3C 上对同源策略的说明：Same origin policy。 1.2什么是源（origin）？1源的组成部分 2下面表格中，只有最后一行的两个源是同源。 源 1 源 2 是否同源 http://www.xyz.com/home https://www.xyz.com/home ⛔非同源️ http://www.xyz.com/home http://mail.xyz.com/home ⛔非同源 http://www.xyz.com:8080/home http://www.xyz.com:8090/home ⛔非同源 http://www.xyz.com:8080/home http://www.xyz.com:8080/search ✅同 源︎ 3同源请求 4非同源请求 5总结:『所处源』与 ...