用Go+Vue.js快速搭建一个Web应用(初级demo)

2024-10-08 07:50:29

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请求方法以及返回各种类型的数据，详情可以前往https://github.com/gin-gonic/gin查看。

开始一个项目：

在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官方文档：https://cn.vuejs.org/v2/guide/

vue开发环境搭建：

1. 安装node.js和npm。

2. npm安装vue脚手架vue-cli:

npm install vue-cli -g // 全局安装

vue-cli 是一个官方发布的 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址：https://github.com/vuejs/vue-cli

3. 接下来使用vue-cli创建一个项目，采用官方的webpack模板：

vue init webpack demo

这里采用默认设置即可，一路按下Enter，会提示安装完成，进入项目

cd demo

安装依赖(需要耐心等待一段时间):

npm install

4. 启动开发服务器：

npm run dev

访问：http://localhost:8080，可以看到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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

用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:
基于vue.js快速搭建图书管理平台

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用. 1.DEMO样式首先我们需要搭建一个简单的demo样式,推荐大家使用bootstrap,可以很快的搭建出一个清
SpringBoot之Helloword 快速搭建一个web项目(图文)

背景: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. Spring Boot(英文中是"引导"的意思),是用来简化Spring应用的搭建到开发的过程.应用开箱即用,只要通过 "just
通过Spring Boot + Mybatis + Redis快速搭建现代化Web项目

背景 SpringBoot因其提供了各种开箱即用的插件,使得它成为了当今最为主流的Java Web开发框架之一.Mybatis是一个十分轻量好用的ORM框架.Redis是当今十分主流的分布式key-value型数据库,在web开发中,我们常用它来缓存数据库的查询结果. 本篇博客将介绍如何使用SpringBoot快速搭建一个Web应用,并且采用Mybatis作为我们的ORM框架.为了提升性能,我们将Redis作为Mybatis的二级缓存.为了测试我们的代码,我们编写了单元测试,并且用H2内存数据库
手把手教你使用Django + Vue.js 快速构建项目

目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目创建完成后,目录结构如下所示使用 Navicat 工具创建数据库 DjangoVu
Vue.js快速入门教程

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U
Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <
如何快速搭建一个自己的服务器的详细教程（java环境）

一. 服务器的购买 1. 我选择的是阿里云的服务器,学生价9.5元一个月,百度直接搜索阿里云,然后点击右上角登录,推荐大家用支付宝扫码登录,方便快捷.阿里云官网的东西比较多,登录后我找了很久也没有找到学生服务器在哪里卖,最后在咨询里找到了这个网址,https://promotion.aliyun.com/ntms/campus2017.html,购买的时候需要进行学生认证,按照他的要求一步步来就好,认证大概需要几个小时.如果你不是学生那就直接购买ecs服务器就好,首页就可以看到ecs服务器的
快速搭建一个SpringBoot项目(纯小白搭建教程)

目录零.环境介绍一.手把手创建 1.创建步骤 2.启动类和测试编写 2.1 项目结构 2.2 创建启动类DemoApplication 2.3 测试二.依赖工具创建零.环境介绍环境:jdk1.8及以上,maven,Win10,IDEA,网络一.手把手创建请求创建在启动类所在的包里面,才能顺利启动 1.创建步骤看图,有手就行之后得到的就是一个maven项目,目录结构如下: 之后添加依赖,springboot的核心依赖.SpringBoot提供了一个名为spring-boot-st
利用5分钟快速搭建一个springboot项目的全过程

目录前言一.空项目二.开始springboot之旅三.总结前言现在开发中90%的人都在使用springboot进行开发,你有没有这样的苦恼,如果让你新建一个springboot开发环境的项目,总是很苦恼,需要花费很长时间去调试.今天来分享下如何快速搭建. 一.空项目现在开发过程中大都是idea这个集成开发环境,笔者之前也是很执拗,一直使用的是eclipse,后来也是公司需要转到了idea,不得不说idea确实好用,没用过的小伙伴可以尝试.这里以idea为演示环境. 我一般都是从一个

用Go+Vue.js快速搭建一个Web应用(初级demo)

相关推荐

随机推荐