大家好我是CloudCoder，译为云时代的码农，专注分享linux/go/java等相关技术。

如何使用前后端统计页面的访问量？

这是我的一个github项目

链接为:https://github.com/music-player

这次我们不谈音乐播放器不谈界面的设计，只讲讲该页面左上角的访问量是如何进行设计的。

前言

在设计一个功能之前，一定要先想好思路。统计页面的访问量，我们可以通过页面的刷新次数去记录。在页面每次刷新的时候去请求后端的接口，后端链接Redis数据库并将对应的键值加1，并将该键值返回给前端。

技术栈

Go web框架gin
Redis(Key-Value数据库)
Vue

为什么使用Redis而不使用Mysql呢？

性能极高 – Redis能读的速度是110000次/s,写的速度是81000次/s
原子 – Redis的所有操作都是原子性的，要么执行要么不执行。

后端核心代码

service层

执行内部逻辑，并去请求Redis数据库返回键值给controller层

使用db.Incr(key string)即可将该键的值加1

有时候db的连接是坏的，因此检测到执行失败的时候进行递归调用，保证本次调用成功执行

最后返回键值

package service

func AddClickCount() string {    //Incr即键值自增     _, err := db.Incr("music_player_count").Result()    //当操作失败时递归调用     if err == io.EOF {      AddClickCount() }    //返回该键值     return get("music_player_count")}

func get(key string) string{     result, err := db.Get(key).Result()     if err != nil {         log.Fatal(err) }     return result}

controller层

返回Json数据给前端

{"code":200, "data":count}

package controller

func ClickCount(c *gin.Context) {    //调用service层的AddClickCount()函数执行逻辑     count := service.AddClickCount()    //返回{"code":200, "data":count}     c.IndentedJSON(200, gin.H{          "code": 200,          "data": count,     })}

router层

router层暴露路由

可以使用http://localhost:8081/api/v1/click进行调用

package router

func LoadRouter(e *gin.Engine) {    //该路由回去请求controller层的ClickCount函数    //controller层又回去调用service层的AddClickCount函数进行操作    e.GET("/api/v1/click", controllers.ClickCount)}

程序入口

package main

    r := gin.Default()     //加载路由    routers.LoadRouter(r)    //后端服务端口8081    err := r.Run(":8081")    if err != nil {         log.Fatal("run err")    }

测试后端程序

每请求一次该路由，值就会加1

前端代码

前端的难点在于

如何与后端进行交互
如何在页面刷新的时候去调用后端请求

解决方案

使用axios与后端进行交互

methods: {     clickCount:function(){       var that = this;       axios.get('http://localhost:8081/api/v1/click')       .then(function(response) {           that.click = response.data.data;       }, function(err){})     }   }

Vue中的mounted可以在模板渲染html后进行调用，可以自动调用methods中的方法，而不必使用按钮点击进行触发
```
mounted(){     this.clickCount();   }
```

前端完整代码

html><html lang="en"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <meta http-equiv="X-UA-Compatible" content="ie=edge" />  <script src="./js/function.js">script>  <script type="text/javascript">checkLog()script>  <title>abouttitle>head><body>

  <div id="app">    访问量: {{ click }}  div>

  <script src="./js/vue.js">script>  <script src="./js/axios.min.js">script>  <script type="text/javascript">var app = new Vue({el: "#app",data: {click: ''      },methods: {clickCount:function(){var that = this;          axios.get('http://localhost:8081/api/v1/click')          .then(function(response) {              that.click = response.data.data;          }, function(err){})        }      },      mounted(){this.clickCount();      }    })script>body>html>

前端测试

该音乐播放器的完整代码示例在我的Github项目中

链接为：

https://github.com/nj-jay/music-player

欢迎star

【往期推荐】

一起来捋一捋前后端分离登录过程的思路并实现全过程

后端数据成功返回页面不渲染_如何统计页面访问量，看这一篇就够了相关推荐

数据产品必备技术知识：机器学习及常见算法，看这一篇就够了
大家都知道,产品经理需要懂技术,很多面试官都偏好有技术背景的同学,毕竟产品经理经常要和开发同学相爱相杀.当然也不是一定要求能够精通,但是至少不要让这块成为沟通的障碍,懂点技术,实际工作中也能少被开发同 ...
后端数据成功返回页面不渲染_在浏览器地址栏输入地址到页面渲染完成发生了什么？（下）...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
vue 后端数据成功返回页面不渲染_vue能获取到数据数据却渲染不到页面上,为什么？...
问题描述从后台可以拿到数据,并打印在控制台但是就是渲染不到页面,我也不知道是为什么,感觉都正常问题出现的环境背景及自己尝试过哪些方法尝试用let _this = this来代替this但是还是没 ...
假设以带头结点的循环链表表示队列_关于反转链表，看这一篇就够了！
本期例题:LeetCode 206 - Reverse Linked List[1](Easy) 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL ...
minio存储类型归档管理页面_软件定义存储，看这一篇就够了
minio存储类型归档管理页面_软件定义存储,看这一篇就够了_婷婷与li的博客-CSDN博客请看链接文章来源于TaoCloud ,作者刘爱贵 1.SDS科普 SDS(Software Defin ...
api网关选型_如何轻松打造百亿流量API网关？看这一篇就够了（下）
如何轻松打造百亿流量API网关?看这一篇就够了(上) 上篇整体描述了网关的背景,涉及职能.分类.定位环节,本篇进入本文的重点,将会具体谈下百亿级流量API网关的演进过程. 准备好瓜子花生小板凳开始积累 ...
docker 删除所有镜像_关于 Docker 镜像的操作，看完这篇就够啦 !（下）| 文末福利...
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
python装饰器功能是冒泡排序怎么做_传说中Python最难理解的点|看这完篇就够了(装饰器)...
https://mp.weixin.qq.com/s/B6pEZLrayqzJfMtLqiAfpQ 1.什么是装饰器网上有人是这么评价装饰器的,我觉得写的很有趣,比喻的很形象每个人都有的内裤主要是 ...
视频编码h264怎么看_怎么用短视频带货最有效？看这一篇就够了
原标题:怎么用短视频带货最有效?看这一篇就够了在抖音.快手等平台上做"短视频带货",在当下已经不是一个新鲜事儿了.越来越多的品牌方深刻认识到把短视频作为战略级布局,是企业没得选的 ...

后端数据成功返回页面不渲染_如何统计页面访问量，看这一篇就够了

如何使用前后端统计页面的访问量？

前言

技术栈

后端核心代码

service层

controller层

router层

程序入口

测试后端程序

前端代码

前端测试

后端数据成功返回页面不渲染_如何统计页面访问量，看这一篇就够了相关推荐

最新文章

热门文章

后端数据成功返回 页面不渲染_如何统计页面访问量，看这一篇就够了

如何使用前后端统计页面的访问量？

前言

技术栈

后端核心代码

service层

controller层

router层

程序入口

测试后端程序

前端代码

前端测试

后端数据成功返回 页面不渲染_如何统计页面访问量，看这一篇就够了相关推荐

最新文章

热门文章

后端数据成功返回页面不渲染_如何统计页面访问量，看这一篇就够了

后端数据成功返回页面不渲染_如何统计页面访问量，看这一篇就够了相关推荐