youbbs
youbbs
4109 2 0

用Golang写前端和后端

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

0

See Also

Nearby

Discussion (2)

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

其它相关项目

0
RafaelShin
RafaelShin 2021-07-03 21:10

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

0

Top posts

youBBS
Login Topics

youBBS

Topics

YB站长 问题 youbbs 云商店 SAE 互联网 bug 安全 php mysql seo 微博 程序员 云 趣图 模板 BAE 建议 GAE 阿里云 又拍云 创业 问答 趣事 盘点 优惠码 AppFog 前端 二次开发 saepy log python openshift 网络支付 英文站 VPS Octopress 七牛 ijd8 云盘 云服务 Nginx 数据库 在线工具 Google Golang lua youdb mithril ssl xmr 笔记 AI

工具