使用 Bud and Go 构建全栈应用程序

解飞语

2023-12-01

全栈框架有多种形状和大小，但它们通常有两种通用模式。第一个模型包括像 Ruby on Rails 和 Laravel 这样的框架，它们以后端为中心，具有帮助您在同一个项目中构建前端的功能，以及易于使用的约定和模板。然后是第二个模型，包括 Next.js 、 Nuxt.js 和 SvelteKit ，它们更加以前端为中心，但允许您在同一项目中创建无服务器功能作为后端。

新的 Go 框架 Bud 与这些全栈框架的不同之处在于，它的框架开始时非常简约，但允许前端和后端代码根据用户的需求进行扩展，而不是使用可能不必要的文件和配置展开复杂的 CLI。 Bud 是一个让事情变得简单但可以在需要时扩展的框架。

Bud 带有用于使用 Svelte 进行前端开发的内置功能，并使用 Go 作为后端，将更快的工具集用于 Web 堆栈的各自部分。让我们使用 Bud 进行测试，并创建一个调用某些后端端点的页面。

要在本文中继续前进：

设置 Bud 框架
芽文件夹结构
创建根页面
将数据传送到您的视图
Bud 与其他框架的比较
- Ruby on Rails 和 Laravel
- Next.js、Nuxt.js 和 SvelteKit

设置 Bud 框架

先决条件：

安装在终端环境中的 curl
去 v1.6+
节点.js

要安装 Bud，请运行以下命令： curl -sf https://raw.githubusercontent.com/livebud/bud/main/install.sh | sh

使用命令确认一切顺利 bud -h. 然后，创建一个新的应用程序 bud create first-app.

这将为您提供一个模块名称。 Go 中模块名称的标准是您将其推送到的存储库的名称，例如 github.com/username/repo-name. 让我们将目录更改为我们的新应用文件夹， cd first-app.

跑 npm install安装所有依赖项。

要运行开发服务器，请运行命令 bud run，并且服务器应该允许您的网络应用程序在 localhost:3000.

芽文件夹结构

检查项目时，您将看到以下结构：

/first-app
├─ /bud 
├─ /node_modules 
├─ .gitignore
├─ go.mod
├─ go.sum
├─ package.json
└─ package.lock.json

每当你跑 bud run，框架会查看您的代码并在此文件夹中生成必要的 Go 应用程序，您无需触摸此文件夹中的文件。当您准备好部署应用程序时，运行 bud build，这会将所有内容捆绑到一个二进制文件中 /bud/app文件夹。

可以添加以下目录并将被框架识别：

controller：此文件夹将包含代表应用程序后端路由的控制器文件。每个文件都可以通过文件名为端点提供标准 CRUD 路由
view：此文件夹可以包含 Svelte 文件，并将根据文件名自动为它们生成路由
public：托管静态资产，例如图像和 CSS 文件
internal：此目录将被忽略，因此它是托管不应被视为后端或前端路由的特定于应用程序的代码的好地方

在 Bud 中创建根页面

尽管我们的页面是使用 Svelte 定义的，但我们应该始终为页面提供相应的控制器。我们先创建一个 controller文件夹，并在该文件夹中创建一个名为 controller.go. 这将处理端点 /.

对于所有其他控制器，您将创建一个文件夹，其中包含一个类似命名的 Go 文件。

例如，端点 /posts将会 /controller/posts/posts.go，等等。

在每个文件中，我们应该声明一个 Controllerstruct，然后定义将此结构作为接收者的方法。这是什么 controller.go我们的根路由看起来像：

package Controller
// Controller Struct to house all Action methods
type Controller struct {}
// Index shows a list of users
// Will automatically render view/index.svelte
// GET /users
func (c *Controller) Index() {}

方法触发器的名称是您对 RESTful 约定的期望，无需我们输入所有代码。在这里， index方法将从名为的文件返回视图 index.svelte在我们的 view文件夹。

视图本质上是通过基于文件的路由完成的，如果您曾经使用过 Next、Nuxt 或 SvelteKit，您会很熟悉。因为 Bud 使用 Svelte， index.svelte应该代表您的主页。所以，创建一个 view项目中的文件夹，并在其中创建 index.svelte使用以下代码。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

<div>
    <h1>Here is the Main page of your app</h1>
    <section>
        <button on:click={handleClick}>Click This</button>
    </section>
</div>
<script>
    const handleClick = (event) => {
        alert("You Clicked the button")
    }
</script>
<style>
    h1, section {
        text-align: center;
    }
    button {
        border: none;
        padding: 10px;
        font-size: 1em;
        background-color: brown;
        color: white;
        border-radius: 40px;
    }
</style>

现在，如果我们运行我们的 Bud 服务器并前往 localhost:3000，我们将看到我们的页面在运行。现在，Bud 可以在任何控制器中处理以下操作：

动作方法	HTTP方法	网址	呈现的模板
index	得到	/端点	/view/endpoint/index.svelte
show	得到	/端点/：id	/view/endpoint/show.svelte
new	得到	/端点/新	/view/endpoint/new.svelte
create	邮政	/端点	没有模板
edit	得到	/endpoint/:id/编辑	/view/endpoint/edit.svelte
update	放	/端点/：id	没有模板
delete	删除	/端点/：id	没有模板

将数据传送到您的视图

呈现视图的方法的返回值将作为道具传递给 Svelte 模板：

如果操作返回单个结构，例如 Dogstruct，它作为一个名为的 prop 传递 dog
如果动作返回一个数组 Dog结构，道具被称为 dogs
如果动作返回命名的返回值，那么每个返回值都是匹配名称的道具

让我们发送一些道具到我们的根视图并更新 controller/controller.go:

package controller
// Controller Struct to house all Action methods
type Controller struct {}
// Define a Struct of data to send to template
type Alex struct {
    Name string
    Age int
}
// Index shows a list of users
// Will automatically render view/index.svelte
// Define our struct as the return value and return it
// GET /users
func (c *Controller) Index() Alex {
    return Alex{"Alex Merced", 37}
}

现在，让我们更新视图以引入道具并在单击按钮时使用它。更新 view/index.svelte因此：

<div>
    <h1>Here is the Main page of your app</h1>
    <section>
        <button on:click={handleClick}>Click This</button>
    </section>
</div>
<script>
    export let alex;
    const handleClick = (event) => {
        alert(`My name is ${alex.Name} and age is ${alex.Age}`)
    }
</script>
<style>
    h1, section {
        text-align: center;
    }
    button {
        border: none;
        padding: 10px;
        font-size: 1em;
        background-color: brown;
        color: white;
        border-radius: 40px;
    }
</style>

点击按钮。请注意，我们的 Go 方法返回的数据正在我们的 Svelte 模板中使用。整洁的！

李跳跳广告屏蔽App，支持跳过各种APP的开屏广告，无需联网和付费直接用！

Bud 与其他框架的比较

Bud 还没有很多功能，但考虑到它还处于早期阶段，它令人印象深刻。让我们将 Bud 与我们希望在未来看到 Bud 的其他框架和功能进行比较。

Bud vs. Ruby on Rails 和 Laravel

这些框架可以轻松添加 Web 套接字、通道等功能。 Bud 保留了一些未来的目录名称，暗示最终包含这些功能。

Bud 与 Next.js、Nuxt.js 和 SvelteKit

虽然允许某种程度的服务器端渲染，但 Next、Nuxt 和 SvelteKit 仍然分别严重依赖于 React、Vue 和 Svelte 的客户端特性。这使得在其中使用像 Redux 这样的状态管理解决方案成为可能。同时，Bud 使用更传统的方法让后端管理状态，并且还没有明确的路径来实现类似的状态管理模式。在它对 RESTful 约定和 Web 标准的依赖方面，它可能更类似于 Remix.js。

结论

Bud 采用了我们在 Next 和 Ruby on Rails 等框架中看到的许多约定，例如基于文件的路由和 RESTful 控制器方法，并将它们捆绑到一个框架中。虽然 Bud 仍在努力构建更多功能和特性，以成为一个强大的框架，并为 Laravel 等所有场景提供解决方案，但 Bud 提供了一个简单的基于约定的工作流程，让使用 Go 和 Svelte 并获得好处变得轻而易举。

LogRocket ：全面了解您的网络和移动应用程序

LogRocket 是一个前端应用程序监控解决方案，可让您重现问题，就好像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，或要求用户提供屏幕截图和日志转储，LogRocket 可让您重播会话以快速了解问题所在。无论框架如何，它都可以完美地与任何应用程序配合使用，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的附加上下文的插件。

除了记录 Redux 操作和状态之外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据和自定义日志。它还检测 DOM 以记录页面上的 HTML 和 CSS，即使是最复杂的单页和移动应用程序也能重新创建像素完美的视频。