初学 go 入门-案例-教程-记录（11）webapi 框架 Gin（三）前端 Post 请求，刷新时间

最新推荐文章于 2023-05-18 08:00:00 发布

盗理者

最新推荐文章于 2023-05-18 08:00:00 发布

阅读量332

点赞数 2

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

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

版权

go 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

初学 go 入门-案例-教程-记录（11）webapi 框架 Gin（三）前端 Post 请求，刷新时间

初
目录展示
- 核心代码
- 结果展示

初

希望能写一些简单的教程和案例分享给需要的人
欢迎进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 这两个文件

在这里插入图片描述

核心代码

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>
    <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 = "点击按钮更新当前时间";
        },
        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;
                });
            }
        }
    })
</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()
		c.String(200, fmt.Sprintf("时间: %s", timeNow.Format("2006-1-2 15:04:05.000")))
	})

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

结果展示

在这里插入图片描述

我们点击按钮 “按钮1”
在这里插入图片描述

盗理者

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
初学 go 入门-案例-教程-记录（11）webapi 框架 Gin（三）前端 Post 请求，刷新时间

初学 go 入门-案例-教程-记录（11）webapi 框架 Gin（三）前端 Post 请求，刷新时间初目录展示核心代码结果展示初希望能写一些简单的教程和案例分享给需要的人欢迎进qq群交流：546496965我们之前接触了如何用搭建 webapi 框架 Gin https://blog.csdn.net/qq_36051316/article/details/120196088，现在我们要学习如何使用请求APIgin ： https://github.com/gin-gonic/gin目录展示
复制链接

扫一扫