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

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

npm install busuanzi.pure.js --save  

然后我已经将这个写成一个组件了。

页面显示效果：

关于数据问题： 这个统计的是localhost 所有的数据。所以才会这么多。你换成个人域名将不会,
这边可能会出现一个路由$route变化 获取不到的问题。 遇到这个问题把 $watch代码写到app.vue中。

另外介绍下这个项目主要是关于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>