hfpp2012 (随风)

释出自己的 ruby gem 02 acts_as_avatar 给系统自动加上数种随机头像

hfpp2012 — Wed, 07 Sep 2022 14:16:07 +0800

上一节：释出自己的 ruby gem 01 where_streets 实现省市县镇四级联动

我们经常要给系统，比如一个后台，添加用户的头像，有时候我想先随机给每个后台用户先生成一个，那么可以用这个 gem。

acts_as_avatar

源码：acts_as_avatar （欢迎 star）

第二个 gem 是关于头像的，先看下效果

这个头像不止一种。

还有其他几种：

这些头像是可以配置的，先用哪种，只要在配置文件里修改下就行。

安装使用

https://rubygems.org/gems/acts_as_avatar

bundle add acts_as_avatar

生成表和配置文件：

rails g acts_as_avatar:install

使用方法很简单：

# view
<%= acts_as_avatar_tag(admin_user, class: "rounded-circle") %>

<%= acts_as_avatar_tag(current_admin_user, size: 36, class: "rounded-circle") %>

<%= acts_as_avatar_tag(current_admin_user, name: :avatar_name, class: "rounded-circle") %>

<%= github_avatar_tag complexity: 5, size: 60 %>

<%= github_avatar_tag size: 60, rounded_circle: true %>

# model
acts_as_avatar inline_svg_engine: :initial_avatar

# or

acts_as_avatar

配置文件的内容如下：

# frozen_string_literal: true

# config/initializers/acts_as_avatar.rb
ActsAsAvatar.configure do |config|
  config.random_image_engine = ENV["random_image_engine"]
  # config.uifaces_limit       = 20
  # config.uifaces_gender      = "female"
  # config.uifaces_uri         = "https://api.uifaces.co"
  # config.uifaces_api_key     = ""
  # config.default_file_name   = "default_avatar"
  # config.upload_max_size     = 2.megabytes
  # config.avatar_size         = 60
  config.inline_svg_engine     = ENV["inline_svg_engine"]
  config.avatar_name           = :avatar_name
  config.class_type            = %w[AdminUser]
  config.github_complexity     = 5
  config.github_render_method  = "square"
  config.github_rounded_circle = true
end

关于配置文件的各种取值，可以看这个文件：

https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/generators/templates/initializer.rb.tt

比如 random_image_engine 的取值就是 :letter_avatar, :uifaces_avatar, :github_avatar, or :identicon_avatar

你可以试下，会变成不同的图标。

源码和原理

主要的原理就是在每个使用头像的 model 保存时，把随机头像放进去，放到一个单独的表中。

这个是核心，了解下：

# belongs_to :avatarable, polymorphic: true
delegated_type :avatarable, types: ActsAsAvatar.configuration.class_type
validates :avatarable_type, presence: true
# delegate :email, to: :avatarable
# accepts_nested_attributes_for :avatarable
has_one_attached :upload_avatar
has_one_attached :default_avatar
after_create_commit :add_default_avatar, if: -> { random_image_engine.present? }
validates :upload_avatar, size: { less_than: ActsAsAvatar.configuration.upload_max_size },
                          content_type: %r{\Aimage/.*\z}
after_create_commit :sanitize_svg, if: :svg?

主要是这个：after_create_commit

表示在创建 model 里会去创建随机的头像，

这里用到了 default_avatar 和 upload_avatar，

upload_avatar 表示默认的随机头像，这个 gem 还支持自定义用户自己上传头像，用 upload_avatar 来表示。（后面会演示到）

这个表的结果是这样的：

# == Schema Information
#
# Table name: act_as_avatars
#
#  id              :bigint           not null, primary key
#  avatarable_type :string           not null
#  created_at      :datetime         not null
#  updated_at      :datetime         not null
#  avatarable_id   :bigint           not null
#
# Indexes
#
#  index_avatars_on_avatarable  (avatarable_type,avatarable_id)
#

上面是核心的，其他的都是细节，可以通过读源码知道。

https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/class_methods.rb model 里有使用的 method 的源码。

可以用的 helper 方法放在这里：

https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/helper.rb

可以自行找来用。

其中有个头像是用了第三方的 api，原理在这里：https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/request.rb

值得注意的是，头像也支持 svg，我用到了 svg 的清理技术，有兴趣的可以了解下：

https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/scrubber.rb

有一个头像好像是 github 头像，用到了 js，我用了 js 去调 ruby。

https://github.com/hfpp2012copy/acts_as_avatar/blob/main/lib/acts_as_avatar/github_avatar.rb

差不多是这样，有问题可以一起讨论交流。

最近别忘了 follow 和 star（换了一个新的 github 号)

有问题可以一起交流，wechat: qiuzhi99pro

其它的等我慢慢更新。想学 ruby 和 rails 的可以看看我录制的教程哈：https://www.qiuzhi99.com/playlists/ruby.html

原文链接：https://www.qiuzhi99.com/articles/ruby/97611.html

释出自己的 ruby gem 01 where_streets 实现省市县镇四级联动

hfpp2012 — Wed, 07 Sep 2022 13:32:47 +0800

原文链接：https://www.qiuzhi99.com/articles/ruby/97610.html

最近大半年做了一个新项目，把 rails 7 新特性探究得差不多，学习了很多东西，也有一些经验可以分享出来。

首先要分享的是，我最近写了十几个 gem，本来打算私用的，现在改变想法，把它分享出来，希望对大家有所帮助。

01. where_streets 实现省市县镇四级联动

02. acts_as_avatar 给系统自动加上数种随机头像

03. custom_trix 增强型 trix

04. activestorage_upyun 又拍云存储

05. error404 自定义错误页面

06. flag_icons 国家图标

07. ip_locator ip 地址定位

08. niceadmin 漂亮的后台

09. rails_boxicons boxicons svg 图标

10. ant_design_icon ant design svg 图标

11. rails_fontawesome6 svg 图标

12. tinymce_extended tinymce 增强

13. table_for 增强

14. rails_remixicon 增强

15. youdao_translate_all 有道云翻译 api

16. helper_extended helper 个性增强

17. loading_svg 图标

18. activestorage_tencent 和 tencent_cos 腾讯 cos 云存储

19. iconfont 官网图标封装

20. where_city 通过坐标查城市位置

除了 gem 可能还有其他经验分享，等我慢慢梳理更新。

where_streets

源码：https://github.com/hfpp2012copy/where_streets （欢迎 star）

实现省市县镇多级联动功能，网络上关于 ruby 的 gem 好像是有，不过有些老了，不太好用。

我自己实现了一个，很简单。

我会把源码和使用方法分享出来。

大家可以一起学习讨论。

先看功能：

也可以是三级联动的，把镇去掉就行。

还有下面这种形式：

安装使用

https://rubygems.org/gems/where_streets

第一步：安装

bundle add where_streets

第二步：直接在表单中用

例如：

<%= bootstrap_form_with model: admin_user, url: admin_account_path, method: :put, data: { controller: "form--request ts--cities-select dropzone-uploader" }, html: { class: "needs-validation mt-3" } do |form| %>
  <%= form.fields_for :avatar do |f| %>
    <%= f.avatar_file_field :upload_avatar, remove_path: remove_avatar_admin_users_path %>
  <% end %>
  <%= form.fields_for :admin_profile do |f| %>
    <%= f.text_field :fullname %>
    <%= f.rich_text_area :about, style: "height: 100px;" %>
  <% end %>
  <%= form.text_field :email, disabled: true %>
  <%= form.select :province, WhereStreets.find_provinces, { include_blank: t("labels.please_select") }, data: { ts__cities_select_target: "province" } %>
  <%= form.select :city, WhereStreets.find_cities(form.object.province || ""), { include_blank: t("labels.please_select") }, data: { ts__cities_select_target: "city" } %>
  <%= form.select :county, WhereStreets.find_counties(form.object.province || "", form.object.city || ""), { include_blank: t("labels.please_select") }, data: { ts__cities_select_target: 'county' } %>
  <%= form.select :town, WhereStreets.find_towns(form.object.province || "", form.object.city || "", form.object.county || ""), { include_blank: t("labels.please_select") }, data: { ts__cities_select_target: 'town' } %>
  <%= form.update_button %>
<% end %>

这里我用了 stimulus。

我也分享出来：

主要是这个 ts--cities-select controller

// app/javascript/controllers/ts/cities_select_controller.js
import { Controller } from "@hotwired/stimulus";
import { get } from "@rails/request.js";
import TomSelect from "tom-select";

// Connects to data-controller="ts--cities-select"
export default class extends Controller {
  static targets = ["province", "city", "county", "town"];

  initialize() {
    ["province", "city", "county", "town"].forEach((name) : {
      Object.defineProperty(this, `${name}Value`, {
        get: function () {
          return this[`${name}Target`].value;
        },
      });

      Object.defineProperty(
        this,
        `tomSelect${name[0].toUpperCase() + name.slice(1)}`,
        {
          get: function () {
            if (!this[name])
              this[name] = new TomSelect(this[`${name}Target`], {
                plugins: ["clear_button"],
              });

            return this[name];
          },
        }
      );
    });
  }

  connect() {
    this.tomSelectProvince;
    this.tomSelectCity;
    this.tomSelectCounty;
    if (this.hasTownTarget) this.tomSelectTown;

    this.provinceTarget.addEventListener("change", () : {
      this.fetchData({
        url: "/admin/cities/cities_filter",
        query: { province: this.provinceValue },
        selectTarget: this.tomSelectCity,
      });
    });

    this.cityTarget.addEventListener("change", () : {
      this.fetchData({
        url: "/admin/cities/counties_filter",
        query: { province: this.provinceValue, city: this.cityValue },
        selectTarget: this.tomSelectCounty,
      });
    });

    this.countyTarget.addEventListener("change", () : {
      if (!this.hasTownTarget) return;

      this.fetchData({
        url: "/admin/cities/towns_filter",
        query: {
          province: this.provinceValue,
          city: this.cityValue,
          county: this.countyValue,
        },
        selectTarget: this.tomSelectTown,
      });
    });
  }

  async fetchData(options) {
    const { url, query, selectTarget } = options;

    const response = await get(url, {
      query,
      responseKind: "json",
    });

    if (response.ok) {
      this.setOptionsData(await response.json, selectTarget);
    } else {
      console.log(response);
    }
  }

  setOptionsData(items, selectTarget) {
    selectTarget.clear();
    selectTarget.clearOptions();
    selectTarget.addOptions(items);
  }

  render_option(data, escape) {
    if (data.sub)
      return `
      <div>
        <div class="text">${escape(data.text)}</div>
        <div class="sub">${escape(data.sub)}</div>
      </div>`;
    else return `<div>${escape(data.text)}</div>`;
  }
}

这里有用到 tom-select，可以用 yarn add tom-select 安装一下。

查看上面的 js 代码，可以看到，这里用到了 api 查询（比如 /admin/cities/towns_filter），因为每次选择位置后，都会发请求去得到数据，比如选了某个省，会把这个省的所有城市数据得到。

我这里可以新建一个 controller 就搞定。

# frozen_string_literal: true

module Admin
  class CitiesController < BaseController
    # @route GET /admin/cities/cities_filter (admin_cities_cities_filter)
    def cities_filter
      @cities = WhereStreets.find_cities(params[:province])
      render json: @cities.map { |city| { text: city, value: city } }
    end

    # @route GET /admin/cities/counties_filter (admin_cities_counties_filter)
    def counties_filter
      @counties = WhereStreets.find_counties(params[:province], params[:city])
      render json: @counties.map { |county| { text: county, value: county } }
    end

    # @route GET /admin/cities/towns_filter (admin_cities_towns_filter)
    def towns_filter
      @towns = WhereStreets.find_towns(params[:province], params[:city], params[:county])
      render json: @towns.map { |town| { text: town, value: town } }
    end
  end
end

最后你把在 model 里存几个字段，比如 province, city 等存到数据库为就好。

源码或原理分享

原理比较简单，主要就是读取网络上最新的 json 文件进行解析数据。

提供了一些查找功能，比如找一个省下的所有城市，一个城市下的所有区等等。

require "singleton"
require "forwardable"
require "fast_blank"
require "msgpack"

class WhereStreets
  autoload :VERSION, "where_streets/version"

  FILE = MessagePack.unpack(File.read(File.expand_path("../pcas.mp", __dir__))).freeze

  include Singleton

  class << self
    extend Forwardable
    def_delegators :instance, :find_provinces, :find_cities, :find_counties, :find_towns
  end

  def find_provinces
    FILE.keys
  end

  def find_cities(province)
    return [] if province.blank?

    handle_error do
      FILE[province.to_s].keys
    end
  end

  def find_counties(province, city)
    return [] if [province, city].any? { |i| i.blank? }

    handle_error do
      FILE[province.to_s][city.to_s].keys
    end
  end

  def find_towns(province, city, county)
    return [] if [province, city, county].any? { |i| i.blank? }

    handle_error do
      FILE[province.to_s][city.to_s][county.to_s]
    end
  end

  private

  def handle_error
    yield
  rescue StandardError : e
    puts e.inspect
    puts e.backtrace
    []
  end
end

这些在源码里可以研究到，最新一版本是用了 msgpack 这个库，也可以不用它，之前没有用的，可以通过代码去查之前的版本。

里面还有一些测试代码，可以看看其用法：

require "test_helper"

class WhereStreetsTest < Minitest::Test
  def test_that_it_has_a_version_number
    refute_nil ::WhereStreets::VERSION
  end

  def test_provinces
    assert_equal 31,
                 WhereStreets.find_provinces.length
  end

  def test_cities
    assert_equal %w[广州市 韶关市 深圳市 珠海市 汕头市 佛山市 江门市 湛江市 茂名市 肇庆市 惠州市 梅州市 汕尾市 河源市 阳江市 清远市 东莞市 中山市 潮州市 揭阳市 云浮市],
                 WhereStreets.find_cities("广东省")
    assert_equal ["市辖区"], WhereStreets.find_cities("上海市")

    assert_empty WhereStreets.find_cities("")
  end

  def test_counties
    assert_equal %w[罗湖区 福田区 南山区 宝安区 龙岗区 盐田区 龙华区 坪山区 光明区],
                 WhereStreets.find_counties("广东省", "深圳市")
    assert_equal %w[黄浦区 徐汇区 长宁区 静安区 普陀区 虹口区 杨浦区 闵行区 宝山区 嘉定区 浦东新区 金山区 松江区 青浦区 奉贤区 崇明区],
                 WhereStreets.find_counties("上海市", "市辖区")
    assert_empty WhereStreets.find_counties("", "")
    # assert_empty WhereStreets.find_counties("广东省", "海丰市")
  end

  def test_towns
    assert_equal %w[梅陇镇 小漠镇 鹅埠镇 赤石镇 鮜门镇 联安镇 陶河镇 赤坑镇 大湖镇 可塘镇 黄羌镇 平东镇 海城镇 公平镇 附城镇 城东镇],
                 WhereStreets.find_towns("广东省", "汕尾市", "海丰县")
    assert_empty WhereStreets.find_towns("", "", "")
  end
end

最后

以后有位置数据需要更新，只要替换 json 文件就行，这样就能保证使用到最新的位置信息。

补充一下：

我自己的项目关于 view 的用法被我封装了，可以用起来更简单：

只要一行代码。

<%= form.cities_select :location, town: true %>

要出现镇就把 town 设为 true, 反之就没有。

之所有这么简单是因为进行了封装，而且用了 bootstrap_form

可以参考了解一下（仅供参考）：

# config/initializer/bootstrap_form.rb

module BootstrapForm
  class FormBuilder
    def cities_select(field_name, town: false, **_options)
      location_select = province_select + city_select + county_select

      location_select += town_select if town

      content_tag(:div, class: "mb-3 row", data: { controller: "ts--cities-select" }) do
        concat label(field_name, class: label_col)
        concat(content_tag(:div, class: control_col) do
          content_tag(:div, location_select, class: "row")
        end)
      end
    end

    private

    def province_select
      content_tag(
        :div,
        select_without_bootstrap(
          :province,
          WhereStreets.find_provinces,
          { include_blank: t("labels.please_select") },
          data: { ts__cities_select_target: "province" },
          class: "form-control"
        ),
        class: "col"
      )
    end

    def city_select
      content_tag(
        :div,
        select_without_bootstrap(
          :city,
          WhereStreets.find_cities(object.province || ""),
          { include_blank: t("labels.please_select") },
          data: { ts__cities_select_target: "city" },
          class: "form-control"
        ),
        class: "col"
      )
    end

    def county_select
      content_tag(
        :div,
        select_without_bootstrap(
          :county,
          WhereStreets.find_counties(object.province || "", object.city || ""),
          { include_blank: t("labels.please_select") },
          data: { ts__cities_select_target: "county" },
          class: "form-control"
        ),
        class: "col"
      )
    end

    def town_select
      content_tag(
        :div,
        select_without_bootstrap(
          :town,
          WhereStreets.find_towns(object.province || "", object.city || "", object.county || ""),
          { include_blank: t("labels.please_select") },
          data: { ts__cities_select_target: "town" },
          class: "form-control"
        ),
        class: "col"
      )
    end

  end
end

主要是这里 cities_select 这个方法。（具体自己看吧）

最近别忘了 follow 和 star（换了一个新的 github 号)

有问题可以一起交流，wechat: qiuzhi99pro

其它的等我慢慢更新。想学 ruby 和 rails 的可以看看我录制的教程哈：https://www.qiuzhi99.com/playlists/ruby.html

原文链接：https://www.qiuzhi99.com/articles/ruby/97610.html

hotwire-livereload 有人用吗，页面自动刷新的工具

hfpp2012 — Mon, 31 Jan 2022 20:37:15 +0800

https://github.com/kirillplatonov/hotwire-livereload

看了下源码，原理就是去监听文件改变，然后利用 actioncable 广播到浏览器，让浏览器自动 Turbo.visit，相当于让页面修改生效

我用 Rails 7 集成了一个开源的漂亮的后台 Niceadmin

hfpp2012 — Wed, 26 Jan 2022 12:49:00 +0800

Niceadmin 是开源的，网络上可以下载到，我用 rails 7 把它集成了

https://start.rails365.net/admin

会集成各种功能，插件，主要是为了以后写代码方便。

还没全部弄好，正在继续中。

支持自动化部署：cap

已经开源：https://gitlab.qiuzhi99.com/hfpp2012/opensource_railstart

我用 homeland 搭建了一个创业者社区

hfpp2012 — Wed, 01 Dec 2021 10:51:46 +0800

一个人就是一家公司，分享独立创业者信息，远离通勤，远离 996，放下枷锁，走上创业之路

https://soho.qiuzhi99.com/

分享一些创业相关的思想，观点，方法

欢迎大家来玩

利用好元编程重构下代码

hfpp2012 — Tue, 06 Apr 2021 14:46:40 +0800

重构前：

重构后：

我的黑苹果之路

hfpp2012 — Mon, 07 Sep 2020 16:13:57 +0800

先上图

用过一台 MacBook Air（2015 年入手）还有一台 MacBook Pro（2017 年入手）之后，苹果笔记本对我来说写代码可以，但是我要剪辑视频，笔记本的散热不行（有声音），性能也够呛，所以准备入手台式机电脑，因为我平时都在家办公，放在房间里正合适。

台式机的电脑比笔记本同价位的话，性能应该能强数个等级吧，又考虑到这台电脑要给老婆使用，老婆不会用 mac 也不会用触摸控，所以要装双系统：windows 10 加上最新的 Macos。

先简单说一下安装过程：1. 购买硬件（硬件对了就基本不用怎么折腾了）2. 安装 windows 10 3. 安装黑苹果系统

1. 购买硬件

这里先说一下一个网站：https://heipg.cn/tutorial/diy-hackintosh-2020.html

你的主要的硬件最好是在上面这个网站有列出的，可能是免驱动的。

我是装机菜鸟，好几年没碰过这些硬件，所以是一边问，一边找适合的硬件，主要是要找到适合黑苹果，硬件要免驱动的，这个正好适合我这个菜鸟。

硬件购买根据自己的预算和需求来，我这里大约花了一万四左右。

这里附上我的硬件：

cpu 英特尔（Intel）i7-9700K 酷睿八核盒装 CPU 处理器

技嘉（GIGABYTE）Z390 AORUS PRO WIFI 主板 + 英特尔 i7 9700K 板 U 套装/主板+CPU 套装￥3499.00 https://item.jd.com/100001415316.html

显卡：rx5700 XT 8G D6 超白金 OC 1770-1905MHz/ 14 Gbps 8GB/256bit GDDR6 DX12 游戏显卡 https://item.jd.com/100008161504.html#crumb-wrap ￥3299.00

内存金士顿 (Kingston) DDR4 3200 32G(16GX2) 套装台式机内存条骇客神条 Fury 雷电系列￥999.00 https://item.jd.com/100007628368.html

硬盘三星（SAMSUNG）500GB SSD 固态硬盘 M.2 接口 (NVMe 协议) 970 EVO（MZ-V7E500BW）￥599.00 https://item.jd.com/7234518.html#crumb-wrap 两块硬盘

显示器：AOC 27 英寸 4K 高清 IPS 广视角微框 99% sRGB 商用办公节能低蓝光不闪旋转升降 PS4 液晶显示器 U2790PQU ￥1999.00 https://item.jd.com/100001071956.html#crumb-wrap

网卡驱动：黑苹果免驱 BCM94360CD 台式机 pcie 无线网卡双频 5G 1750M 蓝牙 4.0 WiFi 接收器 FV-T919(1750M 黑苹果免驱版）￥298.00 https://item.jd.com/18967921252.html

键盘：京东京造 K2 蓝牙双模机械键盘背光 84 键双系统兼容黑色茶轴白光无线键盘键盘机械蓝牙键盘键盘无线 ¥418.00 https://item.jd.com/100012895086.html

鼠标：赛睿（SteelSeries）Rival 650 无线/有线双模鼠标游戏鼠标 RGB 鼠标魔兽怀旧开服鼠标罗技（Logitech）M220 鼠标无线鼠标办公鼠标静音鼠标对称鼠标灰黑色带无线 2.4G

音箱：JBL PS3300 无线蓝牙 2.0 音箱电脑多媒体音箱/音响桌面音箱独立高低音炮台式机手机音响黑色￥399.00 https://item.jd.com/7536808.html

散热：利民（Thermalright）FS140 霜灵双塔散热器全电镀回流焊 8mm 热管 SFDB 风扇 6 年质保 TF7 硅脂 259

电源：海韵 (SEASONIC)FOCUS GX750 750W 电源 80PLUS 金牌全模/十年质保/全日系电容/14cm 小身形/第 3 代静音风扇启停￥849.00 https://item.jd.com/100007186412.html#crumb-wrap

相箱： https://item.jd.com/2917029.html 先马（SAMA）黑洞 3 黑色全塔机箱（支持 ATX 主板/静音/宽大箱体/标配 3 把风扇/调速器/读卡器/ATX-Ⅲ结构）￥399.00

说一下硬件：

总体而言，配置是绝对够的，而且是免驱动的，装黑苹果没啥问题

为了剪视频，显卡贵了，cpu 和主板一般，内存买了两条，总共 32 g，以后不够再扩展，硬盘也是 sdd , 两条，为两个系统使用，容量不够再考虑，显示器，是入门级 4k，显示效果还可以，网卡驱动是为黑苹果使用的，还行，网速和信号比不上同级的 macbook pro 自带的网卡，键盘是机械的，也是第一次玩，茶轴，鼠标买了两个，没必要，有一个用于游戏的，好贵，要八百多块钱，另一个几十块钱，都是无线的。电源贵了，显卡供电是 8+8pin，所以弄了 750w，朋友说比较稳。音箱呢，用于听歌用。相箱好大好重。

总体而言，这配置够用几年了，还是满意的。

2. 安装硬件

就先看视频，跟着视频做。

这里贴个教程：https://zhuanlan.zhihu.com/p/91459238

总体而言，就是按照安装视频来，再结合产品说明书。（因为视频的硬件跟你的可能不同，这时要按照产品说明书来）

让我回忆下整个过程：

先把主板放好，然后装上 CPU，涂上硅脂，再安装风扇。

由于我电源是隔天才到货，我最后安装的电源，我觉得第二步应该是安装电源：

接着把硬盘装上，当初好像要找螺丝柱来固定硬盘，然后装内存，再把主板接入到相箱中，接上电源，我用的全模组电源，要安装说明书来安装。要把机箱的开机重启线接好，还有各种 usb 的线也要接好，这些视频都有。

3. 安装 windows 10

有个问题可能要事先知道一下：如果你有外置的网卡，你应该把主板自带的蓝牙网卡功能都屏蔽掉，在 bios 里处理，具体看主板说明书的

首先准备好一个 16 g 或 32 g 的 u 盘。

我们要把这个 u 盘并写入系统镜像。

用什么写呢，我用的是微 pe。

下载微 pe。

http://www.wepe.com.cn/

然后下载 windows 10 的最新镜像。

https://msdn.itellyou.cn/ 这里有 windows 10 的镜像，你自己去找。

然后运行微 pe，把镜像写入 u 盘，再重启设置为 u 盘启动，然后安装，这个过程简单。

写盘成功后，会有三分分区，要把 win10 镜像解压复制到其中一个分区里去，用 u 盘启动后进行解压的镜像目录里执行 setup.exe 安装

这里注意的是：首先要有 windows 10 系统，不然用不了这个微 pe 工具，如果你没有 windows 系统，应该在别的系统也有别的工具来实现相同的目的，不过我有这个系统，就先这样简单安装了。

4. 安装黑苹果

强烈推荐这个：https://github.com/shiruken/hackintosh (因为跟我的硬件很相似）

只要是硬件对了，安装黑苹果就简单了，只要有两步就可以。

第一步，还是跟安装 windows 系统一样，要写入镜像。

准备好 u 盘，下载工具：

https://www.balena.io/etcher/

这个工具跨平台的。

我当初用的是这个。

接下来呢，就是写入镜像。再用 u 盘启动安装程序

这个过程也简单。

安装完后还是无法用硬盘启动，只能用 u 盘启动。

这个时候下载一个工具，解决，也是第二步。

clover configurator

http://www.pc6.com/mac/294926.html

这个过程就是复制 efi 文件到硬盘中，复制完后就可以拔掉 u 盘启动，完成。

这个过程可看这个教程：https://youtu.be/RhAr0S12XdU

几个由朋友提供的 efi 分享下：

https://github.com/kcunanan/Jared-PC/

https://github.com/Good0007/B365ITX-Hackintosh-OC

https://github.com/Good0007/Asrock-Z390M-ITX-AC-Hackintosh-OC

安装完 macOS 后我把睡眠功能关掉了（在设置里处理）

最后看看跑分：

我的办公桌：

之前显卡我一直点不亮，我就换了个，现在一切可以了。

进去系统后，登录 App Store, 也登录 iCloud。

我这边网卡蓝牙剪贴板 airdrop 都正常。

现在还有一些问题要解决，比如鼠标滚动问题，这个能解决的，还有一些软件没安装，这个以后再说。

5. 补充：黑苹果开启显卡硬解

我对硬解的理解是这样的：

充分利用显卡，不会说看个电影啥的 cpu 占用达到 100%，有独显的就要开吧

别人是这样说的：

高分辨率视频（包括油管和各种直播网站）拖进度条秒切画面（不开硬解，CPU 能吃满）渲染加速，节省时间减少 CPU 使用率，温度控制等

参照这里解决了：

https://github.com/shiruken/hackintosh#enable-the-discrete-graphics-card-with-headless-igpu

不过 bios 要设置成这样：

现在开机后会直接进 mac 系统，好像没有进 bios 页面（也许是有进入的，只是没有显示，反正就是黑屏），这个听朋友说可以用 dp 线解决，要试下才知道。

这里说一下：

IGFX 是系统会从内建显示功能输出，这样就可以识别核显。

最后是这样解决的：

我买了条 dp 线 https://item.jd.com/68659990898.html

先把显示器的 hdmi 线接到主板上（不是显卡），然后设置 initial display output 为 pcie 1 slot（优先从显卡输出），然后关机，接着再把 hdmi 线拔出，再用 dp 线接到独显上，这样就解决了黑屏的问题。

6. 黑苹果的问题

发生在这台机器的黑苹果的问题：

无法正常关机，关机后会自动重启（两种方法解决，要么强制关机，要么重启进 windows 里关机）
睡眠唤醒可能有问题（那么我就不睡眠了）
亮度无法调整（好像很多人都有这问题）

7. 鼠标滚动解决

黑苹果的鼠标并不能像白苹果一样平滑地滚动，而且方向也有跟其他系统不太一样。

解决方法：https://github.com/Caldis/Mos

从 webpack 到全面拥抱 Parcel #1 探索 Parcel

hfpp2012 — Tue, 19 Dec 2017 19:32:28 +0800

原文发表于 www.rails365.net

最近大家都在关注一个很流行的类似 webpack 的前端构建工具 Parcel。这个库刚出来没多久 (好像截至目前十几天)，但是很受欢迎，看下图就知道。

所以值得一探！

官方地址：https://parceljs.org/

github 地址：https://github.com/parcel-bundler/parcel

介绍这个库之前，我们来说一下我个人觉得 webpack 的一些不好的地方（相对于 Parcel）。

需要写配置文件（webpack.config.js），可能每使用一个功能，比如加载图片或 css，都要添加配置，要维护配置文件，而 Parcel 不需要。
感觉编译或加载速度有些慢，特别是库多或项目复杂的时候，虽然有一些办法代码拆分的方法可以解决，比如 CommonsChunkPlugin 或 DLLPlugin 之类的，但这些方法有些复杂。

需要一定的时间去学习如何使用 webpack。

而 Parcel 有很多优点，可以不使用配置文件，也就是说你只管写代码，它会自动运行，很智能化，打个比方吧，比如在 webpack 中如果要处理 css，那得要安装和加载一个 css 的 loader，然后配置文件写上几行，可是 Parcel 不需要，直接用就行。Parcel 学习起来比较简单，基本上可以说 "不用学习"，只是使用就可以了。

除此之外，模块热替换和代码拆分的功能，Parcel 也有，还有，如果要你用 Parcel 写一个 react 的运行环境，可能不需要配置任何内容，只要安装几个 react 的包就可以用起来了。

说了这么多，我还是要把官方对它的特性进行概括的图片放出来：

下面我们要开始来体验 parcel 的神奇之处，请跟紧。(源码我放到 https://github.com/hfpp2012/hello-parcel）

1. 安装

$ npm install -g parcel-bundler

然后初始化一个项目。

$ mkdir parcelapp
$ npm init

2. 初体验

新建 html 文件。（这个将会是 parcel 的入口文件）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Joke Generator</title>
</head>
<body>
  <div id="wrap">
    <h1>Joke</h1>
    <h3 id="joke"></h3>
  </div>
  <p id="copy"></p>
  <script src="./index.js"></script>
</body>
</html>

index.js

console.log('Hello');

运行编译命令。

$ parcel index.html

注意：上面的 parcel 命令接的是 html 文件，它会读 html 文件的内容，找到 javascript 文件，进行自运处理，不用像 webpack 那样，还要指定 javascript 的入口文件啥的。

生成了 dist 目录。

dist
├── index.html
└── parcelapp.js

监听在 1234 端口，浏览器效果如下：

3. CommonJS 模块语法

新建 jokes.js 文件。

jokes.js

module.exports = {
  getOne: function () {
    return new Promise((resolve, reject) => {
      // 这个 api 是公开的。
      fetch('http://api.icndb.com/jokes/random')
        .then(res => res.json())
        .then(data => {
          resolve(data.value.joke);
        })
    })
  }
}

index.js

const jokes = require('./jokes');

jokes.getOne()
  .then(joke => {
    document.getElementById('joke').innerHTML = joke;
  });

效果如下：

4. ES6 模块语法

require 改成 import，如下所示：

index.js

// const jokes = require('./jokes');

import { jokes } from './jokes';

jokes.getOne()
  .then(joke => {
    document.getElementById('joke').innerHTML = joke;
  });

jokes.js

export const jokes = {
  getOne: function () {
    return new Promise((resolve, reject) => {
      fetch('http://api.icndb.com/jokes/random')
        .then(res => res.json())
        .then(data => {
          resolve(data.value.joke);
        })
    })
  }
}

5. 使用 axios 代替 fetch

这只是为了演示使用一些库。

首先安装 axios。

$ npm install axios

注意，这里每安装一个库，都要重新运行 parcel index.html

jokes.js

import axios from 'axios';

export const jokes = {
  getOne: function() {
    return new Promise((resolve, reject) => {
      axios.get('http://api.icndb.com/jokes/random')
        .then(res => {
          resolve(res.data.value.joke);
        })
    })
  }
}

6. 使用 jquery 代替 getElementById

$ npm install jquery

index.js

import { jokes } from './jokes';
import $ from 'jquery';

jokes.getOne()
  .then(joke => {
    // document.getElementById('joke').innerHTML = joke;
    $('#joke').text(joke);
  });

7. 导入非 JavaScript 资源

copyright.txt

Copyright 2018

index.js

import fs from 'fs';

...

const copy = fs.readFileSync(__dirname + '/copyright.txt', 'utf8');

$('#copy').text(copy);

8. 简单处理 css

style.css

h1 {
  color: red;
  padding-right: 1rem;
}

#wrap {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 5px;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.12);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="stylesheet" href="style.css" />
  <title>Joke Generator</title>
</head>
<body>
  ...
</body>
</html>

9. 在 css 中使用 import

backgrounds.css

body {
  background: #f4f4f4;
}

style.css

@import './backgrounds.css';

...

10. 使用 sass

首先，安装 node-sass。

$ npm install node-sass

这里要花费一定时间，请耐心等待

backgrounds.scss

注意：这里由 backgrounds.css 改名为 backgrounds.scss

@import './variables.scss';

body {
  background: $light-grey;
}

variables.scss

$light-grey: #f4f4f4;

style.css

/* 改名为 scss */
@import './backgrounds.scss';
...

Parcel 还有很多好玩的，我们以后再说。

如何用 GitBook 结合 markdown 写一本开源书籍

hfpp2012 — Sat, 25 Nov 2017 20:28:20 +0800

直接进入正题。

1. 安装 gitbook 并写书

首先，安装。

$ npm install -g gitbook-cli

如果你没有 nodejs 环境，你就去官网下载安装一下，安装完就有 npm 命令了。

新建一个目录放书的内容，比如叫 webpack，这个目录里是放书的内容。

$ mkdir webpack
$ cd webpack

然后初始化生成文件。

$ gitbook init

生成了下面两个文件。

.
├── README.md
└── SUMMARY.md

其中 README.md 是放书的说明，SUMMARY.md 是放书的目录。

看了我的内容，你应该就会明白如何写的。

README.md

# webpack 3 零基础入门教程

最详细，最简单的零基础 webpack 3 入门教程，人人都能学会。

原文发布于我的个人博客：https://www.rails365.net

源码位于：https://github.com/yinsigan/webpack-tutorial

电子版: [PDF](https://www.gitbook.com/download/pdf/book/yinsigan/webpack-3) [Mobi](https://www.gitbook.com/download/mobi/book/yinsigan/webpack-3) [ePbu](https://www.gitbook.com/download/epub/book/yinsigan/webpack-3)

### 联系我:

email: hfpp2012@gmail.com

qq: 903279182

SUMMARY

# Summary

* [0. 开始](README.md)
* [1. 介绍](chapters/1.md)
* [2. 安装](chapters/2.md)
* [3. 实现 hello world](chapters/3.md)
* [4. webpack 的配置文件 webpack.config.js](chapters/4.md)
* [5. 使用第一个 webpack 插件 html-webpack-plugin](chapters/5.md)
* [6. 使用 loader 处理 CSS 和 Sass](chapters/6.md)
* [7. 初识 webpack-dev-server](chapters/7.md)

目录结构：

.
├── README.md
├── SUMMARY.md
└── chapters
    ├── 1.md
    ├── 2.md
    ├── 3.md
    ├── 4.md
    ├── 5.md
    ├── 6.md
    └── 7.md

在终端运行：

$ gitbook serve

这样，可以用浏览器打开 http://localhost:4000，一边写书，一边看效果。

2. 把书的源码放到 github 上

现在我们准备把写好的书，做成一个 git 仓库，再放到 github 上。

$ git init
$ git add .
$ git commit -m "first commit"

新建一个文件 .gitignore。

内容如下：

# Node rules:
## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

## Dependency directory
## Commenting this out is preferred by some people, see
## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
node_modules

# Book build output
_book

# eBook build output
*.epub
*.mobi
*.pdf

这是为了防止提交一些不必要的内容。

在 github 上新建一个仓库叫 webpack-tutorial。

$ git remote add origin git@github.com:yinsigan/webpack-tutorial.git
$ git push origin master

3. gitbook 新建书

进入 https://www.gitbook.com/ 网站。

现在可以在线浏览了。

网址为：https://www.gitbook.com/read/book/yinsigan/webpack-3

4. 绑定个性域名

你如果有你自己的域名也是可以绑定过来的。

现在就可以用 http://webpack.rails365.net/ 来访问了。

完结。

使用 Rails 自带的 Form Builder 来重构你的 Form

hfpp2012 — Tue, 13 Dec 2016 20:06:07 +0800

原文链接：使用 rails 自带的 Form Builder 来重构你的 Form

1. 介绍

开发一个项目，你可能难以避免使用到表单，特别是后台项目的增删改查，你就可能使用得更多。

这些表单，可能内容和格式都差不多，或许你就用 bootstrap 这样组件来格式化你的表单。

有时候，你要写好多代码，且是重复的，来看下下面的代码：

<%= form_for [:admin, @executive], html: { class: 'form-horizontal form-label-left', "data-parsley-validate" => true } do |f| %>
  <% if @executive.errors.any? %>
    <div id="error_explanation"></div>
    <h3><%= "#{@executive.errors.count}个错误:" %></h3>
    <ul>
      <% @executive.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  <% end %>

  <div class="form-group">
    <label class="col-sm-2 control-label">名称</label>
    <div class="col-sm-10"><%= f.text_field :name, required: 'required', class: 'form-control' %></div>
  </div>

  <% if params[:level] || @executive.parent_id.present? %>
    <div class="form-group">
      <label class="col-sm-2 control-label">所属产品系列</label>
      <div class="col-sm-10"><%= f.collection_select :parent_id, @executives, :id, :name, { include_blank: "选择产品系列" }, { class: 'form-control', required: 'required'} %></div>
    </div>
  <% end %>

  <div class="hr-line-dashed"></div>

  <div class="form-group">
    <div class="col-sm-4 col-sm-offset-2">
      <%= f.submit value: '提交', class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>

这样大约有 31 行代码，可以把它精简成 10 行 (有空行) 那样。

除去form_for那行，先不看，来看第一部分，就是显示错误的，如果表单提交不成功，把错误信息显示出来。

<% if @executive.errors.any? %>
  <div id="error_explanation"></div>
  <h3><%= "#{@executive.errors.count}个错误:" %></h3>
  <ul>
    <% @executive.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

类似这样的代码，有时候换了另一个表对象，你又要重新写一次：

<% if @category.errors.any? %>
  <div id="error_explanation"></div>
  <h3><%= "#{@category.errors.count}个错误:" %></h3>
  <ul>
    <% @category.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

只是把@executive换成了@category而已，却要写这么多行代码，就算是复制，看着也不爽，能不能把它们都简化呢？

能的，像上面刚才那样的代码，我只需要一行。

包括下面的代码：

<div class="form-group">
  <label class="col-sm-2 control-label">名称</label>
  <div class="col-sm-10"><%= f.text_field :name, required: 'required', class: 'form-control' %></div>
</div>

这样的代码结构都差不多，只是不同的字段在换而已。

统统简化一下。

2. 使用 Form Builder

我们不需要使用第三方的插件，rails 默认就有这样的功能，让你重新修改系统的 tag 或重新定义自己的 tag。

先在app下新建一个目录叫form_builders，再在里面新建一个文件叫bootstrap_form_builder.rb。

内容如下：

# app/form_builders/bootstrap_form_builder.rb
class BootstrapFormBuilder < ActionView::Helpers::FormBuilder
  delegate :content_tag, to: :@template

  def error_messages
    if object && object.errors.any?
      content_tag(:div, id: 'error_explanation') do
        content_tag(:h3, "#{object.errors.count}个错误") +
          content_tag(:ul) do
            object.errors.full_messages.map do |msg|
              content_tag(:li, msg)
            end.join.html_safe
          end
      end
    end
  end
end

在config/application.rb文件中加入这行配置：

config.autoload_paths << Rails.root.join('app', 'form_builders')

按照#10 楼的建议，在 rails 5 中这里需要把autoload_paths改成eager_load_paths。

再到app/helpers/application_helper.rb文件中添加一个方法。

module ApplicationHelper
  def bootstrap_form_for(object, options = {}, &block)
    options[:builder] = BootstrapFormBuilder
    form_for(object, options, &block)
  end
end

接下来就可以使用bootstrap_form_for这个方法来代替默认的form_for方法了。

<%= bootstrap_form_for [:admin, @executive], html: { class: 'form-horizontal form-label-left', "data-parsley-validate" => true } do |f| %>
  <%= f.error_messages %>

 ...
<% end %>

看到没有，之前显示错误信息那里是好几行代码的，现在被简化成了一行代码。

我们接下来把显示名称和所属产品系列这两个地方也简化一下。

在app/form_builders/bootstrap_form_builder.rb文件中，再增加一些内容。

class BootstrapFormBuilder < ActionView::Helpers::FormBuilder
  delegate :content_tag, to: :@template

  %w( text_field text_area url_field file_field collection_select select ).each do |method_name|
    define_method(method_name) do |method, *tag_value|
      content_tag(:div, class: 'form-group') do
        label(method, class: 'col-sm-2 control-label') +
          content_tag(:div, class: 'col-sm-10') do
            super(method, *tag_value)
          end
      end
    end
  end

  def error_messages
  ...
end

现在就可以只用<%= f.text_field :name, required: 'required', class: 'form-control' %>来代替之前的好多行代码。

把那些多余的div，class删除掉即可。

这个可以看下面最后的结果。

同样的提交按钮，也能处理，在BootstrapFormBuilder中增加下面这个方法：

def submit(*tag_value)
  content_tag(:div, class: 'form-group') do
    content_tag(:div, class: 'col-sm-4 col-sm-offset-2') do
      super
    end
  end
end

回到前面。

<%= form_for [:admin, @executive], html: { class: 'form-horizontal form-label-left', "data-parsley-validate" => true } do |f| %>

这里有好多 class，都是一样的，我也不想重复，想改成这样写。

<%= bootstrap_form_for [:admin, @executive] do |f| %>

到 helper 方法中，修改一下。

def bootstrap_form_for(object, options = {}, &block)
  options[:html] ||= {}
  options[:html][:class] = 'form-horizontal form-label-left'
  options[:html]["data-parsley-validate"] = true
  options[:builder] = BootstrapFormBuilder
  form_for(object, options, &block)
end

最后精简后的代码可能是这样的子：

<%= bootstrap_form_for [:admin, @executive] do |f| %>
  <%= f.error_messages %>

  <%= f.text_field :name, required: 'required', class: 'form-control' %>

  <% if params[:level] || @executive.parent_id.present? %>
    <%= f.collection_select :parent_id, @executives, :id, :name, { include_blank: "选择产品系列" }, { class: 'form-control', required: 'required'} %>
  <% end %>

  <div class="hr-line-dashed"></div>

  <%= f.submit value: '提交', class: 'btn btn-primary' %>
<% end %>

比之前精简多了。

这样的代码又不影响正常的 form_for，你还可以继续使用默认的 form_for 下的各种 tag，没有影响，当你要使用自己定义的 form_for，只要改成自己定义的就可以了。

3. 加一个额外的功能

你的应用可能有好多图片编辑的功能，比如下面这样：

编辑的时候需要显示图片。

你可能会这样写：

<% if @product.image_url.present? %>
  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      <%= image_tag @product.image_url(:product), width: '100', height: '100' %>
    </div>
  </div>
<% end %>

<div class="form-group">
  <label class="col-sm-2 control-label">图片<span class="required">*</span></label>
  <div class="col-sm-10">
    <%= f.file_field :image, required: (@product.new_record? ? true : false), class: 'form-control' %>
  </div>
</div>

我把它精简成了一行

<%= f.image_file_field :image, required: (@product.new_record? ? true : false), class: 'form-control' %>

按照#6 楼的建议 @product.new_record? ? true : false改成@product.new_record?会好点。

参考一下我的写法。

还是到bootstrap_form_builder.rb文件中增加下面几行：

def image_file_field(method, *tag_value)
  image_method = "#{method}_url".to_sym
  image_cache = "#{method}_cache".to_sym
  if object.send(image_method)
    image_version = tag_value.first[:image_version].to_sym if tag_value.first[:image_version].present?
    content_tag(:div, class: 'form-group') do
      label(method, "&nbsp;".html_safe, class: 'col-sm-2 control-label') +
        content_tag(:div, class: 'col-sm-10') do
          image_tag object.send(image_method, image_version), width: '100', height: '100'
        end
    end +
    file_field(method, *tag_value) + hidden_field(image_cache)
  else
    file_field(method, *tag_value)
  end
end

可能你运行的时候会提示报错，提示没有image_tag这个方法，没关系。

改一下最前面的delegate方法。

class BootstrapFormBuilder < ActionView::Helpers::FormBuilder
  delegate :content_tag, :image_tag, to: :@template
  ...
end

缺少啥 helper 方法或 tag 方法，就在delegate后面添加就好了。

对了，最后你可能会发现结果表单中的字段名怎么变成英文输出了，这没关系，你加上 i18n 国际化就好了，会全中文的。

完结。

RSpec 全套测试环境搭建从零入门

hfpp2012 — Tue, 07 Jun 2016 15:42:53 +0800

1. 缘起

要帮朋友的项目搭一套测试环境，选用了 rspec 作为测试环境，在搭建的过程中记录整个过程，以后让这种重复的工作简单点，不想又造轮子。

2. 能学到什么

各种 rspec 测试标配
使用 spring 加速测试过程，也会和 guard 结合，加速 guard 的运行过程
使用 guard 让文件一保存就自动测试
使用 capybara 写类似于 cucumber 的 feature 测试

3. 安装过程

由于guard的安装需要高版本的 ruby 支持，建议使用 ruby 2.3.0 以上。

首先安装rspec这个 gem，我们选用的是适合 rails 项目的rspec-rails这个 gem。

3.1 rspec-rails

在 Gemfile 文件里加入下面这几行：

group :development, :test do
  gem 'rspec-rails', '~> 3.4'
end

执行bundle install安装。

装好之后，执行下面的两行命令，生成必要的配置文件。

rails generate rspec:install
bundle binstubs rspec-core

3.2 factory_girl_rails

factory_girl_rails是一个代替测试夹具 (Fixtures) 的工具，用它可以在测试的时候造一些实例。

group :development, :test do
  gem 'factory_girl_rails'
end

执行bundle install安装。

接下来找到spec/rails_helper.rb文件的下面一行，把其删除或注释掉。

config.use_transactional_fixtures = true

并且增加下面一行。

config.include FactoryGirl::Syntax::Methods

再到config/application.rb文件中，添加下面几行：

config.generators do |g|
  g.test_framework :rspec,
    fixtures: true,
    view_specs: false,
    helper_specs: false,
    routing_specs: false,
    request_specs: false
  g.fixture_replacement :factory_girl, dir: 'spec/factories'
end

为了方便后绪的 demo 测试，现在我们都可以生成一个夹具文件，名字叫users.rb，位于spec/factories。

FactoryGirl.define do
  factory :user do
    email                    'user@example.com'
    username                 'name'
    password                 'password'
  end
end

3.3 database_cleaner

database_cleaner是一个自动清除数据库数据的工具，每次运行完测试用例它就会自动清除数据库。

在Gemfile中添加下面几行。

group :test do
  gem 'database_cleaner'
end

执行bundle install安装。

然后在spec/rails_helper.rb文件中添加下面几行：

config.before(:suite) do
  DatabaseCleaner.strategy = :transaction
  DatabaseCleaner.clean_with(:truncation)
end

config.around(:each) do |example|
  DatabaseCleaner.cleaning do
    example.run
  end
end

到现在为止，已经能够正常跑测试了，我们来写一个测试案例，让它跑起来。

新建文件spec/models/user_spec.rb，内容如下：

require 'rails_helper'

RSpec.describe User, type: :model do
  let(:user) { create :user }

  describe '#email' do
    context '有效的邮箱' do
      addresses = %w( user@foo.COM A_US-ER@f.b.org frst.lst@foo.jp a+b@baz.cn )
      addresses.each do |valid_address|
        let(:user) { build(:user, email: valid_address) }
        it { expect(user.valid?).to eq true }
      end
    end

    context '空' do
      let(:user) { build(:user, email: '') }
      it { expect(user.valid?).to eq false }
    end

    context '错误邮箱格式' do
      addresses = %w{ invalid_email_format 123 $$$ () ☃ bla@bla. }
      addresses.each do |invalid_address|
        let(:user) { build(:user, email: invalid_address) }
        it { expect(user.valid?).to eq false }
      end
    end

    context '重复' do
      let(:user_with_same_username) { build :user, username: user.username }
      it { expect(user_with_same_username.valid?).to eq false }
    end
  end
end

可以使用bundle exec rspec spec/models/user_spec.rb来测试这个刚才写的测试案例。

你会发现运行起来还是比较慢的。

接下来我们使用spring来加速测试的运行。

3.4 spring-commands-rspec

spring是 rails 默认就有的，而spring-commands-rspec是让spring和rspec结合起来。

在Gemfile中添加下面这行：

gem 'spring-commands-rspec', group: :development

接着执行bundle exec spring binstub rspec这条指令。

现在我们就可以使用bundle exec spring rspec来加速测试的运行了。

3.5 guard

guard是一个让你一修改测试文件，就自动跑测试的工具。

需要注意的是guard需要高版本的 ruby 支持，目前为止，它官方写的是至少需要 ruby 2.2.5 以上

在Gemfile中添加下面几行：

group :development do
  gem 'guard'
  gem 'guard-rspec', require: false
  gem 'guard-bundler', require: false
end

至于guard-rspec和guard-bundler是guard的两个插件，是分别让guard和rspec还有bundler结合。

分别执行下面几行指令。

bundle exec guard init
bundle exec guard init rspec
bundle exec guard init bundler

接着找到Guardfile文件，找到第一行未注释的代码，修改成类似下面这样。

guard :rspec, cmd: 'spring rspec', all_on_start: true do

现在可以运行bundle exec guard执行测试了，也能监控文件的更改，测试文件一旦有修改，也会马上运行测试。

让spring和guard结合之后，运行测试是很快的。

3.6 capybara

capybara是一个可以编写 feature 测试的工具，它可以编写 BDD 测试、模拟浏览器点击，填充表单的测试功能。

在Gemfile中添加下面一行：

group :development, :test do
  gem 'capybara'
end

执行bundle install安装。

安装完之后，找到spec/rails_helper.rb文件添加下面一行：

require 'capybara/rails'

现在我们可以编写一个 feature 测试案例。

文件名为spec/features/login_spec.rb。

require 'rails_helper'

describe '登录功能', type: :feature do
  let(:user) { create(:user) }

  before { visit new_user_session_path }

  it { expect(page).to have_selector('h1', text: '登录') }

  it '没有填任何信息就点登录' do
    click_button '登录'
    expect(page).to have_content('登录账号或密码错误')
  end

  it '输入邮箱成功登录' do
    within('#new_user') do
      fill_in 'user_login', with: user.email
      fill_in 'user_password', with: user.password
    end
    click_button '登录'
    expect(page).to have_content '登录成功'
    expect(page).to have_current_path(root_path)
  end

  it '输入用户名成功登录' do
    within('#new_user') do
      fill_in 'user_login', with: user.username
      fill_in 'user_password', with: user.password
    end
    click_button '登录'
    expect(page).to have_content '登录成功'
    expect(page).to have_link('注销')
    expect(page).to have_current_path(root_path)
  end

  it '密码错误的失败登录' do
    within('#new_user') do
      fill_in 'user_login', with: user.email
      fill_in 'user_password', with: 'wrong_password'
    end
    click_button '登录'
    expect(page).to have_content '登录账号或密码错误'
    expect(page).to have_current_path(user_session_path)
  end

end

现在整个测试环境都搭建好了，接下来就是尽情地写测试就可以了。

本篇完结。

我写了 WebSocket 和 ActionCable 相关的序列文章

hfpp2012 — Thu, 05 May 2016 21:58:00 +0800

从 websocket 介绍开始，到 actioncable 的介绍，应用，最后到部署，一共写了 10 篇关于 websocket 的文章。

2017.09.02 把这些文章汇聚成了 gitbook 小书，地址是：https://websocket.rails365.net/

下面是目录：

1. websocket 之入门 (一)

2. websocket 之客户端与服务器端的交互 (二)

3. websocket 之客户端详解 (三)

4. websocket 之实现简易聊天室 (四)

5. websocket 之用 tubesock 在 rails 实现聊天室 (五)

6. websocket 之 message_bus(六)

7. websocket 之 actioncable 入门 (七)

8. websocket 之 actioncable 进阶 (八)

9. websocket 之 actioncable 实现重新连接功能 (九)

10. websocket 之部署 (十)

把第七篇列在 ruby-china 预览一下，如果有兴趣我也可以把每篇文章都发到 ruby-china 上。

websocket 之 actioncable 入门 (七)

1. 介绍

websocket 的序列文章重点要讲的就是actioncable，之前也讲了好多关于各种方式实现聊天室的文章，相信从中，也能学到好多关于 websocket 实践的知识和经验，这节要来讲讲 actioncable。

actioncable 是集成在 rails 5 中的一个功能，它能够轻易的在 rails 中使用 websocket。现在先把 actioncable 用起来，再慢慢研究其原理和特性。

2. 使用

还是跟先前的例子一样，建立一个聊天室。

2.1 聊天室界面

首先，rails 的版本必须得是 5 以上，写这篇文章的时候，rails 5 正式版还没有出来，目前的版本是 5.0.0.beta4。

$ rails new actioncable_demo
$ cd actioncable_demo

这样就生成了一个新项目。

接着创建 message 这个 model，存储聊天记录。

$ rails g model message content:text
$ rails db:migrate

创建聊天室的界面。

在 config/routes.rb 中添加路由。

Rails.application.routes.draw do
  get 'rooms/show'
end

创建 controller，添加app/controllers/rooms_controller.rb文件，内容如下：

class RoomsController < ApplicationController
  def show
    @messages = Message.all
  end
end

添加 view，添加app/views/rooms/show.html.erb文件，内容如下：

<h1>Chat room</h1>

<div id="messages">
  <%= render @messages %>
</div>

<form>
  <label>Say something:</label><br>
  <input type="text" data-behavior="room_speaker">
</form>

还有app/views/messages/_message.html.erb文件，内容如下：

<div class=“message”>
  <p><%= message.content %></p>
</div>

到目前为止，按照之前的经验，界面都建立好了，如下图所示：

2.2 开启 websocket

接下来，就是要来处理 websocket 部分。

先在客户端浏览器中开启 websocket 请求。

actioncable 默认提供了一个文件app/assets/javascripts/cable.coffee，把几行注释打开，就可以开启 websocket，内容如下：

#
#= require action_cable
#= require_self
#= require_tree ./channels
#
@App ||= {}
App.cable = ActionCable.createConsumer()

其实这些 js 的内容很简单，它做的主要的事情就是前面几篇文章所讲的在客户端浏览器执行new WebSocket，具体的内容可以查看其源码。

还要在路由中添加下面这行，把 websocket 服务以 engine 的方式挂载起来。

mount ActionCable.server => '/cable'

至此，websocket 已经开启了，可以通过 chrome 浏览器的开发者工具查看链接的信息，只要有 101 协议的信息，表示就是成功的。

2.3 channel

现在要让客户端和服务器端连接起来。

actioncable 提供了一个叫做channel的技术，中文名可以称为"通道"。actioncable 是一种pub/sub的架构，服务器通过 channel 发布消息，多个客户端通过对应的 channel 订阅消息，服务器能够广播消息给客户端，从而实现客户端和服务器端的交互。

先新建一个 channel。

$ rails g channel room speak

修改app/channels/room_channel.rb文件，内容如下：

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    # ActionCable.server.broadcast "room_channel", message: data['message']
    Message.create! content: data['message']
  end
end

其中定义了三个方法，分别是subscribed，unsubscribed，speak。

subscribed和unsubscribed方法是默认就生成的，而speak是我们自己定义的。

subscribed表示的是当客户端连接上来的时候使用的方法。

unsubscribed表示的是当客户端与服务器失去连接的时候使用的方法。

还有，app/assets/javascripts/channels/room.coffee文件，内容如下：

App.room = App.cable.subscriptions.create "RoomChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    $('#messages').append data['message']
    # Called when there's incoming data on the websocket for this channel

  speak: (message) ->
    @perform 'speak', message: message

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
  if event.keyCode is 13 # return = send
    App.room.speak event.target.value
    event.target.value = ""
    event.preventDefault()

App.room里定义了四个方法，除了speak，connected、disconnected、received都是 actioncable 定义的。

这几个方法可以和RoomChannel里的方法对应起来，比如：

connected和subscribed对应，表示客户端和服务器端连接之后的情况。

disconnected和unsubscribed对应，表示客户端和服务器端失去连接之后的情况。

received表示从服务器接收到信息之后的情况。因为服务器总是要向客户端推送信息的，接收完信息之后，就可以在这里进行一些页面上的操作，比如 DOM 更新等。

room.coffee文件中有重要的一行App.room.speak event.target.value，当键入聊天信息，一按回车键后，就会通过这行代码，把聊天信息，发送到后端服务器，并且会被room_channel.rb中的speak接收，执行Message.create! content: data['message']命令。

2.4 activejob

现在还没真正完成，还差一部分。

room.coffee文件中有一个received方法，它有一行指令$('#messages').append data['message']。

这个表示当聊天信息发出时，会在聊天信息展示界面上添加聊天的内容。

现在来处理这个，我们通过 activejob 来处理，还记得之前的app/views/messages/_message.html.erb文件吗，现在要发挥它的作用。

先建立一个 job。

$ rails g job message_broadcast

修改app/jobs/message_broadcast_job.rb文件，内容如下：

class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast 'room_channel', message: render_message(message)
  end

  private
    def render_message(message)
      ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })
    end
end

还要在一个地方执行这个 job，是当创建完 message 的时候。

修改app/models/message.rb文件，内容如下：

class Message < ApplicationRecord
  after_create_commit { MessageBroadcastJob.perform_later self }
end

做完这一切，重启一下服务器。

现在来看下效果：

本篇完结。

下一篇： websocket 之 actioncable 进阶 (八)

CORS 系列文章 - 从跨域到 CORS (一)

hfpp2012 — Tue, 16 Feb 2016 10:37:20 +0800

原文链接

1. 介绍

跨域，可能很多前端开发者都会遇到过，也可能知道有 jsonp，iframe 之类的跨域方法。不过要说这些方法之前，先得来说说什么叫跨域，为什么要跨域。

所谓跨域，顾名思义，跨到了另外的域，域不仅仅指的是不同的域名网站，可能同一个域名不同的端口号也算不同的域。浏览器是有规则的，只要协议、域名、端口有任何一个不同，都被当作是不同的域。协议指的是 http，或者 https 等。

下面给出一个列表，指出不同域的情况：

这个叫浏览器的同源策略 (same-origin policy)，为什么要这样规定呢，原因之一就是为了安全。

假如你在 A 网站，用一段 js 脚本就能访问 B 网站，B 网站凭什么让你访问，为什么浏览器能让你随便访问别的网站呢，说不定 B 网站存在着各种危险，比如盗取你的密码，跨域攻击 (CSRF) 等，一切都不太合理。

但也是有例外的情况，有些情况是要访问到别的网站的，比如加载一张图片，这张图片可能在别的网站，还有加载一个 js 文件，也是有可能在别的网站的，还有嵌入一个 frame 元素，也可以访问到别的网站的内容。

所以跨域正是利用了上面几点，比如 jsonp 就是利用的加载 js 文件的功能，比如在<script src="..."></script>中的 src 指定为目标网站的 js，同理，还有跨域攻击也可以利用<image src="..." />的功能。还有 iframe 更能直接加载别的网站的内容到自己的网站里来。

这前面几种可以说是技巧，说句不好听的就是浏览器的漏洞，浏览器并未从正面上支持跨域，而且上面的几种跨域方法也是有各种局限，比如 jsonp 的方法，只能用 GET 方法，iframe 方法是能直接加载内容到网站上，但是本网站和 iframe 的数据交互也是一个头疼的地方。

毕竟从 iframe 加载内容到本站后，是存在着数据交互的，可以用document.domain，window.name，不过这些方法都能用，且有效，不过总不尽完美，存在着各种各样的局限。

然而 HTML5 引进了一个叫 window.postMessage 方法来跨域传送数据，这个倒是不错，不过也是利用了 iframe。

除此之外，还有 flash，服务器代理等跨域方法，但是本章要介绍的是浏览器或服务器的跨域方法，它的名字叫 CORS。

2. CORS

CORS 全称是 Cross-Origin Resource Sharing，跨域资源共享，这是浏览器的标准，也算是协议，基本上现代浏览器都支持，除了奇葩浏览器，例如 IE8、IE9，只支持部分特性。

使用它，需要服务器端和客户端两方面的准备，服务器端我们选择 nginx 作为测试，客户端只是 js 罢了。

nginx 服务监听在 localhost 的 8080 端口，而现在有一个网站运行 localhost 的 3000 端口，需要跨域到 nginx 那台服务器。

现在开始测试之旅，要在浏览器模拟跨域请求，只需三行 js 代码。

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:8080", true);
xhttp.send();

我使用的浏览器是 chrome，打开它的开发者工具，在console里运行上面的代码，效果如下：

上面的报错已经提示得很明显了，主要是下面这句话：

XMLHttpRequest cannot load http://localhost:8080/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
VM162:4 XHR failed loading: GET "http://localhost:8080/".

错误中说Access-Control-Allow-Origin这个头信息不存在于被请求的服务器中，来源域http://localhost:3000是不允许访问该服务器的。

XMLHttpRequest这个可能很多开发者都明白，那是 ajax 请求利用的对象，利用它能发起 ajax 请求，但它的功能不仅仅是发起 ajax 请求，还能用于跨域，还有设置时限，FormData 对象管理表单数据，文件上传等功能，具体可以自行搜索相关的资料，在这里，它能发起跨域请求就可以了。

我们来看看这个请求相关的信息。

具体的头信息如下：

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36

最重要的是Origin:http://localhost:3000这一行，它标明的是来源的域，这是请求头信息，会传给服务器。

我们来看下服务器。

可见，服务器还是正常响应 200 状态的。也就是说，服务器端该怎么应答就怎么应答，只是被浏览器给阻止了。

浏览器是如何阻止的呢。主要是看响应头部的信息。

Response Headers
Accept-Ranges:bytes
Connection:keep-alive
Content-Length:612
Content-Type:text/html
Date:Mon, 01 Feb 2016 07:17:54 GMT
ETag:"56988bc6-264"
Last-Modified:Fri, 15 Jan 2016 06:03:50 GMT
Server:nginx/1.8.0

它没有发现有发现Origin:http://localhost:3000这个来源域名是被服务器所允许的。

我们在服务器端设置一下，让Origin:http://localhost:3000这个来源域被允许访问。

location / {
  add_header 'Access-Control-Allow-Origin' '*';
}

`add_header 'Access-Control-Allow-Origin' '*'表示允许任何来源域访问 nginx 这台服务器。

用sudo nginx -s reload重新加载服务器配置。

再来看下效果。

果然成功了，不再提示错误。

来看下响应的信息。

Response Headers
Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:612
Content-Type:text/html
Date:Mon, 01 Feb 2016 07:25:25 GMT
ETag:"56988bc6-264"
Last-Modified:Fri, 15 Jan 2016 06:03:50 GMT
Server:nginx/1.8.0

响应信息中多了这一行Access-Control-Allow-Origin:*。

原来，浏览器在用XMLHttpRequest发起跨域请求的时候，它在请求头带了Origin这个项，而服务器，在响应头信息中是有响应Access-Control-Allow-Origin这项的，两者比较一下，如果匹配，则请求成功，不匹配就不成功，不过，服务器那边还是照常执行。

在测试的时候需要注意的事，有可能会发现改了 nginx 的配置，浏览器发出的跨域请求却没生效，这可能是因为浏览器 cache 的原因，只要清除浏览器的 cache，再重新发起请求就好了。

下一节CORS 进阶之 Preflight 请求 (二)会介绍 CORS 更高阶的内容，比如Preflight请求，Access-Control-Allow-Methods，Access-Control-Allow-Headers等。

完结。

Redis 实现自动输入完成

hfpp2012 — Tue, 10 Nov 2015 23:21:37 +0800

原文链接： http://www.rails365.net/articles/2015-11-09-redis-shi-xian-zi-dong-shu-ru-wan-cheng-ba

1. 介绍

当我们在京东商城的搜索框，输入想要搜索的内容，比如你想要搜索"热水瓶"，刚输入一个"热"字，就会出现一个下拉框，列出了很多以"热"字开头的可供选择的条目，比如"热水器"、"热水袋"、”热水瓶"等，如下图所示：

这种技术就叫做自动输入完成，当输入想要搜索的首字符或其中被包含的字符时，就会出现可供选择的条目，用户可以选择其中的条目来完成此次搜索，避免了用户输入全部的字符，改善了用户体验。这种技术很常用，比如在一个社交网站添加联系人时，就是可以通过输入来联想匹配到联系人的。

2. 功能分析

要实现这样的功能，需要前端和后端一起配合，前端部分需要监听搜入框内容的改变，当内容改变时把内容作为参数传递给服务器，服务器再请求后端的数据库，再把数据返回给客户端，前端只要把结果渲染出来即可。

这个数据库我们选择的是内存数据库 redis，而不用存储在磁盘的关系型数据库，毕竟这个功能对实时性要求比较高，频繁地请求数据库肯定是用性能高和速度快的 redis 好。

我们有一个实例网站，是存放文章的，每篇文章都有自己的标签 (tag)，整个网站是具有全文检索功能的，也就是说，可以根据文章的标题、内容、标签来搜索文章。现在需要在输入框加一个自动完成的功能，当用户在输入框输入标签的头一个或几个字符的时候，会自动联想到标签。比如，有"ruby"，"postgresql"两个标签，当用户输入"ru"的时候，会自动出现"ruby"作为可选的项。

首先，被检索的标签的名称事先存放到 redis 中，每个标签都是唯一的，所以可选择 redis 的集合作为数据库，但是，有可以出现很多个以"ru"开头的标签，所以需要一个权重算法，那就是排序，标签被使用得频繁的越排在前面，所以最终是用排序集合 (sortedset) 来存储标签数据。

# rails console
> ActsAsTaggableOn::Tag.all
[
    [ 0] 消息队列 {
                    :id => 50,
                  :name => "消息队列",
        :taggings_count => 5
    },
    [ 1] ruby on rails {
                    :id => 8,
                  :name => "ruby on rails",
        :taggings_count => 17
    },
    [ 2] websocket {
                    :id => 55,
                  :name => "websocket",
        :taggings_count => 1
    },
    [ 3] database {
                    :id => 25,
                  :name => "database",
        :taggings_count => 1
    }
]

taggings_count就是标签被使用的次数，只要把tag的name按照taggings_count作为排序标准存到 redis 的sort set中，就可以了。下面我们会说如何去存储这些数据。

3. soulmate 使用

soulmate是一个结合 redis 实现自动输入完成的功能强大的 gem。

先安装这个 gem。

$ gem install soulmate

soulmate 要求你的数据存成一种特定格式的 json，再把 json 导出到 redis 中，格式是类似这样的。

{
  "id": 5,
  "term": "devise",
  "score": 3,
  "data": {
  }
}

id是唯一的标识，term就是搜索的条目，score就是排序的项，这三项是必须要带上的，而data是可选的，里面可以存自己想要的数据，比如可把 tag 的描述信息加上。

很简单，在我们的案例中，把上面的 tag 的name换成term，taggings_count换成score即可。

3.1 导入 tags 数据

我写了一个方法可以将所有的 tag 导出到一个 json 文件。

File.open("tags.json","w+") do |f|
  ActsAsTaggableOn::Tag.find_each do |tag|
    tag_json = {
      id: tag.id,
      term: tag.name,
      score: tag.taggings_count
    }
    f.write("#{tag_json.to_json}\n")
  end
end

输出的 tags.json 类似下面这样：

{"id":5,"term":"devise","score":3}
{"id":6,"term":"登录","score":3}
{"id":7,"term":"认证","score":3}
{"id":8,"term":"ruby on rails","score":17}
{"id":9,"term":"rails","score":4}
{"id":10,"term":"ruby","score":4}

现在可以先这个 tags.json 导入到 redis 数据库中，soulmate 这个 gem 也提供了相关的命令行工具。

$ soulmate load tag --redis=redis://localhost:6379/0 < tags.json

你会发现 redis 中增加了很多的数据，我们先不管，等下再来分析那些数据。

3.2 添加单个 tag 到 redis

每次都用这种导入的方式来在 redis 增加数据很不方便的，毕竟以后我们随时要增加 tag。你总不可能为了增加一个 tag 再导一次 json 吧，这不太科学。所以我们需要在增加或删除 tag 的时候自动把数据添加到 redis 中。

通过查看 soulmate 的源码，发现它是提供了相应的方法的。

# https://github.com/seatgeek/soulmate/blob/master/lib/soulmate/loader.rb#L29
def add(item, opts = {})
  opts = { :skip_duplicate_check => false }.merge(opts)
  raise ArgumentError, "Items must specify both an id and a term" unless item["id"] && item["term"]

  # kill any old items with this id
  remove("id" => item["id"]) unless opts[:skip_duplicate_check]

  Soulmate.redis.pipelined do
    # store the raw data in a separate key to reduce memory usage
    Soulmate.redis.hset(database, item["id"], MultiJson.encode(item))
    phrase = ([item["term"]] + (item["aliases"] || [])).join(' ')
    prefixes_for_phrase(phrase).each do |p|
      Soulmate.redis.sadd(base, p) # remember this prefix in a master set
      Soulmate.redis.zadd("#{base}:#{p}", item["score"], item["id"]) # store the id of this term in the index
    end
  end
end

由于add方法要接一个 hash 作为参数，所以需要对 tag 这个 model 作一些加工。

# config/initializers/tag.rb
module ActsAsTaggableOn
  class Tag < ::ActiveRecord::Base
    after_create :create_soulmate
    def to_hash
      tag_json = {
        id: self.id,
        term: self.name,
        score: self.taggings_count
      }
      JSON.parse(tag_json.to_json )
    end
    private
      def create_soulmate  
        Soulmate::Loader.new("tag").add self.to_hash
      end
  end
end

我们拿其中一个 tag 试一下，看看它究竟生成了怎样的 redis 数据 (如果在开发环境，做这个之前可以用 redis 的 flushdb 指令先清除数据)。

$ rails console
> tag = ActsAsTaggableOn::Tag.first.to_hash
{
       "id" => 5,
     "term" => "devise",
    "score" => 3
}

> Soulmate::Loader.new("tag").add tag

在 redis 生成了如下的数据：

$ redis-cli
> keys *
1) "soulmate-index:tag:devise"
2) "soulmate-index:tag"
3) "soulmate-index:tag:devis"
4) "soulmate-index:tag:dev"
5) "soulmate-index:tag:de"
6) "soulmate-index:tag:devi"
7) "soulmate-data:tag"

所有的 key 分为三大类，分别是"soulmate-index:tag"、"soulmate-data:tag"，剩下的以 tag 的 name 为 devise 的前缀开头的 key。结合 add 方法的源码，也可以知道这三种 key 的类型分别为 set, hash, sortedset，可以自己用 redis 的 type 命令打印出来。现在打印出这些 key 的值。

$ redis-cli
> smembers soulmate-index:tag
1) "devis"
2) "devi"
3) "dev"
4) "de"
5) "devise"
> hgetall soulmate-data:tag
1) "5"
2) "{\"id\":5,\"term\":\"devise\",\"score\":3}"
> zrange "soulmate-index:tag:de" 0 -1 WITHSCORES
1) "5"
2) "3"
> zrange "soulmate-index:tag:dev" 0 -1 WITHSCORES
1) "5"
2) "3"

soulmate-index:tag存的是集合 (set)，将"devise"分成一个个前缀，以后按照这些前缀就能搜出"devise"这个 tag。soulmate-data:tag存的是一个哈希 (hash)，健为标签 (tag) 的 id，值为 tag 的所有内容，就是那个标签 (ActsAsTaggableOn::Tag) model 中to_hash方法的内容，如果有存 data，它的数据也是会在这里出现。soulmate-index:tag:de等存的是排序后的集合，排序的健是score，也就是标签 (tag) 的taggings_count，值为标签 (tag) 的id。

3.3 测试效果

现在来实现服务端的逻辑，我们不用自己写 controller 端的代码，soulmate 为我们提供好了这一切。

先安装这个 gem。

gem install rack-contrib

然后执行以下这个命令。

$ soulmate-web --foreground --no-launch --redis=redis://localhost:6379/0

这会开启一个服务并且监听在 5678 端口。

现在我们可以用 curl 工具或 chrome 浏览器插件 postman 来测试这个服务。下面是 curl 工具的使用例子。

$ curl -X GET  http://localhost:5678/search --data "types[]=tag&term=de"
{"term":"de","results":{"tag":[{"id":5,"term":"devise","score":3}]}}

$ curl -X GET  http://localhost:5678/search --data "types[]=tag&term=devis"
{"term":"devis","results":{"tag":[{"id":5,"term":"devise","score":3}]}}

使用 postman 请求http://localhost:5678/search?types[]=tag&term=de的例子如下：

现在再来查看 redis 的数据，会发现多了两个 key。

$ redis-cli
> zrange "soulmate-cache:tag:de" 0 -1 WITHSCORES
1) "5"
2) "3"
> zrange "soulmate-cache:tag:devis" 0 -1 WITHSCORES
1) "5"
2) "3"

4. 页面上的实现

我们要用 soulmate 配合前端在 rails 项目里实现自动输入完成的功能。

先把 soulmate 安装进 rails 项目里。

4.1 挂载 soulmate 服务

把下面的代码添加到 Gemfile 文件，然后执行bundle命令。

gem 'rack-contrib'
gem 'soulmate', :require => 'soulmate/server'

在config/routes.rb文件中添加一行路由。

mount Soulmate::Server, :at => "/sm"

在config/initializers目录下添加 soulmate.rb 文件。

Soulmate.redis = 'redis://127.0.0.1:6379/0'
# or you can asign an existing instance of Redis, Redis::Namespace, etc.
# Soulmate.redis = $redis

重启服务器。现在可以这样来测试。

$ curl -X GET  http://localhost:3000/sm/search --data "types[]=tag&term=dev"
{"term":"dev","results":{"tag":[{"id":5,"term":"devise","score":3}]}}

4.2 soulmate.js

至于前端部分，我们使用官方推荐的soulmate.js这个库。

5. 源码解析

现在有个美中不足的地方，就是必须要输入两个字符以上才能开始自动输入完成。而 readme 文档没有相关的解决方法，我们只能从源码入手。

上面的例子中，"devise"这个单词会被分解成一个个前缀，比如"de"，"dev”等。我们来看下中文词组是如何被分解的。

上面有提到那个add方法的源码，其中调用了prefixes_for_phrase这个方法。

# https://github.com/seatgeek/soulmate/blob/ead5d6c2b6d698a5c49294a73a4f7536a5013f01/lib/soulmate/helpers.rb#L3
module Soulmate
  module Helpers

    def prefixes_for_phrase(phrase)
      words = normalize(phrase).split(' ').reject do |w|
        Soulmate.stop_words.include?(w)
      end
      words.map do |w|
        (Soulmate.min_complete-1..(w.length-1)).map{ |l| w[0..l] }
      end.flatten.uniq
    end

  end
end

执行rails console进入终端来看一下这个方法是如何分解中文词组的。

$ rails console
> include Soulmate::Helpers
Object < BasicObject
> prefixes_for_phrase("前端构建与部署工具")
[
    [0] "前端",
    [1] "前端构",
    [2] "前端构建",
    [3] "前端构建与",
    [4] "前端构建与部",
    [5] "前端构建与部署",
    [6] "前端构建与部署工",
    [7] "前端构建与部署工具"
]

中文词组还是能够正常处理，可是至少要输入两个字符。通过分析prefixes_for_phrase方法，可以发现关键在于Soulmate.min_complete这个变量。

通过搜索源码，发现了定义Soulmate.min_complete变量的地方。

# https://github.com/seatgeek/soulmate/blob/ead5d6c2b6d698a5c49294a73a4f7536a5013f01/lib/soulmate/config.rb#L11
require 'uri'
require 'redis'

module Soulmate
  module Config

    attr_writer :min_complete

    def min_complete
      @min_complete ||= DEFAULT_MIN_COMPLETE
    end

    def redis=(server)
      ...
    end
  end
end

还记得上文"挂载 soulmate 服务"部分提到config/initializers/soulmate.rb这个文件吗，里面就是定义了Soulmate.redis这个变量，那同样的道理，也把min_complete定义在里面。

# config/initializers/soulmate.rb
Soulmate.redis = 'redis://127.0.0.1:6379/0'
Soulmate.min_complete = 1

再来看结果。

$ redis-cli
> include Soulmate::Helpers
Object < BasicObject
> prefixes_for_phrase("前端构建与部署工具")
[
    [0] "前",
    [1] "前端",
    [2] "前端构",
    [3] "前端构建",
    [4] "前端构建与",
    [5] "前端构建与部",
    [6] "前端构建与部署",
    [7] "前端构建与部署工",
    [8] "前端构建与部署工具"
]

完结。

Redis 实现 Cache 系统实践

hfpp2012 — Wed, 04 Nov 2015 09:53:31 +0800

1. 介绍

rails 中就自带有 cache 功能，不过它默认是用文件来存储数据的。我们要改为使用 redis 来存储。而且我们也需要把 sessions 也存放到 redis 中。关于 rails 实现 cache 功能的源码可见于这几处：

2. 使用

我们一步步在 rails 中使用 cache 实现我们的需求。

2.1 开启 cache 模式

首先第一步我们要来开启 cache 模式。默认情况下，production 环境是开启的，但是 development 没有，所以要开启它。

进入config/environments/development.rb文件中，把config.action_controller.perform_caching设为 true。

config.action_controller.perform_caching = true

修改完，记得重启服务器。

2.2 使用 html 片断 cache

为了方便测试和了解整个原理，我们先不使用 redis 来存放 cache 数据，只使用默认的文件来存放数据。

以本站为例，我们要把首页的"最近的文章"那部分加上 html 片断的 cache。

使用 html 片断 cache，rails 提供了一个 helper 方法可以办到，很简单，只需要把需要的 html 用 cache 包起来。

.row
  - cache do
    .col-md-6
      .panel.panel-default
        .panel-heading
          div 最近的文章
        .panel-body
          - @articles.each do |article|
            p.clearfix
              span.pull-right = datetime article.created_at
              = link_to article.title, article_path(article)

我们先在页面刷新一下，然后通过日志来观察。

先发现访问起来比平时慢一点点，因为它在把 cache 存到文件中，具体的 log 是下面这样的。

Started GET "/" for 127.0.0.1 at 2015-10-30 16:19:27 +0800
Processing by HomeController#index as HTML

  Cache digest for app/views/home/index.html.slim: 8e89c7a7d1da1d9719fca4639859b19d

Read fragment views/localhost:4000//8e89c7a7d1da1d9719fca4639859b19d (0.3ms)

  Article Load (2.0ms)  SELECT  "articles"."title", "articles"."created_at", "articles"."published", "articles"."group_id", "articles"."slug", "articles"."id" FROM "articles" WHERE "articles"."published" = $1  ORDER BY id DESC LIMIT 10  [["published", "t"]]
  Group Load (3.5ms)  SELECT "groups".* FROM "groups" WHERE "groups"."id" IN (1, 5, 3, 4)
  Article Load (0.9ms)  SELECT  "articles"."title", "articles"."created_at", "articles"."published", "articles"."group_id", "articles"."slug", "articles"."id", "articles"."visit_count" FROM "articles" WHERE "articles"."published" = $1  ORDER BY visit_count DESC LIMIT 10  [["published", "t"]]
  Group Load (2.3ms)  SELECT "groups".* FROM "groups" WHERE "groups"."id" IN (1, 3, 4)
  Group Load (4.4ms)  SELECT "groups".* FROM "groups"

Write fragment views/localhost:4000//8e89c7a7d1da1d9719fca4639859b19d (41.7ms)
...

主要就是Cache digest、Read fragment和Write fragment部分。

Cache digest是产生一个 md5 码，这个码来标识 html 的片断，会很有用，我们等下再来细说。

Read fragment是读取 html 片断 (以文件形式存储)，根据之前产生的 md5 标识，发现不存在，就会生成一个 html 片断并存起来，就是Write fragment。

默认情况下，产生的 html 片断文件是存在/tmp/cache 目录里的，如下：

~/codes/rails365 (master) $ tree tmp/cache/
tmp/cache/
├── 20B
│   └── 6F1
│       └── views%2Flocalhost%3A4000%2F%2F8e89c7a7d1da1d9719fca4639859b19d

打开views%2Flocalhost%3A4000%2F%2F8e89c7a7d1da1d9719fca4639859b19d这个文件，就会发现里面存储的就是 html 的片断。

现在我们在刷新一遍页面，再来看看日志。

Started GET "/" for 127.0.0.1 at 2015-10-30 16:53:18 +0800
Processing by HomeController#index as HTML
  Cache digest for app/views/home/index.html.slim: 8e89c7a7d1da1d9719fca4639859b19d
Read fragment views/localhost:4000//8e89c7a7d1da1d9719fca4639859b19d (0.3ms)
...

就会发现Write fragment没有了，也不查询数据库了，数据都从 html 片断 cache 取了。

这样还不算完成。我们要考虑一个问题，就是我们改了数据或 html 的内容的时候，cache 会自动更新吗？

2.3 Cache digest

先来说更改 html 片断代码本身的情况。

我们把"最近的文章"改成”最新的文章"，然后我们来观察是否会生效。

最终通过查看日志，发现还是产生了Write fragment，说明是生效的。

这个原理是什么呢？

我们找到 cache 这个 helper 方法的源码。

def cache(name = {}, options = {}, &block)
  if controller.respond_to?(:perform_caching) && controller.perform_caching
    safe_concat(fragment_for(cache_fragment_name(name, options), options, &block))
  else
    yield
  end

  nil
end

发现关键在cache_fragment_name这个方法里，顺应地找到下面两个方法。

def cache_fragment_name(name = {}, skip_digest: nil, virtual_path: nil)
  if skip_digest
    name
  else
    fragment_name_with_digest(name, virtual_path)
  end
end

def fragment_name_with_digest(name, virtual_path) #:nodoc:
  virtual_path ||= @virtual_path
  if virtual_path
    name  = controller.url_for(name).split("://").last if name.is_a?(Hash)
    digest = Digestor.digest name: virtual_path, finder: lookup_context, dependencies: view_cache_dependencies
    [ name, digest ]
  else
    name
  end
end

关键就在fragment_name_with_digest这个方法里，它会找到 cache 的第一个参数，然后用这个参数的内容生成 md5 码，我们刚才改变了 html 的内容，也就是参数改变了，md5 自然就变了，md5 一变就得重新生成 html 片断。

所以 cache 方法的第一个参数是关键，它的内容是判断重不重新产生 html 片断的依据。

改变 html 片断代码之后，是会重新生成 html 片断的，但如果是在 articles 中增加一条记录呢？通过尝试发现不会重新生成 html 片断的。

那我把@artilces作为第一个参数传给 cache 方法。

.row
  - cache @articles do
    .col-md-6
      .panel.panel-default
        .panel-heading
          div 最近的文章
        .panel-body
          - @articles.each do |article|
            p.clearfix
              span.pull-right = datetime article.created_at
              = link_to article.title, article_path(article)

发现生成了Write fragment，说明是可以的，页面也会生效。

Cache digest for app/views/home/index.html.slim: 1c628fa3d96abde48627f8a6ef319c1c

Read fragment views/articles/15-20151027051837664089000/articles/14-20151030092311065810000/articles/13-20150929153356076334000/articles/12-20150929144255631082000/articles/11-20151027064325237540000/articles/10-20150929153421707840000/articles/9-20150929123736371074000/articles/8-20150929144346413579000/articles/7-20150929144324012954000/articles/6-20150929144359736164000/1c628fa3d96abde48627f8a6ef319c1c (0.1ms)

Write fragment views/articles/15-20151027051837664089000/articles/14-20151030092311065810000/articles/13-20150929153356076334000/articles/12-20150929144255631082000/articles/11-20151027064325237540000/articles/10-20150929153421707840000/articles/9-20150929123736371074000/articles/8-20150929144346413579000/articles/7-20150929144324012954000/articles/6-20150929144359736164000/1c628fa3d96abde48627f8a6ef319c1c (75.9ms)

Article Load (2.6ms)  SELECT  "articles"."title", "articles"."created_at", "articles"."updated_at", "articles"."published", "articles"."group_id", "articles"."slug", "articles"."id", "articles"."visit_count" FROM "articles" WHERE "articles"."published" = $1  ORDER BY visit_count DESC LIMIT 10  [["published", "t"]]

但是，除此之外，还有 sql 语句生成，而且以后的每次请求都有，即使命中了 cache，因为@articles作为第一个参数，它的内容是要通过数据库来查找的。

那有一个解决方案是这样的：把@articles的内容也放到 cache 中，这样就不用每次都查找数据库了，而一旦有 update 或 create 数据的时候，就让@articles过期或者重新生成。

为了方便测试，我们先把 cache 的存储方式改为用 redis 来存储数据。

添加下面两行到 Gemfile 文件，执行bundle。

gem 'redis-namespace'
gem 'redis-rails'

在config/application.rb中添加下面这一行。

config.cache_store = :redis_store, {host: '127.0.0.1', port: 6379, namespace: "rails365"}

@articles的内容要改为从 redis 获得，主要是读 redis 中健为articles的值。

class HomeController < ApplicationController
  def index
    @articles = Rails.cache.fetch "articles" do
      Article.except_body_with_default.order("id DESC").limit(10).to_a
    end
  end
end

创建或生成一条 article 记录，都要让 redis 的数据无效。

class Admin::ArticlesController < Admin::BaseController
  ...
  def create
    @article = Article.new(article_params)
    Rails.cache.delete "articles"
    ...
  end
end

这样再刷新两次以上，就会发现不再查数据库了，除非添加或修改了文章 (article)。

完结

原文链接：http://www.rails365.net/articles/2015-10-30-redis-shi-xian-cache-xi-tong-shi-jian-liu

hfpp2012 (随风)

释出自己的 ruby gem 02 acts_as_avatar 给系统自动加上数种随机头像

acts_as_avatar

安装使用

源码和原理

释出自己的 ruby gem 01 where_streets 实现省市县镇四级联动

01. where_streets 实现省市县镇四级联动

02. acts_as_avatar 给系统自动加上数种随机头像

03. custom_trix 增强型 trix

04. activestorage_upyun 又拍云存储

05. error404 自定义错误页面

06. flag_icons 国家图标

07. ip_locator ip 地址定位

08. niceadmin 漂亮的后台

09. rails_boxicons boxicons svg 图标

10. ant_design_icon ant design svg 图标

11. rails_fontawesome6 svg 图标

12. tinymce_extended tinymce 增强

13. table_for 增强

14. rails_remixicon 增强

15. youdao_translate_all 有道云翻译 api

16. helper_extended helper 个性增强

17. loading_svg 图标

18. activestorage_tencent 和 tencent_cos 腾讯 cos 云存储

19. iconfont 官网图标封装

20. where_city 通过坐标查城市位置

where_streets

安装使用

源码或原理分享

最后

hotwire-livereload 有人用吗，页面自动刷新的工具

我用 Rails 7 集成了一个开源的漂亮的后台 Niceadmin

我用 homeland 搭建了一个创业者社区

利用好元编程重构下代码

我的黑苹果之路

1. 购买硬件

2. 安装硬件

3. 安装 windows 10

4. 安装黑苹果

5. 补充：黑苹果开启显卡硬解

6. 黑苹果的问题

7. 鼠标滚动解决

从 webpack 到全面拥抱 Parcel #1 探索 Parcel

1. 安装

2. 初体验

3. CommonJS 模块语法

4. ES6 模块语法

5. 使用 axios 代替 fetch

6. 使用 jquery 代替 getElementById

7. 导入 非 JavaScript 资源

8. 简单处理 css

9. 在 css 中使用 import

10. 使用 sass

如何用 GitBook 结合 markdown 写一本开源书籍

1. 安装 gitbook 并写书

2. 把书的源码放到 github 上

3. gitbook 新建书

4. 绑定个性域名

使用 Rails 自带的 Form Builder 来重构你的 Form

1. 介绍

2. 使用 Form Builder

3. 加一个额外的功能

RSpec 全套测试环境搭建从零入门

1. 缘起

2. 能学到什么

3. 安装过程

3.1 rspec-rails

3.2 factory_girl_rails

3.3 database_cleaner

3.4 spring-commands-rspec

3.5 guard

3.6 capybara

我写了 WebSocket 和 ActionCable 相关的序列文章

1. websocket 之入门 (一)

2. websocket 之客户端与服务器端的交互 (二)

3. websocket 之客户端详解 (三)

4. websocket 之实现简易聊天室 (四)

5. websocket 之用 tubesock 在 rails 实现聊天室 (五)

6. websocket 之 message_bus(六)

7. websocket 之 actioncable 入门 (七)

7. 导入非 JavaScript 资源