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