基于go给网站做一个简单的访客个数统计

目录

需求：

解决方案：

服务端：

客户端：

onclick

fetch

 cookie

缺点：

效果：

---

需求：

每当一个访客点击了网站的照片时，网站就将访客个数加1.但是假如同一个访客多次点击照片，则计数不加1.

解决方案：

服务端：

在main函数里声明变量

iVisitorNum := 0

每当用户点击照片时，就访问 "网址/lottery"。相应的，服务器端变量+1

package main

import (
	"fmt"

	"strconv"

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

func fnRoot(c *gin.Context) {
	c.Header("Content-Type", "text/html; charset=utf-8")
	c.File("./index.html")
}

func fnObj(c *gin.Context) {
	var name = "leaf.obj"
	c.Header("Content-Type", "text/plain; charset=utf-8")
	c.Header("Content-Disposition", "inline;filename=\""+name+"\"")
	c.File("./leaf.obj")
}

func main() {
	fmt.Println("hello gin!")
	iVisitorNum := 0
	r := gin.Default()

	r.GET("/*action", func(c *gin.Context) {
		req := c.Param("action")
		fmt.Println(req)
		switch req {
		case "":
			fnRoot(c)
		case "/string":
			c.String(200, "string")
		case "/obj":
			fnObj(c)
		case "/picture":
			c.File("./grass.jpeg")
		case "/json":
			c.JSON(200, gin.H{
				"message": "Hello gin",
			})
		case "/lottery":
			iVisitorNum += 1
			c.String(200, strconv.Itoa(iVisitorNum))
		default:
			c.File("." + req)
		}
	})

	r.Run(":80")
}

客户端：

onclick

被点击的图片触发lottery函数：

<div align="center"><img src="img/Bern.jpg" width="300" height="700" onclick="lottery()"/></div>

fetch

 lottery函数通过fetch函数向服务器发起GET请求，URL是网址/lottery

GET返回的结果res经then转化为字符串txt，随后又一次通过then调用alert函数显示，并写入cookie

fetch("lottery")
			.then(res=>res.text())
			.then(txt=>{
				alert("欢迎点击本宝！您是第" + txt + "位点击本宝的访客。第2，3，4，5，10，15，20，30，40，50位访客请拍照或者截屏本页面，联系宝妈宝爸给您发红包");
				document.cookie = "VisitorNum=" + txt;});

 cookie

为什么需要cookie?假如某个用户多次点击图片，我不希望其计数不断增加。所以用cookie记录其第一次点击后的计数。此后再点击图片，js代码会首先检查cookie中是否已经保存了VisitorNum。假如已经点击过，则js不会再向服务器发送请求来获取计数，而是直接取cookie里的记录。

<script>
	function lottery()
	{
		var ans = "";
		var oCookie = document.cookie.split('; ');
        for (var i = 0; i < oCookie.length; i++) {
            var temp = oCookie[i].split('=');
            if ( temp[0] == "VisitorNum") {
                ans = temp[1];
				break;
            }
        }

		if(ans ==  ""){
			fetch("lottery")
			.then(res=>res.text())
			.then(txt=>{
				alert("欢迎点击本宝！您是第" + txt + "位点击本宝的访客。第2，3，4，5，10，15，20，30，40，50位访客请拍照或者截屏本页面，联系宝妈宝爸给您发红包");
				document.cookie = "VisitorNum=" + txt;});
		}
		else {
			alert("欢迎点击本宝！您是第" + ans + "位点击本宝的访客。第2，3，4，5，10，15，20，30，40，50位访客请拍照或者截屏本页面，联系宝妈宝爸给您发红包");
		}
	}
</script>

缺点：

假如这个用户换了一个浏览器，那么计数还是会增加的。

效果：