ゴゴゴゴゴ
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 部署指南

    数据库集成

    2025年12月3日 · 10 min
    ChatGPTClaude

    🙋 全栈应用需要数据库。如何在 Next.js 中高效、安全地进行数据库操作?

    ORM 选择

    特性PrismaDrizzle
    类型安全✅✅
    Schema 定义.prisma 文件TypeScript
    学习曲线中等较低
    查询风格链式 APISQL-like
    Bundle 大小较大较小
    Edge 支持需要适配器原生支持

    Prisma 集成

    安装与初始化

    Terminal window
    # 安装 Prisma
    pnpm add prisma @prisma/client
    pnpm add -D prisma
    # 初始化
    npx prisma init

    Schema 定义

    prisma/schema.prisma
    generator client {
    provider = "prisma-client-js"
    }
    datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
    }
    model User {
    id String @id @default(cuid())
    email String @unique
    name String?
    password String
    posts Post[]
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
    }
    model Post {
    id String @id @default(cuid())
    title String
    content String?
    published Boolean @default(false)
    author User @relation(fields: [authorId], references: [id])
    authorId String
    tags Tag[]
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
    @@index([authorId])
    }
    model Tag {
    id String @id @default(cuid())
    name String @unique
    posts Post[]
    }

    客户端实例

    lib/prisma.ts
    import { PrismaClient } from '@prisma/client'
    const globalForPrisma = globalThis as unknown as {
    prisma: PrismaClient | undefined
    }
    export const prisma =
    globalForPrisma.prisma ??
    new PrismaClient({
    log:
    process.env.NODE_ENV === 'development'
    ? ['query', 'error', 'warn']
    : ['error'],
    })
    if (process.env.NODE_ENV !== 'production') {
    globalForPrisma.prisma = prisma
    }

    🔶 重要:在开发环境使用全局变量避免热重载创建多个连接。

    数据库迁移

    Terminal window
    # 创建迁移
    npx prisma migrate dev --name init
    # 生产环境部署
    npx prisma migrate deploy
    # 重置数据库(开发用)
    npx prisma migrate reset
    # 生成客户端
    npx prisma generate

    基础 CRUD 操作

    app/actions/users.ts
    'use server'
    import { prisma } from '@/lib/prisma'
    import { revalidatePath } from 'next/cache'
    // 创建
    export async function createUser(data: {
    email: string
    name: string
    password: string
    }) {
    const user = await prisma.user.create({
    data: {
    email: data.email,
    name: data.name,
    password: data.password, // 实际应该哈希处理
    },
    })
    revalidatePath('/users')
    return user
    }
    // 查询
    export async function getUsers() {
    return prisma.user.findMany({
    select: {
    id: true,
    email: true,
    name: true,
    createdAt: true,
    _count: {
    select: { posts: true },
    },
    },
    orderBy: { createdAt: 'desc' },
    })
    }
    // 查询单个
    export async function getUser(id: string) {
    return prisma.user.findUnique({
    where: { id },
    include: {
    posts: {
    where: { published: true },
    orderBy: { createdAt: 'desc' },
    },
    },
    })
    }
    // 更新
    export async function updateUser(
    id: string,
    data: { name?: string; email?: string }
    ) {
    const user = await prisma.user.update({
    where: { id },
    data,
    })
    revalidatePath('/users')
    revalidatePath(`/users/${id}`)
    return user
    }
    // 删除
    export async function deleteUser(id: string) {
    await prisma.user.delete({
    where: { id },
    })
    revalidatePath('/users')
    }

    关联查询

    // 获取文章及作者
    export async function getPostWithAuthor(id: string) {
    return prisma.post.findUnique({
    where: { id },
    include: {
    author: {
    select: { id: true, name: true, email: true },
    },
    tags: true,
    },
    })
    }
    // 获取用户的所有文章
    export async function getUserPosts(userId: string) {
    return prisma.post.findMany({
    where: { authorId: userId },
    include: { tags: true },
    orderBy: { createdAt: 'desc' },
    })
    }
    // 创建文章并关联标签
    export async function createPost(data: {
    title: string
    content: string
    authorId: string
    tags: string[]
    }) {
    return prisma.post.create({
    data: {
    title: data.title,
    content: data.content,
    authorId: data.authorId,
    tags: {
    connectOrCreate: data.tags.map((name) => ({
    where: { name },
    create: { name },
    })),
    },
    },
    include: { tags: true },
    })
    }

    事务处理

    // 转账示例
    export async function transfer(fromId: string, toId: string, amount: number) {
    return prisma.$transaction(async (tx) => {
    // 扣除发送方余额
    const sender = await tx.user.update({
    where: { id: fromId },
    data: { balance: { decrement: amount } },
    })
    if (sender.balance < 0) {
    throw new Error('余额不足')
    }
    // 增加接收方余额
    await tx.user.update({
    where: { id: toId },
    data: { balance: { increment: amount } },
    })
    // 记录交易
    await tx.transaction.create({
    data: { fromId, toId, amount },
    })
    return { success: true }
    })
    }

    Drizzle 集成

    安装

    Terminal window
    # PostgreSQL
    pnpm add drizzle-orm postgres
    pnpm add -D drizzle-kit
    # 或 MySQL
    pnpm add drizzle-orm mysql2
    pnpm add -D drizzle-kit

    Schema 定义

    db/schema.ts
    import { pgTable, text, timestamp, boolean, uuid } from 'drizzle-orm/pg-core'
    import { relations } from 'drizzle-orm'
    export const users = pgTable('users', {
    id: uuid('id').defaultRandom().primaryKey(),
    email: text('email').notNull().unique(),
    name: text('name'),
    password: text('password').notNull(),
    createdAt: timestamp('created_at').defaultNow().notNull(),
    updatedAt: timestamp('updated_at').defaultNow().notNull(),
    })
    export const posts = pgTable('posts', {
    id: uuid('id').defaultRandom().primaryKey(),
    title: text('title').notNull(),
    content: text('content'),
    published: boolean('published').default(false).notNull(),
    authorId: uuid('author_id')
    .notNull()
    .references(() => users.id),
    createdAt: timestamp('created_at').defaultNow().notNull(),
    updatedAt: timestamp('updated_at').defaultNow().notNull(),
    })
    export const tags = pgTable('tags', {
    id: uuid('id').defaultRandom().primaryKey(),
    name: text('name').notNull().unique(),
    })
    export const postsToTags = pgTable('posts_to_tags', {
    postId: uuid('post_id')
    .notNull()
    .references(() => posts.id),
    tagId: uuid('tag_id')
    .notNull()
    .references(() => tags.id),
    })
    // 定义关系
    export const usersRelations = relations(users, ({ many }) => ({
    posts: many(posts),
    }))
    export const postsRelations = relations(posts, ({ one, many }) => ({
    author: one(users, {
    fields: [posts.authorId],
    references: [users.id],
    }),
    tags: many(postsToTags),
    }))

    客户端实例

    db/index.ts
    import { drizzle } from 'drizzle-orm/postgres-js'
    import postgres from 'postgres'
    import * as schema from './schema'
    const connectionString = process.env.DATABASE_URL!
    // 连接池配置
    const client = postgres(connectionString, {
    max: 10,
    idle_timeout: 20,
    connect_timeout: 10,
    })
    export const db = drizzle(client, { schema })

    配置文件

    drizzle.config.ts
    import type { Config } from 'drizzle-kit'
    export default {
    schema: './db/schema.ts',
    out: './drizzle',
    dialect: 'postgresql',
    dbCredentials: {
    url: process.env.DATABASE_URL!,
    },
    } satisfies Config

    迁移命令

    Terminal window
    # 生成迁移
    npx drizzle-kit generate
    # 执行迁移
    npx drizzle-kit migrate
    # 推送 schema(开发用)
    npx drizzle-kit push
    # 打开 Studio
    npx drizzle-kit studio

    基础 CRUD 操作

    app/actions/users.ts
    'use server'
    import { db } from '@/db'
    import { users, posts } from '@/db/schema'
    import { eq, desc } from 'drizzle-orm'
    import { revalidatePath } from 'next/cache'
    // 创建
    export async function createUser(data: {
    email: string
    name: string
    password: string
    }) {
    const [user] = await db
    .insert(users)
    .values({
    email: data.email,
    name: data.name,
    password: data.password,
    })
    .returning()
    revalidatePath('/users')
    return user
    }
    // 查询所有
    export async function getUsers() {
    return db.select().from(users).orderBy(desc(users.createdAt))
    }
    // 查询单个
    export async function getUser(id: string) {
    const [user] = await db.select().from(users).where(eq(users.id, id))
    return user
    }
    // 更新
    export async function updateUser(
    id: string,
    data: { name?: string; email?: string }
    ) {
    const [user] = await db
    .update(users)
    .set({ ...data, updatedAt: new Date() })
    .where(eq(users.id, id))
    .returning()
    revalidatePath('/users')
    return user
    }
    // 删除
    export async function deleteUser(id: string) {
    await db.delete(users).where(eq(users.id, id))
    revalidatePath('/users')
    }

    关联查询

    // 使用 with 进行关联查询
    export async function getUserWithPosts(id: string) {
    const result = await db.query.users.findFirst({
    where: eq(users.id, id),
    with: {
    posts: {
    orderBy: desc(posts.createdAt),
    },
    },
    })
    return result
    }
    // 手动 JOIN
    export async function getPostsWithAuthors() {
    return db
    .select({
    post: posts,
    author: {
    id: users.id,
    name: users.name,
    email: users.email,
    },
    })
    .from(posts)
    .leftJoin(users, eq(posts.authorId, users.id))
    .orderBy(desc(posts.createdAt))
    }

    事务处理

    export async function createPostWithTags(data: {
    title: string
    content: string
    authorId: string
    tagNames: string[]
    }) {
    return db.transaction(async (tx) => {
    // 创建文章
    const [post] = await tx
    .insert(posts)
    .values({
    title: data.title,
    content: data.content,
    authorId: data.authorId,
    })
    .returning()
    // 创建或获取标签
    for (const name of data.tagNames) {
    const [tag] = await tx
    .insert(tags)
    .values({ name })
    .onConflictDoNothing()
    .returning()
    const existingTag =
    tag ||
    (await tx.query.tags.findFirst({
    where: eq(tags.name, name),
    }))
    if (existingTag) {
    await tx.insert(postsToTags).values({
    postId: post.id,
    tagId: existingTag.id,
    })
    }
    }
    return post
    })
    }

    连接池管理

    Serverless 环境

    // lib/db.ts (Prisma with connection pooling)
    import { PrismaClient } from '@prisma/client'
    import { Pool } from '@neondatabase/serverless'
    import { PrismaNeon } from '@prisma/adapter-neon'
    const pool = new Pool({ connectionString: process.env.DATABASE_URL })
    const adapter = new PrismaNeon(pool)
    export const prisma = new PrismaClient({ adapter })

    使用外部连接池

    .env
    # 直接连接(用于迁移)
    DATABASE_URL="postgresql://user:password@host:5432/db"
    # 连接池(用于应用)
    DATABASE_URL_POOLED="postgresql://user:password@pooler.host:6543/db?pgbouncer=true"
    // 开发环境使用直接连接,生产使用连接池
    const connectionString =
    process.env.NODE_ENV === 'production'
    ? process.env.DATABASE_URL_POOLED
    : process.env.DATABASE_URL

    在 Server Components 中使用

    app/users/page.tsx
    // Next.js 15.x
    import { prisma } from '@/lib/prisma'
    import Link from 'next/link'
    export default async function UsersPage() {
    const users = await prisma.user.findMany({
    select: {
    id: true,
    name: true,
    email: true,
    _count: { select: { posts: true } },
    },
    orderBy: { createdAt: 'desc' },
    })
    return (
    <div>
    <h1 className="text-2xl font-bold mb-4">用户列表</h1>
    <ul className="space-y-2">
    {users.map((user) => (
    <li key={user.id} className="p-4 border rounded">
    <Link href={`/users/${user.id}`}>
    <h2 className="font-medium">{user.name || '未命名'}</h2>
    <p className="text-gray-500">{user.email}</p>
    <p className="text-sm">{user._count.posts} 篇文章</p>
    </Link>
    </li>
    ))}
    </ul>
    </div>
    )
    }

    数据验证

    使用 Zod

    lib/validations/user.ts
    import { z } from 'zod'
    export const createUserSchema = z.object({
    email: z.string().email('无效的邮箱格式'),
    name: z.string().min(2, '名称至少 2 个字符').max(50),
    password: z.string().min(8, '密码至少 8 个字符'),
    })
    export const updateUserSchema = createUserSchema.partial()
    export type CreateUserInput = z.infer<typeof createUserSchema>
    export type UpdateUserInput = z.infer<typeof updateUserSchema>
    app/actions/users.ts
    'use server'
    import { prisma } from '@/lib/prisma'
    import { createUserSchema, updateUserSchema } from '@/lib/validations/user'
    import { hash } from 'bcryptjs'
    export async function createUser(formData: FormData) {
    const rawData = {
    email: formData.get('email'),
    name: formData.get('name'),
    password: formData.get('password'),
    }
    const result = createUserSchema.safeParse(rawData)
    if (!result.success) {
    return { errors: result.error.flatten().fieldErrors }
    }
    const hashedPassword = await hash(result.data.password, 12)
    try {
    const user = await prisma.user.create({
    data: {
    ...result.data,
    password: hashedPassword,
    },
    })
    return { user }
    } catch (error) {
    if ((error as any).code === 'P2002') {
    return { errors: { email: ['邮箱已被注册'] } }
    }
    throw error
    }
    }

    性能优化

    选择性查询

    // ✅ 只查询需要的字段
    const users = await prisma.user.findMany({
    select: {
    id: true,
    name: true,
    // 不查询 password 等敏感字段
    },
    })
    // ❌ 查询所有字段
    const users = await prisma.user.findMany()

    分页查询

    export async function getPaginatedPosts(page: number, limit: number = 10) {
    const [posts, total] = await Promise.all([
    prisma.post.findMany({
    skip: (page - 1) * limit,
    take: limit,
    orderBy: { createdAt: 'desc' },
    }),
    prisma.post.count(),
    ])
    return {
    posts,
    pagination: {
    page,
    limit,
    total,
    pages: Math.ceil(total / limit),
    },
    }
    }

    缓存数据库查询

    import { cache } from 'react'
    // 使用 React cache 去重
    export const getUser = cache(async (id: string) => {
    return prisma.user.findUnique({ where: { id } })
    })
    // 使用 unstable_cache 持久化
    import { unstable_cache } from 'next/cache'
    export const getCachedUser = unstable_cache(
    async (id: string) => {
    return prisma.user.findUnique({ where: { id } })
    },
    ['user'],
    { revalidate: 60, tags: ['users'] }
    )

    常见问题

    🤔 Q: Prisma 和 Drizzle 怎么选?

    • Prisma:功能全面,生态成熟,适合快速开发
    • Drizzle:轻量高效,SQL-like 语法,适合追求性能

    🤔 Q: 如何处理数据库连接超时?

    配置连接池参数:

    // Prisma
    new PrismaClient({
    datasources: {
    db: {
    url: process.env.DATABASE_URL,
    },
    },
    })
    // Drizzle with postgres.js
    postgres(url, {
    max: 10,
    idle_timeout: 20,
    connect_timeout: 10,
    })

    🤔 Q: Edge Runtime 如何使用数据库?

    使用支持 Edge 的数据库驱动,如 Neon、PlanetScale 或 Turso。


    下一篇将介绍错误处理,学习如何优雅地处理应用中的各种错误。

    -EOF-

    返回 BlogNext
    上一篇Route Handlers下一篇错误处理
    Skip toc
    • ORM 选择
    • Prisma 集成
      • 安装与初始化
      • Schema 定义
      • 客户端实例
      • 数据库迁移
      • 基础 CRUD 操作
      • 关联查询
      • 事务处理
    • Drizzle 集成
      • 安装
      • Schema 定义
      • 客户端实例
      • 配置文件
      • 迁移命令
      • 基础 CRUD 操作
      • 关联查询
      • 事务处理
    • 连接池管理
      • Serverless 环境
      • 使用外部连接池
    • 在 Server Components 中使用
    • 数据验证
      • 使用 Zod
    • 性能优化
      • 选择性查询
      • 分页查询
      • 缓存数据库查询
    • 常见问题
    Table of Contents
    • ORM 选择
    • Prisma 集成
      • 安装与初始化
      • Schema 定义
      • 客户端实例
      • 数据库迁移
      • 基础 CRUD 操作
      • 关联查询
      • 事务处理
    • Drizzle 集成
      • 安装
      • Schema 定义
      • 客户端实例
      • 配置文件
      • 迁移命令
      • 基础 CRUD 操作
      • 关联查询
      • 事务处理
    • 连接池管理
      • Serverless 环境
      • 使用外部连接池
    • 在 Server Components 中使用
    • 数据验证
      • 使用 Zod
    • 性能优化
      • 选择性查询
      • 分页查询
      • 缓存数据库查询
    • 常见问题
    > share on twitter