初学 go 入门-案例-教程-记录（12）webapi 框架 Gin（四）前端请求并接收 Json

最新推荐文章于 2023-12-21 13:31:20 发布

盗理者

最新推荐文章于 2023-12-21 13:31:20 发布

阅读量475

点赞数 1

分类专栏： go 文章标签： golang json

本文链接：https://blog.csdn.net/qq_36051316/article/details/120301836

版权

go 专栏收录该内容

38 篇文章 11 订阅

订阅专栏

初学 go 入门-案例-教程-记录（12）webapi 框架 Gin（四）前端请求并接收 Json

初
目录展示

初

希望能写一些简单的教程和案例分享给需要的人
欢迎进qq群交流：546496965

我们之前接触了如何用搭建 webapi 框架 Gin https://blog.csdn.net/qq_36051316/article/details/120196088，现在我们要学习如何使用请求API

gin ： https://github.com/gin-gonic/gin

目录展示

我先展示案例的目录：index.html 、 main.go 这两个文件

在这里插入图片描述

核心代码

	r.POST("/Show/GetTimeNow", func(c *gin.Context) {
		timeNow := time.Now()
		// 返回一个Json数据
		c.JSON(200, gin.H{
			"Time":     fmt.Sprintf("时间: %s", timeNow.Format("2006-1-2 15:04:05.000")),
			"ClientIP": c.ClientIP(),
		})
	})

完整代码

index.html 文件代码：

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="test1">
    <div ref="timenow"></div>
    <div ref="clientIP"></div>
    <button @click="updateTimenow">按钮1</button>
</div>
</body>

</html>
<script>
    var apiurl = "http://localhost:10001/";
    var ShowGetTimeNow = "Show/GetTimeNow"
    var test1 = new Vue({
        el: '#test1',
        data: {
            time: 1
        },
        mounted() {
            this.$refs.timenow.innerHTML = "点击按钮更新当前时间";
            this.$refs.clientIP.innerHTML = "点击按钮获取ip";
        },
        methods: {
            // 点击按钮，更新时间
            updateTimenow: function () {
                var thisRef = this.$refs;
                axios({
                    method: 'post',
                    url: apiurl + ShowGetTimeNow,
                    responseType: 'stream'
                }).then(function (response) {
                    console.log(response)
                    thisRef.timenow.innerHTML = response.data.Time;
                    thisRef.clientIP.innerHTML = response.data.ClientIP;
                });
            }
        }
    })
</script>

main.go

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
	"time"
)

func main() {
	r := gin.Default()
	// 设置页面
	r.LoadHTMLGlob("template/*")
	// logo，这里不做详细的解释，可以自行百度
	r.StaticFile("/favicon.ico", "./template/favicon.ico")

	r.GET("/", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", nil)
	})
	// /Show/GetTimeNow 获取最新的时间
	r.POST("/Show/GetTimeNow", func(c *gin.Context) {
		timeNow := time.Now()
		// 返回一个Json数据
		c.JSON(200, gin.H{
			"Time":     fmt.Sprintf("时间: %s", timeNow.Format("2006-1-2 15:04:05.000")),
			"ClientIP": c.ClientIP(),
		})
	})

	// 如果是直接 r.Run() , 端口是默认 8080
	r.Run(":10001")
}