youbbs avatar

用Golang写前端和后端

🕦 by youbbs

瞎逛发现一个用go来写前后端的工具,前端的代码和效果都是自动生成的,只需敲 go 代码。

对前端不熟悉的同学是个福利,效果如下图

用Golang写前端和后端

简单的 hello

代码实现

Go: hello
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package main

import (
	"github.com/maxence-charriere/go-app/v8/pkg/app"
	"log"
	"net/http"
)

type hello struct {
	app.Compo

	name string
}

func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Body(
			app.Text("Hello, "),
			app.If(h.name != "",
				app.Text(h.name),
			).Else(
				app.Text("World!"),
			),
		),
		app.P().Body(
			app.Input().
				Type("text").
				Value(h.name).
				Placeholder("What is your name?").
				AutoFocus(true).
				OnChange(h.ValueTo(&h.name)),
		),
	)
}

func main() {
	// Components routing:
	app.Route("/", &hello{})
	app.Route("/hello", &hello{})
	app.RunWhenOnBrowser()

	// HTTP routing:
	http.Handle("/", &app.Handler{
		Name:        "Hello",
		Description: "An Hello World! example",
	})

	if err := http.ListenAndServe(":8000", nil); err != nil {
		log.Fatal(err)
	}
}

编译

Bash: 编译
1
2
GOARCH=wasm GOOS=js go build -o web/app.wasm
go build

下面是文件结构:

plaintext: 文件结构
1
2
3
4
5
6
7
.
├── go-dev
├── go.mod
├── go.sum
├── main.go
└── web
    └── app.wasm

repo

https://github.com/maxence-charriere/go-app

💘 相关文章

写一条评论

Based on Golang + fastHTTP + sdb | go1.16.3 Processed in 1ms