前端统计用户访问以及文章阅读
程序员文章站
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>
上一篇: Spring 定时器