美文网首页让前端飞Web前端之路前端开发笔记
vue spa应用加入ip访问统计功能(前端)

vue spa应用加入ip访问统计功能(前端)

作者: 李佳明先生 | 来源:发表于2018-12-05 16:02 被阅读17次

最近做网站的时候有需求,是在前端加入用户省份收集统计功能。
这里我们使用搜狐的接口,这个接口适用于所有平台及浏览器:

  1. 在入口页面index.html里添加如下代码(返回的数据里包含ip地址和省份):

  <!-- MAIN JS -->
  <script src="./static/js/main.js"></script>
  <!--加入ip统计代码-->
  <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</html>
  1. 在index.vue里的mounted里加入代码:
mounted:function () {
      var that=this;
      //等待js都加载完之后,调用countip方法
      window.onload=function (){
        that.countIp()
      }
    },
  1. 发送给后台,让后台去做处理:
countIp:function(){
        axios.post(api.countIp,returnCitySN).then(function (res) {
          console.log(res);
        }).catch(function (error) {
          console.log(error);
        })
      },

相关文章

  • vue spa应用加入ip访问统计功能(前端)

    最近做网站的时候有需求,是在前端加入用户省份收集统计功能。这里我们使用搜狐的接口,这个接口适用于所有平台及浏览器:...

  • 一次性解决 IE 升级提示

    随着前端框架的流行 各种SPA应用 vue ang react 难免会遇到恐怖的IE 因为不兼容的IE版本访问网站...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • vue路由的两种模式,hash与history

    对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-route...

  • vue路由mode模式:history与hash的区别

    引言 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue...

  • 前端 SPA 单页应用数据统计解决方案 (ReactJS / V

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一、百度统计的代码: UV PV 统计...

  • FY-7216 9-vueRouter

    vue-router Router 路由是伴随着 SPA (单页面应用存在的)spa出现后,前端可以自由的控制组件...

  • vue路由的两种模式

    hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系...

  • Vue 路由模式切换

    路由切换模式:{hash/ history} 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),...

网友评论

    本文标题:vue spa应用加入ip访问统计功能(前端)

    本文链接:https://www.haomeiwen.com/subject/roqwcqtx.html