欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端统计用户访问以及文章阅读

程序员文章站 2022-03-19 15:01:40
...

百度不蒜子统计工具有各种原生html 教程。我这边写一个关于vue 中使用的

npm install busuanzi.pure.js --save  

然后我已经将这个写成一个组件了。
前端统计用户访问以及文章阅读
页面显示效果:
前端统计用户访问以及文章阅读

关于数据问题: 这个统计的是localhost 所有的数据。所以才会这么多。你换成个人域名将不会,
另外介绍下这个项目主要是关于vue 的。 里面有详细介绍vuex .mixin , component https://github.com/Tom-cy/mi_nj

 <template>
  <div class="busuanzi">
    本站总访问量
    <span id="busuanzi_value_site_pv"></span>次
    <br />本站访客数
    <span id="busuanzi_value_site_uv"></span>人次
    <br />本文总阅读量
    <span id="busuanzi_value_page_pv"></span>次
    <br />
  </div>
</template>

<script>
/* 不蒜子访问量统计 */
let script

export default {
  mounted() {
    script = require("busuanzi.pure.js")
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (to.path != from.path) {
        script.fetch()
      }
    }
  },
  methods:{
    // ajax(){

    // }
  }
//   function BusuanziCallback_1048604830937(b) {
//   console.log(b)
// }
// $.ajax({
//   type: "get",
//   url: "//busuanzi.ibruce.info/busuanzi",
//   dataType: 'jsonp',
//   jsonp: 'jsonpCallback',
//   jsonpCallback: 'BusuanziCallback_1048604830937',  //后面跟的这个是个随机数,能跟上面那个函数对应起来就行了。
//   beforeSend: function (xhr) {   //beforeSend定义全局变量
//     xhr.setRequestHeader("Referer", "http://www.xunhanliu.top")  //浏览器上无效!!W3C标准文档规定,此header只能由浏览器进行设置,不允许开发者设置。当然你用其他语言开发就另说了。
//   },
//   success: function (data) {
//     $('#busuanzi_value_site_pv').text(data.site_pv)
//     $('#busuanzi_value_site_uv').text(data.site_uv)
//     $('#busuanzi_value_page_pv').text(data.page_pv)
//   },

// }
};
</script>
相关标签: 个人