首页 > Golang > Go问答

使用 Rest API 将 Go 函数绑定到 Web GUI 是否可行？

来源：stackoverflow

时间：2024-02-17 22:06:23 499浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习Golang相关编程知识。下面本篇文章就来带大家聊聊《使用 Rest API 将 Go 函数绑定到 Web GUI 是否可行？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

问题内容

我正在尝试制作一个具有前端和后端的 web 应用程序，其中 go 应用程序是后端，（html 与 javascript）网页是前端。我想做的一件（看似）简单的事情，就是按下 webgui 中的一个按钮，在 go-app 中获取此按钮并单击，然后用它做一些事情。我想做的第二件事是根据我在 go-app 中所做的事情更新网页。

为了进行设置，我在网上搜索并遵循了一些有趣的教程，使用（或多或少）相同的方法：go 中的 restful api，使用 json 格式写入和读取数据。虽然我必须说这很有趣，但我并没有成功地将它用于我的目的。（或者也许我只是不够聪明，无法将其用于我的目的；））。无论如何，我被困住了。

到目前为止我所拥有的是（go）：

package main

import (
    "fmt"
    "net/http"

    "github.com/gorilla/mux"
)

type person_t struct {
    name string `json:"name"`
    age  int    `json:"age"`
}

var persons []person_t

// !!! i need to do something here, but don't know what !!!
func testfunc(w http.responsewriter, r *http.request) {

    err := r.parseform()

    if err != nil {
        fmt.println(fmt.errorf("error: %v", err))
        w.writeheader(http.statusinternalservererror)
        return
    }

    http.redirect(w, r, "/assets/", http.statusfound)
}

// router functionality
func newrouter() *mux.router {
    r := mux.newrouter()

    staticfiledirectory := http.dir("./assets/")
    staticfilehandler := http.stripprefix("/assets/", http.fileserver(staticfiledirectory))
    r.pathprefix("/assets/").handler(staticfilehandler).methods("get")

    r.handlefunc("/test", testfunc).methods("post")

    return r
}

func webserver() {
    r := newrouter()
    http.listenandserve(":8080", r)
}

func main() {

    /* some data */
    persons = append(persons, person_t{name: "piet", age: 22})
    persons = append(persons, person_t{name: "kees", age: 23})
    persons = append(persons, person_t{name: "klaas", age: 24})

    webserver()
}

和 html：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test app</title>
</head>

<body>
  <h1>test app</h1>
  <br/>
  <script>
    fetch("/test")
      .then(response => response.json())
      .then(sgList => {
        //Once we fetch the list, we iterate over it
        sgList.forEach(person => {
          //Create an input type dynamically.
          var btn = document.createbutton("BUTTON");
          btn.innerHTML = person.name;
          document.body.appendChild(btn);
        })
      })
  </script>
</body>
</html>

我的问题：我可以在 html 网页上创建尽可能多的可用数据按钮吗？我可以让这些按钮与我的 go-app 交互吗？

如果不可能实现我想要的，有什么替代方案？（如果可能的话，我想坚持使用 go）。

正确答案

您的 go 似乎存在一些问题，您需要修复这些问题才能取回数据。

您的 person_t 类属性（姓名、年龄）需要以大写字母开头才能正确编组。在 go 中，任何小写变量都不会导出，因此 json 编组包需要能够看到它才能读取接口。
您需要将数据编组并将其写入响应编写器，以便前端看到它

此版本应返回可用于与前端组件集成的 json。

package main

import (
  "encoding/json"
  "fmt"
  "net/http"

  "github.com/gorilla/mux"
)

type person_t struct {
  name string `json:"name"`
  age  int    `json:"age"`
}

var persons []person_t

// !!! i need to do something here, but don't know what !!!
func testfunc(w http.responsewriter, r *http.request) {

  err := r.parseform()

  if err != nil {
    fmt.println(fmt.errorf("error: %v", err))
    w.writeheader(http.statusinternalservererror)
    return
  }

  jsdata, err := json.marshal(persons)
  if err != nil {
    fmt.println(fmt.errorf("error: %v", err))
    w.writeheader(http.statusinternalservererror)
    return
  }
  w.header().add("content-type", "application/json")
  w.write(jsdata)
}

// router functionality
func newrouter() *mux.router {
  r := mux.newrouter()

  staticfiledirectory := http.dir("./assets/")
  staticfilehandler := http.stripprefix("/assets/", http.fileserver(staticfiledirectory))
  r.pathprefix("/assets/").handler(staticfilehandler).methods("get")

  r.handlefunc("/test", testfunc).methods("post")

  return r
}

func webserver() {
  r := newrouter()
  http.listenandserve(":8080", r)
}

func main() {

  /* some data */
  persons = []person_t{
    {name: "piet", age: 22},
    {name: "kees", age: 23},
    {name: "klaas", age: 24},
  }

  webserver()
}

请注意，您可能还需要在前端使用更强大的东西来解析响应并为每个表单动态构建表单。我建议使用一个简单的 react application 来调用构造函数中的 /test 端点，并迭代渲染中的 json 响应，即

getPersons() {
    fetch("/test")
      .then(response => response.json())
      .then(sgList => {
        this.state.persons = sgList
      })
  }

  render() {
    return (
      {
        this.state.persons || null ? this.state.persons.map((person => (
          <form onSubmit={this.handleSubmit}>
            <label>
              Name: {person.name}
              <input type="text" value={person.age} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        ))) : null
      }
    );
  }

本篇关于《使用 Rest API 将 Go 函数绑定到 Web GUI 是否可行？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于Golang的相关知识，请关注golang学习网公众号！

声明：本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除