go语言编写网页代码 golang web编程

81.go + vue实现web应用程序

前端框架越来越丰富，前后端分离已经是大多数软件团队采取的模式了。vue使用的场景也越来越多。

go本来使用template模板来进行前端的表现，现在可以用vue来分担很大一部分工作了。

通常直接使用go语言写后端，然后使用静态模板加载渲染前端，前端获取后端提供的数据是使用{{ }}符号，2个套在一起的花括号。这个也是vue使用的数据表现方式。

如果go+vue来协同工作的话，需要对vue进行一点设置。比如把{{ }}的方式改为[[ ]]的方式。

首先我们要知道，vue的使用，需要在页面中加载vue.js或vue.min.js

纯静态网页使用vue是这样的（给个html例子）

然后我们实现一个go的简单web服务和模板页面

这个go服务器通过端口 1989 展示服务器页面，提供了一个静态文件路径 htmlpage，我们把vue.js和index.html文件都放置在htmlpage路径里。

go服务器还用模板给前台页面提供了一个News结构的数据，数据包括：Title,Content,Author的值。

在index.html页面中，加载vue.js的时候需要带上静态路径 htmlpage

在 new 一个 vue 变量的时候，必须有一句来设置包裹数据的符号，我们这里设置这个符号为[[ ]]

同时，所有需要由 vue 渲染的数据，都写成类似这样的样子

在 go + vue 方式下的完整模板文件 index.html

此页面中{{ }}包裹的数据是由go从后端提供的数据（ 例如：{{.Title}}），而[[ ]]包裹的数据，是vue渲染的数据。

只是把 Vue里的数据，改为由go后端提供即可。

好吧，作者已经在向月亮示爱了。呵呵 _

运行一下程序，看修改模板后的效果。

相关问答

Q1: golang适合做web开发吗

适合。框架足够成熟了 A Survey of 5 Go Web Frameworks

小型项目你甚至不用框架，用net/http http - The Go Programming Language

常用库也成熟了 Top - Go Search

golang的web后端即使不concurrent也比php，ruby，python快很多很多

golang里用concurrent真的非常方便，非常非常快，超大web项目golang scale成本低

如果你想，golang的部署可以比php更方便，使用go get和http.ServeAndListen()可以不用nginx和apache

对于文件改动重新编译其实并不是大问题，看pilu/fresh · GitHub，其实你自己写shell脚本（也可以直接用go写，因为它本身就是系统语言）监控文件系统改动然后自动重新build，即使是C/C++的项目这也不是大问题，人们不用C/C++写web是因为它们不是写web app的最佳选择

golang写的代码编译通过后，要比scripting language鲁棒，因为go compiler强制一些最佳实践

Q2: GO语言（十三）：使用 Go 和 Gin 开发 RESTful API（下）

当客户端在 发出POST请求时/albums，您希望将请求正文中描述的专辑添加到现有专辑数据中。

为此，您将编写以下内容：

1、编写代码

a.添加代码以将专辑数据添加到专辑列表。

在此代码中：

1）用于Context.BindJSON 将请求正文绑定到newAlbum。

2） album将从 JSON 初始化的结构附加到albums 切片。

3）向响应添加201状态代码，以及表示您添加的专辑的 JSON。

b.更改您的main函数，使其包含该router.POST函数，如下所示。

在此代码中：

1）将路径中的POST方法与 /albumspostAlbums函数相关联。

使用 Gin，您可以将处理程序与 HTTP 方法和路径组合相关联。这样，您可以根据客户端使用的方法将发送到单个路径的请求单独路由。

a.如果服务器从上一节开始仍在运行，请停止它。

b.从包含 main.go 的目录中的命令行，运行代码。

c.从不同的命令行窗口，用于curl向正在运行的 Web 服务发出请求。

该命令应显示添加专辑的标题和 JSON。

d.与上一节一样，使用curl检索完整的专辑列表，您可以使用它来确认添加了新专辑。

该命令应显示专辑列表。

当客户端向 发出请求时GET /albums/[id]，您希望返回 ID 与id路径参数匹配的专辑。

为此，您将：

a.在您在上一节中添加的函数下方postAlbums，粘贴以下代码以检索特定专辑。

此getAlbumByID函数将提取请求路径中的 ID，然后找到匹配的专辑。

在此代码中：

（1）Context.Param用于从 URL 中检索id路径参数。当您将此处理程序映射到路径时，您将在路径中包含参数的占位符。

（2）循环album切片中的结构，寻找其ID 字段值与id参数值匹配的结构。如果找到，则将该album结构序列化为 JSON，并将其作为带有200 OK HTTP 代码的响应返回。

如上所述，实际使用中的服务可能会使用数据库查询来执行此查找。

（3）如果找不到专辑，则返回 HTTP 404错误。

b.最后，更改您的main，使其包含对router.GET的新调用，路径现在为/albums/:id ，如以下示例所示。

在此代码中：

（1）将/albums/:id路径与getAlbumByID功能相关联。在 Gin 中，路径中项目前面的冒号表示该项目是路径参数。

a.如果服务器从上一节开始仍在运行，请停止它。

b.在包含 main.go 的目录中的命令行中，运行代码以启动服务器。

c.从不同的命令行窗口，用于curl向正在运行的 Web 服务发出请求。

该命令应显示您使用其 ID 的专辑的 JSON。如果找不到专辑，您将收到带有错误消息的 JSON。

恭喜！您刚刚使用 Go 和 Gin 编写了一个简单的 RESTful Web 服务。

本节包含您使用本教程构建的应用程序的代码。

go语言编写网页代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于golang web编程、go语言编写网页代码的信息别忘了在本站进行查找喔。