用Golang写前端和后端

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

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

简单的 hello

代码实现

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)
	}
}

编译

GOARCH=wasm GOOS=js go build -o web/app.wasm
go build

下面是文件结构：

.
├── go-dev
├── go.mod
├── go.sum
├── main.go
└── web
    └── app.wasm

repo

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

Nearby

上一篇 › 用Golang快速、安全、可靠的做系统备份，只需几分钟即可完成设置
下一篇 › Golang 针织魔法师吉祥物

Discussion (2)

ego008 2021-07-03 15:33

这个也不错 https://github.com/maragudk/gomponents

package main

import (
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return c.HTML5(c.HTML5Props{
		Title:    title,
		Language: "en",
		Head: []g.Node{
			StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
		},
		Body: []g.Node{
			Navbar(currentPath),
			H1(g.Text(title)),
			P(g.Textf("Welcome to the page at %v.", currentPath)),
		},
	})
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

func NavbarLink(href, name, currentPath string) g.Node {
	return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))
}

其它相关项目

https://github.com/golang/go/wiki/WebAssembly
https://github.com/gopherjs/gopherjs 可配合WebAssembly使用
https://github.com/icza/gowut
https://github.com/maxence-charriere/go-app 基于WebAssembly
https://github.com/vugu/vugu 基于WebAssembly

RafaelShin 2021-07-03 21:10

百度开源的这个 https://gitee.com/baidu/amis 也不错

用Golang写前端和后端

简单的 hello

编译

repo

See Also

Nearby

Discussion (2)

其它相关项目

Top posts

youbbsyouBBS v1.04

YB站长不支持管理员删帖？

YB站长YouBBS 怎么删帖

youbbs又更新了

YB站长反馈一个youbbs2.1非常重要的bug！

youBBS

Topics