用Go+Vue.js快速搭建一个Web应用(初级demo)

以下是用Go+Vue.js快速搭建一个Web应用(初级demo)的完整攻略。

一、简介

本篇攻略将教你如何在本地使用Go和Vue.js快速搭建一个Web应用，包括前端和后端的搭建过程。

二、前端部分

1. 创建Vue.js项目

首先，我们需要在本地创建一个Vue.js项目。在终端中输入以下命令：

vue create webapp

然后根据提示，选择需要的配置项进行配置。配置完成后，在终端中进入webapp项目目录：

cd webapp

2. 安装并配置axios

为了后续方便与后端进行数据交互，我们需要在Vue.js项目中安装axios库。

在终端中输入以下命令：

npm install axios

安装完成后，在Vue.js项目根目录创建一个axios.js文件。在该文件中，我们需要对axios进行一些全局配置：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080/api' // 后端API接口地址

export default axios

3. 编写前端页面

我们在src/components目录中新建一个HelloWorld.vue组件：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="getUserList">获取用户列表</button>
    <ul>
      <li v-for="(user, index) in userList" :key="index">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from '../axios'

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用Vue.js',
      userList: [],
    }
  },
  methods: {
    getUserList() {
      axios.get('/users').then((res) => {
        this.userList = res.data
      })
    },
  },
}
</script>

上述代码中，我们首先引入了axios库，然后设置了一个data变量userList来存放后端返回的用户列表数据，最后通过axios库从后端获取用户列表，将结果存入userList变量中，然后在页面上进行展示。

4. 运行前端应用

在终端中运行以下命令，即可启动前端应用：

npm run serve

三、后端部分

1. 创建Go项目

在终端中输入以下命令创建Go项目：

mkdir server && cd server
go mod init example.com/server

2. 安装Gin框架

Go语言的Web框架非常丰富，其中Gin是比较优秀的一种。在终端中输入以下命令安装Gin框架：

go get -u github.com/gin-gonic/gin

3. 编写后端接口

在server目录下，我们新建一个main.go文件，在该文件中编写以下代码：

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

type User struct {
    Name string `json:"name"`
    Age  int    `json:"age"`
}

func main() {
    r := gin.Default()

    r.GET("/api/users", func(c *gin.Context) {
        users := []User{
            {Name: "张三", Age: 18},
            {Name: "李四", Age: 20},
            {Name: "王五", Age: 22},
        }
        c.JSON(http.StatusOK, users)
    })

    r.Run(":8080")
}

上述代码中，我们引入了Gin框架并创建了一个路由引擎。然后在路由引擎中定义了一个GET类型的/users接口，当该接口被请求时，会返回一个包含3个用户信息的JSON数组。

4. 运行后端应用

在终端中运行以下命令，即可启动后端应用：

go run main.go

四、前后端交互

前端Vue.js应用已经通过axios库可以访问后端Gin应用的API接口了。启动前后端应用后，我们在浏览器中访问http://localhost:8080，即可看到前端应用的页面，点击按钮即可获取后端返回的用户列表信息。

五、示例说明

1. HelloWorld.vue组件中的axios.get('/users')表示向后端GET请求http://localhost:8080/api/users接口。
2. 后端Gin应用中的r.GET("/api/users", func(c *gin.Context) {})表示当请求http://localhost:8080/api/users接口时，执行后面的回调函数。