使用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和前端项目的融合。接下来就需要根据需求继续改造了。