领导提出了一个需求，写pvuv要统计用户的访问量和喜好，俺也没写过，但是我们组的后台非常的强大，他总结了办法，身为前端的我只要在每次上报接口的时候顺带携带上headers头部字段即可。
##我们直接看代码吧，这是一个在vue项目里utils封装的一个js文件，命名为PVUV.js
import Cookies from 'js-cookie' //取到用户信息唯一标识
import router from '../router' //获取到路由表来监听当页的路由
import request from './request' //封装的axios请求
let ipobj = {}
// 把当前时间换成yyyy-mm-dd hh:mm:ss格式
function currentDate(date){
let year = date.getFullYear(); //年 从 Date 对象以四位数字返回年份
let month = date.getMonth() + 1; //月 从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
let day = date.getDate(); //日 从 Date 对象返回一个月中的某一天 (1 ~ 31)
let hours = date.getHours(); //小时 返回 Date 对象的小时 (0 ~ 23)
let minutes = date.getMinutes(); //分钟 返回 Date 对象的分钟 (0 ~ 59)
let seconds = date.getSeconds(); //秒 返回 Date 对象的秒数 (0 ~ 59)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
//修改小时格式
if (hours >= 0 && hours <= 9) {
hours = "0" + hours;
}
//修改分钟格式
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes;
}
//修改秒格式
if (seconds >= 0 && seconds <= 9) {
seconds = "0" + seconds;
}
//格式(yyyy-mm-dd hh:mm:ss)
let currentFormatDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
return currentFormatDate;
}
// 获取当前页面的标识 以路由每个页面的name为准
router.beforeEach((to,from,next)=>{
let urlName = to.meta.title?to.meta.title:"";
let preUrl = from.meta.title?from.meta.title:"";
window.sessionStorage.setItem("url",urlName.replace(/\s+/g,'')) //当前页面 pg
window.sessionStorage.setItem("preUrl",preUrl.replace(/\s+/g,'')) //上一个页面 prepg
next()
})
ipobj.usid = Cookies.get('userName'); //用户的唯一标识 usid
// ipobj.ip = window.returnCitySN['cip']; // 获取电脑的ip ip
ipobj.time = currentDate(new Date())
// 获取当前触发的事件 点击触发事件才会上报
function getEvent(e,type){
//type是非上报接口，普通有接口要触发的按钮传true
if(type){
// 从新获取事件和当前事件 把普通接口为true的值赋值 就return不走上报接口了
ipobj.time = currentDate(new Date())
ipobj.event = e;
ipobj.flag = type;
return
}
// 需要上报接口 恢复默认值
ipobj.flag =false
ipobj.time = currentDate(new Date()) //获取当前时间 time
ipobj.event = e; //获取当前触发的事件 event
setTimeout(()=>{
ipobj.pg = window.sessionStorage.getItem("url")?window.sessionStorage.getItem("url"):""
ipobj.prepg = window.sessionStorage.getItem("preUrl")?window.sessionStorage.getItem("preUrl"):""
request.post("上报的接口",{},false).then(res=>{})
},200)
}
// 精确获取当前在哪个页面的那个模块
function getBl(e){
ipobj.time = currentDate(new Date()) //获取当前时间 time
ipobj.bl = e.replace(/\s+/g,'');
request.post("上报的接口",{},false).then(res=>{}) //获取在页面的那个模块内 bl
}
export default {
ipobj,//要传给headers的值{}
getEvent,//要抛出挂载到Vue全局在每个页面触发事件时调用，参数2个，（事件类型，布尔值——点击触发事件的普通接口传true）
getBl //获取到某个页面的某个模块
}
封装完后，我需要在每个页面触发事件的时候调用一些方法，为了方便起见，我把这个方法引入main.js挂载在了全局上，方便每个页面使用
main.js
import pvuv from '@/utils/PVUV'
Vue.prototype.$pvuv = pvuv;
我们后台的初衷是在现有的接口触发时，顺带携带上headers字段信息，一开始我没有做限制之前，每次触发接口都会携带，这样是违背初衷的，是不合理的。
比如：
1、某个页面有save保存事件按钮，此时会触发保存的接口，顺带携带headers字段
2、有的时候进入某个页面会触发请求列表的一些接口，此时我们是不需要headers字段的
3、当触发一些事件改变了页面，但又没接口的，我们需要后台给我们提供一个单独上报的接口
触发的事件也是有分类的
第一种情况-----用户点击侧边菜单无现接口需单独触发上报接口
此时点击侧边菜单是没有现有的接口携带的，我们需要手动添加接口上报事件，添加点击事件，传的参数是click，调用我们pvuv的函数方法，取得当前触发事件类型
第二种情况-----用户点击报错触发保存接口，无需单独触发上报接口
我们同样在点击事件的时候传当前触发的事件类型
调用PVUV里面的函数方法是，是有两个参数 参数1：事件类型 参数2：布尔值，用来做判断是否单独触发上报接口
来呀来呀，看代码
import ipFile from "./PVUV" //引入封装的方法
axios.interceptors.request.use(config => {
// 当非上报接口，普通有接口要触发的按钮的时候为true添加headers头和点击无接口事件触发直接上报接口添加headers头
// 1、普通接口无需headers头 2、点击触发事件的普通接口需要headers头 3、非普通接口需要上报接口的需要headers头
if(ipFile.ipobj.flag||config.url == '/interpay-merchant-center/buriedPoint/submitData'){
//pvuv头部加的字段请求
config.headers = {
...config.headers,
'usid' : ipFile.ipobj.usid?ipFile.ipobj.usid:"", //用户的唯一标识
// 'ip' : window.returnCitySN['cip'], //前端取不到用户的ip地址，后台小哥哥获取啦
'time' : ipFile.ipobj.time?ipFile.ipobj.time:"", //当前时间
'pg' : ipFile.ipobj.pg?ipFile.ipobj.pg:"", //当前用户停留的所在页
"event": ipFile.ipobj.event?ipFile.ipobj.event:" ", //当前用户触发的事件类型
'bl' : ipFile.ipobj.bl?ipFile.ipobj.bl:"", //某个页面的某个模块
"prepg": ipFile.ipobj.prepg?ipFile.ipobj.prepg:"", //上一个页面
}
}
return config
}, error => {
Promise.reject(error)
})