Vuejs + Golang = 一个稀缺的组合

时间回到 2018 年，我写了一篇获得 15k 阅读的文章：Django + Angular 4 = A powerful web application。出于好奇心，我尝试了Angular4 和 Django 的组合。接着上个系列，这是一篇使用 Vuejs 和 Golang 来帮助你构建极佳应用的文章。

我知道这两者一起用不是很常见，但是，让我们试一试。

背景

首先，让我们来聊聊两者提供的技术特征。

Golang

1. 二进制 —— 所有需要构建的内置依赖项都是二进制文件。因此，您不需要安装运行时来运行应用程序。
2. 静态类型 —— 编译器不仅在编译过程检查类型，而且在代码编写的过程。处理类型转换和兼容性等问题都有兼顾。
3. 并发性 —— Golang 最好的特性是它对高并发性的优先支持。
4. 标准库 —— 标准库功能足够强大，你基本上不需要第三方库。

Vue.js

1. 体积 —— 经过 gzip 压缩后，它的大小仅为 18kb ，对比压缩后的 jQuery，gzip 压缩后的大小为 29kb。
2. 可读性 —— Vue.js 的源码和语法非常清晰简单。
3. 文档 —— Vue.js 完善的文档使它能很快上手和学习。
4. 灵活 —— 数据在 HTML 和 JavaScript 间的绑定是非常流畅的。
5. Vue CLI 3 —— cli 提供了一系列的功能让你很快的上手，尝试着使用它你会喜欢上它。

Golang 和 Vuejs 在运行时都很快，所以让他们一起合作构建一个很快的单页面应用。

我们开始构建：

初始化文件目录

首先，像下面这样初始化你的文件目录，为 Git 添加 “LICENSE” 、“README.md” 等文件.

在 backend 文件夹创建一个 'server.go' 文件：

前端部分，在命令行输入以下命令来创建一个新的 app 应用：

preset

现在文件目录结构如下：

代码的结构准备好了!

现在让我们看下我们将要做开发的应用，它不是一个很复杂但是可以帮助你开始开发复杂应用。我们将要开发一个计算器，我们在前端输入两个数字，通过 POST 请求发送到 Golang 服务端。服务端将会进行加、减、乘、除，然后通过一个 POST 请求返回结果，前端将会渲染结果。

构建后端

Golang 很快是因为它的编译器，它不允许你定义多余的变量。如果你定义变量或者引入任何 package 包，那么这些变量、包应该是你需要使用的，Golang 在这方面很严格。另外无论你想要做什么，你需要事先告诉给编译器，例如：如果你想使用 POST 获取数据，你必须事先定义返回数据的 JSON 格式。这有点麻烦，但是为了速度这是值得的。

回到代码上。

encoding/jsonnet/http

现在，我们将会写一个简单的方法来做数字的运算。这里，我们需要明确指定返回数据的类型。

我们需要写一个方法，当我们使用 POST 方法发送 JSON 格式的请求时，这个方法能够被执行。

JSON

numsDatanumsResData

numsData

ResponseWriter

8090

完整的代码如下：

现在我们来构建前端

cd

axiosvee-validatebootstrap-vue

src/Calculator.vue

v-model

postreq

scriptJavaScript

axiosvee-validatedata

methodspostreq()http://localhost:8090/calcserver.gocalcaddmulsubdiv

很简单是吧？ 是的。

以上就是所有我们需要做的，只需要记住这些要点：

• 使用 Golang 写服务端逻辑并且运行在单独的端口上.
• 构建代码结构来处理 JSON 数据，你不能将它们存储在变量中。
• 前端的 Vuejs 会使用 GET 或 POST 请求来调用服务端的 API 接口。

运行应用

8090

运行前端可以使用：

祝贺！你的 App 完成了。

整个代码托管在这个 上。

并且，如果你想看另一个我使用 Vue.js 和 Golang 构建的应用 Rocket Engine Designer，请点击

如果你喜欢这篇文章，请点击 ???? 按钮给与你对这篇文章的喜爱。

本文由 原创编译， 荣誉推出