vue.js做为目前前端最热门的库之一，为快速构建并开发前端项目多了一种思维模式。本文给大家介绍用go+vue.js快速搭建一个web应用(初级demo)。
环境准备：
1. 安装go语言，配置go开发环境；
2. 安装node.js以及npm环境；
gin的使用：
为了快速搭建后端应用，采用了gin作为web框架。gin是用golang实现的一种web框架，api非常友好，且拥有出色的路由性能和详细的错误提示，如果你想快速开发一个高性能的生产环境，gin是一个不错的选择。
下载和安装gin：
go get github.com/gin-gonic/gin
代码中使用：
import "github.com/gin-gonic/gin"
下面是一个使用gin的简单例子：
我要评论
package main
import "github.com/gin-gonic/gin"
func main() {
r := gin.default()
r.get("/ping", func(c *gin.context) {
c.json(200, gin.h{
"message": "pong",
})
})
r.run() // listen and serve on 0.0.0.0:8080
}
注：gin可以很方便的支持各种http请求方法以及返回各种类型的数据，详情可以前往查看。
开始一个项目：
在gogland(ide)中新建一个项目：demo，并建立一个main.go文件作为项目入口：
package main
import (
"demo/router"
)
func main() {
router.init() // init router
}
注： go中package main 必须包含一个main函数。
从上面的代码可以看到，我们引入了demo下面的router包，并显式的调用了router的init()函数， 那现在我们就在demo项目下新建router目录，并在目录下建立router.go用于编写路由规则，代码如下：
package router
import (
"demo/handlers"
"github.com/gin-gonic/gin"
)
func init() {
// creates a default gin router
r := gin.default() // grouping routes
// group： v1
v1 := r.group("/v1")
{
v1.get("/hello", handlers.hellopage)
}
r.run(":8000") // listen and serve on 0.0.0.0:8000
}
在这里，我们创建了一个gin的默认路由，并为其分配了一个组 v1，监听hello请求并将其路由到视图函数hellopage，最后绑定到 0.0.0.0:8000。
现在我们来创建视图函数，新建handlers目录，并在目录下新建hello.go文件，代码如下：
package handlers
import (
"github.com/gin-gonic/gin"
"net/http"
)
func hellopage(c *gin.context) {
c.json(http.statusok, gin.h{
"message": "welcome",
})
}
c.json是gin实现的返回json数据的内置方法，包含了2个参数，状态码和返回的内容。http.statusok代表返回状态码为200，正文为{"message": "welcome"}。
注：gin还包含更多的返回方法如c.string, c.html, c.xml等，请自行了解。
到现在为止，我们已经实现了最基本的gin搭建web服务的代码，运行代码：
~/gofile/src/demo$ go run main.go [gin-debug] [warning] running in "debug" mode. switch to "release" mode in production. - using env: export gin_mode=release - using code: gin.setmode(gin.releasemode) [gin-debug] get /v1/hello --> demo/handlers.hellopage (3 handlers) [gin-debug] listening and serving http on :8000
可以看到，我们已经成功启动web服务器，并监听本地8000端口，现在可以访问/v1/hello这个地址了：
curl -xget 'http://127.0.0.1:8000/v1/hello' -i
http/1.1 200 ok
content-type: application/json; charset=utf-8date: mon, 18 sep 2017 07:38:01 gmt
content-length: 21
{"message":"welcome"}
这里服务器已经正确相应了请求，并返回{"message":"welcome"}，同时从http请求头部中可以看到请求的状态码为200，返回的数据类型为 content-type: application/json。
再来看看服务端的控制台的输出信息：
[gin] 2017/09/18 - 15:37:46 | 200 | 81.546µs | 127.0.0.1 | get /v1/hello
到这里，我们已经成功的搭建了一套简单的web服务器。但是在真实情况下，我们肯定会跟服务器产生数据的交流，接下来看看gin是如何接收参数的。
gin 参数使用
在restful广泛流行的情况下，gin可以很方便的接收url参数：
我们在之前的组v1路由下新定义一个路由：
v1 := r.group("/v1")
{
v1.get("/hello", handlers.hellopage)
v1.get("/hello/:name", func(c *gin.context) {
name := c.param("name")
c.string(http.statusok, "hello %s", name)
})
}
接下来访问：
curl -xget 'http://127.0.0.1:8000/v1/hello/lilei' -i http/1.1 200 ok content-type: text/plain; charset=utf-8 date: mon, 18 sep 2017 08:03:02 gmt content-length: 11 hello lilei
可以看到，通过c.param("key")方法，gin成功捕获了url请求路径中的参数。gin也可以接收常规参数，如下：
v1.get("/welcome", func(c *gin.context) {
firstname := c.defaultquery("firstname", "guest")
lastname := c.query("lastname")
c.string(http.statusok, "hello %s %s", firstname, lastname)
})
同样，我们访问：
curl -xget 'http://127.0.0.1:8000/v1/welcome?firstname=li&lastname=lei' -i http/1.1 200 ok content-type: text/plain; charset=utf-8date: mon, 18 sep 2017 08:11:37 gmt content-length: 12 hello li lei
通过c.query("key")可以成功接收到url参数，c.defaultquery在参数不存在的情况下，会由其默认值 guest代。
注：gin还可以接收更多不同类型的参数，请查看gin的文档；
gin返回静态页面
我们在网站开发中肯定会涉及到静态资源的处理，下面是gin返回静态页面，以及实现数据交互的简单例子。
新建templates目录，并目录下新建，内容如下：
<html>
<h1>
{{ .title }}
</h1>
</html>
新建一个group v2，并创建/index路由，返回静态html页面：
r.loadhtmlglob("templates/*")
v2 := r.group("/v2")
{
v2.get("/index", func(c *gin.context) {
c.html(http.statusok, "", gin.h{ "title": "hello gin.",
})
})
}
使用loadhtmlglob定义模板文件路径，用c.html返回静态页面。访问:
curl -xget 'http://127.0.0.1:8000/v2/index' -i http/1.1 200 ok content-type: text/html; charset=utf-8 date: mon, 18 sep 2017 08:29:13 gmt content-length: 55 <html lang="en"> hello gin. </html>
gin返回了静态文件，并把title数据填充到了模板 {{ .title }}
注：关于模板语言的使用，读者自行补充。当然静态资源我们也可以交由nginx等来处理，减少服务器压力。
gin默认路由
我们还可以为gin定义一些默认路由：
// 404 notfound
r.noroute(func(c *gin.context) {
c.json(http.statusnotfound, gin.h{
"status": 404,
"error": "404, page not exists!",
})
})
这时候，我们访问一个不存在的页面：
curl -xget 'http://127.0.0.1:8000/v2/notfound' -i
http/1.1 404 not found
content-type: application/json; charset=utf-8
date: mon, 18 sep 2017 09:22:38 gmt
content-length: 46
{"error":"404, page not exists!","status":404}
gin 中间件
在go的net/http中我们可以很方便的设计中间件，同样gin也为我们提供了很方便的中间件使用。 我们可以定义全局中间件，群组中间件和单个路由的中间件，可以限定中间件的作用范围。
先定义一个简单的中间件，并将其设为全局中间件:
// printmiddleware is a function for test middleware
func printmiddleware(c *gin.context) {
fmt.println("before request")
c.next()
}
接下来注册为全局中间件：
r := gin.default() r.use(printmiddleware())
然后我们发起客户端请求并查看gin控制台输出：
curl -xget 'http://127.0.0.1:8000/v2/index' -i [gin-debug] listening and serving http on :8000 before request [gin] 2017/09/18 - 17:42:50 | 200 | 809.559µs | 127.0.0.1 | get /v2/index
可以看到gin在执行请求前，成功执行了自定义的中间件函数，c.next()表示当中间件执行完成之后，将请求传递给下一个函数处理。
上面定义了一个全局中间件，现在我们想对v2组的请求进行一次验证（模拟登录），假设请求中包含一个token参数，存储认证信息，我们来实现这个中间件函数：
func validatetoken() gin.handlerfunc {
return func(c *gin.context) {
token := c.request.formvalue("token")
if token == "" {
c.json(401, gin.h{
"message": "token required",
})
c.abort()
return
}
if token != "accesstoken" {
c.json(http.statusok, gin.h{
"message": "invalid token",
})
c.abort()
return
}
c.next()
}
}
然后我们在group v2组注册这个中间件：
v2.use(validatetoken())
接下来我们还是像往常一样访问：
curl -xget 'http://127.0.0.1:8000/v2/index' -i
http/1.1 401 unauthorized
content-type: application/json; charset=utf-8
date: mon, 18 sep 2017 10:01:10 gmt
content-length: 32
{"message":"token required"}
提示我们token required， 当我们加上token时：
curl -xget 'http://127.0.0.1:8000/v2/index?token=accesstoken' -i http/1.1 200 ok content-type: text/html; charset=utf-8 date: mon, 18 sep 2017 10:02:28 gmt content-length: 29 <html> hello gin. </html>
可以看到已经通过验证，gin正确响应了请求。c.abort()表示请求被终止。
看到这里，相信大家对gin已经有了大致了解，可以动手撸自己的代码了。在实际开发中，会遇到各种各样的需求，这时候就需要多方查阅资料，寻找答案了。
vue.js使用
vue.js是当下很火的前端框架，我们可以使用vue.js和gin来搭建前后端分离应用。
vue官方文档：
vue开发环境搭建：
1. 安装node.js和npm。
2. npm安装vue脚手架vue-cli:
npm install vue-cli -g // 全局安装
vue-cli 是一个官方发布的 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 github地址：
3. 接下来使用vue-cli创建一个项目，采用官方的webpack模板：
vue init webpack demo
这里采用默认设置即可，一路按下enter，会提示安装完成，进入项目
cd demo
安装依赖(需要耐心等待一段时间):
npm install
4. 启动开发服务器：
npm run dev
访问：，可以看到vue官方为我们搭建好的初始化页面了。
到这里，我们很方便的搭建好了vue初始项目模板，那么我们怎么实现前后端分离的数据交互工作呢？接下来，用一个最近使用过小案例来演示数据交互。
使用echarts画一张简单的图表
1. 在src目录下新建views目录，用来存放视图（目录结构）：
src ├── app.vue ├── assets │ └── logo.png ├── components │ └── helloworld.vue ├── main.js ├── router │ └── index.js └── views ├── chartline.vue └── index.js
2. 安装稍后会使用到的组件：
npm install echarts --save-dev // echarts npm install axios --save-dev // 一个异步http请求库
3. 新建chartline.vue文件用来展示折线图。内容如下：
<template>
<div>
<div>
<button v-on:click="refreshcharts()">刷新</button>
<div class="line" id="line"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default {
name: 'chartline',
computed: {
opt () { // option可以参照echarts官方案例
return {
title: {
text: '堆叠区域图'
},
tooltip: {
// 省略， 参数详看echarts官方案例
},
legend: {
data: ['邮件营销']
},
grid: {
// 省略
},
xaxis: [
{
// 省略
data: []
}
],
yaxis: [
// 省略
],
series: [
{
name: '邮件营销',
type: 'line',
data: []
}
]
}
}
},
methods: {
async refreshcharts () {
const res = await axios.get('http://127.0.0.1:8000/api/v1/line')
this.mychart.setoption({ // 更新数据
xaxis: {
data: res.data.legend_data
},
series: {
data: res.data.xaxis_data
}
})
}
},
mounted () {
this.mychart = echarts.init(document.getelementbyid('line'))
this.mychart.setoption(this.opt) // 初始化echarts
window.addeventlistener('resize', this.mychart.resize) // 自适应
}
}
</script>
<style>
.line {
width: 400px;
height: 200px;
margin: 20px auto;
}
</style>
以上代码实现了echarts图表初始化和数据填充的过程，以及点击按钮刷新图表的功能；
4. 注册路由，编辑router/index.js:
import vue from 'vue'
import router from 'vue-router'
import chartline from '../views/chartline.vue'
vue.use(router)
export default new router({
mode: 'history',
routes: [
{
path: '/line',
name: 'line',
component: chartline
}
]
})
5. gin后台api接口实现：
v1.get("/line", func(c *gin.context) {
legenddata := []string{"周一", "周二", "周三", "周四", "周五", "周六", "周日"}
xaxisdata := []int{120, 240, rand.intn(500), rand.intn(500), 150, 230, 180}
c.json(200, gin.h{
"legend_data": legenddata,
"xaxis_data": xaxisdata,
})
})
6. 现在我们就能正确看到图表了，试着点击刷新按钮可以看到图表正确刷新了数据。
总结
以上所述是小编给大家介绍的用go+vue.js快速搭建一个web应用(初级demo)，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
网友评论