漫步技术分享

Cursor 编辑器使用指南

Sun, 19 Oct 2025 12:04:19 +0800

一、简介

Cursor 是一款基于 VS Code 构建的 AI 编程编辑器，由 Anysphere 团队开发。它将大型语言模型（如 GPT-4、Claude）深度集成到开发环境中，提供智能代码补全、对话式代码生成、上下文感知、项目理解等功能，旨在提升开发效率、降低学习门槛。

二、安装与配置

2.1 下载与安装

官网：https://cursor.com
支持平台：Windows、macOS、Linux（基于 VS Code 构建，支持大部分 VS Code 插件和设置）

2.2 初次启动与配置

首次启动：安装后启动 Cursor，登录或注册账号。
设置中文界面：File > Preferences > Extensions，搜索并安装 Chinese (Simplified) Language Pack。

三、核心功能

3.1 Tab 智能补全

功能：按下 Tab 键，Cursor 会根据上下文自动补全代码。
场景：适用于快速编写函数、类、条件语句等。

3.2 Cmd+K 一键 AI 助手

功能：按下 Cmd+K（或 Ctrl+K），启动 AI 助手，进行代码生成、重构、审查等操作。
示例：输入“生成一个 Node.js + Express 的用户管理 API”，AI 会自动生成相应代码。

3.3 Chat 对话式编程

功能：在编辑器中与 AI 进行对话，获取代码建议、解释、优化等。
场景：适用于调试、学习新技术、理解复杂代码等。

3.4 Agent 模式

功能：AI 会自动分析项目结构，理解上下文，提供更精准的建议。
场景：适用于大型项目、复杂系统的开发和维护。

四、上下文与规则系统

4.1 上下文功能

@Files：引用特定文件，AI 会根据这些文件提供更准确的建议和分析。
@Folders：引用特定文件夹，帮助 AI 理解项目结构并提供相关上下文信息。
@Code：引用代码段，在对话中直接引用代码段，用于代码解释、优化和修改建议。
@Docs：引用文档，快速引用项目相关文档，帮助 AI 获取更多上下文信息。
@Git：版本控制，与版本控制系统交互，查看提交记录和分支信息。
@Web：网页搜索，可以在 Cursor 命令中动态添加最新的在线信息和文档作为上下文。

4.2 规则系统

.cursorrules：在项目根目录创建 .cursorrules 文件，定义项目的开发规则、代码风格、依赖库等，帮助 AI 更好地理解项目要求。
.cursorignore：在项目根目录创建 .cursorignore 文件，指定 AI 在分析项目时忽略的文件或目录，避免不必要的干扰。

五、快捷键与命令

5.1 常用快捷键

快捷键	功能描述
`Tab`	智能代码补全
`Cmd+K`	启动 AI 助手
`Ctrl+L`	启动 Chat 对话式编程
`Ctrl+I`	启动 Agent 模式

5.2 常用命令

cursor-agent：启动 Agent 模式。
cursor-agent -p "<prompt>"：执行一次性任务。
cursor-agent --resume <session-id>：恢复指定会话。

六、实战案例：构建 AI 驱动的博客系统

6.1 项目结构

ai-blog/
├── backend/                # 后端代码
│   ├── api/
│   ├── service/
│   ├── model/
│   ├── database/
│   └── main.go
├── frontend/               # 前端代码
│   ├── components/
│   ├── pages/
│   └── utils/
├── tests/                  # 测试代码
│   ├── backend/
│   └── frontend/
├── docker/                 # 容器构建文件
│   └── Dockerfile
├── scripts/                # 自动化脚本
│   └── migrate.sh
├── requirements.md         # 需求文档
├── .rules.md               # Cursor 开发规则
└── README.md               # 项目总览

6.2 需求文档（requirements.md）

# AI 驱动博客系统需求文档

## 项目目标

构建一个支持 AI 自动生成内容、前后端分离的博客系统。

## 功能模块

- 用户注册与登录
- 博客文章的增删改查
- 评论与点赞
- 后台管理（用户管理、内容审核）
- AI 助手（根据主题自动生成文章内容）

## 技术栈

- 后端：Go（Gin 框架）、PostgreSQL
- 前端：Next.js、Tailwind CSS
- AI 接口：OpenAI GPT-4
- 容器：Docker + Devbox（开发环境）

6.3 开发规则（.rules.md）

# Cursor 开发规则

## 技术与架构

- 后端必须使用 Go（Gin 框架），禁止使用外部 ORM。
- 数据库使用 PostgreSQL，表结构按 SQL 标准。
- 前端使用 Next.js，采用 Tailwind CSS 样式。
- 所有 API 接口必须返回标准 JSON 格式。
- AI 接口通过 GPT-4 调用，封装为单独服务层。

## 代码规范

- 命名使用驼峰风格（camelCase）。
- 单文件长度不超过 300 行。
- 单元测试覆盖率不低于 80%。

## 其他约束

- 必须提供 Dockerfile，支持容器化部署。
- 前后端完全分离，通过 REST API 通信。

6.4 示例对话

开发者输入：

基于需求文档，帮我生成 Go 的 RESTful API 后端框架，包括：

- /api/article 增删改查接口
- 数据库 PostgreSQL 建表 SQL
- 使用 Gin 框架
- 符合 .rules.md 中的约束

AI 响应：

// 生成 Go 后端目录及主要代码：

// main.go
package main

import (
    "github.com/gin-gonic/gin"
    "ai-blog/api"
)

func main() {
    r := gin.Default()
    api.RegisterRoutes(r)
    r.Run(":8080")
}

// api/article.go
package api

import (
    "github.com/gin-gonic/gin"
    "ai-blog/service"
)

func RegisterRoutes(r *gin.Engine) {
    r.GET("/api/article", service.GetArticles)
    r.POST("/api/article", service.CreateArticle)
    r.PUT("/api/article/:id", service.UpdateArticle)
    r.DELETE("/api/article/:id", service.DeleteArticle)
}

// service/article.go
package service

import (
    "ai-blog/model"
    "github.com/gin-gonic/gin"
    "net/http"
)

func GetArticles(c *gin.Context) {
    // 获取文章列表的逻辑
}

func CreateArticle(c *gin.Context) {
    // 创建文章的逻辑
}

func UpdateArticle(c *gin.Context) {
    // 更新文章的逻辑
}

func DeleteArticle(c *gin.Context) {
    // 删除文章的逻辑
}

开发者输入：

生成 Next.js 前端页面：

- 博客文章列表（/pages/articles）
- 博客详情（/pages/articles/[id]）
- 样式用 Tailwind
- 遵循 .rules.md 约束

AI 响应：

// pages/articles/index.js
import React from 'react'

const Articles = () => {
    // 获取文章列表的逻辑
    return (
        <div className="container mx-auto">
            <h1 className="text-3xl font-bold">博客文章列表</h1>
            {/* 文章列表 */}
        </div>
    )
}

export default Articles

// pages/articles/[id].js
import React from 'react'

const ArticleDetail = () => {
    // 获取文章详情的逻辑
    return (
        <div className="container mx-auto">
            <h1 className="text-3xl font-bold">文章详情</h1>
            {/* 文章内容 */}
        </div>
    )
}

export default ArticleDetail

开发者输入：

生成 PostgreSQL 建表 SQL

AI 响应：

-- 创建文章表
CREATE TABLE articles (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

七、最佳实践与团队建议

统一规则与记忆文件：在团队项目中，建议统一建立项目级记忆文件（如 AGENTS.md 或 .rules.md），记录项目架构、规范、约定，供 AI 参考。
权限控制：在敏感或生产环境中使用 AI 自动改动前，务必备份代码，并设置权限控制，避免误操作。
脚本化调用：在 CI/CD 流程中使用非交互模式，并为关键任务设置超时、失败回退机制，确保稳定性

Claude Code CLI 使用指南

Sun, 19 Oct 2025 10:24:50 +0800

一、简介

Claude Code CLI 是由 Anthropic 推出的命令行工具，专为开发者设计，使你能够在终端环境中调用 Claude 系列模型进行“编程助手机器人”式的辅助：代码生成、分析、审查、自动化流程。
其核心价值包括：

在终端环境中通过自然语言描述任务，快速生成或修改代码。
支持脚本化、可编排、高度可定制，适合团队协作与 DevOps 流程。
支持多语言／多模型、较长上下文、工具权限控制等高级能力。

二、安装与初次配置

2.1 系统要求

支持：macOS、Linux、Windows（推荐在 Windows 使用 WSL2）
安装之前建议安装 Node.js（如需使用 npm 安装方式）或遵循镜像站指引。

2.2 安装方式

示例安装命令：

# 全局安装（npm）：
npm install -g @anthropic-ai/claude-code

# 安装后验证版本：
claude --version

2.3 环境配置

设置 API Key 环境变量：例如 ANTHROPIC_API_KEY="sk-…".
在 Windows 上可能还需设置 ANTHROPIC_BASE_URL 等替代镜像地址。
启动 CLI：在项目目录运行：

cd /path/to/project
claude

你将看到欢迎界面，并可输入 /help 查看命令。

三、基本使用模式

3.1 交互式模式（REPL）

在命令行中直接运行 claude 进入交互式界面。你可以像聊天一样输入自然语言。例如：“帮我生成一个 Express API 服务”或“分析这段代码的性能问题”。
可以执行命令如 /help、/resume 等。

3.2 非交互／脚本模式（一次性任务）

适用于脚本化调用、CI／自动化流程：

claude -p "生成一个 Node.js + Express 用户管理服务" --output-format=json

常用参数：

-p <prompt>：非交互 prompt。
--output-format=<text|json|stream-json>：指定输出格式。

3.3 会话／历史管理

-c：继续上次会话。
-r <session-id>：恢复指定会话。
--session-id <id>：保持固定会话 ID 执行长期任务。

四、常用命令 & 参数速查

4.1 核心命令

以下为部分常用命令速查：

/ help        # 显示帮助
/ init        # 使用 CLAUDE.md 或其它初始化项目
/ memory      # 编辑或管理记忆文件
/ clear       # 清除当前会话上下文
/ compact     # 压缩／精简当前会话历史
/ resume      # 恢复会话
/ config      # 查看／修改配置
/ bug         # 报告错误或问题

4.2 启动参数示例

参数	功能说明
`-p <prompt>`	非交互 prompt 模式，一次性执行任务
`--output-format=<…>`	指定输出格式（text、json、stream-json）
`-c`	继续上次会话
`-r <session-id>`	恢复指定会话
`--allowedTools=<tools>`	允许使用的工具白名单
`--disallowedTools=<tools>`	禁止使用的工具白名单
`--permission-mode=<mode>`	权限模式（如 plan、acceptEdits、bypass）
`--model <model-name>`	指定模型，比如：sonnet、opus 等

五、核心机制解析

5.1 记忆（Memory）系统

支持将团队／项目上下文保存在记忆文件（如 CLAUDE.md）中，CLI 启动时自动加载。
建议团队创建项目级别记忆文件，记录项目架构、规范、约定。

5.2 工具与权限控制

CLI 支持工具调用（如 Bash 命令、文件读写、外部服务）并可设置权限控制。
推荐在团队环境中设置白名单／黑名单工具，避免 AI 执行危险操作。

5.3 多代理／子 Agent 机制

可以为特定任务定义子 Agent（Subagent）：拥有专属提示、工具权限、上下文。增强任务执行能力。

5.4 集成 &自动化流

支持将 Claude Code CLI 嵌入 CI/CD、脚本、Git Hook 中。例如：git diff | claude -p "生成 PR 描述"。

六、实战案例：使用 Claude Code 生成服务 + 审查

案例背景

项目：假设团队正在开发 “订单管理服务” (Order Service)，使用 Node.js + Express + MongoDB。
任务：

使用 Claude Code CLI 生成 GET /orders 和 POST /orders 路由。
使用 CLI 对生成代码进行审查，获取优化建议。

操作步骤

初始化项目：

mkdir order-service && cd order-service
npm init -y

生成代码：

claude -p "Generate a Node.js + Express order management API with GET /orders and POST /orders using MongoDB" --output-format=text

安装依赖并运行：

npm install express mongoose
node index.js

审查代码：

claude
# 在交互模式输入：
/review

CLI 将分析代码变更并提出性能、安全、可维护性建议。
将审查结果加入团队记忆文件（如 CLAUDE.md），作为下一次任务参考。

七、最佳实践与团队建议

在团队项目中，建议统一建立项目级记忆文件（CLAUDE.md）和子 Agent 模板。
严格使用权限控制策略，特别是在生产环境或敏感仓库中。
将 Claude Code 嵌入日常流程：如 Pull Request 审查、代码生成、模块重构。
在使用 -p 批处理模式时，做好 CI 回退机制和日志记录，避免误改。
定期审查使用成本、Token 消耗、模型选择，以控制预算。

八、附录：快速命令速查表

# 安装验证
claude --version

# 启动交互式
claude

# 脚本化调用
claude -p "Explain this function" --output-format=json

# 会话管理
claude -c
claude -r <session-id>

# 常用 / 命令
/ help   / init   / memory   / review   / config   / bug   / clear   / compact

# 启动参数示例
claude --allowedTools "Edit" --disallowedTools "Bash(rm:*)"
claude --permission-mode plan -p "Draft release notes"

Qoder CLI 使用指南（入门版）

Sun, 19 Oct 2025 09:43:56 +0800

引言

在现代软件开发流程中，越来越多团队开始采用命令行工具和 AI 辅助来提升效率。 Qoder CLI 是 Qoder 平台推出的一款命令行界面工具，旨在让开发者直接在终端环境中使用自然语言生成代码、审查代码、自动化任务、管理记忆文件等。本文将从安装、使用、团队协作流程、实战案例等多个维度，带你快速掌握 Qoder CLI，并指导团队如何把它纳入日常工作流程。

一、为什么使用 Qoder CLI？

轻量启动：相比传统 IDE 插件，它无需复杂 UI 配置，直接在终端即可调用。
自然语言驱动：你只需用一句话描述需求，工具就可以生成代码、创建文件结构、甚至审查代码。
团队记忆 &规范共享：通过记忆文件（例如 AGENTS.md）保存团队规范、上下文信息，所有成员可共享。
多模式支持：除交互式模式外，还支持非交互脚本模式，方便 CI/CD 集成。
工具链集成：支持权限控制、子 Agent（Subagent）、工作树（Worktree）并行任务等高级功能，非常适合团队协作。

总之，Qoder CLI 是「在终端中就让 AI 成为开发助手」的工具，非常适合希望提升开发效率、统一团队流程的团队使用。

二、安装与初次登录

2.1 系统准备

确保你的开发环境为 macOS、Linux，或 Windows（建议用 Windows Terminal）即可。

2.2 安装方式

你可以选择以下任一方式安装：

# 通用方式（curl 脚本）  
curl -fsSL https://qoder.com/install | bash

# macOS / Linux（Homebrew）  
brew install qoderai/qoder/qodercli --cask

# npm 全局安装  
npm install -g @qoder-ai/qodercli

安装完成后，运行：

qodercli --version

确认安装成功。

2.3 登录

在项目根目录中运行：

qodercli

首次启动将提示你登录账号。登录完成后即可使用 TUI 模式、非交互模式等功能。

三、基本使用模式

3.1 交互式 TUI 模式

在项目目录直接执行 qodercli，你会进入一个终端交互界面。
在该界面中，支持以下几种输入方式：

对话模式：直接输入自然语言，例如 “生成一个 Express API”。
斜杠命令模式：以 / 开头输入内置命令，如 /help。
Bash 模式：在对话中输入 ! + shell 命令，如 !ls。
记忆模式：输入 # 可将多行文本追加到团队记忆文件（AGENTS.md）。

3.2 非交互／脚本化模式

对于自动化脚本、CI/CD 流程，可以使用：

qodercli -p "生成一个使用 Express 的 API 服务" --output-format=json

-p 参数：用于指定 prompt。
--output-format：可选 text|json|stream-json。
此模式适合无人工交互、自动执行的场景。

四、常用命令速查

在交互式 TUI 模式中，你可以输入以下斜杠命令来执行常见操作：

命令	功能说明
`/login`	登录 Qoder 账号
`/help`	显示帮助信息
`/init`	在项目中初始化或更新 AGENTS.md 记忆文件
`/memory`	编辑 AGENTS.md 记忆文件
`/quest`	根据任务规格分配任务
`/review`	审查本地代码改动
`/resume`	查看／恢复指定会话
`/clear`	清除当前会话历史上下文
`/compact`	对当前会话进行摘要／压缩
`/usage`	查看账户状态（Credits、模型使用情况等）
`/status`	查看 CLI 状态（版本、模型、工具状态）
`/config`	显示系统／用户／项目配置
`/agents`	管理子 Agent（查看、创建、删除）
`/bashes`	查看当前后台运行的 Bash 任务
`/release-notes`	显示 CLI 更新日志
`/vim`	打开外部编辑器编辑当前输入
`/feedback`	反馈 Qoder CLI 相关问题
`/quit`	退出 TUI
`/logout`	注销当前账号

五、团队协作流程建议

5.1 记忆文件（Memory）管理

在项目根目录建议建立 AGENTS.md 作为团队共享记忆文件。内容可以包括：

项目架构说明
团队开发规范
常用 Agent 定义
团队成员在 TUI 中输入 # 即可将内容追加到该文件，实现共享记忆。

5.2 子 Agent (Subagent)配置

对于反复任务（如代码审查、单元测试生成、迁移脚本等），建议预定义子 Agent。文件目录如：

project/
  agents/
    code-review.md
    unit-test-gen.md

每个 Agent 文件内容示例：

---
name: code-review
description: 专注于代码质量审查和安全性检查
tools: Read, Grep, Bash
---
你是一位资深代码审查专家，负责检查代码质量、安全风险、规范一致性…

团队成员可直接调用这一 Agent 来执行任务，从而统一流程。

5.3 权限控制与工具策略

建议在项目目录下加入 .qoder/settings.local.json 并加入 .gitignore，以管理敏感配置。示例配置：

{
  "permissions": {
    "deny": ["Edit(src/config/production.json)"],
    "allow": ["Read(src/**)", "Write(src/**)"]
  }
}

这样可防止 AI 不经意修改生产配置文件。

5.4 将 Qoder CLI 纳入开发流程

每位成员在本地环境安装 CLI 并登录。
在每次迭代开始时，通过 qodercli 生成初始代码、任务文档。
在 CI 流程或代码合并中，使用非交互模式自动执行代码生成或审查脚本。
团队会议中定期分享 CLI 使用心得、子 Agent 扩展经验。

六、实战案例：生成用户管理 API + 代码审查

案例背景

项目：用户管理服务（Node.js + Express）
目标：

通过 Qoder CLI 生成 GET /users 和 POST /users 接口，连接 MongoDB。
对已生成代码进行代码审查，提出优化建议。

操作步骤

初始化项目：

mkdir user-service && cd user-service
npm init -y

生成接口代码：

qodercli -p "生成一个 Node.js + Express 的用户管理服务，包含 GET /users 和 POST /users，使用 MongoDB，遵循 ESLint 团队规范" --output-format=text

安装依赖并启动：

npm install express mongoose
node index.js

引入代码审查：启动 TUI 模式执行：

qodercli
# 输入 /review

工具将分析当前代码变更并提供建议，如性能、结构、命名、异常处理等。
将审查结果整理进 AGENTS.md 中，作为团队规范参考。

七、注意事项与最佳实践

虽然 Qoder CLI 功能强大，但建议它作为辅助工具，不应完全替代 IDE 或人工审查。
执行 AI 自动生成或改动前，务必在 Git 中做 commit／分支备份。
敏感或生产环境的配置文件，强烈建议加权限控制或设为 deny。
团队应定期维护 AGENTS.md 和子 Agent 清单，保持内容同步、规范有效。
在 CI 或自动化脚本场景使用非交互模式时，建议加入回退机制、防止误执行。

总结

如果你的团队希望在“终端+自然语言+AI”这一趋势中抢占效率优势，那么 Qoder CLI 是一个非常值得引入的工具。从快速生成代码、统一规范、自动审查，到脚本化流程、团队记忆共享，它都提供了丰富能力。配合本文中的安装、使用、团队流程及案例，你即可带领团队快速进入状态。期待你们在开发中取得更高效率、更优质的代码成果！

记一次开源网站系统文件一直被篡改的问题及解决思路

Sat, 04 Jan 2025 09:30:53 +0800

前言

最近有个客户的网站过几天就会把网站系统的首页文件篡改一下，非常烦，客户找我恢复了好几次了，我想是时候要解决一下了

解决思路

他把是一直会篡改那个文件，那我就写一个脚本每5秒去检测一下是否被篡改，如果篡改了就恢复，天才的想法

实现代码

#!/bin/bash

# 定义要监控的文件路径
FILE="/www/wwwroot/www.xxx.cc/index.php"

# 定义存储原始哈希值的文件
HASH_FILE="/www/wwwroot/www.xxx.cc/index.php.original_hash"

# 定义备份文件路径
BACKUP_FILE="/www/wwwroot/www.xxxx.cc/index.php.backup"

# 计算当前文件的哈希值
CURRENT_HASH=$(sha256sum "$FILE" | awk '{print $1}')

# 检查是否已经存在原始哈希值
if [ -f "$HASH_FILE" ]; then
    # 读取原始哈希值
    ORIGINAL_HASH=$(cat "$HASH_FILE")
    
    # 比较当前哈希值与原始哈希值
    if [ "$CURRENT_HASH" != "$ORIGINAL_HASH" ]; then
        echo "警告: $FILE 已被修改!"
        echo "当前文件哈希值: $CURRENT_HASH"
        echo "原始文件哈希值: $ORIGINAL_HASH"
        
        # 恢复备份文件
        if [ -f "$BACKUP_FILE" ]; then
            cp "$BACKUP_FILE" "$FILE"
            echo "已恢复原始文件."
        else
            echo "备份文件不存在，无法恢复."
        fi
        
        # 发送警报（可选）
        # mail -s "文件被修改警报" 598692079@qq.com <<< "$FILE 已被修改并已恢复."
    else
        echo "文件未被修改."
    fi
else
    # 如果原始哈希值文件不存在，则创建并保存当前哈希值
    echo "$CURRENT_HASH" > "$HASH_FILE"
    
    # 创建备份文件
    cp "$FILE" "$BACKUP_FILE"
    
    echo "原始哈希值和备份文件已创建."
    echo "原始文件哈希值: $CURRENT_HASH"
fi

uniapp的支付宝小程序报：在自定义组件 /pages/member/header/header中无 Component() 构造器调用，但 Page() 页面构造器被错误调用

Tue, 03 Sep 2024 22:23:52 +0800

uniapp生成的支付宝小程序报错：在自定义组件 /pages/member/header/header中无 Component() 构造器调用，但 Page() 页面构造器被错误调用，而同样的百度、微信、抖音则没有这种情况

原因就是支付宝小程序和其他小程序不一样的套路，原生支付宝小程序是不允许include其他页面的，只能import，并且该页面不能再pages.json里边声明，uniapp下，会员中心的头部我是直接放到pages目录下了，估计是类似这种情况，不能引入页面，只能引入组件，然后就出现了上面的错误，

解决办法：
把header.vue页面放到components下，例如我放到了components/member/header.vue下，然后再引入这个头部，就不会再出现这种报错了

程序员必备的JSON可视化工具

Wed, 31 Jul 2024 07:20:31 +0800

前言

JSON文本难于阅读，格式化也不够直观，而且当数据量大的时候还会造成卡顿，今天推荐一个JSON可视化工具，让你一眼看穿JSON——jsoncrack

无论您是从事大型项目的开发人员，还是希望发现隐藏见解的数据爱好者，JSON Crack 都拥有释放数据全部潜力所需的工具和功能。

JSON Crack 是一款免费的开源数据可视化应用程序，能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互式图表。凭借其直观且用户友好的界面，JSON Crack 可以轻松探索、分析和理解最复杂的数据结构。

特点

图形和树视图模式
使用 AI 转换和过滤数据
导出到 PNG、SVG、JPEG 和剪贴板
通过触摸手势支持缩放和平移
支持 JSON、YAML、CSV、XML、TOML...
JQ，JSON模式，解码JWT，生成类型和接口
广泛的工具 - 搜索图形、json 路径、验证、保存到云...
可嵌入的 iframe 小部件

开发

Node.js版本需要>=18.x）

# 下载
git clone https://github.com/AykutSarac/jsoncrack.com.git

# 安装
pnpm install

# 运行
pnpm dev

可以直接从文件导入JSON

插件

JSON Crack 同时也支持VS Code 扩展。此扩展无缝弥合了数据和可视化之间的差距，使开发人员、数据分析师和爱好者能够毫不费力地将复杂的 JSON 数据集转换为信息丰富且具有视觉吸引力的图表。

图片压缩神器，直接可以在前端用

Wed, 31 Jul 2024 07:08:21 +0800

前言

js-image-compressor 是一个实现轻量级图片压缩的 javascript 库，压缩后仅有 5kb，在前端页面即可实现对图片的压缩。在提供基本图片压缩功能同时，还暴露出图片处理相关公用方法

特点

可以对待转化图片大小设置一定的阈值，使得图片转化成 png 格式在不理想情况下不至于过大，同时大于这个阈值则可以自动转化成 jpeg 格式，实现更优压缩；
可以限制输出图片宽高大小，从而防止意外情况发生，比如压缩运算过大使得浏览器奔溃；
默认对 png 输出图片添加透明底色，其他格式设为白色，避免“黑屏”发生；
读取 jpeg 格式图片的 EXIF 信息，矫正图片方位；
提供一些图片处理的常用工具函数（image2Canvas、canvas2Blob 和 canvas2DataUrl 等），用户还可以自定义图片输出的样式特征（比如可以灰度处理、加水印）。

安装

npm安装

npm install js-image-compressor --save-dev

使用

简单配置

import ImageCompressor from 'js-image-compressor';

function imageCompress(file: any) {
  const size = file.size / 1024
    return new Promise((resolve, reject) => {
    const options = {
      file: file,
      quality: 0.8, // 图片质量
      mimeType: 'image/jpeg',
      maxWidth: file.height,
      maxHeight: file.width,
      minWidth: 10, // 指定压缩图片最小宽度
      width: 1080, // 指定压缩图片宽度
      convertSize: Infinity,
      loose: true,
      redressOrientation: true,
      success: (result) => {
        resolve(result)
      },
      error: (msg) => {
        reject(msg)
      },
    }
    new ImageCompressor(options)
  })
 }

其中，钩子函数 beforeCompress 发生在读取图片之后，创建画布之前；钩子函数 success 函数发生在压缩完成生成图片之后。它们回调参数 result 是整合来尺寸、图片类型和大小等相关信息的 blob 对象。

输出的压缩图片符合以下特征：

默认按照 0.8 压缩率配置；
输出图片宽/高维持源图片宽/高；
一般的，输出图片格式保持源图片格式；
当 png 图片的 size 大于 2m 时，默认转化成 jpeg 格式图片；
给 png 图片填充透明色；
当输出图片 size 大于源图片时，将源图片当作输出图片返回；
jpeg 格式图片，矫正翻转/旋转方向；

其他

在压缩输出图片之前，我们还可以对画布进行一些自定义处理，融入元素。

var options = {
  file: file,

  // 图片绘画前
  beforeDraw: function (ctx) {
    vm.btnText = '准备绘图...';
    console.log('准备绘图...');
    ctx.filter = 'grayscale(100%)';
  },

  // 图片绘画后
  afterDraw: function (ctx, canvas) {
    ctx.restore();
    vm.btnText = '绘图完成...';
    console.log('绘图完成...');
    ctx.fillStyle = '#fff';
    ctx.font = (canvas.width * 0.1) + 'px microsoft yahei';
    ctx.fillText(vm.watermarkText, 10, canvas.height - 20);
  },
};

new ImageCompressor(options);

beforeDraw 是在画布创建后，图片绘画前的钩子函数，afterDraw 是在图绘画后的钩子函数。

这里有张图归纳了从本地上传到对图片压缩的详细过程

uniapp如何请求打开系统蓝牙

Sun, 19 May 2024 16:42:52 +0800

直接用下列代码即可

let main = plus.android.runtimeMainActivity();
let BluetoothAdapter = plus.android.importClass(
	"android.bluetooth.BluetoothAdapter");
let BAdapter = new BluetoothAdapter.getDefaultAdapter();
let receiver = plus.android.implements(
	'io.dcloud.android.content.BroadcastReceiver', {
		onReceive: function(context,
			intent) { //实现onReceiver回调函数
			console.log('intent:', intent)
			plus.android.importClass(intent);
			main.unregisterReceiver(receiver);
			//重新打开蓝牙
			_that.isBluetooth();

		}
	});
let IntentFilter = plus.android.importClass(
	'android.content.IntentFilter');
console.log('IntentFilter:', IntentFilter)
let filter = new IntentFilter();
filter.addAction(BAdapter.ACTION_STATE_CHANGED); //监听蓝牙开关
main.registerReceiver(receiver, filter); //注册监听
console.log('filter:', filter)
if (!BAdapter.isEnabled()) {
	console.log('启动蓝牙:')
	BAdapter.enable(); //启动蓝牙
} else {
	BAdapter.disable();
}

webman框架redis如何实现接口重复请求

Sun, 07 Jan 2024 21:07:31 +0800

前言

最近项目发现部分接口有异步操作，前端请求时候这个接口没有做防抖设计所以出现同一秒有多次请求过来，由于这个接口会请求三方接口，这个接口是个耗时操作平均2秒才能返回，所以想办法要防止前端多次请求

解决方案代码

/**
 * redis锁
 */
if (!function_exists('redisLock')) {
    /**
     * redis锁
     * @param $key
     * @param $ttl
     * @return bool
     */
    function redisLock($key, $ttl): bool
    {
        if (Redis::get($key)) {
            return false;
        }
        Redis::setEx($key, $ttl, 1);
        return true;
    }
}

这个方法封装一个redisLock方法，接收两个方法，第一个是redis的键值，根据实际情况声明，要保证这个接口的唯一，ttl是失效时间也就是想多少秒内不在接受新的请求

漫步技术分享

Cursor 编辑器使用指南

一、简介

二、安装与配置

2.1 下载与安装

2.2 初次启动与配置

三、核心功能

3.1 Tab 智能补全

3.2 Cmd+K 一键 AI 助手

3.3 Chat 对话式编程

3.4 Agent 模式

四、上下文与规则系统

4.1 上下文功能

4.2 规则系统

五、快捷键与命令

5.1 常用快捷键

5.2 常用命令

六、实战案例：构建 AI 驱动的博客系统

6.1 项目结构

6.2 需求文档（requirements.md）

6.3 开发规则（.rules.md）

6.4 示例对话

七、最佳实践与团队建议

Claude Code CLI 使用指南

一、简介

二、安装与初次配置

2.1 系统要求

2.2 安装方式

2.3 环境配置

三、基本使用模式

3.1 交互式模式（REPL）

3.2 非交互／脚本模式（一次性任务）

3.3 会话／历史管理

四、常用命令 & 参数速查

4.1 核心命令

4.2 启动参数示例

五、核心机制解析

5.1 记忆（Memory）系统

5.2 工具与权限控制

5.3 多代理／子 Agent 机制

5.4 集成 &自动化流

六、实战案例：使用 Claude Code 生成服务 + 审查

案例背景

操作步骤

七、最佳实践与团队建议

八、附录：快速命令速查表

Qoder CLI 使用指南（入门版）

引言

一、为什么使用 Qoder CLI？

二、安装与初次登录

2.1 系统准备

2.2 安装方式

2.3 登录

三、基本使用模式

3.1 交互式 TUI 模式

3.2 非交互／脚本化模式

四、常用命令速查

五、团队协作流程建议

5.1 记忆文件 （Memory）管理

5.2 子 Agent (Subagent)配置

5.3 权限控制与工具策略

5.4 将 Qoder CLI 纳入开发流程

六、实战案例：生成用户管理 API + 代码审查

案例背景

操作步骤

七、注意事项与最佳实践

总结

记一次开源网站系统文件一直被篡改的问题及解决思路

前言

解决思路

实现代码

uniapp的支付宝小程序报：在自定义组件 /pages/member/header/header中无 Component() 构造器调用，但 Page() 页面构造器被错误调用

程序员必备的JSON可视化工具

前言

特点

开发

插件

图片压缩神器，直接可以在前端用

前言

特点

5.1 记忆文件（Memory）管理