如何通过Buffalo框架完成项目开发前端交互-Golang-PHP中文网

buffalo框架前端交互逻辑不由其处理，需自行编写javascript或使用前端框架；js代码应放在assets/js/下（如application.js），并通过templates中script标签引入，配合webpack监听编译，且须通过plush模板安全注入数据、传递csrf令牌以调用api。

如何通过buffalo框架完成项目开发前端交互

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></template> 标签

Plush 模板里怎么传数据给 JS

Plush 渲染时可把 Go 数据注入到 HTML 的 <script></script> 块中，供后续 JS 使用。例如在 templates/home/index.plush.html 里：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

<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 就是创建用户接口。

请求头必须带 X-CSRF-Token: <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></script> 注入