Yucol

用纯前端优雅地解析并渲染 Shapefile：RxView

Fri, 15 May 2026 00:00:00 +0000

纯前端实现基于 Vue3 + Leaflet 的变量施肥处方图渲染系统

在农业空间数据处理中，变量施肥处方图通常以 Shapefile 格式进行流转。传统的 Web GIS 方案往往依赖后端的 GeoServer 或 PostGIS 进行数据解析和切片服务发布。但在最近推进白矖（Baixi）生态系统的开发中，我们需要为前端提供一个轻量级的预览工具——用户上传包含处方图的 ZIP 压缩包，前端直接在浏览器内完成解析、属性提取、色彩分级计算并叠加到高精度卫星底图上。

本文将复盘我们如何使用 Vue3、Leaflet 以及几个核心开源库，构建这套轻巧、流畅的纯前端 RxView 渲染系统，并分享在这个过程中遇到的一些经典交互“天坑”及解决思路。

核心技术栈与选型

在不依赖后端 GIS 引擎的前提下，前端独立完成空间数据的解析与渲染需要合理的工具链组合：

框架与基础地图：Vue 3 (Composition API) + Leaflet。Leaflet 以其轻量级和极高的定制性，非常适合用来做单纯的数据叠加上图。
空间数据解析：shpjs。它可以直接在浏览器端将 Shapefile 的 ZIP 压缩包转换为标准的 GeoJSON 格式，这是连接业务数据与地图渲染的关键桥梁。
色彩分级与计算：chroma-js。处方图的核心在于将数值（如施肥量）映射为视觉色彩。利用该库可以非常方便地计算数据的极值、进行数值分段（离散化）并生成对应的色带。

核心业务流程与实现逻辑

1. 文件的纯前端解析与智能选段

系统的第一步是拦截原生文件上传，通过 FileReader 读取为 ArrayBuffer 后直接丢给 shpjs 处理。解析出 GeoJSON 后，面临的一个实际业务问题是：一个 Shapefile 中可能包含多个属性字段（例如面积、作物类型、各单一元素的推荐量等）。

为了减少用户的操作路径，我们在前端加入了一层简单的智能推断逻辑：在提取出所有数值型字段后，优先匹配包含业务特征的字段。例如在我们的实际应用场景中，很多农机只支持混配肥的单一变量作业，因此我们会在前端正则优先匹配 mixed、混配 等关键字作为默认渲染字段。如果找不到，再降级渲染纯地理边界。

2. 基于 Chroma-js 的动态分级渲染

拿到目标字段的数据后，需要将具体的施肥量数值转化为地图上的颜色。农业图层通常采用经典的“浅黄-浅绿-深绿”色谱。

渲染的难点在于不同地块的数值分布差异极大。如果直接按极值做线性映射，极少量的异常高值会导致大部分网格颜色区分度极低。因此，我们通过 chroma.limits 将有效数值分为最多 5 个区间（Class），并利用 chroma.scale 将基础色板扩展至对应的阶数，从而实现离散型分级图例。这样不仅视觉层次更鲜明，也符合农学上的分级指导习惯。

3. 高精度卫星底图的融合

传统的街道底图在农业场景下缺乏参考价值，我们需要让用户清晰地看到地块与实际地貌的贴合度。在此系统中，我们去除了 Leaflet 的默认控件，直接引入了 ArcGIS 的高清卫星影像服务（World_Imagery）作为底图，并将处方图的网格透明度设定为 0.85，以确保底图纹理若隐若现。

实战踩坑：如何消灭网格交互的“高亮残影”

在系统基本成型后，我们遇到了一个严重影响用户体验的交互问题。

为了方便用户查看数据，我们为每个网格通过 onEachFeature 绑定了 mouseover 和 mouseout 事件，并在其上叠加了 sticky: true 的原生跟随注记（Tooltip）。但在实际操作中：当用户按住某个网格拖动地图进行平移时，拖动路径上的所有网格都会被依次点亮，并留下一长串无法复原的高亮残影。

起初我们以为是 Leaflet 的性能瓶颈，但经过排查，这实际上是浏览器原生拖拽机制与地图事件流的冲突：

事件丢失：在地图拖动状态下，浏览器的焦点被地图容器的平移事件捕获，导致之前触发了 mouseover 的元素在鼠标移出时，无法稳定接收到 mouseout 恢复原始样式的指令。
DOM 滞后：跟随鼠标的 HTML 注记在快速平移时，DOM 重绘跟不上计算速度，甚至会被浏览器误识别为可拖拽对象。

最终的解决思路（事件穿透与状态拦截）：

这绝非简单的 CSS 调整可以解决，我们需要从状态和样式两端进行双重拦截：

第一步：JS 层面的拖拽状态拦截 我们在 Vue 的 onMounted 中监听了地图实例的 dragstart 和 dragend 事件，维护了一个全局的 isMapDragging 状态。在网格的 mouseover 事件触发时，首先判断该状态：如果地图正在被拖拽，则直接 return 拦截高亮逻辑。这就从源头上切断了残影的产生。

第二步：CSS 层面的事件穿透与幽灵化 针对卡顿的注记，如果用 JS 强制在拖拽瞬间销毁它（closeTooltip），会导致深层的图层事件链断裂，直接导致地图彻底卡死无法拖拽。

因此我们采用了更优雅的“幽灵化”方案：首先，通过 pointer-events: none 让鼠标事件强制穿透 Tooltip 注记，防止浏览器将其视作拖拽目标。其次，在顶层容器动态绑定 is-dragging 类名。当处于拖拽状态时，利用 CSS 的 opacity: 0 和 visibility: hidden 瞬间隐藏所有注记。拖拽结束后状态解除，注记无缝恢复。

结语

通过 Vue3 结合 Leaflet、shpjs 与 chroma-js，我们成功在浏览器端实现了一套不依赖后端的处方图渲染闭环。这种纯前端的处理方式极大地降低了后端的并发压力和存储成本，对于白矖这类需要支持多农场、高频次数据查看的生态系统来说，是一个高性价比的方案。目前，RxView已经成功地在白矖（Baixi）系统的生产环境中部署，为用户提供了稳定、高效的处方图渲染服务。

实战 FastAPI + JWT：如何优雅实现单设备登录与账号有效期控制

Tue, 12 May 2026 00:00:00 +0000

实战 FastAPI + JWT：如何优雅实现单设备登录与账号有效期控制

在开发多平台接入的综合管理系统时，统一的账号认证是整个架构的安全基石。对于前后端分离的项目，JSON Web Token (JWT) 是目前最主流的鉴权方案。

然而，标准的 JWT 存在一个天然的痛点：无状态。一旦服务端签发了 Token，在它自然过期之前，服务端很难直接主动废弃它。这会导致在处理“多端互踢（单设备登录）”以及“临时账号到期管控”时遇到麻烦。

本文将基于 FastAPI 和 PostgreSQL，详细拆解一套在真实生产环境中运行的权限控制方案。这套方案通过引入 session_version（会话版本号）机制，巧妙地融合了无状态的轻量感与有状态的强管控。

一核心设计思路

为了打破纯 JWT 的无状态限制，我们在数据库的用户表中引入一个核心字段：session_version（会话版本号）。

登录埋点：用户每次成功登录时，服务端生成一个当前的时间戳作为新的 session_version，更新到数据库中，并将这个版本号一并打包写入 JWT 的 Payload 中。
鉴权校验：用户携带 Token 请求接口时，路由守卫不仅会校验 Token 的合法性和有效期，还会从数据库中查出该用户最新的 session_version。
互踢裁决：如果 Token 携带的版本号与数据库中的最新版本号不一致，说明该账号在其他地方进行了登录（旧 Token 被“顶号”），服务端直接拒绝请求。
安全退出：用户主动退出时，只需将数据库中的 session_version 重置为 0，该用户持有的所有旧 Token 即可瞬间失效。

二基础安全与环境配置

首先，集中管理我们的全局配置和密钥。在系统根目录下，我们需要定义 JWT 的加密密钥、算法以及 Token 的默认存活周期。

# core/config.py
from pathlib import Path

# JWT 与安全配置
SECRET_KEY = "your-super-secret-key"  # 生产环境务必使用复杂随机字符串并从环境变量读取
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 # Token 有效期：24小时

三登录接口：签发门禁卡与版本号更迭

登录接口承担着多项校验任务。除了常规的密码比对（推荐使用 bcrypt），还需要处理账号的禁用状态以及临时账号的到期拦截。

# api/auth.py
from fastapi import APIRouter, HTTPException, Depends
from datetime import timedelta, datetime, timezone
import time
from core.database import get_dash_db
from core.security import verify_password, create_access_token

router = APIRouter()

@router.post("/login")
def login(login_data: LoginRequest):
    conn = get_dash_db()
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM users WHERE username = %s", (login_data.username,))
    user = cursor.fetchone()
    
    # 1. 验证用户和密码
    if not user or not verify_password(login_data.password, user['password']):
        conn.close()
        raise HTTPException(status_code=401, detail="用户名或密码错误")
        
    # 2. 检查账户启用状态
    if user['status'] != 1:
        conn.close()
        raise HTTPException(status_code=403, detail="账户已被禁用，请联系管理员")

    # 3. 检查账户有效期 (针对临时账号)
    if user['expire_time']:
        current_utc_now = datetime.now(timezone.utc)
        expire_time = user['expire_time']
        # 容错处理：确保时间对象具备时区信息，避免时区天真(naive)导致的比对异常
        if expire_time.tzinfo is None:
            expire_time = expire_time.replace(tzinfo=timezone.utc)
   
        if expire_time < current_utc_now:
            conn.close()
            raise HTTPException(status_code=403, detail="账户已过期，请联系管理员")

    # 4. 生成并写入新的会话版本号，实现“顶号”逻辑
    session_version = int(time.time())
    cursor.execute(
        "UPDATE users SET session_version = %s WHERE id = %s", 
        (session_version, user['id'])
    )
    conn.commit()
    conn.close()

    # 5. 将 session_version 塞进 JWT 的 payload 中
    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    access_token = create_access_token(
        data={
            "sub": user['username'], 
            "id": user['id'], 
            "role": user.get('role', 'user'),
            "session_version": session_version  
        },
        expires_delta=access_token_expires
    )

    return {
        "success": True,
        "access_token": access_token,
        "token_type": "bearer",
        "user": {"id": user['id'], "username": user['username']}
    }

值得注意的是，在时间处理上，后端必须保持高度的一致性。Python 原生的 datetime 容易出现 Naive Time（无时区时间）与 Aware Time（带时区时间）比较报错的问题，使用 replace(tzinfo=timezone.utc) 强制对齐时区是一个极其稳妥的工程实践。

四路由守卫：拦截器中的核心裁决

有了带版本号的 Token，接下来需要在所有受保护的路由前加装一层守卫（FastAPI 的 Depends 机制）。

这里的关键在于：不仅要解密 Token，还要回源数据库比对版本号。

# core/security.py
import jwt
from fastapi import HTTPException, Depends
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
from core.config import SECRET_KEY, ALGORITHM
from core.database import get_dash_db

security = HTTPBearer()

def get_current_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
    token = credentials.credentials
    try:
        # 解密 Token 提取 Payload
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        user_id: int = payload.get("id")
        token_version: int = payload.get("session_version") 
        
        if user_id is None:
            raise HTTPException(status_code=401, detail="无效的认证凭证")

        # 查库比对版本号
        conn = get_dash_db()
        try:
            cursor = conn.cursor()
            cursor.execute("SELECT session_version FROM users WHERE id = %s", (user_id,))
            row = cursor.fetchone()
        finally:
            cursor.close()
            conn.close()
        
        # 核心裁决：如果数据库里的版本号跟 Token 里的对不上
        if not row or row['session_version'] != token_version:
            # 抛出特定的 401 详情，前端可捕获 'KICKED_OUT' 来弹窗提示“您的账号已在别处登录”
            raise HTTPException(status_code=401, detail="KICKED_OUT")

        return payload
        
    except jwt.ExpiredSignatureError:
        raise HTTPException(status_code=401, detail="登录已过期，请重新登录")
    except jwt.InvalidTokenError:
        raise HTTPException(status_code=401, detail="无效的 Token")

前端在全局请求拦截器中，只需捕获 HTTP 401 且 detail === 'KICKED_OUT' 的响应，就可以平滑地清除本地缓存并弹出友好的互踢提示。

五安全退出：物理级失效

在纯 JWT 架构中，退出登录通常只能依赖前端删除本地存储的 Token，服务端无能为力。但在我们的版本号机制下，服务端的退出接口变得极具掌控力。

# api/auth.py
@router.post("/logout")
def logout(current_user: dict = Depends(get_current_user)):
    user_id = current_user.get("id")
    if user_id:
        conn = get_dash_db()
        cursor = conn.cursor()
        # 将会话版本号置为 0，让该用户流通在外的所有 Token 瞬间失去校验资格
        cursor.execute("UPDATE users SET session_version = 0 WHERE id = %s", (user_id,))
        conn.commit()
        conn.close()
    return {"success": True, "message": "已安全退出"}

六总结与进阶思考

这套基于 session_version 的鉴权方案，完美解决了 JWT 无法主动失效的顽疾，同时也实现了对多平台登录状态的精确控制。

性能考量： 当前的实现中，路由守卫每次拦截请求都需要进行一次 PostgreSQL 数据库查询。在常规的并发量下，数据库连接池加上单字段主键查询的速度完全可以胜任。但如果系统流量进一步膨胀，遇到高频次的空间数据接口或频繁的瓦片请求，鉴权层的查库操作可能会成为瓶颈。

进阶优化方向： 可以将 user_id : session_version 的键值对缓存到 Redis 中。登录时更新 Redis，鉴权时直接读 Redis，从而将 I/O 成本降到最低，进一步释放系统在高并发环境下的性能潜力。

我的现场编年史：不只是听歌！

Wed, 25 Feb 2026 04:00:00 +0000

🚀 我的演唱会流浪计划

🎵 NO.[001] | [房东的猫] - [世界/青年 2024巡回演唱会]

📅 时间： 2024 年 06 月 29 日
📍 地点： [北京] · [首都体育馆]
🎫 座位： [ 看台山顶 ] 🏷️ 关键词： #第一次演唱会 #合唱 #太治愈了

1. 📜 Content

到北京上学后，有机会看到了人生中的第一次演唱会。那个周末是最开心的时候（周六听房东的猫，周日看成果🥳），从此激起了对演唱会的热爱。~~直到现在工作后的平淡无趣~~

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[002] | [成果] - [海王星飞船]

📅 时间： 2024 年 06 月 30 日
📍 地点： [北京] · [晓剧场]
🎫 座位： [ 3排 16号 ]
🏷️ 关键词： #音乐 #舞台剧 #合影（线下真实版）

1. 📜 Content

狗哥的第一次舞台剧（成年儿童版😄），虽然不是演唱会，但却是第一次线下见面。

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
演员状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[003] | [夏日入侵企画] - [温暖人心的冬日聚会-不插电特别专场]

📅 时间： 2024 年 12 月 26 日
📍 地点： [北京] · [福浪LIVEHOUSE-福]
🎫 座位： [ Live House ] 🏷️ 关键词： #欢乐 #蹦迪 #近距离

1. 📜 Content

首次参加live house，夏企的魅力太足了，从开头蹦到结尾！我去的比较早，所以抢到了比较靠前的位置 ~~（早去早罚站）~~。

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[004] | [双笙] - [经过时你我相遇]

📅 时间： 2024 年 12 月 30 日
📍 地点： [北京] · [北京展览馆剧场]
🎫 座位： [ 一层 27排 74号 ] 🏷️ 关键词： #国风 #老粉

1. 📜 Content

大学时特别喜欢双笙的歌曲，声音清甜，歌曲时而温柔，时而清脆。这次演唱会开到了北京，终于有机会可以现场听她唱的歌。

现场的人数没有满座，但是也有很多人来捧场，上次关注双笙的时间我已经记不清了，我的记忆里还是她之前唱过的歌，所以演唱会上很多歌我都不太熟悉，算是个小遗憾吧。

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[005] | [张杰] - [未·LIVE - 开往1982]

📅 时间： 2025 年 04 月 19 日
📍 地点： [北京] · [国家体育场-鸟巢]
🎫 座位： [ G区 529通道五层 19排 25号 ] 🏷️ 关键词： #逆战 #哪个男孩子不想现场听张杰唱逆战 #直接给到夯

1. 📜 Content

遥想12年的夏天，我拥有了人生中的第一台电脑，第一件事就是把《逆战》（游戏）下载下来。无他，因为逆战这首歌在当时就是现在小学生心目中的孤勇者。

张杰的演唱会真的太顶了，不论是氛围、嗓音、歌曲、编舞、音效还是灯光都是无敌的存在！

还有个小插曲，演唱会结束后发现我的一位初中同学和另一位朋友竟然和我一块在现场。

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[006] | [凤凰传奇] - [吉祥如意]

📅 时间： 2025 年 05 月 24 日
📍 地点： [北京] · [国家体育场-鸟巢]
🎫 座位： [ H区 635通道六层 26排 7~10号 ] 🏷️ 关键词： #组队看演唱会 #蹦迪

1. 📜 Content

这一次，四人终于抵达了他们忠诚的鸟巢！

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

🎵 NO.[007] | [房东的猫] - [世界/青年 - 2025巡回演唱会- 南京站]

📅 时间： 2025 年 06 月 14 日
📍 地点： [南京] · [南京奥体中心国缘V9体育馆]
🎫 座位： [ 看台六十五区看台6F 3排 4座 ] 🏷️ 关键词： #毕业旅行

1. 📜 Content

临近毕业的阶段，买到了南京站的🎫（卡点抢的票，结果后面打折卖，可恶的大麦！）。下午去参加粉丝活动的时候认识了一位南林大的新朋友，从而使这段旅程没有太过“安静”。晚上演唱会结束后下起了暴雨⛈️，没有带伞，而免费雨披也送完了，所以就做了一次“雨中追雨的少年”，回到酒店后衣服都湿透了。

之后在南京玩了三天，美丽的南京，去了还想去。“旅途”最后两天去了上海找我同学，25岁第一次踏上了我曾梦想去的城市-上海。

无论在何处，祝你美梦成真

2. 📸 Memory

3. ⭐ 个人评分

曲目编排： ⭐⭐⭐⭐⭐
舞美视听： ⭐⭐⭐⭐⭐
歌手状态： ⭐⭐⭐⭐⭐
推荐指数： ⭐⭐⭐⭐⭐
综合评分： ⭐⭐⭐⭐⭐

从零到一：阿里云 200M 带宽服务器的全栈基建（1Panel + Docker + GitHub Actions）

Wed, 25 Feb 2026 00:00:00 +0000

1 前言：为什么放弃“手动搬运”？

在拥有了自己的服务器后，第一反应是手动上传文件。但这存在三个弊端：

效率低：改一个字也要开一遍 FTP。
易出错：容易漏传或传错目录。
无版本控制：无法回溯历史。本篇记录如何利用 GitHub Actions 打造一条自动化流水线，实现“本地代码一推，服务器即刻更新”。

2 环境说明

服务器：阿里云 2核2G / 200M 带宽 / Ubuntu 系统。
运维面板：1Panel（基于 Docker 的现代化管理面板）。
静态引擎：Jekyll (Ruby 3.4.4)。
部署通道：SSH + Rsync。

3 核心步骤详解

第一步：服务器基建 (1Panel)

安装 1Panel 并在应用商店安装 OpenResty（Nginx 的增强版）。
在“网站”菜单下创建一个静态网站。

路径：/opt/1panel/apps/openresty/openresty/www/sites/test/index（此路径为后期同步的目标 TARGET）。

确保服务器防火墙已开启 80/443 端口，以及 SSH 通讯所需的 22 端口。

第二步：建立“信任关系” (SSH Key)

为了让 GitHub 机器人能直接登录我们的服务器，需要配置免密登录：

本地生成密钥对： ssh-keygen -t rsa -b 4096 -f id_rsa_github
分发公钥：将 id_rsa_github.pub 的内容追加到服务器的 /root/.ssh/authorized_keys 中。
权限加固：确保 .ssh 目录权限为 700，authorized_keys 权限为 600。

第三步：配置 GitHub Secrets

在 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中配置四个关键变量：

REMOTE_HOST: 服务器公网 IP。
REMOTE_USER: root。
SSH_PRIVATE_KEY: id_rsa_github 文件里的完整私钥内容。
REMOTE_TARGET: 服务器上的静态目录路径。

第四步：编写自动化流水线 (YAML)

在 .github/workflows/ 下创建 jekyll.yml。核心逻辑是利用 easingthemes/ssh-deploy 插件执行 rsync。

# 关键配置摘要
- name: Deploy to Aliyun Server
  uses: easingthemes/ssh-deploy@v5.1.0
  with:
    SSH_PRIVATE_KEY: $
    ARGS: "-rltzvi --delete" # 增量同步，删除服务器多余文件
    SOURCE: "_site/"         # Jekyll 构建后的产物目录
    REMOTE_HOST: $
    REMOTE_USER: $
    TARGET: $

4 外部资源集成：

为了追求极致的性能和稳定性，我并没有将所有功能都死磕在自己的服务器上，而是引入了更成熟的云原生方案：

A. 评论系统：Waline + Vercel + Neon

为了不让评论数据的存储和处理占用阿里云的 2G 内存，我采用了 Serverless（无服务器） 架构：

后端部署 (Vercel)：利用 Vercel 的免费额度托管 Waline 后端程序。
数据库 (Neon)：所有的评论内容存储在 Neon 的云数据库中，安全且免费。
集成方式：在 Jekyll 模板中引入 Waline 的 JS 脚本，通过 API 与 Vercel 通信。
深度心得：这种方案实现了“数据随人走”，即便我以后重装服务器系统，评论数据也不会丢失。

B. 极致图床：Cloudflare R2 + PicGo

虽然服务器有 200M 带宽，但为了节省宝贵的公网流量以及应对未来可能的并发访问，我搭建了专业的对象存储图床：

存储底座 (Cloudflare R2)：利用 Cloudflare 的 R2 存储（S3 兼容模式），免流量费且自带全球 CDN 加速。
自动化工具 (PicGo)：在本地配置 PicGo 插件，实现“截图 -> 上传 -> 自动生成 Markdown 链接”的一键流。
安全加固 (V2 签名)：使用 V2 签名机制确保上传接口的安全，防止图床被恶意盗刷。

5 未来扩展：

目前的基建仅完成了博客的部署。后续计划：

后端 API：在 1Panel 中使用 Docker 部署 Python (FastAPI) 容器。
移动端联调：Kotlin 开发的安卓 App 通过 HTTP 请求调用服务器 IP 上的 Python 接口，实现数据上云。

我的第一款酒局神器App“摇了么”

Sun, 22 Feb 2026 13:20:00 +0000

🚀 我的第一款酒局神器App“摇了么”诞生记！

源代码、安装包及效果图在文章结尾处。

一直想做一个既好玩又实用的东西。终于，在AI的帮助下，我的第一款 Android 独立应用——“摇了么”，正式诞生啦！

这是一款专为酒局、聚会打造的摇骰子小工具。虽然市面上有很多类似的小程序，但作为一个强迫症+体验控，决定亲自操刀，给它注入真正的“灵魂”。

🎲 为什么叫“摇了么”？

在酒桌上，最常听到的一句话可能就是“该你了，摇了么？”。这个名字既是对朋友的催促，也是这款 App 核心交互的体现——别点屏幕了，直接拿起手机摇吧！

✨ 核心亮点：把细节死磕到底

在体验上主要有以下亮点：

告别反人类UI，单手掌控全局： 抛弃了早期版本中需要呼出软键盘来输入骰子数量的繁琐设计。利用线性布局（LinearLayout）的权重属性，将核心视觉区（骰子展示）固定在中上方，而在底部手指出没的最舒适区域，加入了丝滑的 - 和 + 按钮。1到15个骰子，单手一秒切换。
注入灵魂的“物理外挂”（摇一摇）： 酒局游戏，怎么能只用手指点按钮呢？调用了 Android 的底层硬件——加速度传感器 (Accelerometer)。通过计算 X、Y、Z 三个维度的综合重力加速度，只要你像握着真实骰盅一样用力甩动手机，代码就会自动捕捉你的动作并触发掷骰子！
沉浸式的声感与触觉反馈： 为了模拟真实的物理反馈，加入了双重感官刺激：
1. 听觉：接入 MediaPlayer，摇晃时伴随清脆的“哗啦哗啦”骰子碰撞声。
2. 触觉：调用 Vibrator 震动马达。在骰子滚动的 1 秒内，配合动画发出极其高频的轻微震动，停住的瞬间来一次重震。闭上眼睛，你手里握着的仿佛就是个真骰盅！
安全纯净无广告： 代码完全开源，没有任何联网和收集隐私信息的行为；界面干净整洁，没有任何广告及干扰信息！

💻 核心代码 (Show Me The Code)

这里分享一下“摇了么”最核心的两个逻辑实现：

1. 如何让手机听懂“摇晃”？(传感器逻辑)

这里用到了初中的物理和数学知识。手机的加速度传感器会实时返回 X、Y、Z 三个轴的受力。们算出它们除以地球重力加速度后的 G 力，然后利用勾股定理算出综合受力：

// 传感器检测到手机运动时自动调用
override fun onSensorChanged(event: SensorEvent?) {
    if (event != null && !isRolling) {
        val x = event.values[0]
        val y = event.values[1]
        val z = event.values[2]

        // 计算加速度，除以地球重力加速度得出 G 力
        val gX = x / SensorManager.GRAVITY_EARTH
        val gY = y / SensorManager.GRAVITY_EARTH
        val gZ = z / SensorManager.GRAVITY_EARTH

        // 勾股定理计算综合受力大小
        val gForce = sqrt((gX * gX + gY * gY + gZ * gZ).toDouble()).toFloat()

        // 阈值设定为 2.7：大约是用力甩一下手机的力度
        if (gForce > 2.7f) {
            val now = System.currentTimeMillis()
            // 设置 1 秒的冷却防抖时间
            if (now - lastShakeTime > 1000) {
                lastShakeTime = now
                // 模拟用户点击了摇骰子按钮
                findViewById<Button>(R.id.btnRoll).performClick()
            }
        }
    }
}

2. 如何实现逼真的“骰子翻滚”与触觉反馈？

为了不让结果显得太突兀，利用安卓自带的 CountDownTimer 写了一个 1 秒钟的动画循环。在这 1 秒内，不仅疯狂切换图片、随机倾斜角度，还同步调用了震动马达：

// 开始摇骰子动画（持续1000毫秒，每100毫秒刷新一次）
object : CountDownTimer(1000, 100) {
    override fun onTick(millisUntilFinished: Long) {
        for (view in diceViews) {
            // 随机切图并赋予 -30 到 30 度的随机倾斜角
            view.setImageResource(diceImages[Random.nextInt(6)])
            view.rotation = Random.nextInt(-30, 30).toFloat()
        }
        // 摇晃过程中：触发 20 毫秒的极轻微震动（模拟骰子撞击杯壁）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            vibrator.vibrate(VibrationEffect.createOneShot(20, VibrationEffect.DEFAULT_AMPLITUDE))
        } else {
            vibrator.vibrate(20)
        }
    }

    override fun onFinish() {
        for (view in diceViews) {
            // 定格最终点数，并将角度摆正
            view.setImageResource(diceImages[Random.nextInt(6)])
            view.rotation = 0f 
        }
        // 摇晃结束：触发 100 毫秒的重震（模拟落桌定音）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            vibrator.vibrate(VibrationEffect.createOneShot(100, VibrationEffect.DEFAULT_AMPLITUDE))
        } else {
            vibrator.vibrate(100)
        }
        isRolling = false 
    }
}.start()

💡 写在最后

如果你也想体验一下这款小工具，或者对源码感兴趣，欢迎讨论与交流！

项目地址：https://github.com/JMbaozi/PartyDice
安装包地址：摇了么 v1.0

从 H2O 到 H2O-ac：我的博客迁移与填坑笔记

Sun, 22 Feb 2026 00:00:00 +0000

前言

博客最初的采用的模板是由kaeyleo基于jekyll开发的H2O主题。我在此基础上添加了评论区、友链、归档、音乐播放器、访客记录、目录等功能。但是限于能力有限，写的代码一堆BUG。最近我浏览到了一个基于H2O修改的H2O-ac主题，其内容丰富，视觉效果和阅读体验非常好。

所以我决定对博客进行了一次“大手术”，将原本一直使用的H2O模板替换成了目前视觉效果非常出色的 H2O-ac 主题。

虽然 H2O-ac 带来了极佳的阅读体验和学术风界面，但在迁移和配置自动化的过程中，我遇到了不少令人头大的 Bug。

为了方便日后查阅，也为了给同样使用该主题的小伙伴提供参考，特写下这篇笔记。

迁移过程：从手动到全自动

最初的迁移并不顺利，旧模板留下的残留文件（如 Azure 的部署脚本等）频繁导致构建失败。

1. 自动化 CI/CD 的重建

为了实现“推送即发布”，我弃用了原本混乱的部署脚本，重新编写了 .github/workflows/jekyll.yml。通过以下逻辑确保了环境的纯净：

环境初始化：使用 Ruby 3.4.4 环境。
强制清理：在编译前运行 bundle exec jekyll clean。
强制覆盖：发布到 gh-pages 分支时使用 force_orphan: true，彻底杜绝旧文件缓存。

2. 版权与开源协议

由于 H2O-ac 是基于 H2O 主题的 fork 版本，遵循 MIT 开源协议。在迁移过程中，我保留了原作者的版权信息。

遇到的问题与 Bug 排查（重点）

这次迁移最核心的挑战在于：文章在标签（Tags）页能看，但在首页（Blog）和归档（Archives）页却神秘失踪。经过反复排查，我定位到了以下几个“元凶”：

Bug 1：`pin: false` 逻辑陷阱

这是最难发现的一个点。H2O-ac 主题自带了置顶功能，但我发现：

当我在文章头部显式写下 pin: false 时，首页和归档页会完全无法显示该文章。
解决方案：普通文章直接删除 pin 属性即可。如果不置顶，就不要写这一行，写成 false 反而会被主题逻辑误判并过滤掉。

Bug 2：分支挂载错位

在 GitHub Pages 设置中，如果将部署源选为 master，可能无法看到经过 Actions 机器人编译后的成品。

解决方法：将 GitHub Pages 的部署分支切换到 gh-pages，这才是机器人存放 HTML 成品的地方。

参考文档

结语

感谢 H2O 系列主题的作者们提供的优秀代码。

HTTP 状态码

Tue, 06 Jan 2026 00:00:00 +0000

HTTP 状态码完全指南（详解版）

一篇面向 Web / 后端 / 前端 / GIS Web 应用开发者 的 HTTP 状态码系统性参考文章。

一、什么是 HTTP 状态码

HTTP 状态码（HTTP Status Code） 是服务器在响应客户端（浏览器、APP、程序）请求时，返回的一个 三位数字，用于说明：

👉 这次请求发生了什么、结果如何、是否需要进一步操作

HTTP 状态码是 HTTP 协议语义的核心组成部分，对于：

前后端接口设计
RESTful API 规范
错误处理与调试
网络性能与安全分析

都具有非常重要的意义。

二、HTTP 状态码的五大类

HTTP 状态码按照 首位数字 分为五大类：

分类	范围	含义
1xx	100–199	信息性响应（请求已接收）
2xx	200–299	成功（请求已成功处理）
3xx	300–399	重定向（需要进一步操作）
4xx	400–499	客户端错误
5xx	500–599	服务器错误

三、1xx：信息性状态码（Informational）

表示请求已被接收，正在处理，很少在业务代码中直接使用。

100 Continue

含义：客户端可以继续发送请求体
场景：大文件上传前的确认机制

101 Switching Protocols

含义：服务器同意切换协议
场景：HTTP → WebSocket

四、2xx：成功状态码（Success）

最重要、最常用的一类状态码，表示请求被正确处理。

200 OK

含义：请求成功
场景：
- GET 查询成功
- PUT / PATCH 更新成功

GET /api/fields/123
HTTP/1.1 200 OK

201 Created

含义：资源创建成功
场景：POST 新建资源
建议：返回新资源的 URL

POST /api/fields
HTTP/1.1 201 Created
Location: /api/fields/456

202 Accepted

含义：请求已接收，但尚未处理完成
场景：
- 异步任务
- 后台计算（如 GIS 插值、模型分析）

204 No Content

含义：请求成功，但无返回内容
场景：
- 删除成功
- 仅触发动作的接口

DELETE /api/fields/123
HTTP/1.1 204 No Content

五、3xx：重定向状态码（Redirection）

表示资源位置发生变化，需要客户端采取进一步操作。

301 Moved Permanently

含义：永久重定向
场景：
- 域名迁移
- SEO 优化

302 Found

含义：临时重定向（历史遗留）
注意：可能被浏览器当作 GET 请求处理

303 See Other

含义：使用 GET 访问另一个 URI
场景：POST 后跳转页面

304 Not Modified

含义：资源未修改
场景：
- 浏览器缓存
- ETag / If-Modified-Since

六、4xx：客户端错误（Client Error）

表示问题出在客户端请求本身。

400 Bad Request

含义：请求格式错误
常见原因：
- JSON 语法错误
- 参数缺失

401 Unauthorized

含义：未认证
特点：
- 需要登录
- 通常配合 WWW-Authenticate

⚠️ 注意：401 ≠ 权限不足

403 Forbidden

含义：已认证，但无权限
场景：
- 普通用户访问管理员接口

404 Not Found

含义：资源不存在
场景：
- URL 错误
- 资源被删除

405 Method Not Allowed

含义：请求方法不被允许
示例：

POST /api/fields/123
HTTP/1.1 405 Method Not Allowed
Allow: GET, PUT

409 Conflict

含义：资源冲突
场景：
- 重复创建
- 乐观锁冲突

422 Unprocessable Entity

含义：语义正确，但业务校验失败
场景：
- 表单校验
- 数据规则不满足

七、5xx：服务器错误（Server Error）

表示服务器在处理请求时发生异常。

500 Internal Server Error

含义：服务器内部错误
原因：
- 未捕获异常
- 代码 Bug

502 Bad Gateway

含义：上游服务器返回无效响应
场景：
- 反向代理
- 微服务调用失败

503 Service Unavailable

含义：服务暂不可用
场景：
- 服务维护
- 系统过载

504 Gateway Timeout

含义：上游服务超时
场景：
- GIS 大规模计算
- 数据库响应过慢

八、RESTful API 状态码设计建议

1️⃣ 成功不要只用 200

场景	推荐状态码
创建资源	201
删除成功	204
异步处理	202

2️⃣ 错误状态码要“语义准确”

错误场景	正确做法
未登录	401
无权限	403
参数错误	400 / 422
资源不存在	404

3️⃣ 状态码 + 错误信息结构示例

{
  "code": 422,
  "message": "Validation failed",
  "details": {
    "area": "must be greater than 0"
  }
}

九、常见误区总结

❌ 所有错误都返回 200

❌ 用 500 表示业务校验失败

❌ 401 和 403 混用

❌ 前端只判断 code，不看 HTTP 状态码

十、结语

HTTP 状态码不仅是 网络协议的一部分，更是 接口设计质量的重要体现。

一个设计良好的接口，应该做到：

状态码语义清晰
前后端理解一致
错误可定位、可处理

土壤采样点

Mon, 17 Nov 2025 00:00:00 +0000

以 ArcGIS Pro 3.0.2 版本为例，制作某区域土壤采样点。投影坐标系：WGS-84墨卡托

目视采样

按照能谱或其他数据（本文所有“异常点”采集样本均为能谱总计数Total）进行空间插值，对高/低值进行目视解译，根据需求选取合适数量的土壤采样点。

该方法过于简单，不再赘述。

完全随机采样

全局完全随机采样

将空间插值后的栅格数据进行栅格转点，之后使用值提取至点或多值提取至点。使用数据管理工具–>采样–>创建随机点，根据数据设置参数。

当前方法是在整个区域内进行采样，只考虑数量，不考虑任何其它因素。虽然使用了值提取至点或多值提取至点，但仅是为了后续制图时可以借助参考。

探测器行进轨迹上随机采样

与上述方法不同的点在于，随机分为不是全局，而是探测器（无人机、探测车等）的行进轨迹。

根据数据点的采集时间字段生成轨迹路线：数据管理工具–>要素–>点集转线，排序字段选择采集时间字段。

之后，再将轨迹路线转为点要素：数据管理工具–>采样–>沿线生成点。

谨记：切勿使用要素转点工具，该工具只会生成一个点（中心点）。

使用创建随机点，根据数据设置参数。

沿线性要素的分层随机采样

该方法是ArcGIS Pro环境下的随机土壤采样点方式之一，其考虑了探测器行进路径及不同属性高低值的因素。

使用值提取至点或多值提取至点，将空间插值数据（Total）提取至轨迹点中。打开点数据的属性表，添加一个新字段，用以对当前点进行分类，例如字段class，值有coldPoint、hotPoint、normalPoint。随后选中对应的分类，使用创建随机点，根据数据设置参数。这里三种分类各自的数量可以为5/5/3，最小间隔距离为100米。

土壤属性网格图

Wed, 12 Nov 2025 00:00:00 +0000

以 ArcGIS Pro 3.0.2 版本为例，制作某区域pH空间分布网格图。投影坐标系：WGS-84墨卡托

制作插值图

对已有点数据进行插值，生成当前区域内的pH空间分布图，差值方法为克里金插值。

创建渔网

选择创建渔网工具，设置范围及像元大小，该演示设置像元宽度x高度为30x30，几何类型选择Polygon。

这会创建包围设置范围的一个矩形区域的渔网面要素及点要素。

之后选择裁剪工具对渔网面及及点进行裁剪，以当前区域为掩膜，只保留区域范围内的面及点。

打开渔网面要素的属性表，对面积字段Shape_Area进行降序/升序排列，将边缘不规则的网格进行删除（面积＜规则网格面积）。

数据关联

选择值提取至点，将克里金插值栅格数据提取至渔网点数据中。

右键渔网面要素，选择连接和关联–>添加空间连接

Vue基础知识

Fri, 07 Nov 2025 00:00:00 +0000

数组变化侦听

<template>
    <h3>数组变化侦听</h3>
    <button @click="addListHandle">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            names: ['Alice', 'Bob', 'Charlie', 'Diana']
        }
    },
    methods: {
        addListHandle() {
            // this.names.push('New Name ' + (this.names.length + 1));
            this.names.concat(['New Name ' + (this.names.length + 1)]); // 使用concat不会触发视图更新
            this.names = this.names.concat(['New Name ' + (this.names.length + 1)]); // 重新赋值可以触发视图更新
        }
    },
};
</script>

计算属性computed

<template>
    <h3>{{ yucol.name }}</h3>
    <!-- <p>{{ yucol.kills.length > 0 ? 'Yes': "No" }}</p> -->
    <p>{{ killCount }}</p>
    <p>{{ yucolCounts() }}</p>
</template>


<script>

export default {
    data() {
        return {
        // 这里可以添加一些数据属性
        yucol:{
            name:'yucol',
            age:18,
            kills: ['coding', 'gaming', 'reading']
        }
        };
    },
    computed: {
        // 计算属性
        // 代码不更改时，只会计算一次，提升性能
        killCount() {
            return this.yucol.kills.length > 0 ? 'Yes': "No";
        }
    },
    methods: {
        // 这里可以添加一些方法
        yucolCounts(){
            return this.yucol.kills.length > 0 ? 'Yes': "No";
        }
    }
};

</script>

Class样式绑定

<template>

    <!-- <p :class="myClass">Class样式绑定</p> -->
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定</p>
    <p :class="classObject">Class样式绑定（多个对象绑定）</p>
    <p :class="arrs">Class样式绑定（数组绑定）</p>
    <p :class="[isActive ? 'active' : '', {'text-danger':hasError}]">Class样式绑定（数组和对象）</p>
</template>

<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            // myClass:'red-text'
            isActive:true,
            hasError:true,
            classObject:{
                'active':true,
                'text-danger':true
            },
            arrs:['active','text-danger'],
            arrActive:"active",
            arrDanger:"text-danger"
        };
    }
};

</script>


<style>

    .active{
        color: red;
        font-size: 30px;
    }

    .text-danger{
        background-color: yellow;
    }
</style>

Style绑定

<template>

    <p :style="{color:activeColor, fontSize:'30px'}">Style绑定</p>
    <p :style="styleObject">Style绑定</p>

</template>


<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            activeColor:'red',
            styleObject:{
                color:'green',
                fontSize:'30px'
            }
        };
    }
};

</script>

侦听器watch

<template>

    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">修改数据</button>
</template>


<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            message:"Hello, Watch Demo!"
        };
    },
    methods:{
        updateHandle(){
            this.message = "Data has been updated!";
        }
    },
    watch:{
        // 监听 message 属性的变化
        // newVal: 新值 oldVal: 旧值
        // 函数名必须与要监听的数据属性名相同
        message(newVal,oldVal){
            // 当 message 变化时执行的代码
            console.log(`message changed from "${oldVal}" to "${newVal}"`);
        }
    }
}
</script>

表单输入绑定

<template>

    <h3>表单输入绑定</h3>
    <form action="">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>

</template>

<script>

export default {
    data() {
        return {
            message: "",
            checked: false
        }
    }

}

</script>

模板引用

<template>

    <div ref="container" class="container">
        {{ contents }}
    </div>
    <input type="text" ref="username">
    <button @click="getElementHandle">获取元素</button>

</template>


<script>

export default {
    data() {    
        return {
            contents:"内容"
        }
    },
    methods: {
        getElementHandle() {
            // innerHTML:原生js的属性
            this.$refs.container.innerHTML = "hhhhh";
            console.log(this.$refs.username.value);
        }
    }
}
</script>

Yucol

用纯前端优雅地解析并渲染 Shapefile：RxView

纯前端实现基于 Vue3 + Leaflet 的变量施肥处方图渲染系统

核心技术栈与选型

核心业务流程与实现逻辑

1. 文件的纯前端解析与智能选段

2. 基于 Chroma-js 的动态分级渲染

3. 高精度卫星底图的融合

实战踩坑：如何消灭网格交互的“高亮残影”

结语

实战 FastAPI + JWT：如何优雅实现单设备登录与账号有效期控制

实战 FastAPI + JWT：如何优雅实现单设备登录与账号有效期控制

一 核心设计思路

二 基础安全与环境配置

三 登录接口：签发门禁卡与版本号更迭

四 路由守卫：拦截器中的核心裁决

五 安全退出：物理级失效

六 总结与进阶思考

我的现场编年史：不只是听歌！

🚀 我的演唱会流浪计划

🎵 NO.[001] | [房东的猫] - [世界/青年 2024巡回演唱会]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[002] | [成果] - [海王星飞船]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[003] | [夏日入侵企画] - [温暖人心的冬日聚会-不插电特别专场]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[004] | [双笙] - [经过时你我相遇]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[005] | [张杰] - [未·LIVE - 开往1982]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[006] | [凤凰传奇] - [吉祥如意]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

🎵 NO.[007] | [房东的猫] - [世界/青年 - 2025巡回演唱会- 南京站]

1. 📜 Content

2. 📸 Memory

3. ⭐ 个人评分

从零到一：阿里云 200M 带宽服务器的全栈基建（1Panel + Docker + GitHub Actions）

1 前言：为什么放弃“手动搬运”？

2 环境说明

3 核心步骤详解

第一步：服务器基建 (1Panel)

第二步：建立“信任关系” (SSH Key)

第三步：配置 GitHub Secrets

第四步：编写自动化流水线 (YAML)

4 外部资源集成：

A. 评论系统：Waline + Vercel + Neon

B. 极致图床：Cloudflare R2 + PicGo

5 未来扩展：

我的第一款酒局神器App“摇了么”

🚀 我的第一款酒局神器App“摇了么”诞生记！

🎲 为什么叫“摇了么”？

✨ 核心亮点：把细节死磕到底

💻 核心代码 (Show Me The Code)

1. 如何让手机听懂“摇晃”？(传感器逻辑)

2. 如何实现逼真的“骰子翻滚”与触觉反馈？

💡 写在最后

从 H2O 到 H2O-ac：我的博客迁移与填坑笔记

前言

迁移过程：从手动到全自动

1. 自动化 CI/CD 的重建

2. 版权与开源协议

遇到的问题与 Bug 排查（重点）

Bug 1：pin: false 逻辑陷阱

Bug 2：分支挂载错位

参考文档

结语

HTTP 状态码

HTTP 状态码完全指南（详解版）

一核心设计思路

二基础安全与环境配置

三登录接口：签发门禁卡与版本号更迭

四路由守卫：拦截器中的核心裁决

五安全退出：物理级失效

六总结与进阶思考

Bug 1：`pin: false` 逻辑陷阱