81.go + vue实现web应用程序
2019-11-03 本文已影响0人
厚土火焱
前端框架越来越丰富，前后端分离已经是大多数软件团队采取的模式了。vue使用的场景也越来越多。
go本来使用template模板来进行前端的表现，现在可以用vue来分担很大一部分工作了。
通常直接使用go语言写后端，然后使用静态模板加载渲染前端，前端获取后端提供的数据是使用{{ }}符号，2个套在一起的花括号。这个也是vue使用的数据表现方式。
如果go+vue来协同工作的话，需要对vue进行一点设置。比如把{{ }}的方式改为[[ ]]的方式。
首先我们要知道，vue的使用，需要在页面中加载vue.js或vue.min.js
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
纯静态网页使用vue是这样的（给个html例子）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" style="background-color: #25ff35;">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:'Hello Moon!'
}
})
</script>
</body>
</html>
vue渲染页面效果
然后我们实现一个go的简单web服务和模板页面
package main
import (
"fmt"
"log"
"myvscodeObj/showLove"
"net/http"
"os"
"os/exec"
"text/template"
)
/*********************************************
@FuncName:main
@Author:Jian Junbo
@Date:2019-11-02 22:12:09
@Version:1.0
@Info:This function is 程序的入口，不可以被删除
*********************************************/
func main() {
http.HandleFunc("/", handler_cofox)
http.Handle("/htmlpage/", http.StripPrefix("/htmlpage/", http.FileServer(http.Dir("htmlpage"))))
err := http.ListenAndServe(":1989", nil)
if err != nil {
log.Println("ListenAndServe:", err.Error())
}
}
/*********************************************
@FuncName:News
@Author:Jian Junbo
@Date:2019-11-02 22:45:06
@Version:1.0
@Info:This function is 新闻的数据结构
*********************************************/
type News struct {
Title string `标题`
Content string `内容`
Author string `作者`
}
func handler_cofox(w http.ResponseWriter, r *http.Request) {
news := News{Title: "标题", Content: "内容", Author: "作者"}
t, err := template.ParseFiles("htmlpage/index.html")
if err != nil {
log.Println("模板加载失败:", err.Error())
}
t.ExecuteTemplate(w, "index.html", news)
}
这个go服务器通过端口 1989 展示服务器页面，提供了一个静态文件路径 htmlpage，我们把vue.js和index.html文件都放置在htmlpage路径里。
go服务器还用模板给前台页面提供了一个News结构的数据，数据包括：Title,Content,Author的值。
在index.html页面中，加载vue.js的时候需要带上静态路径 htmlpage
<script src="htmlpage/vue.js" type="text/javascript" charset="utf-8"></script>
在 new 一个 vue 变量的时候，必须有一句来设置包裹数据的符号，我们这里设置这个符号为[[ ]]
delimiters: ['[[', ']]'],
同时，所有需要由 vue 渲染的数据，都写成类似这样的样子
[[ message ]]
在 go + vue 方式下的完整模板文件 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="htmlpage/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Title is {{.Title}}<br>
Content is {{.Content}}<br>
Author is {{.Author}}
<div id="app" style="background-color: #25ff35;">
[[ message ]]
</div>
<script type="text/javascript">
var app = new Vue({
delimiters: ['[[', ']]'],
el: "#app",
data: {
message: 'Hello Moon!'
}
})
</script>
</body>
</html>
此页面中{{ }}包裹的数据是由go从后端提供的数据（ 例如：{{.Title}}），而[[ ]]包裹的数据，是vue渲染的数据。
go + vue 的运行效果
当然，我们最常用的方式，恐怕还是go从后台提供数据，交给vue，vue再渲染到页面。那么，我们这里把Hello Moon这里稍作修改，就能看到效果了。
<script type="text/javascript">
var app = new Vue({
delimiters: ['[[', ']]'],
el: "#app",
data: {
message: '{{.Author}} Love Moon!'
}
})
</script>
只是把 Vue里的数据，改为由go后端提供即可。
好吧，作者已经在向月亮示爱了。呵呵_
运行一下程序，看修改模板后的效果。
Vue数据由go后端提供的效果
至此，go web已经可以使用vue的强大前端技能了。
