服务端之NestJS接口响应message编写规范详解、写给前后端都舒服的接口、API提示信息标准化

服务端之NestJS接口响应message编写规范详解、写给前后端都舒服的接口、API提示信息标准化


前言

在现代后端开发中,接口响应不仅仅是数据的传递,还承担着向前端或用户传递操作状态和结果的功能。一个规范、统一的message字段设计,可以显著提升系统的可维护性、前端开发效率和用户体验。

定义

响应结构示例(NestJS风格)

各字段作用

提示信息设计原则

简洁明了
1、不宜过长,一般3~12个汉字。
2、避免含糊不清的词,如“完成了”、“OK”等。


统一风格
1、同一项目接口建议使用统一动词+状态组合,例如:获取数据成功、数据加载完成。


上下文清晰
1、提示信息应体现操作对象或类型,如“用户列表获取成功”而不是“获取成功”。


可扩展与模板化
1、对于多类型数据返回,可使用模板化语法:


2、如 设备列表获取成功、订单数据获取成功

面向用户与面向开发分层
1、前端提示:简短易懂,强调用户操作状态。
2、后台日志 / 文档:正式、完整,便于排查接口状态。

提示信息风格分类

简洁风格(前端显示)

正式 / 日志风格(后台接口 / 接口文档)

带数量 / 上下文提示

带操作指引提示

提示信息模板化设计

模板
为了统一风格和减少重复代码,可设计模板:


输出:用户列表获取成功,共10条

模板化好处:
1、统一风格,易维护
2、可动态生成提示内容
3、可适配多语言(国际化)

国际化与多语言支持

模板
在国际化项目中,message应使用 语言文件或翻译key,避免硬编码:


好处
1、适配不同语言
2、前端可直接展示翻译内容
3、后端日志仍可使用统一key便于排查

最佳实践

前端提示短小清晰
1、数据加载完成、获取数据成功


后台 / 日志提示正式完整
1、数据已成功获取、列表数据已返回


数量提示增加用户反馈
1、列表数据获取成功,共${list.length}条


模板化 + 动态内容
1、提高复用率,降低出错率


避免模糊词
1、不使用“OK”、“完成了”、“操作成功了”
2、必须明确操作对象、状态或数量

参考示例(NestJS响应)



1、前端显示,用户列表获取成功,共10条
2、日志可记录status+message用于接口监控

总结

1、message字段是接口的重要组成部分,承担操作反馈和提示作用。
2、优化目标:简洁、统一、明确、可扩展、可国际化。
3、规范化提示信息:
3.1、前端提示:短小清晰,用户友好
3.2、后端日志 / 文档:正式完整,便于排查
3.3、可模板化,适应多接口、多数据类型
3.4、可动态添加数量或操作引导

统一风格示例清单推荐


API响应message清单(可直接使用)

1、前端提示(简洁直观)
获取数据成功、数据加载完成、操作成功、保存成功、更新成功、删除成功


2、后端日志 / 正式风格(完整清晰)
数据已成功获取、数据获取操作完成、列表数据已返回、数据更新操作已完成、记录已成功删除、请求已成功处理


3、列表类提示(带上下文)
用户列表获取成功、设备列表获取成功、订单列表获取成功、日志记录获取成功、配置数据获取成功


4、分页 / 带数量提示
列表数据获取成功,共${list.length}条、用户列表加载完成,共${list.length}条、数据获取成功,当前页${page}/共${totalPages}页、数据加载成功,本页${list.length}条,总数${total}条、查询成功,符合条件的数据共${total}条


5、操作提示 / 引导型
数据加载成功,可进行下一步操作、操作成功,数据已更新、删除成功,记录已移除、保存成功,请刷新查看、数据获取成功,请查看列表

Read more

深入理解前端防抖(Debounce)与节流(Throttle):原理、区别与实战示例

深入理解前端防抖(Debounce)与节流(Throttle):原理、区别与实战示例

深入理解前端防抖(Debounce)与节流(Throttle):原理、区别与实战示例 📌 引言 在前端开发中,我们经常需要处理高频事件(如输入框输入、滚动、窗口调整大小等)。如果不加限制,浏览器会频繁触发回调函数,导致性能问题,甚至页面卡顿。 防抖(Debounce) 和 节流(Throttle) 是两种优化方案,可以有效控制事件触发的频率,提高应用的性能和用户体验。 本篇文章将详细解析 防抖和节流的原理、适用场景及代码实现,帮助你更好地优化前端应用。 1. 什么是防抖(Debounce)? 📝 概念 防抖是一种在事件触发后延迟执行的技术,如果在延迟期间事件被再次触发,计时器会重置,重新计算延迟时间。 核心思想:短时间内多次触发,只执行最后一次。 📌 适用场景 * 搜索框输入(防止用户每次输入都发送请求) * 窗口调整大小(resize)(防止短时间内多次触发计算) * 表单输入验证(用户停止输入后再进行验证) ✅ 代码实现 functiondebounce(fn,

禹神:一小时快速上手Electron,前端Electron开发教程,笔记。一篇文章入门Electron

禹神:一小时快速上手Electron,前端Electron开发教程,笔记。一篇文章入门Electron

⚠️注意: 1️⃣原视频打包时,是使用electron-builder打包,使用electron-builder打包,打包时要访问github需要修仙术才能访问。 2️⃣本笔记,使用Electron Forge进行打包,使用Electron Forge不需要访问github更友好。在Electron 官网中也推荐使用这种方式 👉Electron 一、Electron是什么 简单的一句话,就是用html+css+js+nodejs+(Native Api)做兼容多个系统(Windows、Linux、Mac)的软件。 官网解释如下(有点像绕口令): Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux—

Lottie-Web 完整技术指南:让动画开发更简单高效

📚 目录 * 一、什么是 Lottie-Web * 二、为什么选择 Lottie-Web * 三、安装与引入 * 四、基础使用 * 五、API 详解 * 六、Vue 集成实战 * 七、高级特性 * 八、性能优化 * 九、常见问题与解决方案 * 十、最佳实践 * 十一、实际应用场景 * 十二、总结 一、什么是 Lottie-Web 1.1 Lottie 简介 Lottie 是 Airbnb 开源的一个动画库,它可以将 After Effects 动画导出为 JSON 格式,然后在 Web、iOS、Android

使用 Trae IDE 一键将 Figma 转为前端代码

在现代前端开发中,从设计稿到可用页面的交付往往需要大量重复劳动:切图、手写样式、布局调整……而借助 MCP Server - Figma AI Bridge,我们可以将 Figma 设计稿自动转换成整洁的 HTML/CSS/JS 代码,并立即生成可预览的网页。一键化、傻瓜式操作,让设计交付效率跃升。 本文测试使用的系统环境如下: * Trae IDE 版本:2.4.5 * macOS 版本:14.7 * Node.js 版本:24.6.0 * npx 版本:11.5.2 * Python 版本:3.13.3