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

Python021

81.go + vue实现web应用程序,第1张

前端框架越来越丰富,前后端分离已经是大多数软件团队采取的模式了。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后端提供即可。

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

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

Go语言模板文件可以引入js文件或css文件,但是在引入的过程中,需要注意以下几点:

1. 引入的文件路径应该是相对路径,而不是绝对路径。

2. 在引入js文件时,需要使用{{ url }} 模板函数,用来拼接路径, 这样可以更好的兼容不同的路径。

3. 如果是在统一的文件夹中的js文件,最好使用{{ static }}模板函数,这样可以更好的节省路径长度。

4. 在引用js文件时,需要在页面底部,可以使用{{ template }}模板函数,这样可以保证js文件在页面加载完成之前就被加载。

总之,使用Go语言模板文件引入js文件,需要注意路径的相对性,并且使用模板函数来拼接路径,这样可以更好的兼容不同的路径,从而保证引用js文件的正确性。

1、下载go的zip文件。并且一定要把文件解压到c:\go目录下。

2、配置windows的高级环境变量。包括:GOROOT、GOOS、GOBIN、GOARCH。并且在path变量里面把c:\go\bin加入。以便可以在命令行直接运行go命令。

举例:我的机器:

GOPATH= c:\goc:\go\srcF:\workspace\goSample01

GOBIN=c:\go\binF:\workspace\goSample01\bin

其中,c:\go是go的安装路径;

F:\workspace\goSample01是我写的go语言项目的工程目录;

F:\workspace\goSample01\bin是go语言项目的工程目录下的可执行文件路径

3、在完成环境变量配置后,打开一个命令行窗口,直接输入go,然后回车,看看是否出现go的帮助信息。如果出现,那么go的基本环境就OK了。

注意:这个基本环境不包含开发工具,也不能直接编译带C代码的go程序。

4、(可选)为了支持Import远程包,最好装个gomingw。下载地址:http://code.google.com/p/gomingw/downloads/list。如果下的是压缩包,请把它解压到C盘。例如,C:\gowin-env。里面有个Console.bat是以后使用go get的环境。举例:有个文件a.go,里面import(

"fmt"

"github.com/astaxie/beedb"

_ "github.com/ziutek/mymysql/godrv"

为了编译该a.go文件,需要启动Console.bat,然后在该命令行窗口,进入c:\go\src目录下,执行go getgithub.com/astaxie/beedb

Go get github.com/ziutek/mymysql/godrv .

Go会自动下载该远程包并编译和安装这些包。

配置goclipse(可选)

(如果不喜欢eclipse开发工具,请跳过这个配置。)

1、下载并安装goclipse插件。Goclipse是go语言for eclipse的插件,下载地址:http://code.google.com/p/goclipse/

2、启动eclipse并创建go项目。然后写个最简单的helloworld.go文件,并运行。代码如下:

packagemainimport"fmt"func main(){fmt.Printf("hello, world")}

配置gocode(可选)

如果不需要go语法辅助和eclipse里面的(按ALT+/)弹出go语言自动辅助功能,请跳过这个配置。

1、下载gocode的zip文件,解压后放在go的bin目录下。

2、下载并安装Git软件。并且在path里面配置git的执行路径。例如c:\git\bin

3、在命令行执行:go build .\gocode。如果一切正常,那么将会编译生成一个gocode.exe文件在go的bin目录下。如果编译失败,那么就转第4步。

4、如果第3步直接编译gocode源文件成功,那就直接到第5步。否则,就需要通过git下载gocode源文件,然后再编译。在命令行执行:go get -u github.com/nsf/gocode 。就会生成gocode.exe文件。

5、在goclipse插件里面指定gocode的路径。就可以在elcipse里面调用gocode来帮助写编码了。

从开发工具这块看,go语言还不够成熟,开发工具都还不完善,有待改进。

下载go-tour教程源代码(可选)

Google有个在线运行go语言的教程(http://tour.golang.org/#2),很不错。支持在web上直接运行大部分的go程序,想了解这个教程的源代码的朋友可以通过以下方式获取。如果没兴趣,可以跳过这个步骤。

1、下载安装Mercurial软件。

2、在命令行下输入:

hg clone http://[email protected]/r/qinhui99-go-tour/

http://[email protected]/r/qinhui99-go-tour/这个URL是我从google的go-tour源代码的一个clone。作为测试用的。如果把http改成https协议,下载就会失败。搞不懂。

编译带调用C代码的go文件(可选)

1、为了在windows下编译带C代码的go程序,你首先需要下载并安装MinGW或者Cygwin。

2、首选安装MinGW。在安装MinGW之后,记得要把MinGW安装目录\bin路径设置在path环境变量里面,以便能在dos窗口下直接调用gcc。

3、下载一个gowin-env。下载地址:gowin-env。下载后解压到某个目录下,例如:C:\gowin-env. 然后,编辑go-env.bat。配置相关的go参数。例如,我的配置是:

set GOARCH=386

set GOOS=windows

set GOROOT=c:\go

set GOBIN=%GOROOT%\bin

set GOPATH=%GOROOT%F:\workspace\goSample01

设置好go-env.bat后,就可以点击Console.bat来启动编译和运行窗口。

4、编写一个带C代码的go程序。例如,testc.go

5、编译

例如:

go build -compiler gccgo test_c.go

运行调用C代码的go文件(可选)

1、testc.go.

创建rand目录,然后在rand里面创建testc.go. 代码如下:

package rand

/*

//

#include <stdio.h>

*/

import "C"

func PrintHello() {

C.puts(C.CString("Hello, world\n"))

}

2、a.go

在rand下创建a.go.代码如下:

package rand

import "fmt"

func SayHello(name string){

fmt.Println(name)

}

3、test_import.go

在rand的上一级创建test_import.go。代码如下:

package main

import "./rand"

func main(){

rand.SayHello("tom")

rand.PrintHello()

}

4、运行test_import.go

go run test_import.go

在测试其它几个C代码的时候,发现windows版本的cgo还有些编译问题,同样的代码转移到苹果的XCODE下就没有问题。后来终于发现原因了,原来有些例子是unix平台下的,而在windows平台下,方法名和参数需要做调整。

例如:下面代码在windows下编译报一堆错误。

package rand

/*

#include <stdlib.h>

*/

import "C"

func Random() int {

return int(C.random())

}

func Seed(i int) {

C.srandom(C.uint(i))

}

这里需要把return int(C.random()) 修改为“return int(C.rand())”

C.srandom(C.uint(i))修改为“C.srand(C.uint(i))”编译就OK了。