后端【免费下载链接】ihp The fastest way to build type safe web apps. IHP is a new batteries-included web framework optimized for longterm productivity and programmer happiness项目地址https://gitcode.com/gh_mirrors/ih/ihp点击查看免费下载Flash Messages闪现消息是 IHP 内置的一次性用户通知机制用于在控制器执行完某个动作如创建、更新、删除、权限校验失败之后向用户展示一条短暂的成功或错误提示。本文以 IHP 官方文档为骨架结合当前仓库中wai-flash-messages与ihp/IHP/FlashMessages.hs等源码实现系统讲解 Flash Messages 的设置、渲染、定制与底层原理。读完本文你将掌握setSuccessMessage/setErrorMessage的完整用法、renderFlashMessages的布局接入方式以及如何基于styledFlashMessage定制完全符合自己产品风格的提示外观。Flash Messages 是什么一次性通知的核心概念Flash messages 是在用户执行某个操作之后显示给他的简短通知典型场景如 Post created successfully操作成功或 You dont have permission to do that权限不足。它的核心特征是只出现一次消息被设置后会在下一次页面加载时显示页面渲染完成后自动清除不会在后续请求中反复出现。IHP 内置支持两种类型的 Flash MessagesSuccess messages成功消息——在 Bootstrap 下渲染为绿色 alertalert-success在 Tailwind 下渲染为绿色样式的 divError messages错误消息——在 Bootstrap 下渲染为红色 alertalert-danger在 Tailwind 下渲染为红色样式的 div。Flash Messages 存储在 session cookie 中。当你在控制器动作里设置一条 flash message 后它会穿过一次重定向redirect持久存在并在用户看到的下一页面上显示该页面渲染完毕后消息会被自动移除。如果你是用 IHP 生成的项目Flash Messages 已经开箱即用默认布局中已包含{renderFlashMessages}控制器 prelude 也导出了setSuccessMessage与setErrorMessage。从源码看IHP.ControllerPrelude通过module IHP.FlashMessages直接重导出了整套 Flash Messages API见 ihp/IHP/ControllerPrelude.hs因此所有控制器无需额外 import 即可使用。设置 Flash MessagessetSuccessMessage 与 setErrorMessage你可以在任何控制器动作中使用setSuccessMessage和setErrorMessage设置 Flash Messages。这两个函数的签名均为(?request :: Request) Text - IO ()见 ihp/IHP/FlashMessages.hs即接受任意Text值作为消息内容。成功消息使用setSuccessMessage通知用户某个操作已成功完成action CreatePostAction do let post newRecord Post post | buildPost | ifValid \case Left post - render NewView { .. } Right post - do post - post | createRecord setSuccessMessage Post created redirectTo PostsAction错误消息使用setErrorMessage通知用户出现了问题action CreateTeamAction do unless userOnPaidPlan do setErrorMessage This requires you to be on the paid plan redirectTo NewTeamAction ...消息内容可以是任意Text值setSuccessMessage Your changes have been saved setErrorMessage Something went wrong, please try again底层实现消息如何写入 SessionsetSuccessMessage/setErrorMessage的实现在独立的wai-flash-messages包中wai-flash-messages/Network/Wai/Middleware/FlashMessages.hs。IHP 层只是将其绑定到当前请求的 session vault 上-- ihp/IHP/FlashMessages.hs setSuccessMessage :: (?request :: Request) Text - IO () setSuccessMessage FlashMessages.setSuccessMessage sessionVaultKey ?request底层实现会把消息以Serialize.encode编码后写入 session 中两个固定的键flashSuccessMessage—— 成功消息键successMessageKey见 wai-flash-messages/Network/Wai/Middleware/FlashMessages.hsflashErrorMessage—— 错误消息键errorMessageKey。由于 IHP 的 session 整体存储在 cookie 中因此这两条消息会随 session cookie 一起穿过重定向到达下一个请求。补充 APIgetSuccessMessage 与 clearSuccessMessage除了设置消息IHP.FlashMessages还导出了两个辅助函数见 ihp/IHP/FlashMessages.hsgetSuccessMessage :: (?request :: Request) IO (Maybe Text)读取当前已设置的成功消息clearSuccessMessage :: (?request :: Request) IO ()清除当前成功消息底层实现即setSuccessMessage vaultKey request 向 session 中写入空字符串。这两个函数在需要先读后清或条件化提示的场景中很有用。在仓库的真实业务代码中也能看到错误消息的典型用法例如登录会话控制里对锁定用户与错误凭据的提示见 ihp/IHP/AuthSupport/Controller/Sessions.hs以及登录中间件在未登录访问受保护页面时的提示setSuccessMessage Please log in to access this page见 ihp/IHP/LoginSupport/Helper/Controller.hs。显示 Flash MessagesrenderFlashMessages 与默认布局Flash Messages 的渲染入口是renderFlashMessages它需要被放置在你的布局layout中。用 IHP 生成项目时这一行已经被自动写入Web/View/Layout.hs。默认布局生成的布局大致如下defaultLayout :: Html - Html defaultLayout inner [hsx| !DOCTYPE html html langen head/head body div classcontainer mt-4 {renderFlashMessages} {inner} /div /body /html |]renderFlashMessages会检查当前请求上是否存在任何 Flash Messages有则渲染为 HTML没有则渲染为空不产生任何输出。渲染后的 HTML使用默认的 Bootstrap CSS 框架时渲染结果如下。成功消息div classalert alert-successPost created/div错误消息div classalert alert-dangerSomething went wrong/div使用 Tailwind CSS 时渲染结果改用 Tailwind 工具类div classbg-green-100 border border-green-500 text-green-900 px-4 py-3 rounded relativePost created/div渲染链路源码剖析renderFlashMessages的完整实现见 ihp/IHP/FlashMessages.hs为renderFlashMessages :: (?request :: Request) Markup renderFlashMessages render theFlashMessages where render :: [FlashMessage] - Markup render fromCSSFramework #styledFlashMessages theFlashMessages :: (?request :: Request) [FlashMessage] theFlashMessages requestFlashMessages ?request这里的关键机制是CSSFramework 抽象。styledFlashMessages/styledFlashMessage是CSSFramework记录类型的两个字段见 ihp/IHP/View/Types.hs而fromCSSFramework会从当前请求的frameworkConfig中取出配置好的框架并调用对应渲染函数见 ihp/IHP/ViewSupport.hstheCSSFramework :: (?request :: Request) CSSFramework theCSSFramework ?request.frameworkConfig.cssFramework因此只要你切换了全局 CSS 框架Bootstrap / Tailwind / 自定义Flash Messages 的渲染风格会自动跟随切换。各框架的默认实现位置如下Bootstrapalert alert-success/alert alert-danger见 ihp/IHP/View/CSSFramework/Bootstrap.hsTailwindbg-green-100 .../bg-red-100 ...见 ihp/IHP/View/CSSFramework/Tailwind.hs无样式的基类实现styledFlashMessageDefault/styledFlashMessagesDefault逐条遍历消息并调用styledFlashMessage见 ihp/IHP/View/CSSFramework/Unstyled.hs。完整示例在 Posts 控制器中集成 Flash Messages下面是一个完整使用 Flash Messages 的控制器覆盖了创建、更新、删除三类动作module Web.Controller.Posts where import Web.Controller.Prelude instance Controller PostsController where action PostsAction do posts - query Post | fetch render IndexView { .. } action NewPostAction do let post newRecord render NewView { .. } action CreatePostAction do let post newRecord Post post | buildPost | ifValid \case Left post - render NewView { .. } Right post - do post - post | createRecord setSuccessMessage Post created redirectTo PostsAction action EditPostAction { postId } do post - fetch postId render EditView { .. } action UpdatePostAction { postId } do post - fetch postId post | buildPost | ifValid \case Left post - render EditView { .. } Right post - do post - post | updateRecord setSuccessMessage Post updated redirectTo EditPostAction { .. } action DeletePostAction { postId } do post - fetch postId deleteRecord post setSuccessMessage Post deleted redirectTo PostsAction buildPost post post | fill [title, body]需要注意ifValid的两个分支行为完全不同校验失败Left分支不设置任何 Flash Message直接重新渲染表单页面校验错误以内联inline方式显示在表单字段旁操作成功Right分支设置成功消息并重定向到目标页面。这种失败就地提示、成功闪现确认的模式是 IHP 表单校验与 Flash Messages 配合的推荐用法。定制 Flash Message 外观Flash Messages 的默认样式并不强制你可以从 CSS、自定义 HTML 结构、直接访问消息列表三个层面进行定制。CSS 样式定制默认情况下 Flash Messages 使用 Bootstrap 的 alert 组件样式可以通过追加 CSS 调整外观例如用左边框强调色块/* Make success alerts stand out more */ .alert-success { border-left: 4px solid #198754; } /* Make error alerts stand out more */ .alert-danger { border-left: 4px solid #dc3545; }自定义 HTML 结构覆盖 styledFlashMessage如果你想完全掌控 Flash Message 的 HTML 结构可以定制 CSS 框架的styledFlashMessage函数。在Web/View/Layout.hs或Config/Config.hs中基于默认框架派生一个自定义框架import IHP.View.CSSFramework.Bootstrap (bootstrap) import Network.Wai.Middleware.FlashMessages (FlashMessage (..)) instance InitControllerContext WebApplication where initContext do setLayout defaultLayout initAutoRefresh customFramework :: CSSFramework customFramework bootstrap { styledFlashMessage weightedFlashMessage } where weightedFlashMessage _ (SuccessFlashMessage message) [hsx| div classalert alert-success d-flex align-items-center rolealert strongSuccess:/strongnbsp;{message} /div |] weightedFlashMessage _ (ErrorFlashMessage message) [hsx| div classalert alert-danger d-flex align-items-center rolealert strongError:/strongnbsp;{message} /div |]然后在Config/Config.hs中把自定义框架注册为全局选项config :: ConfigBuilder config do option $ AppHostname localhost option customFramework从实现层面看这依赖 IHP 的晚绑定late-binding设计styledFlashMessage :: CSSFramework - FlashMessage - Html的第一个参数是框架自身因此自定义函数内部仍可调用框架的其他渲染函数而option会把自定义框架写入配置的TMap。buildFrameworkConfig通过cssFramework - findOption CSSFramework读取它见 ihp/IHP/FrameworkConfig.hs默认情况下ihpDefaultConfig已注册option bootstrap见 ihp/IHP/FrameworkConfig.hs所以你的option customFramework会覆盖默认值。option的语义是同类型只写入第一个且ihpDefaultConfig在用户配置之后执行见 ihp/IHP/FrameworkConfig.hs因此自定义框架能够生效。直接访问消息列表theFlashMessages如果完全不希望借助 CSS 框架渲染可以在视图中通过theFlashMessages直接拿到原始消息列表自行决定渲染方式myLayout :: Html - Html myLayout inner [hsx| html body {forEach theFlashMessages renderMessage} {inner} /body /html |] where renderMessage (SuccessFlashMessage message) [hsx| div classmy-custom-success{message}/div |] renderMessage (ErrorFlashMessage message) [hsx| div classmy-custom-error{message}/div |]此时需要手动导入FlashMessage类型以匹配构造器import Network.Wai.Middleware.FlashMessages (FlashMessage (..))FlashMessage是一个带两个构造器的数据类型见 wai-flash-messages/Network/Wai/Middleware/FlashMessages.hsdata FlashMessage SuccessFlashMessage !Text | ErrorFlashMessage !TextFlash Messages 与重定向跨请求的一次性机制Flash Messages 被设计为可以跨重定向工作。典型流程是在控制器动作中设置一条 Flash Message将用户重定向到另一个页面Flash Message 在该页面显示页面渲染完成后消息被自动清除。action DeletePostAction { postId } do post - fetch postId deleteRecord post setSuccessMessage Post deleted -- Step 1: Set the message redirectTo PostsAction -- Step 2: Redirect -- Step 3: PostsAction renders the page, and Post deleted is shown -- Step 4: On the next request, the message is gone底层机制consumeFlashMessagesMiddleware这套流程之所以成立是因为 Flash Messages 存储在 session cookie 中setSuccessMessage把消息写进 session浏览器跟随重定向时消息仍在 session 里IHP 的中间件在同一个请求内完成读取 → 渲染 → 清除三步。具体实现是consumeFlashMessagesMiddleware见 wai-flash-messages/Network/Wai/Middleware/FlashMessages.hs。它的工作过程为从request.vault中取出 sessionSessionVaultKey分别lookup成功消息键与错误消息键若两者都为Nothing直接跳过不做解码、清除、vault 写入保持零开销否则对每个存在的消息用Serialize.decode解码并立即向 session 写入空串清除该消息insert name 把解码后的消息组装成[FlashMessage]通过Maybe.catMaybes合并两个Maybe插入到新请求的flashVaultKeyvault 中以携带消息的新请求继续执行后续渲染。在 IHP 中这个中间件由renderHtmlView在渲染每个 HTML 页面时调用见 ihp/IHP/Controller/Render.hsrenderHtmlView currentRequest view do let next request respond do let ?request request let ?respond respond (renderHtml view) respondHtml consumeFlashMessagesMiddleware next currentRequest ?respond于是下一个页面渲染就是消息被消费并清除的时机。直接渲染视图时的行为如果在设置 Flash Message 后没有重定向而是直接渲染视图消息不会出现在当前页面而会出现在下一次页面加载时——这通常不是你想要的。因此推荐的做法是设置 Flash Message 后总是配合redirectTo使用让消息与重定向目标页面绑定。关于 Session 存储的边界由于消息与整个 session 一起存放在 cookie 中它的持久周期受 session cookie 配置约束。IHP 默认的 session cookie 配置为defaultIHPSessionCookie见 ihp/IHP/FrameworkConfig.hsPath /、最大存活约 30 天、SameSite Lax、HttpOnly True且在 HTTPS 下自动启用Secure标记。Flash Message 的一次性语义由consumeFlashMessagesMiddleware保证与 cookie 本身的过期时间无关。最佳实践小结结合官方文档与仓库源码可以总结出几条实用的经验设置后立即重定向setSuccessMessage/setErrorMessage与redirectTo成对出现保证消息在目标页面展示一次校验失败不设消息在ifValid的Left分支重新渲染表单让校验错误内联展示避免闪现消息与表单错误混淆消息内容保持简短消息会被序列化进 session cookie长文本会增大 cookie 体积并随每个请求往返传输因此应使用简洁的提示文案善用 CSSFramework 抽象切换框架时 Flash Message 样式自动跟随需要品牌化时基于bootstrap/tailwind记录派生并覆盖styledFlashMessage而不是手工改渲染循环完全自由时使用theFlashMessages配合FlashMessage (..)的两个构造器即可在任意视图中自定义消息 HTML同时保留消息设置 API 不变。至此从消息的设置、跨重定向传递、页面渲染到外观定制与底层中间件原理IHP Flash Messages 的完整链路已经打通。你可以在自己的控制器与布局中直接复用上述代码模式。赞分享后端【免费下载链接】ihp The fastest way to build type safe web apps. IHP is a new batteries-included web framework optimized for longterm productivity and programmer happiness项目地址https://gitcode.com/gh_mirrors/ih/ihp点击查看免费下载相关推荐Litestar Flash Messages 插件实战基于会话的一次性消息与模板引擎集成Litestar Flash Messages 插件实战基于会话的一次性消息与模板引擎集成 本文围绕 Litestar 的 Flash Messages闪光后端Web框架OpenStock 免费股票行情工具三步盯盘、价格提醒与自选股管理指南OpenStock 免费股票行情工具三步盯盘、价格提醒与自选股管理指南 OpenStock 是一款免费开源的股票行情工具帮你盯盘、设价格提醒、管理自选股注金融科技前端后端AI 应用Epic Stack 中的 Toast 通知机制基于 Session Flash 数据的全链路实现指南Epic Stack 中的 Toast 通知机制基于 Session Flash 数据的全链路实现指南 导读 本文深入讲解 Epic StackReact后端前端开发工具认证鉴权上一篇presenterm 配置文件完全指南defaults、bindings、snippet 与 export 全量设置详解下一篇YOLOv8-Face 人脸检测5 分钟框出第一张脸创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考