网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

2020-06-10 02:42:21 admin 715

前端框架越来越丰富，前后端分离已经是大多数软件团队采取的模式了。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 的运行效果

只是把 Vue里的数据，改为由go后端提供即可。  
好吧，作者已经在向月亮示爱了。呵呵_  
运行一下程序，看修改模板后的效果。

Vue数据由go后端提供的效果

转载文章，原文链接： 81.go + vue实现web应用程序

关键字词go vue

分享到：

上一篇：Go语言高性能字符串拼接方案对比

下一篇：vs code golang配置

如需留言，请登录，没有账号？请注册

0 条评论 0 人参与

网站首页 返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

zhou 3年前

zhou 3年前

zhou 3年前

zhou 3年前

武云 3年前

网站首页 返回列表 像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。

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

zhou 3年前

zhou 3年前

zhou 3年前

zhou 3年前

武云 3年前

网站首页返回列表像“草根”一样，紧贴着地面，低调的存在，冬去春来，枯荣无恙。