Buffalo框架前端交互逻辑不由其处理，需自行编写JavaScript或使用前端框架；JS代码应放在assets/js/下（如application.js），并通过templates中script标签引入，配合Webpack监听编译，且须通过Plush模板安全注入数据、传递CSRF令牌以调用API。
Buffalo 框架本身不处理前端交互逻辑，它只负责生成 HTML 模板、提供 API 接口、托管静态资源；真正的交互（点击、表单提交、异步加载）必须由你写的 JavaScript 或前端框架完成。
buffalo dev 启动后，前端代码写在哪
Buffalo 默认把前端资产放在 assets/ 目录下，结构是标准的 js/、css/、images/。你写的交互 JS 代码应放 assets/js/application.js（或按需新建文件），然后在 templates/application.plush.html 中通过 <script src="/assets/js/application.js"></script> 引入。
- 别直接改
public/assets/下的文件——那是构建产物，每次buffalo dev或buffalo build都会覆盖 - Webpack 默认监听
assets/js/变更并自动重编译，但需确保npm run dev（或yarn dev）已随buffalo dev一起运行；否则 JS 修改不会生效 - 若用 ES6+ 语法或 React/Vue，需在
webpack.config.js中配好 loader 和 alias，Buffalo 不自动支持 JSX 或<template>标签
Plush 模板里怎么传数据给 JS
Plush 渲染时可把 Go 数据注入到 HTML 的 <script> 块中，供后续 JS 使用。例如在 templates/home/index.plush.html 里：
<script> const currentUser = <%= h.JSON(current_user) %>; const csrfToken = "<%= csrf_token %>"; </script>
-
h.JSON()是 Buffalo 提供的安全 JSON 序列化函数，自动转义、防 XSS；别用json.Marshal()直接拼字符串 -
csrf_token是 Buffalo 自动注入的变量（需启用csrf.New()中间件），用于保护 POST 表单或 AJAX 请求 - 避免在模板里写大量 JS 逻辑——只传初始数据，交互行为仍应写在独立 JS 文件中
如何从 JS 调用 Buffalo 的 API 接口
Buffalo 的 actions/ 目录下定义的 handler，只要没被中间件拦截，就是标准 HTTP 接口。比如你用 buffalo g resource users 生成了 CRUD，那 POST /users 就是创建用户接口。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 请求头必须带
X-CSRF-Token: <token>（从上面模板注入的csrfToken取值），否则 403 - Body 用
application/json，后端默认用c.Bind()解析为 struct；不要传 FormData（除非你显式用c.MultipartForm()） - 错误响应格式不是统一 JSON：默认是 HTML 错误页；若要纯 API 行为，需在 action 中显式调用
c.JSON(422, map[string]string{"email": "invalid"}) - 前端 fetch 示例：
fetch("/api/users", { method: "POST", headers: { "X-CSRF-Token": csrfToken, "Content-Type": "application/json" }, body: JSON.stringify({name: "Alice"}) })
为什么 JS 改了但页面没反应
常见原因不是代码写错，而是构建流程卡在中间环节：
-
buffalo dev默认只监听 Go 和 Plush 文件变更；JS 修改需靠 Webpack 独立监听——确认终端里有没有[webpack-dev-server]日志行，没有说明npm run dev没启动 - 浏览器缓存了旧 JS：检查 Network 面板里
/assets/js/application.js的响应头是否有Cache-Control: no-cache；没有的话，在app.go中加app.Use(plugins.Static())前插入app.Use(func(next buffalo.Handler) buffalo.Handler { return func(c buffalo.Context) error { c.Response().Header().Set("Cache-Control", "no-cache") return next(c) } }) - JS 报错导致后续逻辑不执行：打开浏览器 Console，看是否有
ReferenceError或currentUser is not defined—— 检查模板里是否漏传变量，或 JS 执行时机早于<script>注入
最易被忽略的是：Buffalo 的热重载只管服务重启，不管前端资源实时更新。JS 交互能否跑通，80% 取决于你是否让 Webpack 和 Buffalo 两个进程同时活着且通信正常。
