用Go+Vue.js快速搭建一个Web应用(初级demo)
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目录,并目录下新建index.html,内容如下:
<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, "index.html", 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返回了静态文件index.html,并把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),希望对大家有所帮助
上一篇: 不为人知的scanf
下一篇: Linux 上 C 程序的内存布局