u003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003d

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

基于 Gin 框架的后端 API

编写一个基于 Gin 框架的 API:

# 查看源文件

$ 猫 main.go

/**

* @文件名:main.go

* @Author: xxbandy @http://xxbandy.github.io

* @电子邮件:

* @创建日期:2018-12-02 22:12:59

* @描述:

*/

包主

进口(

_“fmt”

“github.com/gin-gonic/gin”

“数学/兰特”

“网络/http”

)

func HelloPage(c *gin.Context) {

c.JSON(http.StatusOK, gin.H{

"message": "欢迎来到bgops,请访问https://xxbandy.github.io!",

})

}

功能主() {

r :u003d gin.Default()

v1 :u003d r.Group("/v1")

{

v1.GET("/hello", HelloPage)

v1.GET("/hello/:name", func(c *gin.Context) {

名称 :u003d c.Param("名称")

c.String(http.StatusOK, "你好 %s", 名字)

})

v1.GET("/line", func(c *gin.Context) {

// 注意:前后端分离时,要注意跨域问题,所以需要设置请求头。

c.Writer.Header().Set("Access-Control-Allow-Origin", "*")

legendData :u003d []string{“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”}

xAxisData :u003d []int{120, 240, rand.Intn(500), rand.Intn(500), 150, 230, 180}

c.JSON(200, 杜松子酒.H{

“图例_data”:图例数据,

“xAxis_data”:xAxisData,

})

}

//定义默认路由

r.NoRoute(func(c *gin.Context) {

c.JSON(http.StatusNotFound, gin.H{

“状态”:404,

"error": "404,页面不存在!",

})

r.Run(":8000")

}

操作流程

$ 去运行 main.go

[GIN-debug] [WARNING] 创建一个 Engine 实例,其中已经附加了 Logger 和 Recovery 中间件。

[GIN-debug] [WARNING] 在“调试”模式下运行。在生产中切换到“发布”模式。

使用环境:导出 GIN_MODEu003drelease

使用代码:gin.SetMode(gin.ReleaseMode)

[GIN-debug] GET /v1/hello --> main.HelloPage(3 个处理程序)

[GIN-debug] GET /v1/hello/:name --> main.main.func1(3 个处理程序)

[GIN-debug] GET /v1/line --> main.main.func2(3 个处理程序)

测试相关接口

$ curl -s localhost:8000/v1/hello | python -m json.tool

{

"message": "欢迎来到bgops,请访问https://xxbandy.github.io!"

}

$ curl -s localhost:8000/v1/hello/bgops

你好 bgops

$ curl -s localhost:8000/v1/line

{"legend_data":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"x 轴\data":[120,240 ,81,387,150,230,180]}

可以看到接口以json结构返回数据

$ curl -s localhost:8000/v1/line | python -m json.tool

{

“图例_数据”:[

"\u5468\u4e00",

"\u5468\u4e8c",

"\u5468\u4e09",

"\我订婚了 468\\我订婚了",

"\u5468\u4e94",

u5468u516d

"\\\\\'s 468\\'s

],

“xAxis_data”:[

120,

240,

347,

59,

150,

230,

180

]

}

基于vue框架的前端项目

使用 vue-cli 脚手架快速构建 Vue 项目。注:前提是需要node环境且有npm源可用

# 查看版本

$ npm -v

2.3.0

#升级 npm

cnpm 安装 npm -g

升级或安装cnpm

npm 安装 cnpm -g

最新稳定版

$ cnpm 安装 vue

全局安装 vue-cli

$ cnpm install --global vue-cli

新建一个基于Webpack模板的项目

➜ 视图文档视图初始化 webpack 视图测试

?目标目录存在。继续?是的

?项目名称 vue-test

?项目描述一个 Vue.js 项目

?作者 xxbandy

? Vue 独立构建

?安装Vue路由器?是的

?使用 ESLint 对代码进行 lint?是的

?选择一个 ESLint 预设标准

?设置单元测试是

?选择一个测试跑者笑话

?使用 Nightwatch 设置 e2e 测试?是的

//有两种方式[npm和yarn,如果默认选择npm,从外部下载资源,可能无法访问谷歌的外部]

?我们应该在项目创建后为您运行 `npm install`吗? (推荐)没有

vue-cli · 生成“vue-test”。

项目初始化完成!

u003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003du003d

开始:

cd 查看测试

npm install (或者如果使用yarn:yarn)

npm run lint -- --fix (或者对于纱线:yarn run lint --fix)

npm 运行开发

文档可以在 https://vuejs-templates.github.io/webpack 找到

$ cd vue 测试

$ cnpm 安装

✔ 安装了 58 个包

✔ 已链接 0 个最新版本

✔ 运行 0 个脚本

✔ 安装的所有包(使用 237ms(网络 227ms),速度 0B/s,json 0(0B),tarball 0B)

根据配置运行编译好的 webpack 静态资源

$ cnpm 运行开发

DONE 4388ms 编译成功

收听 http://localhost:8080

当使用 cnpm run dev 时,一个前端服务运行成功,所以你会看到类似下图的页面

vue渲染后端API数据

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

$ 树 -L 1 。

。

├── README.md

├── 建造

├── 配置

├── index.html

├── 节点_模块

├── package.json

├── src

├── 静态

└── 测试

快速开发只需要知道src目录下vue相关的代码,也就是我们看到vue的欢迎页面在src下。

$树-L 2 src

源

├── app.vue

├── 资产

│ └── logo.png

├── 组件

│ └── HelloWorld.vue

├── main.js

└── 路由器

└── index.js

注意:可以看到一个vue项目的源码部分由几个部分组成

JS主文件main.js
vue主文件App.vue
静态文件目录资产
自定义组件组件
路由器目录

我们先看一下App.vue代码

#我们可以看到div中有一个img标签,其实就是我们刚才看到的欢迎页面上vue的logo。

其实可以看到使用了<router-view>标签,其实就是定义了默认组件,就是下面导入的HelloWorld。

$ 猫应用程序.vue

<模板>

<div idu003d"app">

<img srcu003d"./assets/logo.png">

<路由器视图></路由器视图>

</div>

</模板>

<脚本>

从“./components/HelloWorld”导入 HelloWorld

导出默认 {

名称:“你好世界”,

组件:{

你好世界

}

</脚本>

<样式>

#app {

字体系列:'Avenir'、Helvetica、Arial、sans-serif;

-webkit-font-smoothing:抗锯齿;

-moz-osx-font-smoothing:灰度;

文本对齐:居中;

颜色:#2c3e50;

上边距:60px;

}

</style>

我们再来看看 components/HelloWorld.vue 文件:

# 其实我们刚才看到的欢迎页面下面还有一些超链接。

$ 猫组件/HelloWorld.vue

<模板>

<div classu003d"HelloWorld">

<h1>{{ 消息 }}</h1>

<h2>基本链接</h2>

<ul>

<li>

<一个

hrefu003d"https://vuejs.org"

目标u003d"_空白"

核心文档

</a>

</li>

<li>

<一个

hrefu003d"https://forum.vuejs.org"

目标u003d"_空白"

论坛

</a>

</li>

<li>

<一个

hrefu003d"https://chat.vuejs.org"

目标u003d"_空白"

社区聊天

</a>

</li>

<li>

<一个

hrefu003d"https://twitter.com/vuejs"

目标u003d"_空白"

推特

</a>

</li>

.........

其实到这里,我们基本知道整个vue项目是如何渲染资源的了。但是让我们看一下路由器的定义。

# 这实际上是关于定义我们如何访问该资源。

$ 猫路由器/index.js

从“视图”导入视图

从 'vue-router' 导入路由器

从“@/components/HelloWorld”导入 HelloWorld

Vue.use(路由器)

导出默认新路由器({

路线:[

{

路径:'/',

名称:'HelloWorld',

组件:HelloWorld

}

]

})

2.想想我们接下来要做什么。

现在我们知道了vue是如何渲染相关数据的,也知道了编码规则,但是我们的数据不是本地的,而是一个外部的API,这时候就需要想办法获取vue后端数据了。

是的,此时我们需要异步请求vue来获取数据,比如ajax,但是在大前端时代,有一个更好的工具,axios,然后在我们的vue环境中安装axios:

# 安装异步请求包

$ npm install --save axios

3. vue 渲染后端数据

模拟编写一个组件/HelloWorld组件

# 编写一个 ApiData.vue 组件

$ 猫组件/ApiData.vue

<模板>

<div 类u003d“你好”>

<h1>{{ 消息 }}</h1>

<h1>站点:{{站点}}</h1>

<h1>网址:{{url}}</h1>

<h3>{{details()}}</h3>

<h1 v-foru003d"ydata 中的数据" :keyu003d"data">{{data}}</h1>

<h3 v-foru003d"item in xdata" :keyu003d"item">{{item}}</h3>

</div>

</模板>

<脚本>

从“axios”导入 axios

导出默认 {

名称:'apidata',

// 数据用于定义返回数据的属性

数据(){

返回{

味精:'你好,xxbandy!',

网站:“bgops”,

网址:“https://xxbandy.github.io”,

xdata:空,

ydata:空,

}

},

// 定义js的方法

方法:{

详细信息:函数(){

返回 this.site

},

挂载 () {

// 响应返回一个 json{"data": "data", "status", "status code", "status text", "headers": {"content-type": "application/json; charset u003d utf- 8"}, "config", "配置文件", "方法", "url","request url", "request body"}.

axios.get('http://localhost:8000/v1/line').then(response u003d> (this.xdata u003d response.data.legend_data,this.ydata u003d response.data.xAxis_data) )

}

</脚本>

<样式>

.你好{

字体粗细:正常;

文本对齐:中心;

字体大小:8pt;

}

哈

{

文本对齐:中心;

字体大小:20pt;

颜色:红色;

}

</style>

将我们的组件添加到路由中

# 添加路由

猫路由器/index.js

从“视图”导入视图

从 'vue-router' 导入路由器

从“@/components/HelloWorld”导入 HelloWorld

// 添加我们的自定义 API 数据组件

从“@/components/ApiData”导入 Hello

Vue.use(路由器)

导出默认新路由器({

路线:[

{

路径:'/',

名称:'HelloWorld',

组件:HelloWorld

},

// 这里引用我们的组件

{

路径:'/xxb',

名称:'你好',

组件:你好

}

]

})

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

# 添加以下内容

<脚本>

从“./components/ApiData”导入 Hello

导出默认 {

名称:'xxb',

组件:{

你好

}

</脚本>

运营服务

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

#在vue项目主目录下运行(由于我们的golang api接口运行在8000端口,需要修改vue端口)

$ cnpm 运行开发

您的应用程序正在这里运行:http://localhost:8082

![](https://upload-images.jianshu.io/upload_images/2577135-613a2c6379cb739e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

![](https://upload-images.jianshu.io/upload_images/2577135-884b34affdce931d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

至此,我们可以看到vue成功渲染了后端Golang的API数据。虽然只是简单的渲染,但基本实现了后端API与前端vue项目的融合。接下来,我们需要根据需要继续改造。欢迎关注我的公众号