领导提出了一个需求，写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：布尔值，用来做判断是否单独触发上报接口

下面就是我们的最后一步，如何在axios的config.headers添加自字段

来呀来呀，看代码

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)
})