tkvern (Vern Brandl)

让你的文字自动适配背景颜色

tkvern — Mon, 29 Mar 2021 17:36:28 +0800

作者博客地址：让你的文字自动适配背景颜色

网传，产品经理要求 App 开发人员，让用户 App 的主题颜色能根据手机壳自动调整。

刚好笔者要做一个类似的事情，根据背景颜色自动改变文字的颜色，以便于用户识别。

正文

产品设计了一个人机校验组件，大致长这个样子。背景会每次随机取不同图片，开始的时候，箭头设置为蓝色。在背景为蓝色的时候，用户就分辨箭头就有些困难了。怎么解决这个问题呢？

思路与实现

第一步

取到箭头底部背景的范围坐标。这个比较简单，基本运算就搞定，done

第二步

要识别图片，我们需要借助 Canvas，将图片绘制到 Canvas 上，来操作图像数据。

创建 Canvas 容器

const c4 = document.createElement('canvas')
c4.width = 190
c4.height = 190
const ctx4 = c4.getContext('2d')

放入图片

// 识别图片
const image = new Image()
image.onload = () => {
    ctx4?.drawImage(image, 0, 0, 191, 190) // 绘制图片到 Canvas
    const color = analysisColor(ctx4?.getImageData(0, 0, 191, 190)) // 分析颜色分布
    setFontColor(color) // 设置字体颜色
    resolve(true) // 完成Promise
}

image.src = images[`code-${index}`] // 取本次随机图片的地址设置到 image

跨域问题

可是进展并没有那么顺利，背景图片不在同域下面，Canvas 不允许跨域的图片，怎么办呢？

第三步

既然 Canvas 不允许跨域的图片，在无后端代理支持的情况下，怎么高效的解决这个问题呢？(本地是跨域，线上同域)

把图片下载的本地！借助 XMLHttpRequest 将图片先缓存到本地转成 Blob 对象，Canvas 是可以访问本地 Blob 的数据。

下载图片，解决图片跨域问题

// 下载图片，解决图片跨域问题
const xhr = new XMLHttpRequest()
xhr.open('get', images[`code-${index}`], true)
xhr.responseType = 'blob'
xhr.onload = function loaded() {
    if (this.status === 200) {
        const blob = this.response
        image.src = window.URL.createObjectURL(blob)
    }
}
xhr.send()

第四步

解决了跨域问题，接下来就是分析颜色了，getImageData 取到的就是图片 rgba 的数组。这个时候就可以将计算好的坐标，代入到图片 rgba 里面计算其分布。

说到这里就要补一下图像算法的知识了。

许多从自然场景中拍摄的图像，其色彩分布上会给人一种和谐、一致的感觉；反过来，在许多界面设计应用中，我们也希望选择的颜色可以达到这样的效果，但对一般人来说却并不那么容易，这属于色彩心理学的范畴。从彩色图像中提取其中的主题颜色，不仅可以用于色彩设计，也可用于图像分类、搜索、识别等，本文分别总结并实现图像主题颜色提取的几种算法，包括颜色量化法（ColorQuantization）、聚类 (Clustering) 和颜色建模的方法

颜色量化算法

彩色图像一般采用 RGB 色彩模式，每个像素由 RGB 三个颜色分量组成。随着硬件的不断升级，彩色图像的存储由最初的 8 位、16 位变成现在的 24 位、32 真彩色。所谓全彩是指每个像素由 8 位（$2^8$=0~255）表示，红绿蓝三原色组合共有 1677 万（256 x 256 x 256）万种颜色，如果将 RGB 看作是三维空间中的三个坐标，可以得到下面这样一张色彩空间图：

RGB color cube

当然，一张图像不可能包含所有颜色，我们将一张彩色图像所包含的像素投射到色彩空间中，可以更直观地感受图像中颜色的分布：

因此颜色量化问题可以用所有矢量量化（vector quantization, VQ）算法解决。这里采用开源图像处理库 Leptonica 中用到的两种算法：中位切分法、八叉树算法。

这里核心使用中位切分法（Median cut）参考项目 Github: color-thief

// 计算图片中间值
function analysisColor(rgbaArray: any) {
    // Todo something，返回该区域颜色的主色
}

第五步

到这里，这个需求就算实现了基本核心的部分了，但是在运行过程中，发现性能消耗极大。大部分花在了 Canvas 绘制和图像遍历上

怎么来优化这个过程呢？能不能只提取图像的特征信息进行分析呢？

带着这两个问题，查阅了图像特征算法相关的文献后，找到了方向梯度直方图（Histogram of Oriented Gradient, HOG）这个算法。

基 HOG 特征

方向梯度直方图（Histogram of Oriented Gradient, HOG）特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子。它通过计算和统计图像局部区域的梯度方向直方图来构成特征。Hog 特征结合 SVM 分类器已经被广泛应用于图像识别中，尤其在行人检测中获得了极大的成功。需要提醒的是，HOG+SVM 进行行人检测的方法是法国研究人员 Dalal 在 2005 的 CVPR 上提出的，而如今虽然有很多行人检测算法不断提出，但基本都是以 HOG+SVM 的思路为主。

主要思想

在一副图像中，局部目标的表象和形状（appearance and shape）能够被梯度或边缘的方向密度分布很好地描述。（本质：梯度的统计信息，而梯度主要存在于边缘的地方）。

具体的实现方法是

首先将图像分成小的连通区域，我们把它叫细胞单元。然后采集细胞单元中各像素点的梯度的或边缘的方向直方图。最后把这些直方图组合起来就可以构成特征描述器。

提高性能

把这些局部直方图在图像的更大的范围内（我们把它叫区间或 block）进行对比度归一化（contrast-normalized），所采用的方法是：先计算各直方图在这个区间（block）中的密度，然后根据这个密度对区间中的各个细胞单元做归一化。通过这个归一化后，能对光照变化和阴影获得更好的效果。

优点

与其他的特征描述方法相比，HOG 有很多优点。首先，由于 HOG 是在图像的局部方格单元上操作，所以它对图像几何的和光学的形变都能保持很好的不变性，这两种形变只会出现在更大的空间领域上。其次，在粗的空域抽样、精细的方向抽样以及较强的局部光学归一化等条件下，只要行人大体上能够保持直立的姿势，可以容许行人有一些细微的肢体动作，这些细微的动作可以被忽略而不影响检测效果。因此 HOG 特征是特别适合于做图像中的人体检测的。

HOG 特征提取算法的实现过程

第六步

基于此，来做我们自己的算法实现。将原图在绘制时，按照等比平铺，一步步的绘制到 Canvas 格子上去。随着尺寸的缩小，图像的特征依然得以保留，大致效果如下。

在实验多个不同的压缩尺寸后，发现 16x16 这个尺寸能兼顾特征与识别性能，再小一些的格子比如 8x8 就会丢失特征值。

贴一下大致的实现过程

const checkBack = async (index: number) => {
    return new Promise((resolve) => {
      // 计算图片中间值
      function analysisColor(rgbaArray: any) {
        // Todo something，返回该区域颜色的主色
      }

      const c4 = document.createElement('canvas') // 压缩尺寸计算用
      c4.width = 16
      c4.height = 16
      const ctx4 = c4.getContext('2d')

      // 识别图片
      const image = new Image()
      image.onload = () => {
        ctx4?.drawImage(image, 0, 0, 17, 16) // 绘制图片到 Canvas
        const color = analysisColor(ctx4?.getImageData(0, 0, 17, 16)) // 分析颜色分布
        setFontColor(color) // 设置字体颜色
        resolve(true) // 完成Promise
      }

      // 下载图片，解决图片跨域问题
      const xhr = new XMLHttpRequest()
      xhr.open('get', images[`code-${index}`], true)
      xhr.responseType = 'blob'
      xhr.onload = function loaded() {
        if (this.status === 200) {
          const blob = this.response
          image.src = window.URL.createObjectURL(blob)
          console.log(image.src)
        }
      }
      xhr.send()
    })
  }

最后

我们再来看看优化后，分析过程的耗时，差不多提升了 100 倍的速度！！！

最终的效果图：

Golang 生态是否有能与 Rails 媲美的框架？

tkvern — Fri, 12 Mar 2021 15:58:01 +0800

求问，Golang 生态是否有能与 Rails 媲美的框架？

[深圳] 加推科技火热🔥招聘中前端/小程序/Java/App (15-25K)

tkvern — Tue, 09 Mar 2021 14:33:24 +0800

大家好，我是 Vern，深圳市加推科技智慧城市事业部的 leader，随着公司业务的发展，我们需要更多优秀的工程师加入团队。

关于我们

加推是数字化营销的技术提供商，从成立的第一天起致力为全天下的销售做一把武器。

加推研发整套系统经历 3 年时间，2017 年加推独家发布该系统的第一个组件“智能名片”，次年获得中国第七届互联网创新创业大赛冠军。截至目前，加推获得来自红杉资本、IDG 资本、仁智资本的 3 亿元投资，超过 30000 家企业购买并使用，直至今日发布了 15 个独立创新的智能销售组件并形成闭环，为全球企业提供了一套赋能销售增长的数字化营销解决方案。

工作环境

深圳总部地址：广东省深圳市福田区梅林街道中康路 136 号新一代产业园 1 栋 30 楼

前端工程师 (小程序工程师)

岗位职责：

1、负责开发公司各平台系统的前端和交互功能；

2、负责各项⽬的代码维护、迭代更新，保证任务质量和交付及时性；

3、负责编写相关技术文档，对产品质量负责。

任职要求：

1、本科以上学历，3 年及以上前端开发经验，熟练掌握小程序开发 / React 框架，能独⽴开发常用组件；

2、熟悉 Git/GitHub，通讯协议 TCP/HTTP；

3、熟悉 ES5/ES6/TypeScript 语法，熟悉模块化 CSS 以及 Sass、Less 语法；

4、具备英语读写能⼒。

加分项:

1、有 Blog 的习惯，活跃技术社区，参与开源项⽬等；

2、有代码洁癖，对代码精益求精，对技术有极客热情；

3、有软件著作权申请，有专利发明申请。

4、有 Node.js 开发经验

待遇:

15 ~ 25K 月薪 + 年终奖 (根据业务收益情况而定)

简历请投递至 vernzhang@aijiatui.com，注明来处，当天回复

iOS 工程师

岗位职责：

1、负责开发公司各平台系统的 App 端和交互功能；

2、负责各项⽬的代码维护、迭代更新，保证任务质量和交付及时性；

3、负责编写相关技术文档，对产品质量负责。

任职要求：

1、本科以上学历，3 年及以上 App 开发经验，熟练掌握 iOS 开发，能独⽴开发常用组件；

2、熟悉 Git/GitHub，通讯协议 TCP/HTTP；

3、掌握 Flutter/Weex/ReactNative 等混合开发模式；

4、具备英语读写能⼒。

加分项:

1、有 Blog 的习惯，活跃技术社区，参与开源项⽬等；

2、有代码洁癖，对代码精益求精，对技术有极客热情；

3、有软件著作权申请，有专利发明申请。

待遇:

15 ~ 25K 月薪 + 年终奖 (根据业务收益情况而定)

简历请投递至 vernzhang@aijiatui.com，注明来处，当天回复

Android 工程师

岗位职责：

1、负责开发公司各平台系统的 App 端和交互功能；

2、负责各项⽬的代码维护、迭代更新，保证任务质量和交付及时性；

3、负责编写相关技术文档，对产品质量负责。

任职要求：

1、本科以上学历，3 年及以上 App 开发经验，熟练掌握 Android 开发，能独⽴开发常用组件；

2、熟悉 Git/GitHub，通讯协议 TCP/HTTP；

3、掌握 Flutter/Weex/ReactNative 等混合开发模式；

4、具备英语读写能⼒。

加分项:

1、有 Blog 的习惯，活跃技术社区，参与开源项⽬等；

2、有代码洁癖，对代码精益求精，对技术有极客热情；

3、有软件著作权申请，有专利发明申请。

待遇:

15 ~ 25K 月薪 + 年终奖 (根据业务收益情况而定)

简历请投递至 vernzhang@aijiatui.com，注明来处，当天回复

Java 工程师

职责描述：

1、负责建设高可靠、高并发的分布式 API 系统及服务端软件

2、负责各项⽬的代码维护、迭代更新，保证任务质量和交付及时性

3、负责编写相关的技术文档、单元测试，对产品质量负责。

任职要求：

1、本科及以上学历，具备英语读写能⼒；

2、熟悉 Git/GitHub，通信协议 TCP/HTTP 及 RESTful 标准；

3、5 年以上 Java 开发经验，熟练掌握 Spring Cloud 技术栈及其各组件，有大中型互联网系统设计或开发经验者优先；

4、熟悉常见的消息队列、缓存服务和存储服务，有阅读或贡献源码者优先；

5、具备英语读写能⼒。

加分项：

1、有 Blog 的习惯，活跃技术社区，参与开源项⽬等；

2、有代码洁癖，对代码精益求精，对技术有极客热情；

3、有软件著作权申请，有专利发明申请。

待遇:

15 ~ 25K 月薪 + 年终奖 (根据业务收益情况而定)

简历请投递至 vernzhang@aijiatui.com，注明来处，当天回复

企业福利

1、夜宵补助，打车报销；

2、长期向员工提供免费零食饮料；

3、每月组织集体活动，包括聚餐、桌游、唱 K、运动；

4、生动有趣的生日会、年会趴全员；

5、优秀员工享受期权。

Midway.js 最佳实践案例工程，Node.js 社区几与 Rails 媲美的 Web 框架

tkvern — Tue, 22 Dec 2020 17:14:17 +0800

FSD service

如果该项目对你有用，欢迎 star 👏 Midway 2.x 样板工程

拓展阅读：

配套的前端工程请移步 https://github.com/fsd-nodejs/pc 查看这个项目
全栈开发文档以及规范 https://github.com/fsd-nodejs/document 查看这个项目
midway2.x 深度躺坑记 (持续更新)

项目导览 & TODO

在这个项目中，你会看到以下基于 midway 的实践案例 (上层使用 eggjs )

我们正在做以下工程例子，如果你有新的想法，可在 issue 留言，我们会征集你的意见，带来最干货的案例。

帮你扫清学习障碍，让你用起 midway 来更加得心应手，提升能效，找回编码的乐趣。

框架特性及能力应用

[x] 中间件
[x] 依赖注入
[x] 参数校验和转换（DTO 层）
[x] 测试（Controller & Service 单元测试）
[x] swagger
[x] Database

功能

基础

[x] Admin 登录
[ ] 普通用户登录 - 账户密码
[ ] OAuth 2.0
[ ] 日志监控
[ ] 本地上传文件服务
[x] 鉴权中间件
[ ] 接口响应统计中间件
[x] 统一错误处理

超级管理

[x] 权限
[x] 角色
[x] 管理员
[x] 菜单
[ ] 日志 (操作日志，记录管理用户的实际操作)

快速开始

see midway docs for more detail.

Development

先将 database 目录下到 sql 文件迁移到数据库，修改默认的 config 配置文件

$ npm i
$ npm run dev
$ open http://localhost:7001/

Deploy

$ npm start
$ npm stop

npm scripts

Use npm run lint to check code style.
Use npm test to run unit test.

Redis

使用 Redis 作为用户登录凭证存取的地方
RTS 收集统计数据 (开发中)

Redis 划分

建议使用 Redis 的时候，对所有 key 做好命名空间划分，便于管理。可把 scope 写到对照表中。

借助 jwt 插件做签名校验，管理员的 token 中会包含 id 字段。

所有 admin 相关的缓存数据都放在 admin:xxxx 下面。

admin:accessToken:${id} 缓存管理员 Token 信息
admin:userinfo:${id} 缓存管理员基本信息

数据库

所有实体表均有 deleted_at 字段 (目前基础模块不使用软删除)，用于软删除。

如果要关闭软删除，将 deletedAt 字段注释即可

进行软删除的时候，关系表的数据不做改动。

后期根据需要，用脚本定期清理软删除的数据。

以下模块未使用软删除：

权限管理
角色管理
菜单管理
管理员管理

查询注意事项

业务软删除单独写一个 BaseModel，其他实体继承该 Model 即可

实体查询，继承 BaseModel 的实体会自带软删除判断，例子查看src/app/model/base.ts
在做关系查询的时候，关系表需要手动加软删除判断 IS NULL，如下: typescript /** * 根据菜单id获取数据 * @param id 菜单id */ async getAdminMenuById(id: string) { const row = await this.adminMenuModel .createQueryBuilder() .select() .leftJoinAndSelect( 'AdminMenuModel.roles', 'role', 'role.deletedAt IS NULL' ) .where({ id: id }) .getOne(); return row; }

接口响应统计中间件 (设计)

做接口响应数据统计的出发点，有两点（即使有类似的第三方包，但还是自己实现以下）:

帮助排查线上接口响应问题
监控系统实时状态

虽然框架本身已经有日志功能，但是很多场景下，我们可能需要看下各个接口服务的响应状态

是在正常服务，还是已经出现问题。在有监控的帮助下，可以快速帮我们定位日志排查问题。

是对应统计实时数据而言，这里我们会使用 RTS 的技术方案，会用到 RabbitMQ 和 Redis

RabbitMQ 作用在于把统计的计算异步化，从而不影响正常的业务请求处理

（消费者的逻辑代码，需要写在单独一个工程，独立部署）

大致流程如下，手绘的，工具简陋，姑且看一下。

迁移 API

home.ts
- [x] /
- [x] /ping
auth.ts
- [x] /auth/login
- [x] /auth/logout
- [x] /auth/currentUser
admin/menu.ts
- [x] /admin/menu/query
- [x] /admin/menu/show
- [x] /admin/menu/create
- [x] /admin/menu/update
- [x] /admin/menu/remove
- [x] /admin/menu/order
admin/permission.ts
- [x] /admin/permission/query
- [x] /admin/permission/show
- [x] /admin/permission/create
- [x] /admin/permission/update
- [x] /admin/permission/remove
admin/role.ts
- [x] /admin/role/query
- [x] /admin/role/show
- [x] /admin/role/create
- [x] /admin/role/update
- [x] /admin/role/remove
admin/user.ts
- [x] /admin/user/query
- [x] /admin/user/show
- [x] /admin/user/create
- [x] /admin/user/update
- [x] /admin/user/remove

【水贴】脱离 Ruby 这些年

tkvern — Fri, 12 Jun 2020 09:53:55 +0800

脱离 Ruby 这几年，在 PHP、Nodejs、Go 社区混迹。撸了各种项目。

回过头来发现

ROR

写起来还是蛮爽！

传播正能量，健康生活。996.ICU

tkvern — Sat, 30 Mar 2019 15:47:26 +0800

996.ICU

“996”工作制，即每天早 9 点到岗，一直工作到晚上 9 点，每周工作 6 天。

“996”工作制的周工作时间为最低 12x6=72 小时。

中国大陆工时规管现况（标准工时）： 一天工作时间为 8 小时，平均每周工时不超过 40 小时；加班上限为一天 3 小时及一个月 36 小时，逾时工作薪金不低于平日工资的 150%。而一周最高工时则为 48 小时。平均每月计薪天数为 21.75 天。

学习 Rails 有感

tkvern — Wed, 03 Oct 2018 19:24:14 +0800

较前文 Rails 从入门到完全放弃，已有两年。

在用过 Rails 往后的时光里，使用其他语言的 Web 框架时，让我一个前端时时刻刻无法忘记 Rails 的思想以及艺术性。

我如何选择框架和构建框架

Rails 对我编程生涯的影响深旷长远，约定优于配置这一思想深入人心。

在我选择以何种 Web 开发框架来支撑业务开发时，首要考量的是框架的设计思想。

框架选择优先级

继承 Rails 思想的
像 Rails 的
Rails

继承 Rails 思想的

这个我称为神似，不单单徒具其表，还有其思想。

像 Rails 的

样子做的像 Rails，实际上千差万别的

Rails

为什么把 Rails 列在普通优先级。一方面是生态的问题。其实项目立项的时候，首先想到的是 Rails，但是迫于种种原因，不得不选择其他的 Web 框架。首要是人才招聘，找到一个熟悉 Web 开发的工程师比较难，找到一个熟悉 Web 开发的 Rails 工程师更难，而国内 Rails 开发的工程师群众基础不够强。

由此，我并没有选择 Rails 做开发，而是能继承 Rails 思想并且容易上手、群众基础强的 Web 框架，如 PHP Laravel。

构建框架

用的轮子多了，也会想着造轮子，谁年轻的时候没这么造过呢。

然而，比起造轮子，我更倾向于造车——把优秀的轮子组装起来。过去的两年的，我把 Rails 的思想应用到了前端。做了一套开发实践《Dva + Ant Design 前后端分离之 React 应用实践》

有了这一套实践，后续的前后端分离项目，企业中台、H5 应用中。有了约定和规范，码起来飞快。再结合 CI、日志、监控 (全部基于阿里云)。省时省心。

Nodejs 的抉择

进入编程世界已经有几年了，我也不再是懵懂新手。但是对于整个编程大海而言，我还是在沙滩边拾贝的少年。在我使用过的语言中，JavaScript 无疑是我使用过的诸多语言中最频繁的。这也使得我在编程倾向性上，偏向 JavaScript。而在 Nodejs 生态中，eggjs 无疑是最得 Rails 真传的企业级 Web 框架。Egg 为企业级框架和应用而生

当我选择 Node 技术栈的时候，Eggjs 是和 Rails 一样舒服的 Web 框架。而 Eggjs 的作者也曾言，使用 Eggjs 能让 P5、P6 达到 P7～P8 的水准。让 P7～P8 能玩出更多花样。

[未完结......]

RC UI 上的小问题

tkvern — Tue, 26 Jun 2018 17:26:50 +0800

发现一个小问题。有劳管理员修复一下。

程序员发生劳动纠纷该如何处理？

tkvern — Mon, 25 Jun 2018 17:06:43 +0800

资料准备

下面是提交劳动仲裁和司法起诉的材料

1.劳动合同 (如果签订劳动合同时有出现 A、B 合同的情况，请警惕)

2.考勤或工作在岗证据 (如果有更好)

3.公积金或社保缴费记录 (如果有更好，可在公司所在市的社保或公积金大厅自助打印)

4.工资卡到账记录 (前往对应银行自助打印即可)

5.身份证复印件

6.就职公司基本信息 (纳税人识别号、法人代表、所在地址等等)

法律援助

农村户口可在劳动局办事大厅申请法律援助

哪里申请仲裁？

例如：小 A 在深圳市南山区工作，公司注册地址为南山区。即向南山区劳动局申请仲裁即可。

远程工作者提交仲裁申请的方式，如上，需向公司注册地辖区提交申请。

额外

最好是委托专业律师提供法律援助。

在深圳，劳动仲裁只要证据资料真实齐全，处理是很快的。

唯一需要担心的就是法人资产转移，可以在仲裁期间申请财产冻结。

Dva + Ant Design 前后端分离之 React 应用实践

tkvern — Sat, 04 Feb 2017 17:36:01 +0800

Dva + Ant Design 前后端分离之 React 应用实践

源站链接https://tkvern.com

继 Rails 从入门到完全放弃拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后，笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了，给大家带来 React 实践的一些经验，一些踩坑的经验。

Rails 嘛，很好用，Laravel 也好用。Phoenix 也好用。都好，哪个方便用哪个。

还有关于Turbolinks之争，不能单从页面渲染时间去对比，要综合考虑。

Why Dva?

Dva 是基于 Redux 做了一层封装，对于 React 的 state 管理，有很多方案，我选择了轻量、简单的 Dva。至于 Mobx，还没应用到项目中来。先等友军踩踩坑，再往里面跳。

顺便贴下 Dva 的特性：

易学易用：仅有 5 个 api，对 redux 用户尤其友好
elm 概念：通过 reducers, effects 和 subscriptions 组织 model
支持 mobile 和 react-native：跨平台 (react-native 例子)
支持 HMR：目前基于 babel-plugin-dva-hmr 支持 components 和 routes 的 HMR
动态加载 Model 和路由：按需加载加快访问速度 (例子)
插件机制：比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
完善的语法分析库 dva-ast：dva-cli 基于此实现了智能创建 model, router 等
支持 TypeScript：通过 d.ts (例子)

Why Ant Design?

做为传道士，这么好的 UI 设计语言，肯定不会藏着掖着啦。蚂蚁金服的东西，确实不错，除了 Ant Design 外，还有 Ant Design Mobile、AntV、AntMotion、G2。

Why yarn?

npm install 太慢，试试yarn吧。建议用npm install yarn -g进行安装。

开发过程中的前后端分离

项目开始了，前端视图写完，要开始数据交互了，后端提供的 API 还没好。

那么问题来了，如何在不依靠后端提供 API 的情况下，实现数据交互？

使用Mock.js可以解决这个问题。先对接好 API 数据格式，然后使用 Mockjs 拦截 Ajax 请求，模拟后端真实数据。

在 Mockjs 官方提供的 API 不够用的情况下，还可以使用正则产生模拟数据。

如何对模拟做数据持久化处理？

这里给出一个模拟用户数据并持久化的实例实例：mock/users.js

代码摘要：

'use strict';

const qs = require('qs');
const mockjs = require('mockjs');

const Random = mockjs.Random;

// 数据持久化
let tableListData = {};

if (!global.tableListData) {
  const data = mockjs.mock({
    'data|100': [{
      'id|+1': 1,
      'name': () => {
        return Random.cname();
      },
      'mobile': /1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}/,
      'avatar': () => {
        return Random.image('125x125');
      },
      'status|1-2': 1,
      'email': () => {
        return Random.email('visiondk.com');
      },
      'isadmin|0-1': 1,
      'created_at': () => {
        return Random.datetime('yyyy-MM-dd HH:mm:ss');
      },
      'updated_at': () => {
        return Random.datetime('yyyy-MM-dd HH:mm:ss');
      },
    }],
    page: {
      total: 100,
      current: 1,
    },
  });
  tableListData = data;
  global.tableListData = tableListData;
} else {
  tableListData = global.tableListData;
}

模拟 API 怎么写？

完成持久化处理后，就可以像操作数据库一样进行增、删、改、查

下面是一个删除用户的 API

参见mock/users.js#L106：

'DELETE /api/users' (req, res) {
    setTimeout(() => {
      const deleteItem = qs.parse(req.body);

      tableListData.data = tableListData.data.filter((item) => {
        if (item.id === deleteItem.id) {
          return false;
        }

        return true;
      });

      tableListData.page.total = tableListData.data.length;

      global.tableListData = tableListData;

      res.json({
        success: true,
        data: tableListData.data,
        page: tableListData.page,
      });
    }, 200);
  },

还有一步

模拟数据和 API 写好了，还需要拦截 Ajax 请求

修改package.json

.
.
.
"scripts": {
  "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
  "build": "atool-build -o ../../../public",
  "test": "atool-test-mocha ./src/**/*-test.js"
}
.
.
.

如果与dora有端口冲突可修改dora的端口号

"start": "dora --port 8888 --plugins \"proxy,webpack,webpack-hmr\"",

完成这些基本工作就做好了

友情提示

在模拟数据环境，services下的模块这么写就好了，真实 API 则替换为真实 API 的地址。可将地址前缀写到统一配置中去。

import request from '../utils/request';
import qs from 'qs';
export async function query(params) {
  return request(`/api/users?${qs.stringify(params)}`);
}

export async function create(params) {
  return request('/api/users', {
    method: 'post',
    body: qs.stringify(params),
  });
}

export async function remove(params) {
  return request('/api/users', {
    method: 'delete',
    body: qs.stringify(params),
  });
}

export async function update(params) {
  return request('/api/users', {
    method: 'put',
    body: qs.stringify(params),
  });
}

真实 API 参考实例：src/services/users.js

如何保持登录状态

在看 dva 的引导手册时，并没有介绍登录相关的内容。因为不同的项目，对于登录这块的实现会有所不同，并不是唯一的。通常我们会使用 Cookie 的方式保持登录状态，或者 Auth 2.0 的技术。

这里介绍 Cookie 的方式。

登录成功之后服务器会设置一个当前域可以使用的 Cookie，例如token啥的。然后在每次数据请求的时候在Request Headers中携带token，后端会基于这个token进行权限验证。思路清晰了，来看看具体实现吧。（注：在这次项目中使用了统一登录模块，通过 Header 中的Authorization进行验证，将只介绍拿到token之后的数据处理）

准备工作

对于操作 Cookie 的一些操作，建议先封装到工具类模块下。同时我把操作LocalStrage的一些操作也写进来了。

参见src/utils/helper.js

.
.
.
// Operation Cookie
export function getCookie(name) {
  const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  const arr = document.cookie.match(reg);
  if (arr) {
    return decodeURIComponent(arr[2]);
  } else {
    return null;
  }
}

export function delCookie({ name, domain, path }) {
  if (getCookie(name)) {
    document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT; path=' + 
                      path + '; domain=' + 
                      domain;
  }
}
.
.
.

Header 的预处理我放在了src/utils/auth.js#L5，这里后端返回的数据都是 JSON 格式，所以在 Header 里面需要添加application/json进去，而Authorization是后端用来验证用户信息的。变量sso_token为了方便代码阅读就没有按照规范命名了。

export function getAuthHeader(sso_token) {
  return ({
    headers: {
      'Accept': 'application/json',
      'Authorization': 'Bearer ' + sso_token,
      'Content-Type': 'application/json',
    },
  });
}

修改 Request

这里没有使用自带的 catch 机制来处理请求错误，在开发过程中，最开始打算使用统一错误处理，但是发现请求失败后，不能在models层处理components，所以就换了一种方式处理，后面会讲到。

参见src/utils/request.js#L29

export default function request(url, options) {
  const sso_token = getCookie('sso_token');
  const authHeader = getAuthHeader(sso_token);
  return fetch(url, { ...options, ...authHeader })
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => ({ data }));
    // .catch((err) => ({ err }));
}

完成这些配置之后，每次向服务器发送的请求就都携带了用户token了。在token无效时，服务器会抛出401错误，这时就需要在中间件中处理401错误。

参见src/utils/request.js#L10

redirectLogin是工具类src/utils/auth.js中的重定向登录方法。

function checkStatus(response) {
  if (response && response.status === 401) {
    redirectLogin();
  }
  if (response.status >= 200 && response.status < 500) {
    return response;
  }
  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

到此为止，登录状态的配置基本完成。

Router

我们的应用中会有多个页面，而且有的需要登录才可见，那么如何控制呢？

React 的路由控制是比较灵活的，来看看下面这个例子：

src/router.jsx

import React from 'react';
import { Router, Route } from 'dva/router';
import { authenticated } from './utils/auth';
import Dashboard from './routes/Dashboard';
import Users from './routes/Users';
import User from './routes/User';
import Password from './routes/Password';
import Roles from './routes/Roles';
import Permissions from './routes/Permissions';

export default function ({ history }) {
  return (
    <Router history={history}>
      <Route path="/" component={Dashboard} onEnter={authenticated} />
      <Route path="/user" component={User} onEnter={authenticated} />
      <Route path="/password" component={Password} onEnter={authenticated} />
      <Route path="/users" component={Users} onEnter={authenticated} />
      <Route path="/roles" component={Roles} onEnter={authenticated} />
      <Route path="/permissions" component={Permissions} onEnter={authenticated} />
    </Router>
  );
}

对于路由的验证配置在onEnter属性中，authenticated方法可统一进行路由验证，要注意每一个Route节点的验证都需要配置相应的onEnter属性。如果权限较为复杂需对每一个Route单独验证。其实这种基于客户端渲染的应用，如果页面限制有遗漏也关系不太，后端提供的 API 会对数据进行验证，即使前端访问到没有权限的页面，也同样不用担心，做好客户端错误处理即可。

数据缓存

对于一个 React 应用来说，缓存是很重要的一步。前后端分离后，频繁的 Ajax 请求会消耗大量的服务器资源，如果一些不长变动的持久化数据不做缓存的话，会浪费许多资源。所以，比较常见的方法就是将数据缓存在LocalStorage中。针对一些敏感信息可适当进行加密混淆处理，我这里就不介绍了。

什么时候做数据缓存？

例：用户信息缓存

参见src/models/auth.js#L64

在subscriptions中配置了setup检测LocalStorage中的user是否存在。不存在时会去query用户信息，然后保存到user中，如果存在就将user中的数据添加到state的user: {}中。当然在进行请求时，已经在src/utils/auth.js验证用户信息是否正确，同时做了相应的限制src/utils/auth.js#L20

import { parse } from 'qs';
import { message } from 'antd';
import { query, update, password } from '../services/auth';
import { getLocalStorage, setLocalStorage } from '../utils/helper';

export default {
  namespace: 'auth',
  state: {
    user: {},
    isLogined: false,
    currentMenu: [],
  },
  reducers: {
    querySuccess(state, action) {
      return { ...state, ...action.payload, isLogined: true };
    },
  },
  effects: {
    *query({ payload }, { call, put }) {
      const { data } = yield call(query, parse(payload));
      if (data && data.err_msg === 'SUCCESS') {
        setLocalStorage('user', data.data);
        yield put({
          type: 'querySuccess',
          payload: {
            user: data.data,
          },
        });
      }
    },
  }
  subscriptions: {
    setup({ dispatch }) {
      const data = getLocalStorage('user');
      if (!data) {
        dispatch({
          type: 'query',
          payload: {},
        });
      } else {
        dispatch({
          type: 'querySuccess',
          payload: {
            user: data,
          },
        });
      }
    },
  },
}

简单来说，就是没有缓存的时候缓存。

什么时候更新数据缓存？

例如，roles中添加和修改功能都需要用到permissions的数据，哪我怎么拿到最新的permissions数据呢。首先，我在加载roles列表页面时就需要将permissions的数据缓存，这样，在每次点添加或修改功能时就不需要再去拉取已缓存的数据了。

参见src/models/roles.js#L166

在监听路由到roles时查询permissions是否缓存，将其更新到缓存中去。

.
.
.
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen((location) => {
        const match = pathToRegexp('/roles').exec(location.pathname);
        if (match) {
          const data = getLocalStorage('permissions');
          if (!data) {
            dispatch({
              type: 'permissions/updateCache',
            });
          }
          dispatch({
            type: 'query',
            payload: location.query,
          });
        }
      });
    },
  },
.
.
.

什么时候删除数据缓存？

删除缓存的配置是比较灵活的，这里的业务场景并不复杂所以，我用了比较简单的处理方式。

参见src/models/permissions.js#L112

在执行新增或更新操作成功后，将本地原有的缓存删除。加上数据联动的特性，当再次回到roles操作时，缓存已经更新了。

.
.
.
    *update({ payload }, { select, call, put }) {
      yield put({ type: 'hideModal' });
      yield put({ type: 'showLoading' });
      const id = yield select(({ permissions }) => permissions.currentItem.id);
      const newRole = { ...payload, id };
      const { data } = yield call(update, newRole);
      if (data && data.err_msg === 'SUCCESS') {
        yield put({
          type: 'updateSuccess',
          payload: newRole,
        });
        localStorage.removeItem('permissions');
        message.success('更新成功!');
      }
    },
.
.
.

State 的临时缓存

state 的中的数据是变化的，刷新页面之后会重置掉，也可以将部分models中的state存到Localstorage中，让 state 的数据从Localstorage读取，但不是必要的。而list数据的更新，是直接操作 state 中的数据的。

如下 (这样就不用更新整个 list 的数据了)。

.
.
.
    grantSuccess(state, action) {
      const grantUser = action.payload;
      const newList = state.list.map((user) => {
        if (user.id === grantUser.id) {
          user.roles = grantUser.roles;
          return { ...user };
        }
        return user;
      });
      return { ...state, ...newList, loading: false };
    },
.
.
.

视图组件运用

Ant 提供的组件非常多，但用起来还是需要一些学习成本的，同时多个组件组合使用时也需要有很多地方注意的。

Modal 注意事项

在使用 Modal 组件时，难免会出现一个页面多个 Modal 的情况，首先要注意的就是 Modal 的命名，在多 Modal 情况下，命名不注意很容易出现分不清用的是哪个 Modal。建议命名时能望名知意。然后就是 Modal 需要用到别的 Models 的数据时，如果在弹窗时通过 Ajax 获取需要的数据再显示 Modal，这样就会出现 Modal 延迟，而且 Modal 的动画也无法加载出来。所以，我的处理方式是，在进入这一级Route的时候就将需要的数据预缓存，这样调用时就可随用随取，不会出现延迟了。

参见src/components/user/UserModalGrant.jsx#L33

Form 注意

Ant 的 form 组件很完善，需要注意的就是表单的多条件查询。如果单单是一个条件查询的处理比较简单，将查询关键词设成string类型存到相应的 Models 中的 state 即可，多条件的话，稍微麻烦一点，需存成 Hash 对象。灵活处理即可。

其他

官方文档的描述很清楚，我就不充大头了。注意写法规范即可，直接复制粘贴官方例子代码会很难看。

跨域问题

终于说到点子上了，前后端分离遇到跨域问题很正常，而这种基于 RESTful API 的前后端分离就更好弄了。我这以 Fetch + PHP + Laravel 为例，这种并不是最有解决方案！仅供参考！

在header中进行如下配置

Access-Control-Allow-Origin配置允许的域

Access-Control-Allow-Methods配置允许的请求方式

Access-Control-Allow-Headers配置允许的请求头

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::group(['middleware'=> ['auth:api']], function() {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, HEAD, POST, PUT, PATCH, DELETE");
    header("Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin, Accept, Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
    require base_path('routes/common.php');
});

基于其他编程语言的处理类似。

结语

了解前端、熟悉前端、精通前端、熟悉前端、不懂前端

了解 X X、熟悉 X X、精通 X X、熟悉 X X、不懂 X X

Rails 从入门到完全放弃再到重新找回

tkvern — Thu, 21 Jul 2016 23:40:26 +0800

Rails 从入门到完全放弃再到重新找回

转载地址：Rails 从入门到完全放弃再到重新找回

前言

这是一篇关于 Rails 的开发经历的文章，旨在将 Rails 中遇到的各种问题分享给还未接触 Rails 或是已经上路的朋友。虽说做 Rails 的开发时间不长，刚好一年多。但是，在这一年的时间中，该使用的技术架构，Ruby-China 推荐的 Gem 包，都尝试过使用过了，也为业务开发了一些 Gem 包。谈不上精通 Rails，如果把 Rails 作者定为最高等级，他是 F1 赛车手，我该是个跑出租的老司机。

背景

早前有做过 Java，PHP，.Net 的开发，相信玩 Rails 的朋友多多少少也都有写过，不过主要还是以前端为主。早在 IE7/IE8 时代做前端开发，那时NodeJS还没火起来，前端成了低技术含量又耗体力又没地位的活。不过，还好有NodeJS，让我赶上了这个时代。

怎么接触到 Rails

当公司的一个 PHP 的多人即时聊天项目接近尾声时，我们在思考能不能将程序员生产力解放出来？是不是可以尝试一些其他的技术架构。很快，经过多方研究，发现 Rails 是单兵作战的神器。相比 PHP，可以达到 Rails : PHP = 1 : 4 的效率。但对于一个技术架构成熟的技术团队来说，放弃原有的技术架构去使用一个从未接触过新技术，时间成本和决心是很重要的。但挑战往往会带来意想不到的收获。

在深大图书馆的 Rails 之道

学习新技术的第一件事就是去找学习资料。在 google 上找了很久，发现深大图书馆有各种各样的技术书籍，果不其然，在这里找到了Ruby元编程，Rails之道，敏捷开发之道这些书籍，但是版本比较老。为了能够掌握最新版本的知识，下载了相应的英文版 PDF，一起结合。修炼 Rails 的过程是痛并快乐着的，因为要转变思维模式，去接受新的思想，去了解诸多的语法糖因何而生。学累了就躺会，饿了就上个外卖，脑袋成浆糊了就洗把脸。其实接触一门新语言并不是多难，这是一个循序渐进的过程。好在前端底子厚，学习ERB，UJS，RJS的过程比较轻松，但是Turbolinks对于前端工程师来说就是噩梦，一直到现在我都用的 Pjax。不喜欢Turbolinks的做法，Pjax显得很机智。关于Turbolinks和Pjax我并不是挑起战争，仁者见仁，智者见智。

用 Rails 对电商的探索

在构建电商系统的时候，很自然就 pull 了ECShop的源码来学习。业务上的问题并不大，有现成案例，结合需求来订制开发很快。同时在开发过程中Ruby-China社区也提供了许多帮助。类似查询 N + 1问题，CanCanCan权限问题.....

文件上传

上传图片

对于图片等资源的处理，最开始没有选用Carrierwave的方案，而是使用七牛云存储JS SDK，开始接触的时候，发现并没有多少参考文档，于是想是不是这个东西比较简单也比较少人用，还是Ruby-China 社区的朋友太懒。后面深入研究后发现，这类云存储的方法还是用得比较多，也比较便捷，但对于新手还是有一定门槛，所以做完之后顺带写了相应的教程造福社会。

富文本编辑器上传图片

在富文本编辑器中Froala可以说是佼佼者，我们选用了 Froala。但是遇到一个问题，Froala 中的图片上传仅支持Amazon云，因此不得不改造Froala的源码。幸运的是这个过程并不困难，我将改造后的 Froala 用策略模式做成了一个 Gem: wysiwyg-rails-qiniu，又一次造福社会。

猴子补丁

在使用will_paginate的时候，分页的结构与样式与Materia UI的风格并不相符，并且没有找到合适的 Gem，所以大胆的用起了打开类的法术，并且纪录了这一过程《为什么重写 will_paginate 》

Pjax

使用 Pjax 的过程相对比较顺利，在听完Rei大神对Turbolinks的讲解之后，还是坚定不移的使用Pjax，值得注意的是在使用WiceGrid的时候，会存在初始化组件问题，当时是使用data-skip-pjax解决。不过现在前后端分离，前端使用 React ＋ Redux 操作 DOM 比以往轻松多了。事实上WiceGrid的筛选方式对于用户并不友好。

Devise 和 OmniAuth

这两个 Gem 的使用不多，在尝试过Devise之后，还是得自己手写一遍登录等功能，第三方登录开始有考虑用，后面发现还用不上就没有研究了。

china_city

在使用 china_city 的时候发现一个小问题。

(($) ->
  $.fn.china_city = () ->
    @each ->
      // 下面这一行选择.city-select的时候没有限制为select
      // 如果class有冲突会出现bug.
      // 所以更正为 $(@).find('select.city-select')
      selects = $(@).find('.city-select')
      selects.change ->
        .
        .
        .
)(jQuery)

前端 css 框架

在开发中多次切换了前端技术栈。只想告诉大家，Materia UI并不适合后台使用，而且与诸多的 Gem 包存在兼容问题，Rails 中大部分跟前端有关的 Gem 都是基于Bootstrap。所以觉得Bootstrap审美疲劳的朋友，还是继续用着吧。

前端 JS 处理

随着 JS 的增多，维护起来会越来越难，在 Rails 的项目中并没有做 JS 模块化，而是将 JS 用工厂模式汇集到了一起，新的功能代码会放到工厂车间去，在使用的时候 new 一个工厂，调用需要的功能即可，同时保证了可复用性。

部署

其实 Rails 的应用部署相对比较容易，没有太多的内容。只要注意配置文件加后缀防止被新的commit覆盖就好了，一般来说，写好 shell 脚本实现一键部署也并非难事。

微信支付

现今主流的是微信支付和支付宝支付，银联的太蛋疼了。相比与微信支付，支付宝的文档真心不友好，看到吐，而且申请流程繁琐。如果你有打算在项目中使用支付宝支付，最好提前两个月做申请。虽然我不太喜欢马化腾，但是微信支付的文档我给 32 个赞，使用起来也方便。微信支付的申请流程更加透明一些，每个节点都很快。使用下面的 Gem

gem 'wechat'
gem 'wx_pay'

但是也有一个问题待解决，就是在支付时取消订单，数据库状态更新，而微信支付的数据状态未更新，再进行支付的时候就会出现订单号已存在的error。

微信支付虚拟键盘

在便利店用过微信支付的朋友应该知道， 好近这样的第三方支付商的虚拟键盘。开始做虚拟键盘的时候想扒一下好近的源码，奈何用微信开发调试工具根本拿不到。所以只能自己写，遇到的第一个问题就是点击事件延迟 300ms，虽说可用Tap事件，被搞得不要不要的。先后尝试了JqueryMobile.Tap，FastClick等解决方法，仍然是在Android上延迟超高，IOS流畅。后面灵感闪现，我为什么要给用户一个完整的点击事件呢？一碰到就触发键盘不是可以让用户得到的反馈跟好么。索性偷懒了一把。

$(element).on('touchstart', function(e){/* do something */}

Rails 的问题

Rails 从诞生到现在，已有经年。开发过程中最拖慢开发进度的不是需求变动，也不是技术点，使用了assets pipeline的话，在调试页面的时候资源加载总是很慢。实在受不了的时候尝试了结合NodeJS，用Gulp browser sync，来代理资源，虽说速度快超多，但不是官方集成的方案，多多少少让强迫症的人很难受。对于业务复杂的电商系统来说，Rails 标准的Action肯定不够用，而自定义的写出来感觉不伦不类，可能是功夫不到家，但是没有找到更好的编程参考。其他的就是性能问题了，了解Elixir的朋友应该就知道了。

跟着 Peter 学 Meteor

响应Peter的号召，我也全情的投入到了Meteor ＋ React ＋ Redux 的大军中去了。虽说没用Meteor做过大型项目，但是小应用做起来是得新应手了。好像也没有看到有多少大型项目用Meteor + React + Redux 技术栈的。用上React前端代码思路和结构变得清晰多了。也可以使用诸多的React组件了。类似于Amazeui，Ant Design，这些优秀的设计，连 UI 的费用都省了。

我与 Elixir 和 Phoenix 不能说的秘密

Elixir不用我说，相信大家都有耳闻了，函数式编程是未来。一个专业前端的 Rails 工程师切换到Elixir的过程没有第一次经历的痛苦，当你接受了函数式的思想之后相当顺畅。社区里面有的人说Phoenix抄Rails的，我并不认同，Phoenix传承了敏捷开发的思想，也为开发者提供了诸多的便利，像Hot load的技术也被集成进来，对于Socket的支持也是相当的好。融合Elixir的特性，让多线程成为利器，利好多多，如果可以，你应该像我一样去深入研究下Phoenix，还有你们常用的Devise也是Phoenix的作者写的。当Rails老了，你还有Phoenix

结束语

AD：你错过了房地产，错过了网购，错过了炒股，别再错过Elixir Phoenix React Redux。作者：本猿不才，文采平平，且读切珍惜。

[转载] 元编程之重写 will_paginate

tkvern — Sun, 08 May 2016 17:13:47 +0800

转载地址：https://tkvern.com/20160507/元编程之重写will_paginate/

为什么重写 will_paginate

相信很多同学在使用will_paginate的时候都会遇到这样一个问题：自带分页样式太 LOW 了，有木有好看一点的，能不能自己定制呢。于是我们在RubyGems搜索 will_paginate 的主题 gem 包。发现有各种各样主题的，但却找不到你想要的，怎么办？

本着自己动手丰衣足食的理念，我们开始动手改造will_paginate。（注：笔者使用的是Materialize的前端框架，下文将以Materialize的分页为例）

预览效果

先来看看will_paginate默认的效果是怎么样？为了方便后续区分，默认效果叫Old，修改后效果叫New 上图中的Old分页稍显简陋。

下图是修改后需要New的效果

分析结构

Old代码结构

<div class="pagination">
    <a class="previous_page" rel="prev" href="/admins/admins?page=5">← Previous</a>
    <a rel="start" href="/admins/admins?page=1">1</a>
    <a href="/admins/admins?page=2">2</a>
    <a href="/admins/admins?page=3">3</a> 
    <a href="/admins/admins?page=4">4</a>
    <a rel="prev" href="/admins/admins?page=5">5</a>
    <em class="current">6</em>
    <a rel="next" href="/admins/admins?page=7">7</a>
    <a href="/admins/admins?page=8">8</a>
    <a href="/admins/admins?page=9">9</a>
    <a href="/admins/admins?page=10">10</a>
    <span class="gap">…</span>
    <a href="/admins/admins?page=24">24</a>
    <a href="/admins/admins?page=25">25</a>
    <a class="next_page" rel="next" href="/admins/admins?page=7">Next →</a>
</div>

从代码结构中可以知道，共有 5 种形式 DOM:

previous_page
next_page
current
gap
default

了解结构后，需要将Old修改成下面的结构才能有New的效果

 <ul class="pagination">
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    <li class="active"><a href="#!">1</a></li>
    <li class="waves-effect"><a href="#!">2</a></li>
    <li class="waves-effect"><a href="#!">3</a></li>
    <li class="waves-effect"><a href="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>

分析`will_paginate`源码

将will_paginate的源码Clone到本地。进入lib目录下，这里就不介绍will_paginate到源码结构了，有时间自己看看。我们直奔主题，打开link_renderer.rb文件。我在里面添加了部分代码中文解释，对于修改结构已经够用了 lib/will_paginate/view_helpers/link_renderer.rb

require 'cgi'
require 'will_paginate/core_ext'
require 'will_paginate/view_helpers'
require 'will_paginate/view_helpers/link_renderer_base'

module WillPaginate
  module ViewHelpers
    # This class does the heavy lifting of actually building the pagination
    # links. It is used by +will_paginate+ helper internally.
    class LinkRenderer < LinkRendererBase

      # * +collection+ is a WillPaginate::Collection instance or any other object
      #   that conforms to that API
      # * +options+ are forwarded from +will_paginate+ view helper
      # * +template+ is the reference to the template being rendered
      def prepare(collection, options, template)
        super(collection, options)
        @template = template
        @container_attributes = @base_url_params = nil
      end

      # Process it! This method returns the complete HTML string which contains
      # pagination links. Feel free to subclass LinkRenderer and change this
      # method as you see fit.
      def to_html
        html = pagination.map do |item|
          item.is_a?(Fixnum) ?
            page_number(item) :
            send(item)
        end.join(@options[:link_separator])

        @options[:container] ? html_container(html) : html
      end

      # Returns the subset of +options+ this instance was initialized with that
      # represent HTML attributes for the container element of pagination links.
      def container_attributes
        @container_attributes ||= @options.except(*(ViewHelpers.pagination_options.keys + [:renderer] - [:class]))
      end

    protected

      # page_number方法显示分页元素
      def page_number(page)
        unless page == current_page
          link(page, page, :rel => rel_value(page))
        else
          tag(:em, page, :class => 'current')
        end
      end

      # gap方法在页数超过设定值时用...代替
      def gap
        text = @template.will_paginate_translate(:page_gap) { '&hellip;' }
        %(<span class="gap">#{text}</span>)
      end

      # previous_page方法显示上一页
      def previous_page
        num = @collection.current_page > 1 && @collection.current_page - 1
        previous_or_next_page(num, @options[:previous_label], 'previous_page')
      end

      # next_page方法显示下一页
      def next_page
        num = @collection.current_page < total_pages && @collection.current_page + 1
        previous_or_next_page(num, @options[:next_label], 'next_page')
      end

      # 边界值按钮
      def previous_or_next_page(page, text, classname)
        if page
          link(text, page, :class => classname)
        else
          tag(:span, text, :class => classname + ' disabled')
        end
      end

      def html_container(html)
        tag(:div, html, container_attributes)
      end

      # Returns URL params for +page_link_or_span+, taking the current GET params
      # and <tt>:params</tt> option into account.
      def url(page)
        raise NotImplementedError
      end

    private

      def param_name
        @options[:param_name].to_s
      end

      # 私有方法, 构建a标签
      def link(text, target, attributes = {})
        if target.is_a? Fixnum
          attributes[:rel] = rel_value(target)
          target = url(target)
        end
        attributes[:href] = target
        tag(:a, text, attributes)
      end

      # 私有方法, 包裹标签
      def tag(name, value, attributes = {})
        string_attributes = attributes.inject('') do |attrs, pair|
          unless pair.last.nil?
            attrs << %( #{pair.first}="#{CGI::escapeHTML(pair.last.to_s)}")
          end
          attrs
        end
        "<#{name}#{string_attributes}>#{value}</#{name}>"
      end

      def rel_value(page)
        case page
        when @collection.current_page - 1; 'prev' + (page == 1 ? ' start' : '')
        when @collection.current_page + 1; 'next'
        when 1; 'start'
        end
      end

      def symbolized_update(target, other)
        other.each do |key, value|
          key = key.to_sym
          existing = target[key]

          if value.is_a?(Hash) and (existing.is_a?(Hash) or existing.nil?)
            symbolized_update(existing || (target[key] = {}), value)
          else
            target[key] = value
          end
        end
      end
    end
  end
end

打开类

通过分析我们已经了解需要修改哪些方法

page_number
previous_page
next_page
previous_or_next_page

同时我们还将使用两个私有方法

link(text, target, attributes = {})
tag(name, value, attributes = {})

回到工作项目，新建文件。下面使用了元编程的法术——打开类。这也是作为动态语言的优点。修改过的地方我加了注释。 lib/materialize_renderer.rb

require 'cgi'
require 'will_paginate/core_ext'
require 'will_paginate/view_helpers'
require 'will_paginate/view_helpers/link_renderer_base'

module WillPaginate
  module ViewHelpers
    # This class does the heavy lifting of actually building the pagination
    # links. It is used by +will_paginate+ helper internally.
    class LinkRenderer < LinkRendererBase

      # * +collection+ is a WillPaginate::Collection instance or any other object
      #   that conforms to that API
      # * +options+ are forwarded from +will_paginate+ view helper
      # * +template+ is the reference to the template being rendered
      def prepare(collection, options, template)
        super(collection, options)
        @template = template
        @container_attributes = @base_url_params = nil
      end

      # Process it! This method returns the complete HTML string which contains
      # pagination links. Feel free to subclass LinkRenderer and change this
      # method as you see fit.
      def to_html
        html = pagination.map do |item|
          item.is_a?(Fixnum) ?
            page_number(item) :
            send(item)
        end.join(@options[:link_separator])

        @options[:container] ? html_container(html) : html
      end

      # Returns the subset of +options+ this instance was initialized with that
      # represent HTML attributes for the container element of pagination links.
      def container_attributes
        @container_attributes ||= @options.except(*(ViewHelpers.pagination_options.keys + [:renderer] - [:class]))
      end

    protected

      # 修改后，我使用私有方法tag，在link外面套了一层li，同时修改了class属性
      def page_number(page)
        unless page == current_page
          # link(page, page, :rel => rel_value(page))
          tag :li, link(page, page, :rel => rel_value(page)), :class => 'waves-effect'
        else
          # tag(:em, page, :class => 'current')
          tag(:li, link(page, '#!', :rel => rel_value(page)), :class => 'active')
        end
      end

      def gap
        text = @template.will_paginate_translate(:page_gap) { '&hellip;' }
        %(<span class="gap">#{text}</span>)
      end

      # 这里没有修改全局变量@options，使用打开类最好不要修改全局变量。所以直接改了icon
      def previous_page
        num = @collection.current_page > 1 && @collection.current_page - 1
        # previous_or_next_page(num, @options[:previous_label], 'previous_page')
        previous_or_next_page(num, 'chevron_left', 'previous_page')
      end


      # 这里没有修改全局变量@options，使用打开类最好不要修改全局变量。所以直接改了icon
      def next_page
        num = @collection.current_page < total_pages && @collection.current_page + 1
        # previous_or_next_page(num, @options[:next_label], 'next_page')
        previous_or_next_page(num, 'chevron_right', 'next_page')
      end

      # 修改了边界值的按钮，增加了局部变量icon_item用于google icon
      def previous_or_next_page(page, text, classname)
        icon_item = tag :i, text, :class => 'material-icons' 
        if page
          # link(text, page, :class => classname)
          tag(:li, link(icon_item, page), :class => 'waves-effect')
        else
          # tag(:span, text, :class => classname + ' disabled')
          tag(:li, link(icon_item, '#!'), :class => 'disabled')
        end
      end

      def html_container(html)
        tag(:div, html, container_attributes)
      end

      # Returns URL params for +page_link_or_span+, taking the current GET params
      # and <tt>:params</tt> option into account.
      def url(page)
        raise NotImplementedError
      end

    private

      def param_name
        @options[:param_name].to_s
      end

      def link(text, target, attributes = {})
        if target.is_a? Fixnum
          attributes[:rel] = rel_value(target)
          target = url(target)
        end
        attributes[:href] = target
        tag(:a, text, attributes)
      end

      def tag(name, value, attributes = {})
        string_attributes = attributes.inject('') do |attrs, pair|
          unless pair.last.nil?
            attrs << %( #{pair.first}="#{CGI::escapeHTML(pair.last.to_s)}")
          end
          attrs
        end
        "<#{name}#{string_attributes}>#{value}</#{name}>"
      end

      def rel_value(page)
        case page
        when @collection.current_page - 1; 'prev' + (page == 1 ? ' start' : '')
        when @collection.current_page + 1; 'next'
        when 1; 'start'
        end
      end

      def symbolized_update(target, other)
        other.each do |key, value|
          key = key.to_sym
          existing = target[key]

          if value.is_a?(Hash) and (existing.is_a?(Hash) or existing.nil?)
            symbolized_update(existing || (target[key] = {}), value)
          else
            target[key] = value
          end
        end
      end
    end
  end
end

加入到`initializers`

完成上面的修改后，是不起作用的，还需要加入到initializers中，才会加载我们的打开类，新建文件 config/initializers/will_pagination_materialize.rb

require 'materialize_renderer'

完成

完成这些操作之后，重启服务器。恭喜你，完成了对will_paginate的修改。看看New吧

Rails + PostgreSQL 常见问题及解决办法

tkvern — Sun, 17 Apr 2016 18:32:38 +0800

No pg_config...

问题重现: 在bundle的时候出现 gem 包pg-0.18.4安装出错的情况，错误代码如下：

$ bundle
.
.
.
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/vagrant/.rvm/gems/ruby-2.3.0/gems/pg-0.18.4/ext
/home/vagrant/.rvm/rubies/ruby-2.3.0/bin/ruby -r ./siteconf20160415-7139-1cu08ba.rb extconf.rb
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
 --with-opt-dir
 --without-opt-dir
 --with-opt-include
 --without-opt-include=${opt-dir}/include
 --with-opt-lib
 --without-opt-lib=${opt-dir}/lib
 --with-make-prog
 --without-make-prog
 --srcdir=.
 --curdir
 --ruby=/home/vagrant/.rvm/rubies/ruby-2.3.0/bin/$(RUBY_BASE_NAME)
 --with-pg
 --without-pg
 --enable-windows-cross
 --disable-windows-cross
 --with-pg-config
 --without-pg-config
 --with-pg_config
 --without-pg_config
 --with-pg-dir
 --without-pg-dir
 --with-pg-include
 --without-pg-include=${pg-dir}/include
 --with-pg-lib
 --without-pg-lib=${pg-dir}/lib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /home/vagrant/.rvm/gems/ruby-2.3.0/extensions/x86_64-linux/2.3.0/pg-0.18.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /home/vagrant/.rvm/gems/ruby-2.3.0/gems/pg-0.18.4 for inspection.
Results logged to /home/vagrant/.rvm/gems/ruby-2.3.0/extensions/x86_64-linux/2.3.0/pg-0.18.4/gem_make.out
.
.
.
An error occurred while installing pg (0.18.4), and Bundler cannot continue.
Make sure that `gem install pg -v '0.18.4'` succeeds before bundling.

解决方案: 先不要急着按提示去执行，出现这个问题可能是你没有安装 PostgreSQL 或是没有指定 pgsql 的路径。如果没有安装 PostgreSQL，点击传送门去安装 (注意：执行yum install postgresql-server后继续往下看文档安装 pgsql 的扩展，建议最好安装的 PostgreSQL 是 9.X 以上版本，否则许多新特性无法使用)。英文不太好的同学可以到这篇博客PostgreSQL 新手入门看看。步骤 1: 安装libpq-dev包 Ubuntu 执行以下命令：

$ apt-get install libpq-dev

CentOS/RetH执行以下命令：

$ yum install postgresql-devel

步骤 2: 找到你的 pgsql 安装目录我的是在/usr/pgsql-9.4，也有可能会在/usr/local/pgsql，因系统而异。

步骤 3: with-pg-config后面接的就是 pgsql 目录下的 pg_config 文件，注意--with-pg-config前面还有两个-

$ gem install pg -v '0.18.4' -- --with-pg-config=/usr/pgsql-9.4/bin/pg_config

步骤 4: 重新执行bundle命令

无法连接 pgsql

问题重现: 运行rails s -b 0.0.0.0 -p 3000后，在浏览器打开项目首页出现下面问题

PG::ConnectionBad (FATAL:  Ident authentication failed for user "postgres"
):
  activerecord (4.2.3) lib/active_record/connection_adapters/postgresql_adapter.rb:655:in `initialize'
  activerecord (4.2.3) lib/active_record/connection_adapters/postgresql_adapter.rb:655:in `new'
  activerecord (4.2.3) lib/active_record/connection_adapters/postgresql_adapter.rb:655:in `connect'
  activerecord (4.2.3) lib/active_record/connection_adapters/postgresql_adapter.rb:242:in `initialize'
  activerecord-postgis-adapter (3.1.0) lib/active_record/connection_adapters/postgis_adapter.rb:51:in `initialize'
.
.
.

解决方案: 找到 pg_hba.conf文件，一般是在/var/lib/pgsql/data目录下，如果修改后不生效看看/var/lib/pgsql目录下是否还有其他的数据目录。因系统环境而异。使用vim或vi打开步骤 1:

$ vim /var/lib/pgsql/data/pg_hba.conf

步骤 2: 按住shift + g 将光标定位的文件底部，按i进入编辑模式，修改 METHOP 为 md5 验证。完成后按shift + : 进入命令模式，输入wq完成编辑。下面给出修改后效果

.
.
.
# TYPE  DATABASE    USER        CIDR-ADDRESS          METHOD

# "local" is for Unix domain socket connections only
local   all         all                               md5
# IPv4 local connections:
host    all         all         127.0.0.1/32          md5
# IPv6 local connections:
host    all         all         ::1/128               md5

步骤 3: 重启postgresql服务

$ service postgresql restart

type "json" does not exist

问题重现: 执行rake db:migrate时出现错误，错误代码如下：

$ rake db:migrate
.
.
.
== 20151208044806 CreateShops: migrating ======================================
-- create_table(:shops)
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::UndefinedObject: ERROR:  type "json" does not exist
LINE 1: ...ying NOT NULL, "logo" character varying, "images" json, "reg...
.
.
.

解决方案：出现这种问题大多是因为安装了老版的 PostgreSQL，在 CentOS 上面执行yum install postgresql默认是 8.X 版本。升级版本即可。

步骤 1:删除旧版 postgresql

$ yum remove postgresql*

步骤 2:更新 yum

$ yum update

步骤 3: 到http://yum.pgrpms.org/reporpms/选择 9.X 以上版本下载相应的 rpm 包

$ wget https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-6-x86_64/pgdg-centos94-9.4-2.noarch.rpm

步骤 4:使用下载好的 rpm 包

$ rpm -ivh pgdg-centos94-9.4-2.noarch.rpm

步骤 5:安装postgresql94-server

yum -y install postgresql94-server

步骤 6:重新启动postgresql-94服务

$ service postgresql-9.4 start

type "geography" does not exist

问题重现:执行rake db:migrate时出现错误，错误代码如下：

$ rake db:migrate
.
.
.
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::UndefinedObject: ERROR:  type "geography" does not exist
LINE 1: ... "address" character varying NOT NULL, "location" geography(...
.
.
.

解决方案: 这是由于没有安装支持geography类型数据的扩展，笔者使用的是 PostgreSQL-9.4 版本，这里给出 9.X 版本的解决方案。为了后续用到其他扩展方便，这里也就一起安装了。

步骤 1: list命令查看postgresql有哪些扩展，当你看到下面效果说明你的 yum 库中有这些扩展，如果没有请到http://yum.pgrpms.org/reporpms/选择 9.X 以上版本下载相应的 rpm 包安装。如果不需要请跳过步骤 1，步骤 2

$ yum list postgresql94-*
已加载插件：fastestmirror
Repository pgdg94 is listed more than once in the configuration
Repository pgdg94-source is listed more than once in the configuration
Loading mirror speeds from cached hostfile
 * base: mirrors.yun-idc.com
 * extras: mirrors.yun-idc.com
 * updates: mirrors.yun-idc.com
已安装的软件包
postgresql94.x86_64                                                               9.4.7-1PGDG.rhel6                                                    @pgdg94
postgresql94-libs.x86_64                                                          9.4.7-1PGDG.rhel6                                                    @pgdg94
postgresql94-server.x86_64                                                        9.4.7-1PGDG.rhel6                                                    @pgdg94
可安装的软件包
postgresql94-contrib.x86_64                                                       9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-debuginfo.x86_64                                                     9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-devel.x86_64                                                         9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-docs.x86_64                                                          9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-jdbc.x86_64                                                          9.3.1101-1PGDG.rhel6                                                 pgdg94 
postgresql94-jdbc-debuginfo.x86_64                                                9.3.1101-1PGDG.rhel6                                                 pgdg94 
postgresql94-odbc.x86_64                                                          09.03.0400-1PGDG.rhel6                                               pgdg94 
postgresql94-odbc-debuginfo.x86_64                                                09.03.0400-1PGDG.rhel6                                               pgdg94 
postgresql94-plperl.x86_64                                                        9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-plpython.x86_64                                                      9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-pltcl.x86_64                                                         9.4.7-1PGDG.rhel6                                                    pgdg94 
postgresql94-python.x86_64                                                        4.2-1PGDG.rhel6                                                      pgdg94 
postgresql94-python-debuginfo.x86_64                                              4.2-1PGDG.rhel6                                                      pgdg94 
postgresql94-tcl.x86_64                                                           2.1.1-1.rhel6                                                        pgdg94 
postgresql94-tcl-debuginfo.x86_64                                                 2.1.1-1.rhel6                                                        pgdg94 
postgresql94-test.x86_64

步骤 2:安装扩展

$ sudo yum install postgresql94-*

步骤 3: 前往postgis安装扩展。友情提示：自行编译源码的话，如果系统编译环境不完全，会折腾很久，建议直接用 yum 安装。推荐一篇文章 centos 安装 postgis 。作者是为 PostgreSQL 源加上 EPEL 源，直接 yum 安装，无痛解决依赖问题。抓狂的同学速度 get。如果依然报错，请执行rake db:drop，然后再创建一次数据库就行了。

wysiwyg-rails 编辑器支援七牛云存储

tkvern — Thu, 25 Feb 2016 16:13:08 +0800

wysiwyg-rails-qiniu

wysiwyg-rails-qiniu 是基于 wysiwyg-rails制作，上传的资源直接支持七牛云存储在使用该 gem 包前，你得会使用七牛云存储传送门：Rails 进阶—— 云存储实战

安装

添加下面代码到你的 Gemfile:

gem "wysiwyg-rails-qiniu"

然后运行 bundle install.

将资源文件加入到你的 `assets`目录

在你的 application.css 文件中，引入下列文件：

/*
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome
 */

如果你想使用黑色主题，你可以加入 themes/dark.min.css 到application.css文件中。

在你的 application.js, 引入以下文件：

//
//= require froala_editor.min.js
//

如果你想使用更多功能插件 Available Plugins, 你应该将下面的这些文件加入的 application.js 和 application.css. 其中support_qiniu.min.js是必须要引入的，否则无法使用七牛云存储

// Include other plugins.
//= require plugins/support_qiniu.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js

/*
 *= require plugins/char_counter.min.css
 *= require plugins/code_view.min.css
 *= require plugins/colors.min.css
 *= require plugins/emoticons.min.css
 *= require plugins/file.min.css
 *= require plugins/fullscreen.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/image.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css
 */

同样的，如果你要使用中文语言包，请加入响应的 js

// Include Language if needed
//= require languages/zh_cn.js

到目前位置你已经配置好编辑的基本资源，你需要重启 rails 服务器

初始化编辑器

详细文档请参见作者官网，提供了初始化代码 Froala WYSIWYG Editor official documentation.

这里提供部分示例代码，在使用下面代码之前你应该需要知道如何生成七牛上传凭证

$(function() {
  $('#edit').froalaEditor({
    language: "zh_cn",
    width: 900,
    heightMin: 300,
    heightMax: 500,
    requestWithCORS: false,

    //图片上传配置(必须)
    imageUploadDomain: "<%= Rails.application.config.qiniu_domain %>",    //七牛云存储空间域名地址
    imageUploadParam: 'file',
    imageUploadURL: 'http://upload.qiniu.com',                            //七牛上传服务器, 如果是海外服务器为 http://up.qiniu.com
    imageUploadParams: { token: '<%= @uptoken %>'},                       //上传凭证, 详细规则查看七牛官方文档
    imageUploadMethod: 'POST',
    imageMaxSize: 5 * 1024 * 1024,
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],

    //文件上传配置(必须)
    fileUploadDomain: "<%= Rails.application.config.qiniu_domain %>",     //七牛云存储空间域名地址
    fileUploadParam: 'file',
    fileUploadURL: 'http://upload.qiniu.com',                             //同上
    fileUploadParams: { token: '<%= @uptoken %>'},                        //同上
    fileUploadMethod: 'POST',
    fileMaxSize: 20 * 1024 * 1024,
    fileAllowedTypes: ['*']
  });
});

配置代码视图

使用代码视图加高亮效果，可加入以下代码，也可以使用codemirror-rails这个 gem 包

<link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" media="screen" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>

许可

wyg-rails 项目是在麻省理工学院的许可。然而，为了使用 Froala WYSIWYG HTML 编辑器插件你应该购买一个许可证。下面是许可链接，请支持源作者 Froala Editor has 3 different licenses. For details please see License Agreement.

致谢

感谢 Froala 项目作者的贡献，我在项目的原基础上增加了对七牛云存储的支持. 如果你需要使用其它的云存储平台，请使用wysiwyg-rails进行自定义配置

[教程] Rails 进阶—— 云存储实战

tkvern — Wed, 17 Feb 2016 11:05:16 +0800

七牛云存储使用教程 (Ruby on Rails + JavaScript)

标签（空格分隔）：Rails 七牛

欢迎关注我的Github(tkvern) (博客服务器很久没维护，已经挂掉了，上 github 吧)

[TOC]

1.吐槽

写教程之前不得不吐槽一下七牛的官方文档，API 的说明是很全面，但是读起来超蛋疼。为什么这么说呢，按照我以往的看 API 的文档都会有示例代码跑起来帮助理解，而七牛的 API 文档对于刚接触这种第三方服务商 SDK 的开发者来说不是太友好。建议七牛借鉴下百度地图 SDK的文档写法。

2.初识

七牛云存储是一家专注云存储领域的技术公司，提供云存储、云处理、云加速分发一站式服务，持续追求高可靠、高可用、高性能、高响应速度，推动客户健康稳定地快速发展。（前面是广告）

以往开发项目时总会遇到上传文件的问题，譬如上传速度、断点续传、资源服务器部署等等。存在自己的服务器上面，维护成本高。那如何解决这些问题呢，有需求就有市场，云存储应运而生，把这些处理统统放到云存储上，只需要进行 API 调用即可，而这次我们选中了七牛云存储，便宜，好用，快速。（广告打了一大堆，进入正题吧）

3.使用

教程正式开始

3.1 注册

使用前得先注册一个七牛云存储的账号，-->注册传送门<--

3.2 登录认证

登录之后查看你的账号身份认证，完成认证解锁更多功能

3.3 创建空间

3.4 获取 AK, SK，空间域名

3.5 查看上传文件

3.6 配置服务器环境

在使用七牛云存储前我们先要配置好上传凭证的生成环境

代码清单 3.6.1: 导入七牛云存储的gem包 Gemfile

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~>4.2.3'
# Use postgresql as the database for Active Record
.
.
.
gem 'qiniu' #加入七牛云存储gem包
.
.
.

代码清单 3.6.2: 然后重新bundle我们的项目会看到安装了很多gem包

$ bundle install
.
.
.
Using qiniu 6.5.1
.
.
.
Bundle complete! 17 Gemfile dependencies, 66 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

如果有提示安装失败或是无法安装一些国外的镜像可修改Gemfile的源到淘宝源或是自行翻墙，推荐一款翻墙工具Shadowsocks

3.7 配置 AccessKey/SecretKey

代码清单 3.7.1: 新建qiniu_sdk.rb文件，将 3.3 节获取到的 AK,SK，空间域名地址输入下面代码 config/initializers/qiniu_sdk.rb

#!/usr/bin/env ruby

require 'qiniu'

Qiniu.establish_connection! :access_key => '<输入你的AK>',
                            :secret_key => '<输入你的SK>'

Rails.application.config.qiniu_domain = "<空间域名地址>"

3.8 生成上传凭证

代码清单 3.8.1: 这个方法我会包装到 Helper 里面 app/helpers/application_helper.rb

module ApplicationHelper
  private
    def uptoken

      put_policy = Qiniu::Auth::PutPolicy.new(
        "<你的空间名称>",                    # 存储空间
        nil,                           # 最终资源名，可省略，即缺省为“创建”语义
        1800,                          # 相对有效期，可省略，缺省为3600秒后 uptoken 过期
        (Time.now + 30.minutes).to_i  # 绝对有效期，可省略，指明 uptoken 过期期限（绝对值），通常用于调试，这里表示半小时
      )

      uptoken = Qiniu::Auth.generate_uptoken(put_policy) #生成凭证

    end
end

到目前为止我们以及完成了服务端的所有配置，当我们的文件上传时，是不经过我们自己的服务器的，由客户端通过 Ajax 请求七牛的 API 再将返回的文件名存入我们的服务器。接下来就是客户端的配置

3.9 导入七牛 JavaScriptSDK

-->下载 JavaScriptSDK 传送门<--

代码清单 3.9.1: 为了代码易于管理我们将七牛的 JavaScriptSDK 文件放到app/assets/javascripts/plugins目录

- app
  - assets
    + fonts
    + images
    - javascript
      - plugins
        - plupload
            moxie.js
            plupload.dev.js
            plupload.full.min.js
        - qiniu
            qiniu.js
            qiniu.min.js
      application.js
    + stylesheets

代码清单 3.9.2: 引用 SDK 到application.js app/assets/javascripts/application.js

// # Place all the behaviors and hooks related to the matching controller here.
// # All this logic will automatically be available in application.js.
// # You can use CoffeeScript in this file: http://coffeescript.org/

//= require plugins/plupload/moxie
//= require plugins/plupload/plupload.dev
//= require plugins/qiniu/qiniu

3.91 初始化 javascript

在完成以上操作之后我们就可以正式使用七牛云存储了

代码清单 3.9.3: 在controller中引入helper方法，传入上传凭证 app/controllers/uploads_controller.rb

class UploadsController < ActionController::BaseController
  include ApplicationHelper

  def index
    # 获取上传凭证
    @uptoken = uptoken
  end
end

代码清单 3.9.4: 代码清单在视图文件中使用 app/views/upload/index.html.erb

<!-- 初始化按钮 start -->
<div class="col-md-12">
    <div id="container" style="position: absolute; top: 50px;">
        <a class="btn btn-default btn-lg " id="pickfiles" href="#" style="position: relative; z-index: 1;">
            <i class="fa fa-plus"></i>
            <span>选择文件</span>
        </a>
    </div>
</div>
<!-- 初始化按钮 end -->

<!-- 初始化配置 start -->
<script type="text/javascript">
  var uploader = Qiniu.uploader({
    runtimes: 'html5,html4',          //上传模式,依次退化
    browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
    uptoken : '<%= @uptoken %>',
        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
    unique_names: true,
        // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
    save_key: true,
        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
    domain: '<%= Rails.application.config.qiniu_domain %>',
        //bucket 域名，下载资源时用到，**必需**
    container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
    max_file_size: '5mb',           //最大文件体积限制
    // flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
    max_retries: 3,                   //上传失败最大重试次数
    dragdrop: true,                   //开启可拖曳上传
    drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
    chunk_size: '1mb',                //分块上传时，每片的体积
    auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
    init: {
        'FilesAdded': function(up, files) {
            plupload.each(files, function(file) {
                // 文件添加进队列后,处理相关的事情
            });
        },
        'BeforeUpload': function(up, file) {
               // 每个文件上传前,处理相关的事情
        },
        'UploadProgress': function(up, file) {
               // 每个文件上传时,处理相关的事情
        },
        'FileUploaded': function(up, file, info) {
               // 每个文件上传成功后,处理相关的事情
               // 其中 info 是文件上传成功后，服务端返回的json，形式如
               // {
               //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
               //    "key": "gogopher.jpg"
               //  }
               // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
               var domain = up.getOption('domain');
               var res = $.parseJSON(info);
               var sourceLink = domain + res.key; //获取上传成功后的文件的Url
               console.log(info);
               console.log(sourceLink);
        },
        'Error': function(up, err, errTip) {
               //上传出错时,处理相关的事情
        },
        'UploadComplete': function() {
               //队列文件处理完毕后,处理相关的事情
        },
        'Key': function(up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效
            var key = "";
            // do something with key here
            return key
        }
    }
});
</script>
<!-- 初始化配置 end -->

代码清单 3.9.5: 完成了这么多复杂的操作后终于可以试试效果了，启动 Rails 服务器看看吧

$ rails server -b $IP -p $PORT

4.作者

如果教程里面有什么纰漏的地方请给我留言

tkvern (Vern Brandl)

让你的文字自动适配背景颜色

正文

思路与实现

第一步

第二步

跨域问题

第三步

第四步

颜色量化算法

第五步

基 HOG 特征

主要思想

具体的实现方法是

提高性能

优点

第六步

最后

Golang 生态是否有能与 Rails 媲美的框架？

[深圳] 加推科技火热🔥招聘中 前端/小程序/Java/App (15-25K)

关于我们

工作环境

前端工程师 (小程序工程师)

iOS 工程师

Android 工程师

Java 工程师

企业福利

Midway.js 最佳实践案例工程，Node.js 社区几与 Rails 媲美的 Web 框架

FSD service

项目导览 & TODO

框架特性及能力应用

功能

快速开始

Development

Deploy

npm scripts

Redis

Redis 划分

数据库

查询注意事项

接口响应统计中间件 (设计)

迁移 API

【水贴】脱离 Ruby 这些年

传播正能量，健康生活。996.ICU

996.ICU

相关法律法规

《中华人民共和国宪法》

第二章第四十三条：

《中华人民共和国劳动法》

第一章第三条：

第四章第三十六条：

第四章第三十九条：

第四章第四十一条：

第四章第四十三条：

第四章第四十四条：

第十二章第九十条：

第十二章第九十一条：

《中华人民共和国劳动合同法》

第三章第三十一条：

第五章第六十二条：

第七章第八十五条：

《国务院关于职工工作时间的规定》

第三条：

第六条：

《劳动部贯彻〈国务院关于职工工作时间的规定〉的实施办法》

第三条：

第六条：

第八条：

相关事件报道

学习 Rails 有感

我如何选择框架和构建框架

框架选择优先级

继承 Rails 思想的

像 Rails 的

Rails

构建框架

Nodejs 的抉择

[未完结......]

RC UI 上的小问题

程序员发生劳动纠纷该如何处理？

[深圳] 加推科技火热🔥招聘中前端/小程序/Java/App (15-25K)

分析`will_paginate`源码

加入到`initializers`

将资源文件加入到你的 `assets`目录