Vue.js 单页应用部署百度统计
前言
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码;所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量。
解决方法
在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面,这样每次router发生改变的时候都会执行一下统计代码,这样就达到了目的,代码如下:
router.afterEach( ( to, from, next ) => { setTimeout(()=>{ var _hmt = _hmt || []; (function() { //每次执行前,先移除上次插入的代码 document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove(); var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxx"; hm.id = "baidu_tj" var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); },0); } );
手机无须ROOT和修改hosts在本地测试安卓和H5应用
开发手机APP和 H5 应用经常需要在本地和线上环境分开测试,一般想到的操作都是修改hosts,我也一直这么干的,但手机上修改hosts是需要 ROOT权限的,这样太过麻烦,还有变砖头的风险,而且有些手机根本不能ROOT的。
忙和了一下午,总算完全达到预期,有点收获,下面说说重点,主要是两个:
- 本地 DNS 服务
- 网络代理
做个本地的 DNS 服务,有点像DNS劫持的感觉,这个是一劳永逸的办法
首先,你需要一个Linux 虚拟机或一台服务器
我下面的配置使用的 Centos7.0 系统,不通版本可能有些差别的。
一、安装 DNSMasq
# 安装
yum install dnsmasq -y
service dnsmasq start
# 编辑配置参数
vi /etc/dnsmasq.conf
# 查找 resolv-file 去掉注释符,添加文件路径
# 表示 dnsmasq 会从这个指定的文件中寻找上游dns服务器
resolv-file=/etc/resolv.conf
# 查找 no-hosts , 确保前面有 # 井号的(表示被注释掉的),否则 hosts 配置不起作用
# 监听的IP
listen-address=127.0.0.1,192.168.0.103
strict-order
addn-hosts=/etc/hosts
cache-size=32768
# 配置到网卡参数,centos7 和 6 的网卡名是不同的,用ifconfig 查看替换下
# centos 7 以前
vi /etc/sysconfig/network-scripts/ifcfg-eth0
# centos7 不一定相同
vi /etc/sysconfig/network-scripts/ifcfg-enp3s0
# 最多只能写3个,注意原配置中若存在则需要调整
DNS1=127.0.0.1
DNS2=192.168.0.103
DNS3=202.101.172.35
#DNS3=202.101.172.47
# 保存后, resolv.conf 文件内容会自动更新的
cat /etc/resolv.conf
# 查看DNS是否已添加进去
# 注册服务
chkconfig dnsmasq on
# 重启
/etc/init.d/dnsmasq restart
# centos7 下使用的命令
systemctl restart dnsmasq
# 检查是否安装成功
netstat -tunlp|grep 53
yum install bind-utils
# 测试是否启用 DNS 配置
dig m.ai9475.com
# 编辑 hosts 文件,配置本地 DNS 劫持域名 IP 的映射关系
vi /etc/hosts
192.168.0.105 m.ai9475.com
这样服务端的 DNS 劫持就基本配置好了
下一步还需要在手机上设置 DNS 对应的 IP,
打开 网络设置 -> wifi连接 -> 修改网络 -> 高级 -> 静态IP方式 -> 修改第一个NS的IP即可,第二个可用正常的公网DNS
如下图:
最后注意:修改 hosts 之后,需要重启 dnsmasq 还有 network 最好也重启
二、使用本地网络代理
这个方法比较有局限性,对 H5 网页应用还可以,对部分原生 APP 可能无效哦,但有个好处是配合一些软件可以做前端的抓包查看,对测试接口之类的查看数据很有用
我用到过两个软件,
1. Fiddler
这个软件使用很方便,网上有很多介绍,这里就不说了,但据说仅支持 windows 平台
2. Whistle
这个是开源的项目,跨平台,我目前用的是这个,配置也很简单
下面简单说下如何安装使用
依赖 Nodejs,所以先安装 nodejs
我这里图方便,就用 yum 的方式安装了
curl --silent --location https://rpm.nodesource.com/setup_4.x | bash -
yum install -y nodejs
下载速度可能有些忙,10KB/s 下载了好半天才下完,耐心等吧
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g whistle
w2 start
这样就完成了。。。
查看代理请求数据,就是抓包数据
http://127.0.0.1:8900
http://127.0.0.1:8899
:8899 是代理的端口,但也可以查看抓包数据
两个端口都可以看,下图看看效果先(图片可以直接拖拽查看大图)
其他的就直接看官方说明文档吧,中文的,很清晰明了
https://avwo.github.io/whistle/install.html
后面就是手机上操作和上面的 DNS 设置是同一个地方
打开 网络设置 -> wifi连接 -> 修改网络 -> 高级 -> 代理(手动配置) -> 填写局域网中服务器的IP,如192.168.0.103,端口 8899
如下图:
最后就是修改服务器上的 hosts,参考上方 DNS 配置 hosts 的操作是一样的
差不多就这样设置好了。
最后需要注意的就是清除手机上的缓存,一定要关闭浏览器和应用,清理内存后再打开,否则手机上的 DNS 和网络设置可能没有切换过来的。
以上配置我都是在 Android 设备上测试的, iOS 没有应用可测试,不过按理说应该是一样的效果的。
虽然代理的方法对有些APP 不一定有用,但建议还是 DNS 和 代理一起上吧。。。就这样了。
10步了解产品经理要懂的应用架构
互联网发展至今,从个人网站到大型购物网站,不同类型的网站导致了需求架构的不同。每个网站都有其对应的技术架构。不同的层级之间架构也不尽相同。设计产品的时候,哪些架构是产品经理需要了解的呢?我们一起来看看。
101款web应用推荐 从联系人管理到Email营销(下)
随着web应用多样化的今天,很难选择,更不用说发现一个满足需求的自己想要的应用了。有太多非常棒的应用,其中很多将让你或你的事业受益。
从思维导图、设计,到开发协作,项目跟踪和财务,这101款很棒的应用,对于初创公司或商业公司一定会降低成本,提高生产率。
本文作为“101款web应用推荐”的下篇,介绍了从联系人管理到市场营销的基于web的应用。
联系人管理
Soocial
Soocial 是个设计优雅的联系人管理应用。
Bizzvo
在线联系人管理、Email营销、便条等功能。
Oprius
销售和联系人管理软件。
Stazzle
Stazzle 可让你跟踪联系人及提及内容,来自于Outlook, Yahoo和Gmail地址数据库。
客户关系 管理
WORKetc
WORKetc是针对小公司的在线CRM系统,该应用也可以处理项目和记账。
Zoho CRM
Zoho’s CRM 是个著名开源vTiger CRM 平台的云实现。
salesforce
salesforce 是云CRM系统的领导者。
Tactile CRM
通过tactile CRM,你可以跟进与业务往来有关系的人或公司,沟通、任务安排等。
Web CRM
Web CRM 系统提供用户友好的价格适中的在线CRM系统。
BatchBook
BatchBook 是个社会化CRM,帮助跟踪图片、Tweets、博客等。
Highrise
Highrise 来自37 signals,界面非常友好。
solomon
solomon 帮助跟踪客户和web或iPhone应用的会话。
Bizroof
Bizroof 号称最easy的CRM,UI很清爽。
Relenta
Relenta 是个CRM应用,帮你解决处理email的数据碎片,以及任务管理。
FreeCRM
FreeCRM提供免费CRM服务,最多5用户和10MB存储,更多需求,需要升级至专业版本。
项目管理
Basecamp
Basecamp 是个基于web的项目管理系统,很多知名公司在使用。
SUBERNOVA
非常不错的项目管理应用。
Staction
Staction 是个基于项目管理的简单的通讯工具。
No Kahuna
特点就是简单、可靠,保证每个人都能上手。
Planix
Planix 是个托管的应用,可使项目团队持续、准确地评估资源、进度和软件开发项目的成本。
Teamness
Teamness是个在线项目协作工具,基于web,可帮助团队组织项目数据和与同事或客户分享。
Task2Gather
Task2Gather是个免费的在线服务,针对任务和项目管理。可组织个人、家庭、社交、业务等,保持你的所有评论于一处。
COMINDWORK
COMINDWORK 是个项目管理应用,支持导入/导出,可与来自微软项目的Gantt Charts协同。
5pm
5pm 是个直观的项目管理和协作工具,可输出客户报告。
teamwork
teamwork 是个独特的项目管理工具,一个屏幕显示所有的项目动态。
Teambox
Teambox 是个类似twitter的项目协作工具。
Wrike
Wrike 是个获奖的项目管理应用,可处理来自单一工作区的50个或更多的项目。
Torch
Torch 是整合现存Google Apps 帐户包括Google Docs的很不错的web应用。
projectplace
projectplace 是个云项目管理工具,被大量使用,包括知名公司。
账单 & 发票
Billing Boss
Billing Boss 是个免费的在线发票应用,基于智能手机。
Harvest
Harvest 是个漂亮的开发票应用,以及时间跟踪。
FreshBooks
该发票应用已经有大量的客户,看图便知。
WorkingPoint
WorkingPoint是个一站式服务的网站,可满足你所有的商业管理需求。
Wiki
PBworks
最初是在线wiki应用,后拓展到协作和社会化外部应用。
Socialtext
Socialtext 通过wiki、微博、博客的形式在团队之间交互信息、想法、创意。
Confluence
Confluence 是个知名的企业Wiki解决方案,完美整合Microsoft Sharepoint server。
Wikidot
Wikidot 是个负担得起的托管的Wiki解决方案,针对小公司、个人、教育和企业使用。
ClearWiki
私有的托管Wiki,理想的wiki解决方案。
时间管理
Paymo
Paymo 是个在线时间跟踪应用,可输出你和你的团队的时间消耗的报告。
Qcron
Qcron是针对项目管理的基于web的应用。
Office Timesheets
一个完全的时间和项目跟踪系统,通过托管和安装软件的形式。
Motismo
Motismo是个简单的时间跟踪和发票解决发难,针对小企业和个人。
Time59
Time59是个时间和账单软件,基于web。
Tempo
Tempo 可使你跟踪时间,无论你是通过Bookmarklet, Widget, Twitter, iPhone, SMS, Email或手机浏览器。
TSheets
除了跟踪时间之外,它还可以添加地理数据。
Syncd
Syncd 是个时间跟踪应用,全球上千家公司在使用。
Tick
Tick 应用可以让你跟踪时间帮助控制预算。
TrackMyPeople
TrackMyPeople 可提供你团队的实时报告,具有强大的报告功能。
税收管理
TurboTax
TurboTax 是非常知名的保税系统,提供审计保护功能。
H&R Block
H&R Block 可以提供离线税务咨询和申报。
Efile
Efile 提供免费报税解决方案。
HelpDesk
Zendesk
Zendesk 是个基于云的客户支持解决方案。
Mojo Helpdesk
Mojo Helpdesk 提供集中式的服务台解决方案。
helpdesk pilot
helpdesk pilot 可供15天免费试用,少数的在线web应用之一。
Kayako
Kayako 服务台软件,非常易于安装,使用也OK。
UserScape
UserScape提供功能丰富、简单易用、世界一流的服务台软件,不会打破你的预算 。
市场营销
ConstantContact
ConstantContact 是个重量级的Email营销工具,提供在线在线调查、事件营销等。Plus 60天免费试用。
Breeze
Light CMS 的团队所开发,Breeze 是个具有web 2.0特性的email营销应用。
IFModules Campaign Manager
创建、发送HTML邮件,管理多个列表和自动从站点收集Email。
101款web应用推荐 从思维导图到Bug跟踪(上)
随着web应用多样化的今天,很难选择,更不用说发现一个满足需求的自己想要的应用了。有太多非常棒的应用,其中很多将让你或你的事业受益。
从思维导图、设计,到开发协作,项目跟踪和财务,这101款很棒的应用,对于初创公司或商业公司一定会降低成本,提高生产率。
本文作为“101款web应用推荐”的上篇,介绍了从思维导图到Bug跟踪的基于web的应用。
思维导图
mindmeister
MindMeister拥有所有思维导图工具所需要具备的标准功能,唯一不同的是,它是在线的,且拥有良好的协作能力。
目前MindMeister提供免费版本,以及每月4美元拥有所有功能的付费版本,还有每月2.8美元的小组工具包。不过,对于普通用户来说,免费版也就够用了,免费版本的思维导图制作提供创建、分享、导入、导出和协作功能。
设计
inPreso
inPreso是一个可用来制作高效率多媒体演讲稿的出色工具。利用平面和立体的图案、特效、动画和高效能绘图等工具, 您的演讲将会更为精彩。
Pencil
Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样。Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件。
PROTOSHARE
创建网站原型的线框图设计工具。
iPlotz
iPlotz可以帮你迅速创建可点击导航的网站和软件应用的雏形和线框图。你可以邀请其他人给出意见,你还可以管理开发人员和设计人员的任务,创建新的项目。
gliffy
除了线框图设计之外,gliffy可以帮助你创建业务流程图、组织结构图和网络图。
HotGloo
HotGloo是一个易于且美观的网络线框应用程序,它可以帮助设计师创建一个在早期发展阶段的网站互动的概念原型,所有的操作所见即所得。
开发
Kodingen
Kodingen是个基于web的集成开发环境(IDE),支持写代码和应用的版本控制,支持语言包括Python, PERL, PHP, Ruby on Rails, Fast CGI等。
Bespin
Bespin 是由 Mozilla Labs 所推出的一个新项目,该项目旨在构建基于 Web 的代码编辑工具。Bespin 具有的一些亮点包括:支持语法高亮显示、能够实时协作编辑、集成类似 vi/Emacs 的命令行、高效的文件浏览器、可扩展、跨平台等。
更多基于云的IDE可查看 “5 Great IDEs to Start Coding in the Cloud“。
协作
Scribblar
Scribblar是一个简单而有效的在线协作工具,以创建协作房间 (Room)的形式可邀请同事和同学在线协助完成具体的项目。 Scribblar 是由专门从事于富媒体应用、社会性网站以及增值服务的 Muchosmedia 公司开发的一款在线协助办公软件。它提供了一种与其他人全方位接触与协同办公的方式,广义上讲,任何人都可以在 Scribblar 中轻松创建专属于自己团队的房间(Room),并邀请更多成员参加其中,以便针对具体的项目进行深层次的在线讨论与交流。Scribblar 为每个房间配备了用户列表、绘图工具、白板、文字/语音聊天以及文件传输工具等基本工具。另外,还必须指出的是,如果你购买了 Scribblar的PRO版本,将会获得更多的定制的功能,并提供给你可嵌入到任何页面中的JS代码。
Sync.in
Sync.in 是个基于web的word处理器,支持实时协作。
版本控制
Beanstalk
GitHub
GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这 样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单:首先点击项目站点的“fork”的按 钮,然后将代码检出并将修改加入到刚才分出的代码库中,最后通过内建的“pull request”机制向项目负责人申请代码合并。
Springloops
Springloops 是一个在线的源代码管理工具,主要针对 Web 开发人员与开发团队协作。允许多用户共同编写同一个代码项目,或者与大家共享你的代码,类似于 WIki 一样,会保存多个历史版本,不会丢失或覆盖、改变源代码档案。还支持管理人员设定协作者与访客权限,可以在同一个项目内快速协作,以及有力的保护。 Springloops 可以简单的提供开发者一个有效率的解决方案,减少重复性劳动,非常实用。
分析
Google Analytics
Google Analytics是个强大的流量统计工具,免费,好用。
Clicky
Clicky流量统计工具与Google Analytis很像,更强之处是支持实时流量分析。
GoingUp
使用Ajax,用户界面很炫,也是世界级的流量分析工具,同时也是个SEO应用。
Yahoo Web Analytics
雅虎流量统计,是个高度定制化、企业级的站点分析系统。
Omniture
Adobe所有,Omniture被大量的世界500强公司使用。
Compete
帮助你从点击分享中受益。
comScore
comScore是个市场调研公司,提供市场数据和服务,针对大公司。
Bug 跟踪
Elementool
Elementool 是个在线bug/问题跟踪工具。
JIRA
JIRA是集项目计划、任务分配、需求管理、错误跟踪于一体的商业软件。JIRA创建的问题类型包括New Feature、Bug、Task和Improvement四种,还可以自己定义,所以它也一是过程管理系统。Jira融合了项目管理、任务管理和缺陷管 理,许多著名的开源项目都采用了JIRA。
FogBugz
FogBugz是基于web的bug跟踪应用,它有一组非常好用的插件,推荐尝试。
BUGtrack
BUGtrack Bugtracker是一个完整的bug/issue管理系统.它使用Java Servlet作为web前台,MySQL数据库作为后台.
Colabolo
Colabolo是一款免费的(非开源)(仅beta版,正式版$10左右),简单的,轻量级的像email一样简单的团队任务管理器。
可以有效的分配,跟踪,解决分配任务,商务问题 , 销售指导,审批请求,文档审查, 和其他合作性任务。
用Colabolo可以有效的管理虚拟团队,中小型的商务和企业团队 , 或者当作和客户交流的桌面帮助工具。
Colabolo是一款Adobe AiR软件程序,可以运行于任何平台上。也许不能处理所有的团队情况,但是Colabolo是一款非常轻量级的软件,占用非常少的系统资源,对于正版用户 来说也是 非常便宜的(用beta版免费,正式版$10左右)。Colabolo也即将加入对iPhone和 iPod用户的支持,可以随时随地的运用。
AdminiTrack
AdminiTrack 是高效的基于web的问题跟踪、缺陷跟踪和任务跟踪软件,面向专业的软件开发团队。
BugHost
BugHost,免费托管的Bug跟踪、缺陷跟踪和问题管理系统。