首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Golang的Gin框架和vue编写web应用

背景: 之前使用Golang的Gin框架进行一些运维内部后端的API接口开发,对外提供提供类型的数据响应,但是该种方式在浏览器访问数据时数据格式不友好(由于是API接口,一般需要使用postman之类的工具来验证接口返回数据),后来尝试了使用Golang的模板来结合html进行数据渲染,但也发现比较缺乏美感。之后决定使用前端框架来渲染后端数据,由于vue框架的各种优势,比如简单、数据的双向绑定等等好处,决定使用vue框架来开启我的前端之旅。接下来简单来讲解下使用Golang后端和vue前端进行融合的示例。

基于Gin框架的后端API

编写基于Gin框架的API:

基于vue框架的前端项目

使用脚手架快速构建一个vue项目。

当使用了后,即成功运行起来一个前端服务,因此你会看到类似下面的页面。

vue渲染后端API数据

1. 首先快速看一下项目的代码结构.

可以看到一个vue项目的源码部分由这么几个部分组成

js主文件

vue主文件

静态文件目录

自定义组件

路由目录

我们首先来看一下代码

我们再来查看一下文件:

其实到这里,我们基本就知道了整个vue项目是如何把资源渲染出来的。不过我们再来看一下下的定义。

2. 思考我们接下来要做什么

现在我们知道vue是如何渲染的相关数据,并且知道了大概的编码规则,但是我们的数据并不在本地,而是一个对外API,此时我们需要想办法让vue获取到后端的数据。

没错,这个时候,我们需要一些异步请求的方式让vue拿到数据,比如之类的,不过在大前端时代,有更好的工具,即,接下来在我们的vue环境中安装环境:

3. vue渲染后端数据

模拟编写一个组件

在路由中增加我们的components

在文件中定义我们的vue脚本

运行服务

此时,我们可以运行服务,来检测我们的程序。

此时,我们就可以看到vue成功将后端Golang的API数据进行渲染出来了。虽然只是简单渲染,但,基本上已经实现了后端API和前端项目的融合。接下来就需要根据需求继续改造了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190911A0754400?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券