Gin + Vue全栈开发实战

Elvis757 等级 298 0 0

      尝试地写了第一篇自己学习Go Web框架的感受和入门的文章,发现反响还不错,大家也提出了很多的问题来一起交流。近期也渐渐地出现了很多有关go语言开发的相关文章,包括有在蚂蚁金服的大牛的分享,我也一直有在看博客园和学习,这里越来越多人的去学习和使用Go,感觉也是非常好的趋势。希望和大家一起来继续学习。

Gin路由

本章概要

  • 路由(Router)介绍
  • Handler(处理器)介绍

2.1 路由(Router)介绍

        路由是一个非常重要的概念,所有的接口都要有路由来进行管理。虽然传统的J2EE(通过Spring框架)和.Net(ABP框架)通过注解已经将这个概念给弱化了,但是无论是Python(Django)和PHP(Laravel)都还是非常强调路由的重要性的。所有的接口都必须通过路由来指向,现在包括很多的前端框架如React和Vue也都已经添加这个路由的方式。Gin的路由是基于httprouter进行开发,有非常好的性能和表现力。

2.1.1 使用路由的示例

Gin的路由支持GET , POST , PUT , DELETE , PATCH , HEAD , OPTIONS 请求,同时还有一个 Any 函数,可以同时支持以上的所有请求。(分别对应SpringMvc框架中的@GetMapping, @PostMapping, @PutMapping, @DeleteMapping,@PatchMapping,无,无和@RequestMapping注解),其使用方式大同小异,我们可以通过以下代码添加对应的路由:

// 添加 Get 请求路由
engine.GET("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin get method")
})
// 添加 Post 请求路由
engine.POST("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin post method")
})
// 添加 Put 请求路由
engine.PUT("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin put method")
})
// 添加 Delete 请求路由
engine.DELETE("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin delete method")
})
// 添加 Patch 请求路由
engine.PATCH("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin patch method")
})
// 添加 Head 请求路由
engine.HEAD("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin head method")
})
// 添加 Options 请求路由
engine.OPTIONS("/", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin options method")
})
// 添加处理任意方法的请求路由
engine.Any("/hello", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin any method")
})
// 使用Handle方法添加 Get 请求路由
engine.Handle("GET", "/ping", func(context \*gin.Context) {
    context.String(http.StatusOK, "hello gin handle get method")
})

以上接口大家启动应用后可以在浏览器和Postman等工具进行尝试。

2.1.2 获取各种参数

1. 获取Query参数(url参数)

Gin中使用Query方法获取url参数:

engine.GET("/user", func(context \*gin.Context) {
    name := context.Query("name")
    context.String(http.StatusOK, "hello " + name)
})

运行后在浏览器中访问 “http://localhost:8080/user?name=itachizhu" 就可以看到相关的结果了。

2. 获取Form表单参数

Gin中使用PostForm获取表单参数(Content-Type=application/x-www-form-urlencoded),使用FormFile获取表单提交的文件参数(Content-Type=multipart/form-data)

engine.POST("/user", func(context \*gin.Context) {
    name := context.PostForm("name")
    context.String(http.StatusOK, "hello " + name)
})

运行后在Postman工具中访问相关的接口后可以看到相关的结果。

3. 获取请求Body中json串

Gin中使用BindJSON方法可以将请求中的json数据反序列化为对象或者map和slice(Content-Type=application/json)

engine.PUT("/user", func(context \*gin.Context) {
    var m map\[string\]string
    if err := context.BindJSON(&m); err != nil {
        context.String(http.StatusInternalServerError, "error data!")
        return
    }
    context.String(http.StatusOK, "hello " + m\["name"\])
})

运行后在Postman工具中访问相关的接口后可以看到相关的结果。

4. 获取路劲参数

Gin中使用Param方法获取路径参数:

engine.GET("/user/:name", func(context \*gin.Context) {
    name := context.Param("name")
    context.String(http.StatusOK, "hello " + name)
})

运行后在浏览器中访问 “http://localhost:8080/user/itachizhu" 就可以看到相关的结果了。

2.1.3 路由分组

Gin可以将请求路径前面相同归并为组的概念(就和在SpringMVC的Controller类中注解@RequestMapping中添加公共路径是一样的)

admin := engine.Group("/admin")
{
    admin.Any("/hello", func(context \*gin.Context) {
        context.String(http.StatusOK, "hello we are admin group!")
    })
}

本节代码地址  

2.2 Handler(处理器)介绍

        经过上面简单的例子的演示和操作,现在我们大概可以了解到路由需要传入两个参数,一个为路径,另一个为路由执行的方法,我们叫做它处理器 Handler(在J2EE中我们通过叫它Action或者Controller),而且,该参数是可变长参数。也就是说,可以传入多个 handler,形成一条 handler chain 。同时对 handler 该函数有着一些要求,该函数需要传入一个 Gin.Context 指针,同时要通过该指针进行值得处理。Handler 函数可以对前端返回 字符串,Json,Html 等多种格式或形式文件,之后我们会慢慢逐一介绍。

        因为Go本身支持函数式编程,所以很多就直接用匿名函数方式直接作为参数传入方法中去了。在真正的编程中,我们也通常会将它抽象成mvc模式,由另外的包方法中进行承载。

        下面我们就用已学到知识,先将Gin进行Router(路由)和Controller(控制器)的抽象,渐渐形成和其他语言框架那样的MVC模式。

        项目结构入如图2-1所示:

Gin + Vue全栈开发实战

        图2-1

本节代码地址

2.3 小结

        本章主要向读者介绍了Gin的路由和处理器,通过简单的路由的使用,基本明白了路由在 Gin 中的地位,也对一些常见的使用方式有了一些直观的认识。并且能够使用面向对象的思维将路由和处理器抽象成MVC模式。第3章将向读者介绍使用模板整合视图层的技术。

收藏
评论区

相关推荐

vue的watch监听
vue的watch监听函数 watch用来响应数据的变化,watch 的用法大致有以下三种: 1. 监听某个变量 watch: { name(newName, oldName) { console.log(newName) // 改变前的值 console.log(oldName) // 改变后的值
【Golang】GoWeb框架之Gin-简明教程
Gin 简介 Gin is a HTTP web framework written in Go (Golang). It features a
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
我的gin框架笔记
入门教程https://golangcaff.com/docs/gingonic/2018/ginreadme/3961. 下载 go get u github.com/gingonic/gin 2. 在你的代码中导入它: import "github.com/gingonic/gin"3. (可选的) 导入 net/http
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 二、什么是vmodel指令?vmode
Gin + Vue全栈开发实战
      尝试地写了第一篇自己学习Go Web框架的感受和入门的文章,发现反响还不错,大家也提出了很多的问题来一起交流。近期也渐渐地出现了很多有关go语言开发的相关文章,包括有在蚂蚁金服的大牛的分享,我也一直有在看博客园和学习,这里越来越多人的去学习
Vue的学习笔记(中篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:。这篇文章我
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
Vue的学习笔记(下篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。前面几天我们已经分享了和,今天我们一起来看看下篇。 二
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d

热门文章

Redis 未授权访问漏洞复现与利用

最新文章

Redis 未授权访问漏洞复现与利用