机智的布鲁斯

机智的布鲁斯

15 posts
RSS
May 31, 2019

一种 NodeJS 全栈项目的构架方式

一种 NodeJS 全栈项目的构架方式

在开发 NodeJS 中后台项目时,有很多情况下会遇到一种需要将服务端与客户端代码写在同一个项目中的情况(如自带管理后台的项目)。本文提供一种前后端代码合并的思路。 主要的思路是:在项目中给客户端单独分配一个目录,在目录中创建完整的 npm 项目,开发时同时启动客户端开发服务及后端服务,通过 http-proxy-middleware 将两个项目连接起来。 以下将以 express + vue 结合的项目为例做出说明。 项目目录结构如下: --- client |-- dist |-- src |-- public |-- vue.config.js |--

Jan 31, 2019

在 Vue.js 中优雅地使用全局事件

Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法。 主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式。 以下为 mixin 文件代码 // event-mixin.js export default { created() { if

Apr 22, 2017

使用 Canvas 进行图像连通域标记

图像识别本来并不是我擅长的领域,无奈最近业务上有一个需求,要求从一个 PNG 上识别出透明区域的位置,再进行一些图层处理,自动生成一张图片。 查了一些资料后,最终实现了功能,感谢以下两篇文章的作者,本文的实现大部分参考自第一篇文章。 图像分析:二值图像连通域标记 几种联通区域标记的算法介绍 算法描述 本文的实现使用的是「基于行程的标记」,该算法的描述如下,由于需求比较简单,联通域都是规则形状的,所以并没有实现算法步骤的等价对计算。 逐行扫描图像,我们把每一行中连续的白色像素组成一个序列称为一个团(run),并记下它的起点start、它的终点end以及它所在的行号。 对于除了第一行外的所有行里的团,如果它与前一行中的所有团都没有重合区域,则给它一个新的标号;如果它仅与上一行中一个团有重合区域,则将上一行的那个团的标号赋给它;如果它与上一行的2个以上的团有重叠区域,则给当前团赋一个相连团的最小标号,

Mar 14, 2017

使用 Google Analytics 统计订单信息

使用 Google Analytics 统计订单信息

之前写过一篇文章讲使用 GA 统计 SPA 的数据,那么接着那篇文章,本文写一下如何使用 GA 来统计订单等电子商务信息。 GA 的电子商务统计分为「电子商务跟踪」和「增强型电子商务跟踪(ec.js)」,两者是互斥的,一般情况选用自带的前者就行,后者需要进一步引入 ec.js,以下将介绍如何使用 analytic.js 自带的「电子商务跟踪」 如上一篇文章所属,引入 GA 跟踪代码,在订单完成(支付结果)页面,

Sep 25, 2016

在微信中使用支付宝支付

在微信中使用支付宝支付

众所周知,微信和支付宝是死对头,两家相互封杀的历史也是由来已久。 作为微信公众号开发者,在实现支付时肯定会希望能够支持多种支付方式,然而直接在微信中打开支付宝链接会被跳转到如下页面,用户如果要接下去操作会非常麻烦,下面将会就这个问题给出解决方案。 方案 iFrame 虽然直接访问支付宝的链接是不行的,我们可以尝试将支付宝链接放在一个 iFrame 中,再添加一个悬浮的返回按钮方便用户关闭 iFrame。 然而此方法在微信近期更新 X5 内核后已经无法使用,只有版本低于 6.2.23 和部分安卓可用,所以就不在这里赘述了。 在外部浏览器中打开 既然在微信中打开链接不行,那么在浏览器中打开总行了吧,但是用户的订单信息也需要保存下来,如果让用户直接打开下单的页面,不仅要在服务器端存储用户填写的订单信息,自动登陆也是一件麻烦事。 所以我们干脆直接给用户创建订单,

Sep 13, 2016

如何优雅地面试一名前端工程师

如何优雅地面试一名前端工程师

**记得倒杯水,要凉的。** 先问一下项目,包括 技术栈(前后端)、项目的规模(页面数、代码量、人数)、担任的职责、开发流程 以及 CodeReview,项目中遇到过那些困难,都是怎么解决的(这里要随机应变接茬问下去) 然后问一下基础知识。 以下所有问题均为本人凭记忆整理,已经组织成问题链,最好问到双方都答不上来为止 HTML 新标签 -> 新标签实现响应式图片 -> 新标签在 IE8 下的兼容性 ->

Feb 3, 2016

SPA 中微信支付目录的设置

SPA 中微信支付目录的设置

DEPERCATION WARNING 这篇文章提到的方法可能已经失效了,有关更多 SPA 中微信支付的讨论,请戳这里 首先要感谢下这篇文章,帮我解决了一个很大的疑问。不过该网站暂时503,只能贴个谷歌快照了 戳这里 背景如下:项目使用 AngularJS + UI-Router,未开启 HTML5Mode,静态文件全部直接走 nginx。 原先的微信支付目录设置为 example.com/static/dist/index.html#/。 因为微信的限制,支付目录只能识别到一级目录,所以之前版本中,支付页面的路径设置为了 example.com/

Jan 17, 2016

使用 Google Analytics 对单页应用(WebApp)进行数据统计

使用 Google Analytics 对单页应用(WebApp)进行数据统计

这是一篇迟到很久的文章,自从去年5月份开始,我就一直在折腾 GA 了,到现在大半年也过去了,当作一篇小结吧。 都知道数据统计对产品至关重要,精益创业中也将开发-认知-测量作为一个非常重要的产品流程 先不提很多产品经理们糟糕的数据意识,国内的网站数据统计真是一个比一个糟糕,最糟糕的是它们都不支持这两年很火的SPA(如有可以指出)。所以本文将会关于如何使用 Google Analytics 对 SPA 进行传统的 PV、UV 等统计进行介绍,由于我一直使用的 MVVM 框架是 Angular.js,所以下面的代码都是基于 Angular + UI-router 的,其他框架应该也是大同小异。 1.

Jan 13, 2016

记一次解中学应用题

记一次解中学应用题

事情的起因是需要实现一个二维码并在右上角加上不超过4个字的角标,角标的高度的2个字高,起初交给小弟来做,结果位置怎么调都不正确,于是无奈之下,最终成为了一道初中数学题 需求大概如下图所示 右上角的角标可以使用一个伪元素实现,文字则可以使用父元素的 data-tag 属性中的文字,这部分没有什么难的。 那么为了实现这个效果,可以将伪元素的移动拆分成三个步骤,并取得伪元素的定位位置及移动尺寸就好了。 如图所示 既然明确了未知数与条件,我们就可以将这个问题解析成一个非常简单的中学数学题。 如下所示,我们需要保证A点在移动后仍然在矩形区域内,也就是极限为B点的情况,不过如果这时候角标的宽度仍然为 4em 的话,字的两侧就空白了;所以我们在保证上面一个条件满足的情况下,还需要让角标覆盖到粉色三角形的区域,所以容易得出角标的宽度为 8em,需要在水平及垂直方向移动的距离 m = 2 / √2

Jan 10, 2016

今天的两件大事

今天的两件大事

第一是把多说换成了Disqus,不得不承认Disqus要好多了啊。 第二是把网站转到了HTTPS 主要参考了 官方文档 以及 这篇文章 nginx的配置则是从 这里 找的 要注意的是需要手动生成一份 dhparam.pem,命令在配置实例的注释里可以找到;另外就是http重定向到https的配置了,比较简单就不赘述了。

Dec 12, 2015

使用Web Hooks搭建自动化工作流

使用Web Hooks搭建自动化工作流

首先要介绍一下背景:公司的项目部署还在使用SVN,而我们前端组已经转到Git了,因此Git如何与SVN同步是一个问题。 早前也查过git-svn这个工具,但是对于我们这样只需要单向同步而且每天Git的Commit超过30个的项目来说,速度显得有些不尽人意,于是经过一番Google后,我使用Web Hooks建立了一套自动化的同步流程。 1、什么是Web Hooks Project web hooks allow you to trigger an URL if new code is pushed or a new issue is created.