Month: September 2018

Ubuntu: 安装MongoDB, Install MongoDB With Apache2, PHP 7.2 Support On Ubuntu 16.04 / 17.10 / 18.04

Step 1: Install Apache2 HTTP Server  – 安装Apache2,如果已经安装,请略过 命令行安装 sudo apt update sudo apt install apache2 开启和关闭apache2的命令 sudo systemctl stop apache2.service sudo systemctl start apache2.service sudo systemctl enable apache2.service http://localhost 打开后,如果可以显示下图,说明安装成功 Step 2: Add MongoDB Repository 添加 MongoDB 源 sudo… Read More

Gmail 中可使用的搜索运算符,Search operators you can use with Gmail

您可以使用被称为搜索运算符的字词或符号来过滤 Gmail 搜索结果,也可以结合使用运算符来进一步过滤搜索结果。 如何使用搜索运算符 转至 Gmail。 在搜索框中输入搜索运算符。 可使用的搜索运算符 提示:您使用搜索运算符执行搜索后,可以利用搜索结果为这些邮件设置过滤器。 搜索条件 搜索运算符和示例 指定发件人 from: 示例:from:amy 指定收件人 to: 示例:to:david 主题行中的字词 subject: 示例:subject:dinner 匹配多个字词的邮件 OR or { } 示例:from:amy OR from:david 示例:{from:amy from:david} 从搜索结果中排除邮件 - 示例:dinner -movie 使用邻近的字词查找邮件。利用数字表示字词之间隔着的字词数 AROUND 示例:dinner AROUND 5 friday… Read More

Chrome设置断点的各种姿势, js断点调试心得, Chrome DevTools 中调试 JavaScript 入门

在JavaScript代码中设置断点 刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作 以为在行号上单击一下就是打断点,就是会调试了:) 当然这也是最最基本的打断点的方式了,当然了,相较于 调试全靠alert 已经高端很多了。 首先需要打开Devtools切换到Source页签,然后在左侧file navigation中找到我们要设置断点的文件并打开。 在打开的页面上单击对应的行号即可设置断点。 同时也可以通过在行号上右键点击Add breakpoint来设置断点。 当断点触发时,整个页面会处于暂停状态,并会切换到Source页签断点处方便调试,直到终止该断点调试后页面才会继续运行。 设置断点的行号上会显示一个蓝色的矩形来告诉你这里有一个断点。 P.S. 当一个表达式跨行时,添加的断点会默认下移到该表达式结束后的一行 在JavaScript代码中设置条件断点 当知道了如何在行号上单击来添加断点,已经能满足最最最基本的调试了。 但如果遇到一些特殊情况,断点添加起来不是那么的舒服的时候要肿么办呢? 比如说我写了一个循环,该循环会执行10次,可是我发现程序在第8次执行时的结果并不是我想要的。(不禁回想起刚工作时,有类似的问题,我当时的处理方式就是一手托腮,另一只手放在F8键上,狂按数十下后正襟危坐,开始调试) 显然,Chrome已经帮我们想到了这种场景,我们可以通过添加一些条件断点来避免一些无意义的断点。 我们可以通过右键行号,选择Add conditional breakpoint来添加一个带有条件的断点。 这是我们会看到界面上多出了一个输入框,并提示我们将在XXX行设置一个只会满足下列表达式的时候才会暂停的断点-.- 结合上边的场景,我们就在输入框中键入如下表达式,当循环计数器count全等于8时,会暂停页面并进入调试。 回车确认后我们就得到了一个金黄色的矩形来标识。 删除或禁用JavaScript断点 删除断点的方式,选择菜单栏中的Remove breakpoint。 禁用断点的方式,选择菜单栏中的Disable breakpoint 或者直接在设置了断点的行号上单击即可。 或者我们也可以通过debugger模块来统一管理所有的断点。 点击断点对应的复选框可以禁用断点,右键选择Remove breakpoint也可删除断点。 以及一些对断点的其他操作也可以通过右键菜单来实现,禁用激活所有的断点之类的。 在DOM元素上设置断点 断点不仅仅可以设置在JS代码上,还可以在DOM元素上设置断点 刚刚看到时我都惊呆了,没想到竟然还有这种操作。 我们可以设置三种断点… Read More

jQuery事件系统详解

我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //event handler logic }; 然而这种方式一次只能添加一个事件处理函数,不具有通用性。 (2) 对于符合最新W3C标准的浏览器(IE>8,chrome,firefox,android)可以使用element.addEventListener,将事件类型作为一个参数传递。 element.addEventListener(‘click’,function(){ //event handler logic },false); element.addEventListener是支持添加多个事件的,调用顺序是事件添加顺序。并且我们可以通过传递第三个参数来控制事件的触发时机是捕获阶段还是冒泡阶段,默认为冒泡阶段。然而低版本的IE(<=8)不支持element.addEventListener。 (3)对于低版本的IE(<=8)相应的提供了element.attachEvent: element.attachEvent(‘onclick’,function(){ //event handler }); element.attachEvent的事件类型参数格式必须是on+事件类型,但是监听函数内部的this指针指向的却不是触发事件的element。 由此可见,以上三种方法直接使用原生API的方法都是有问题的或者说不完美的。 2.Dean Edwards大牛的实现 Dean Edwards在2005年写的了addevent的库,用于处理对浏览器的兼容性问题。理解了这个addEvent库,我们可以更好的理解jQuery的事件系统。 //事件添加方法 addEvent.guid = 1;… Read More

jQuery: 事件触发器trigger, 事件模型, 默认行为执行顺序, Native click won’t be triggered by jQuery

一般来讲,直接 trigger 一个 a 标签的 click 事件是不被浏览器允许的,正常情况下都是由用户的 click 事件来触发一个「点击动作」,在这个「动作」中,我们可以调用触发其他的 click 事件,就好像用户点在了其他的标签上。按照长期使用 jQuery 的思路,一般就会直接使用下面的方式来触发: $('a').click(); 或者是: $('a').trigger('click'); 很遗憾的是,这样是不行的,jQuery 并不会为 a 标签提供 native click 事件的触发,而我们想要做这件事情就需要用原生的 DOM element 来做: $('a').get(0).click(); 至于为什么?我找到了一个说法,是 Learn jQuery 上的一篇文章:Triggering Event Handlers。它说到: The .trigger() function cannot be used to… Read More

原生替代jQuery, You Don’t Need jQuery

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。 Query Selector 常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是 document.querySelector 返回第一个匹配的 Element document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 .slice.call() 把它转成 Array 如果匹配不到任何 Element,jQuery… Read More

单点登录原理与简单实现, 单点登录的三种实现方式

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉。实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效性,因此要点也就以下两个: 存储信任 验证信任 如果一个系统做到了开头所讲的效果,也就算单点登录,单点登录有不同的实现方式,本文就罗列我开发中所遇见过的实现方式。 以Cookie作为凭证媒介 最简单的单点登录实现方式,是使用cookie作为媒介,存放用户凭证。 用户登录父应用之后,应用返回一个加密的cookie,当用户访问子应用的时候,携带上这个cookie,授权应用解密cookie并进行校验,校验通过则登录当前用户。 不难发现以上方式把信任存储在客户端的Cookie中,这种方式很容易令人质疑: Cookie不安全 不能跨域实现免登 对于第一个问题,通过加密Cookie可以保证安全性,当然这是在源代码不泄露的前提下。如果Cookie的加密算法泄露,攻击者通过伪造Cookie则可以伪造特定用户身份,这是很危险的。 对于第二个问题,更是硬伤。 通过JSONP实现 对于跨域问题,可以使用JSONP实现。 用户在父应用中登录后,跟Session匹配的Cookie会存到客户端中,当用户需要登录子应用的时候,授权应用访问父应用提供的JSONP接口,并在请求中带上父应用域名下的Cookie,父应用接收到请求,验证用户的登录状态,返回加密的信息,子应用通过解析返回来的加密信息来验证用户,如果通过验证则登录用户。 这种方式虽然能解决跨域问题,但是安全性其实跟把信任存储到Cookie是差不多的。如果一旦加密算法泄露了,攻击者可以在本地建立一个实现了登录接口的假冒父应用,通过绑定Host来把子应用发起的请求指向本地的假冒父应用,并作出回应。 因为攻击者完全可以按照加密算法来伪造响应请求,子应用接收到这个响应之后一样可以通过验证,并且登录特定用户。 通过页面重定向的方式 最后一种介绍的方式,是通过父应用和子应用来回重定向中进行通信,实现信息的安全传递。 父应用提供一个GET方式的登录接口,用户通过子应用重定向连接的方式访问这个接口,如果用户还没有登录,则返回一个的登录页面,用户输入账号密码进行登录。如果用户已经登录了,则生成加密的Token,并且重定向到子应用提供的验证Token的接口,通过解密和校验之后,子应用登录当前用户。 这种方式较前面两种方式,接解决了上面两种方法暴露出来的安全性问题和跨域的问题,但是并没有前面两种方式方便。 安全与方便,本来就是一对矛盾。 使用独立登录系统 一般说来,大型应用会把授权的逻辑与用户信息的相关逻辑独立成一个应用,称为用户中心。 用户中心不处理业务逻辑,只是处理用户信息的管理以及授权给第三方应用。第三方应用需要登录的时候,则把用户的登录请求转发给用户中心进行处理,用户处理完毕返回凭证,第三方应用验证凭证,通过后就登录用户。   一、单系统登录机制 1、http无状态协议 web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关联,这个过程用下图说明,三次请求/响应对之间没有任何联系 但这也同时意味着,任何用户都能通过浏览器访问服务器资源,如果想保护服务器的某些资源,必须限制浏览器请求;要限制浏览器请求,必须鉴别浏览器请求,响应合法请求,忽略非法请求;要鉴别浏览器请求,必须清楚浏览器请求状态。既然http协议无状态,那就让服务器和浏览器共同维护一个状态吧!这就是会话机制 2、会话机制 浏览器第一次请求服务器,服务器创建一个会话,并将会话的id作为响应的一部分发送给浏览器,浏览器存储会话id,并在后续第二次和第三次请求中带上会话id,服务器取得请求中的会话id就知道是不是同一个用户了,这个过程用下图说明,后续请求与第一次请求产生了关联 服务器在内存中保存会话对象,浏览器怎么保存会话id呢?你可能会想到两种方式 请求参数 cookie 将会话id作为每一个请求的参数,服务器接收请求自然能解析参数获得会话id,并借此判断是否来自同一会话,很明显,这种方式不靠谱。那就浏览器自己来维护这个会话id吧,每次发送http请求时浏览器自动发送会话id,cookie机制正好用来做这件事。cookie是浏览器用来存储少量数据的一种机制,数据以”key/value“形式存储,浏览器发送http请求时自动附带cookie信息 tomcat会话机制当然也实现了cookie,访问tomcat服务器时,浏览器中可以看到一个名为“JSESSIONID”的cookie,这就是tomcat会话机制维护的会话id,使用了cookie的请求响应过程如下图 3、登录状态… Read More

十年程序员用眼告诉你 2018 PHP 不一样

PHP从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js 、GO和Python不断地在挑战PHP的地位。这些技术的推动者非常热衷于唱衰PHP,PHP语言的未来在哪里?PHP程序员当如何应对未来的变革? 作为老牌的Web后端编程语言,PHP在全球市场占有率非常高,仅次于Java,从各个招聘网站的数据上来看PHP开发的职位非常多,薪资水平也非常不错。实际在中小企业、互联网创业公司PHP的市场地位是高于Java的。Java在超大型企业、传统软件行业、金融领域优势更大。目前来看 Node.js、 GO 、 Python 、 Ruby 等语言还难以企及PHP和Java。 PHP语言之所以能有今天的地位,得益于PHP语言设计者一直遵从实用主义,将技术的复杂性隐藏在底层。PHP语言入门简单,容易掌握,程序健壮性好,不容易出现像Java 、 C++ 等其他语言那样复杂的问题,如内存泄漏和 Crash,跟踪调试相对轻松很多。 PHP官方提供的标准库非常强大,各种功能函数都能在官方的标准库中找到,包括MySQL、Memcache、Redis、GD图形库、CURL、XML、JSON等等,免除了开发者到处找库的烦恼。PHP 的文档非常棒,每个函数都有详细的说明和使用示例。第三方类库和工具、代码、项目也很丰富。开发者可以快速、高效地使用PHP编写开发各类软件。 到目前为止市面上仍然没有出现比PHP更简单易用的编程语言。所以PHP的前景还是很广阔的,与其纠结于编程语言的选择,不如好好地深入学习使用PHP 。 作为一个资深的PHP开发者,在技术上给各位PHP程序几点未来的建议,希望对大家有所帮助。 01 Composer 第一点就要提Composer,自从Composer出现后,PHP的依赖管理可以变得非常简单。程序内依赖一些类库和框架,直接使用Composer引入即可,通过使用composer update安装依赖的包。解决了过去加载外部库的各种难题。 Composer也有国内镜像,速度非常快。现在绝大部分PHP开源的项目都提供了Composer的支持,建议大家在项目中使 Composer来解决PHP代码包管理的问题,不要再使用下载源码、手工include的原始方法。 02 PHP7 PHP7版本对Zend引擎做了大量修改,大幅提升了PHP语言的性能,使用PHP7可以使你的程序性能瞬间翻倍。即使是WordPress这样重量级的软件运行在PHP7都能有上千QPS,相当于一台服务器每天就能处理8000万次请求。 使用PHP7,做好MySQL优化,使用Memcache和Redis进行加速,这套技术架构完全可以应对相当大规模的系统。除了某些亿级用户的平台之外,一般规模的系统完全没有压力。 03 PSR PSR是PHPFramework Interop Group 组织制定的PHP语言开发规范,约定了很多方面的规则,如命名空间、类名规范、编码风格标准、Autoload、公共接口等。现在已经成为PHP技术社区事实上的标准了。很多知名的PHP框架和类库都遵守了PSR规范。 PHP开发者应当学习掌握PSR规范,在开发程序时应当尽量遵循PSR规范。 04 Swoole… Read More

BAT出品的这10个工具,每个都很良心的不得了

  腾讯出品 1:腾讯设计导航 http://idesign.qq.com 腾讯设计导航是腾讯出品的一个良心工具,是腾讯内部设计师使用的设计网站。 它上面精选了很多精品网站,素材网站,包括:图库导航,设计工具导航,字体资源导航等等工具。 2:腾讯智图 https://zhitu.isux.us/ 腾讯智图是腾讯ISUX前端团队出品的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩。 3:腾讯AI体验中心 腾讯AI体验中心是腾讯出品的一个黑科技小程序。 它支持很多黑科技功能,它支持身份证OCR,名片OCR,人脸识别,图片特效,图片识别;它支持语音合成,语音识别。 这款小程序拥有几十种黑科技功能,每一种功能都是十分好用。 4:QQ影音 QQ影音是腾讯出品的一款个人认为很良心视频播放器,支持电脑版本,手机版本。 它的电脑版本支持很多实用功能,包括视频截取,视频截取GIF,视频压缩,视频合并,视频转码,视频传输,视频共享,可以说功能十分齐全。 它的手机版本支持和电脑版本传输视频。 百度出品 5:百度脑图 http://naotu.baidu.com/ 百度脑图是百度出品的一款实用的在线思维导图工具。 当我们进行工作总结,需要制作思维导图的时候,我们就可以使用百度脑图这个在线网站,它不仅整体使用体验很好,并且支持将你的思维导图保存在云端和分享给好友。 6:百度图说 http://tushuo.baidu.com/ 百度图说是百度出品的一款在线图表制作工具。 它提供了包括折线图,柱状图,饼图,地图,散点图,气泡图,雷达图,漏斗图,仪表盘等等图表模板,你直接修改各种数据就可以了。 7:百度Suger数据可视化 https://sugar.baidu.com/ 百度Suger数据可视化是百度内部使用的一款数据可视化工具。 它支持30+种基于百度ECharts的可视化图表,支持直接连接MySQL、百度Palo、PostgreSQL、Greenplum、SQL Server等数据库。 8:简单搜索 简单搜索是一款百度出品的一款良心手机软件。 首先,百度已经表示这款搜索软件永无广告,实际体验也是如此,不仅界面简洁,而且搜索结果基本没有和电脑网页版一样的广告。 其次,这款软件主打语音搜索,AI技术,提供实物搜索,翻译搜索,题目搜索等等黑科技功能,并且支持悬浮球搜索。 最后,它还提供三种搜索版本,其中的少儿模式更是屏蔽了很多少儿不良的关键词搜索。 阿里出品 9:阿里图标库 http://www.iconfont.cn/ 阿里图标库是阿里出品的一个精品图标网站。… Read More

PHP Google APIs: 获取gmail邮件, php搜索gmail邮件, php gmail api, Gmail to RSS Feed, PHP Google APIs Client Library

用到的工具: Google APIs Client Library for PHP FeedWriter PHP 快速入门 google apis:Google Developers   用法:gmail2rss.php <?php require 'vendor/autoload.php'; // composer 安装项目后,引入 autoload.php define('APPLICATION_NAME', 'Gmail To RSS'); define('CREDENTIALS_PATH', '~/.credentials/gmail-to-rss.json'); define('CLIENT_SECRET_PATH', 'client_secret.json'); // 准备 client_secret.json 文件 define('SCOPES', implode(' ', array( Google_Service_Gmail::GMAIL_READONLY) //… Read More

jQuery 插件: 识别浏览器, 判断浏览器类型和版本, browser detection

项目地址:https://github.com/gabceb/jquery-browser-plugin CDN下载:https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js 用法: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script> 判断 IE ,返回 true 或者 false,支持所有IE浏览器,包括IE 11 $.browser.msie; 判断 WebKit 浏览器 (Safari, Chrome and Opera 15+),返回 true 或者 false $.browser.webkit; 判断 Firefox 浏览器,返回 true 或者 false $.browser.mozilla; 读取浏览器版本号 $.browser.version 检查浏览器 arbitrary User-Agents jQBrowser.uaMatch();… Read More