ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    MCP Prompts:预定义 AI 交互模板

    2025年12月3日 · 12 min
    ChatGPTClaude

    Prompt 是 MCP 的第三个核心原语。它让你可以预定义 AI 交互模板,用户只需选择模板并填入参数,就能快速启动特定类型的对话。

    🎯 Prompt 的作用

    想象这些场景:

    • 每次让 AI 审查代码都要写一大段说明
    • 希望 AI 用固定格式生成文档
    • 需要 AI 按特定步骤分析数据

    Prompt 让这些”标准化交互”变成一键可用的模板。

    ┌─────────────────┐ 选择 Prompt ┌─────────────┐
    │ 用户界面 │ ───────────────► │ MCP Server │
    │ (Claude等) │ ◄─────────────── │ │
    └─────────────────┘ 返回消息模板 └─────────────┘

    基础 Prompt

    注册一个简单的 Prompt:

    import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
    import { z } from 'zod'
    const server = new McpServer({
    name: 'prompt-server',
    version: '1.0.0',
    })
    server.registerPrompt(
    'explain-code',
    {
    title: '代码解释',
    description: '解释一段代码的功能和实现原理',
    argsSchema: {
    code: z.string().describe('要解释的代码'),
    language: z.string().optional().describe('编程语言'),
    },
    },
    ({ code, language }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请解释以下${language ? ` ${language} ` : ''}代码的功能和实现原理:
    \`\`\`${language || ''}
    ${code}
    \`\`\`
    请从以下几个方面进行解释:
    1. 代码的主要功能
    2. 关键实现逻辑
    3. 使用的设计模式或技术
    4. 潜在的改进点`,
    },
    },
    ],
    })
    )

    参数说明:

    • name - Prompt 的唯一标识
    • title - 显示名称
    • description - 描述,帮助用户理解何时使用
    • argsSchema - 参数定义(使用 Zod)
    • 处理函数 - 返回消息数组

    多消息 Prompt

    Prompt 可以返回多条消息,包括系统消息:

    server.registerPrompt(
    'code-review',
    {
    title: '代码审查',
    description: '对代码进行专业审查,给出改进建议',
    argsSchema: {
    code: z.string().describe('要审查的代码'),
    focus: z
    .enum(['security', 'performance', 'readability', 'all'])
    .default('all')
    .describe('审查重点'),
    },
    },
    ({ code, focus }) => {
    const focusMap = {
    security: '安全性问题(注入、XSS、敏感信息泄露等)',
    performance: '性能问题(算法复杂度、内存使用、缓存策略等)',
    readability: '可读性问题(命名、注释、代码结构等)',
    all: '安全性、性能和可读性',
    }
    return {
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请对以下代码进行专业审查,重点关注${focusMap[focus]}:
    \`\`\`
    ${code}
    \`\`\`
    请按以下格式输出:
    ## 总体评价
    [简要评价代码质量]
    ## 发现的问题
    [按严重程度列出问题]
    ## 改进建议
    [具体的改进建议和示例代码]
    ## 优点
    [代码中值得肯定的地方]`,
    },
    },
    ],
    }
    }
    )

    嵌入资源内容

    Prompt 可以嵌入 Resource 内容,让 AI 在特定上下文中工作:

    server.registerPrompt(
    'analyze-config',
    {
    title: '配置分析',
    description: '分析项目配置文件,给出优化建议',
    },
    () => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'resource',
    resource: {
    uri: 'config://package.json',
    mimeType: 'application/json',
    text: '...', // 实际使用时由 Server 填充
    },
    },
    },
    {
    role: 'user',
    content: {
    type: 'text',
    text: '请分析这个 package.json 配置,检查是否有以下问题:\n1. 过时的依赖\n2. 不必要的依赖\n3. 版本冲突风险\n4. 脚本配置优化建议',
    },
    },
    ],
    })
    )

    动态 Prompt 生成

    Prompt 处理函数可以是异步的,支持动态生成内容:

    server.registerPrompt(
    'daily-report',
    {
    title: '日报生成',
    description: '根据今日 Git 提交生成工作日报',
    argsSchema: {
    author: z.string().optional().describe('筛选特定作者'),
    },
    },
    async ({ author }) => {
    // 获取今日 Git 提交
    const commits = await getTodayCommits(author)
    if (commits.length === 0) {
    return {
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: '今天没有提交记录,无法生成日报。',
    },
    },
    ],
    }
    }
    const commitList = commits
    .map((c) => `- ${c.message} (${c.hash.slice(0, 7)})`)
    .join('\n')
    return {
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请根据以下 Git 提交记录生成工作日报:
    ${commitList}
    日报格式:
    ## 今日完成
    [根据提交内容总结]
    ## 主要工作
    [详细描述主要工作内容]
    ## 遇到的问题
    [如果能从提交中推断出问题,列出来]
    ## 明日计划
    [根据当前进度推测]`,
    },
    },
    ],
    }
    }
    )
    async function getTodayCommits(author?: string) {
    // 实际实现:调用 git log
    return [
    { hash: 'abc1234', message: 'feat: 添加用户认证模块' },
    { hash: 'def5678', message: 'fix: 修复登录页面样式问题' },
    ]
    }

    带补全的参数

    为 Prompt 参数提供自动补全建议:

    server.registerPrompt(
    'team-greeting',
    {
    title: '团队问候',
    description: '生成针对特定团队的问候消息',
    argsSchema: {
    team: z.string().describe('团队名称'),
    occasion: z.string().describe('场合'),
    },
    complete: {
    team: async (value) => {
    const teams = ['前端组', '后端组', '产品组', '设计组', 'QA组']
    return teams.filter((t) => t.includes(value))
    },
    occasion: async (value) => {
    const occasions = [
    '周会',
    '项目启动',
    '版本发布',
    '团建活动',
    '年终总结',
    ]
    return occasions.filter((o) => o.includes(value))
    },
    },
    },
    ({ team, occasion }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请为${team}的${occasion}写一段开场白,要求:
    1. 简洁有力
    2. 符合场合氛围
    3. 鼓舞团队士气`,
    },
    },
    ],
    })
    )

    复杂场景:多角色对话

    Prompt 可以预设多轮对话,适合需要特定上下文的场景:

    server.registerPrompt(
    'sql-assistant',
    {
    title: 'SQL 助手',
    description: '帮助编写和优化 SQL 查询',
    argsSchema: {
    schema: z.string().describe('数据库表结构'),
    question: z.string().describe('你的问题或需求'),
    },
    },
    ({ schema, question }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `我有以下数据库表结构:
    \`\`\`sql
    ${schema}
    \`\`\`
    请记住这个表结构,后续我会问你相关的 SQL 问题。`,
    },
    },
    {
    role: 'assistant',
    content: {
    type: 'text',
    text: '我已经了解了你的数据库表结构。请问有什么 SQL 相关的问题?',
    },
    },
    {
    role: 'user',
    content: {
    type: 'text',
    text: question,
    },
    },
    ],
    })
    )

    Prompt 与 Tool/Resource 协作

    Prompt 可以引导用户使用特定的 Tool 或 Resource:

    // 注册相关的 Tool
    server.registerTool(
    'run_sql',
    {
    title: '执行 SQL',
    description: '在数据库中执行 SQL 查询',
    inputSchema: {
    sql: z.string().describe('SQL 语句'),
    },
    },
    async ({ sql }) => {
    const result = await executeSQL(sql)
    return {
    content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
    structuredContent: result,
    }
    }
    )
    // Prompt 引导使用 Tool
    server.registerPrompt(
    'data-analysis',
    {
    title: '数据分析',
    description: '分析数据库中的数据',
    argsSchema: {
    table: z.string().describe('要分析的表名'),
    goal: z.string().describe('分析目标'),
    },
    },
    ({ table, goal }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `我想分析 ${table} 表中的数据。
    分析目标:${goal}
    请使用 run_sql 工具执行必要的查询,然后给我分析结果。注意:
    1. 先了解表结构
    2. 分步执行查询
    3. 用图表或表格展示关键数据
    4. 给出你的分析结论和建议`,
    },
    },
    ],
    })
    )

    完整示例:开发助手 Prompts

    import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
    import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
    import { z } from 'zod'
    const server = new McpServer({
    name: 'dev-prompts',
    version: '1.0.0',
    })
    // 代码审查 Prompt
    server.registerPrompt(
    'review',
    {
    title: '代码审查',
    description: '全面审查代码质量',
    argsSchema: {
    code: z.string(),
    language: z.string().optional(),
    },
    },
    ({ code, language }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `审查以下${language || ''}代码:
    \`\`\`${language || ''}
    ${code}
    \`\`\`
    检查:安全性、性能、可维护性、最佳实践。`,
    },
    },
    ],
    })
    )
    // Bug 分析 Prompt
    server.registerPrompt(
    'debug',
    {
    title: 'Bug 分析',
    description: '分析代码中的 Bug',
    argsSchema: {
    code: z.string().describe('有问题的代码'),
    error: z.string().describe('错误信息或现象'),
    expected: z.string().optional().describe('期望的行为'),
    },
    },
    ({ code, error, expected }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请帮我分析这个 Bug:
    **代码:**
    \`\`\`
    ${code}
    \`\`\`
    **错误/问题:**
    ${error}
    ${expected ? `**期望行为:**\n${expected}` : ''}
    请分析:
    1. 问题的根本原因
    2. 修复方案
    3. 如何避免类似问题`,
    },
    },
    ],
    })
    )
    // 单元测试生成 Prompt
    server.registerPrompt(
    'generate-tests',
    {
    title: '生成单元测试',
    description: '为代码生成单元测试',
    argsSchema: {
    code: z.string().describe('要测试的代码'),
    framework: z.enum(['jest', 'vitest', 'mocha']).default('vitest'),
    },
    },
    ({ code, framework }) => ({
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `为以下代码生成 ${framework} 单元测试:
    \`\`\`
    ${code}
    \`\`\`
    要求:
    1. 覆盖正常情况
    2. 覆盖边界情况
    3. 覆盖错误处理
    4. 使用 describe/it 结构
    5. 添加必要的注释`,
    },
    },
    ],
    })
    )
    // 文档生成 Prompt
    server.registerPrompt(
    'generate-docs',
    {
    title: '生成文档',
    description: '为代码生成文档',
    argsSchema: {
    code: z.string().describe('要文档化的代码'),
    style: z.enum(['jsdoc', 'tsdoc', 'markdown']).default('tsdoc'),
    },
    },
    ({ code, style }) => {
    const styleGuide = {
    jsdoc: 'JSDoc 格式的注释',
    tsdoc: 'TSDoc 格式的注释',
    markdown: 'Markdown 格式的 API 文档',
    }
    return {
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `为以下代码生成${styleGuide[style]}:
    \`\`\`
    ${code}
    \`\`\`
    要求:
    1. 描述函数/类的用途
    2. 说明参数和返回值
    3. 提供使用示例
    4. 标注可能的异常`,
    },
    },
    ],
    }
    }
    )
    // 重构建议 Prompt
    server.registerPrompt(
    'refactor',
    {
    title: '重构建议',
    description: '给出代码重构建议',
    argsSchema: {
    code: z.string().describe('要重构的代码'),
    goal: z
    .enum(['simplify', 'performance', 'testability', 'solid'])
    .describe('重构目标'),
    },
    },
    ({ code, goal }) => {
    const goalDesc = {
    simplify: '简化代码,提高可读性',
    performance: '优化性能',
    testability: '提高可测试性',
    solid: '遵循 SOLID 原则',
    }
    return {
    messages: [
    {
    role: 'user',
    content: {
    type: 'text',
    text: `请对以下代码提出重构建议,目标是:${goalDesc[goal]}
    \`\`\`
    ${code}
    \`\`\`
    请提供:
    1. 当前代码的问题分析
    2. 具体的重构步骤
    3. 重构后的代码示例
    4. 重构带来的改进`,
    },
    },
    ],
    }
    }
    )
    // 启动 Server
    const transport = new StdioServerTransport()
    await server.connect(transport)
    console.error('Dev Prompts Server running')

    设计原则

    1. 明确的使用场景

    // ✅ 好:场景明确
    {
    title: 'API 错误处理审查',
    description: '检查 REST API 的错误处理是否完善'
    }
    // ❌ 不好:过于通用
    {
    title: '代码检查',
    description: '检查代码'
    }

    2. 必要的引导

    // ✅ 好:提供结构化引导
    text: `请按以下格式输出:
    ## 问题列表
    ## 修复建议
    ## 代码示例`
    // ❌ 不好:过于开放
    text: `看看这段代码有什么问题`

    3. 合理的默认值

    argsSchema: {
    language: z.string().default('typescript'),
    detail: z.enum(['brief', 'detailed']).default('detailed')
    }

    小结

    这篇文章我们学习了 MCP Prompts:

    ✅ Prompt 的作用与使用场景 ✅ 单消息与多消息 Prompt ✅ 嵌入 Resource 内容 ✅ 动态 Prompt 生成 ✅ 参数自动补全 ✅ 与 Tool/Resource 的协作 ✅ 设计原则与最佳实践

    下一篇我们将深入 MCP 的传输层,学习如何部署 MCP Server 到生产环境。

    参考资料

    • MCP Prompts 规范
    返回 BlogMCP
    上一篇MCP Resources:向 AI 暴露数据下一篇MCP Transport 与部署
    Skip toc
    • 🎯 Prompt 的作用
    • 基础 Prompt
    • 多消息 Prompt
    • 嵌入资源内容
    • 动态 Prompt 生成
    • 带补全的参数
    • 复杂场景:多角色对话
    • Prompt 与 Tool/Resource 协作
    • 完整示例:开发助手 Prompts
    • 设计原则
      • 1. 明确的使用场景
      • 2. 必要的引导
      • 3. 合理的默认值
    • 小结
    • 参考资料
    Table of Contents
    • 🎯 Prompt 的作用
    • 基础 Prompt
    • 多消息 Prompt
    • 嵌入资源内容
    • 动态 Prompt 生成
    • 带补全的参数
    • 复杂场景:多角色对话
    • Prompt 与 Tool/Resource 协作
    • 完整示例:开发助手 Prompts
    • 设计原则
      • 1. 明确的使用场景
      • 2. 必要的引导
      • 3. 合理的默认值
    • 小结
    • 参考资料
    > share on twitter