后端开发教程 - Java、Spring Boot 实战 - msg200.com
Created for my blog article
https://dev.to/ksckaan1/creating-a-website-using-golang-and-sveltejs-together-55g8
Before lauch, run npm install from command line.
使用 Golang 和 Svelte.js 创建一个网站
尖端
你好，Gophers，
有时，我们需要在网站上使用动态页面或单页页面。在这种情况下，我们可以使用响应式 JavaScript 编程工具（或框架）等进行开发。
在这篇文章中，我将向您展示如何使用Svelte.js用 Go 编写的服务器。
对于这个例子，我更喜欢将gofiber包作为 webserver 包。
开始吧！
创建基本的 Gofiber Web 服务器
Go 端的项目结构如下。 首先，我们需要初始化文件。
go.mod
第二步，我们可以创建main.go这样的文件
package main
import (
"github.com/gofiber/fiber/v2"
)
func main() {
app := fiber.New()
app.Static("/public","./public")
app.Get("/", mainPage)
app.Listen(":3000")
}
func mainPage(c *fiber.Ctx) error {
//This function will be see different soon
return c.SendString("Hellö")
}
创建Svelte项目后，我们将更改 Go 端。
让我们在这个Go项目上创建简单的Svelte项目。
创建基本的 Svelte 项目
这边走，
npx degit sveltejs/template . --force
我们使用--force标志是因为这个项目文件夹不是空的。
后，
npm install
用于安装所有依赖项。
为了测试，我们可以运行npm run dev命令。
如果有效，我们可以进入下一步。
因此，我们已经用一些文件填充了*公共文件夹。
为了将Svelte与Go一起使用，我们必须更改 Svelte 端的一些设置。
步骤1
rollup.config.js
...
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
customElement: true,
}
}),
...
我们必须添加customElement: true,一行。
此添加有助于将元素从基础项目中分离出来。因此，我们可以像Go 模板
一样使用元素名称添加组件。<App/>
步骤2
我们可以在不重启 Go 应用的情况下使用 Svelte 的侧边修改。
为此，我们需要在rollup.config.js文件中注释一行。
// In dev mode, call `npm run start` once
// the bundle has been generated
//!production && serve()
!production && serve()必须加以评论。
步骤3
正在编辑./src/main.js文件。
该文件如下所示。
import App from './App.svelte';
我们只使用一行import。
在此代码中，我们将组件导入为 App，但其名称并不重要。首先，我们将从组件文件中指定组件标签。
步骤3
编辑./src/App.svelte
<script>
// It can be empty for this example
</script>
<svelte:options tag="my-app"/>
<p>My App</p>
<style>
/* It can be empty :) */
</style>
通过这个过程，我们可以使用App组件作为<my-app/>标签。
我们已经完成了Svelte.js。现在我们可以转到 Golang 端了。
首先，我们要定义模板渲染引擎。
像下面这样编辑main.go文件。
package main
import (
"github.com/gofiber/fiber/v2"
"github.com/gofiber/template/html"
)
func main() {
//template render engine
engine := html.New("./templates", ".html")
app := fiber.New(fiber.Config{
Views: engine, //set as render engine
})
app.Static("/public", "./public")
app.Get("/", mainPage)
app.Listen(":3000")
}
不要忘记运行
go mod tidy命令:)
现在我们要mainpage像下面这样改变功能。
func mainPage(c *fiber.Ctx) error {
return c.Render("mainpage", nil)
}
并像下面这样改变./templates/mainpage.html。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel='stylesheet' href='/public/global.css'>
<script defer src='/public/build/bundle.js'></script>
</head>
<body>
<my-app/>
</body>
</html>
我们可以将App组件称为my-app。
最后一步
方法1
我们可以使用这些命令运行应用程序。npm run build构建捆绑js文件。go run .启动 Web 服务器。
方法2
我们可以使用此命令运行应用程序。npm run dev & go run .
因此，如果我们重新加载网页，无需重启 Go 应用即可看到更改。但这仅适用于 Svelte 端的更改。
尖端
我们可以通过简单的方式运行服务器，在项目目录中 创建
makefile。 这样，makefile
运行：
npm run dev 和 go run 。
构建：
npm run build
> and from terminal, run `make run` or `make build` commands.
You can check out my GitHub Repo.
ksckaan1
/
go-and-svelte-template
Go and Svelte.js Starter Template