需求：

前端调用接口，需要后端返回指定页面的数据。由于之前的接口没有涉及到分页，需要做微调，前端调用接口时，传参数page。

比如：api/v2/users?page=2， 返回第二页的用户列表信息。

返回的分页信息要求放在header而不是body中。

解决方法：

google到的解决思路是：

先在服务器端设置Access-Control-Expose-Headers，让前端调用接口时，可以拿到header信息。【如果不设置，前端通过response.header拿到的就只有cache-control, content-type.】

然后再将需要传递的分页信息，比如pageCount, perPage塞进response的header中即可。

一步步来。

后台Rails项目中，已经安装了gem：rack-cors 和 kaminari, 将借用这两个gem来完成这项工作。

Step1:

查看rack-cors文档，找到用于设置Access-Control-Expose-Headers的options expose。

参考文档，修改Rack的配置，假定我们需要塞进header中的是：X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count。

1
2
3
4
5
6
7
8
9

use Rack::Cors do
  allow do
    origins '*'
    resource '/public/*',
      headers: :any,
      methods: :any
      expose: ['X-Pagination-Current-Page', 'X-Pagination-Page-Count', 'X-Pagination-Per-Page', 'X-Pagination-Total-Count']
  end
end

重启服务器。

Step2:

kaminari的文档中，列出了current_page, total_pages等多个可以获取分页信息的方法。

以User的index 接口为例，修改users_controller.rb文件，在index部分的最后，添加如下代码：

1
2
3
4
5
6
7
8
9
10

def index
    .....
    if params[:page]
        @users = @users.page(params[:page])
        response.headers['X-Pagination-Current-Page'] = @users.current_page
        response.headers['X-Pagination-Page-Count'] = @users.total_pages
        response.headers['X-Pagination-Per-Page'] = @users.limit_value
        response.headers['X-Pagination-Total-Count'] = @users.total_count
    end
end

【鉴于其他接口也难免会涉及到分页，可以将这部分代码封装成一个方法，放在API的BaseController中，让所有继承该类的controllers可直接调用该方法。】

OK，搞定。

这时前端调接口，可以看到获取的header中含有pagination相关信息：

看的是第二版，全书共12章，除前面几章涉及历史及语法外，剩下的8章都是通过实例来学习，非常喜欢这种实战型的学习方式。

距离第二版出版（出版于2011年）已经过去了将近8年了，原书中给到的代码参考网站friendsofed 已经无法访问，示例代码中有些地方还是有坑的，比如chapter11中的视频部分，我照着书中的示例代码，重敲了一遍，详见DOM Scripting，所有的功能都可以正常运行，图片视频等素材简单在Google上找了下，如果你也在学它，也许可以做个参考。

书比较薄，而且主要的篇幅集中在示例上，就简单梳理下书中的要点以备忘。

文档其实是一堆nodes的集合，基本操作：新增，修改，查找，或者删除node。

node的三个基本类型：

元素节点，文本节点，属性节点。

DOM提供的使用最为频繁的方法：

getElementById

getElementsByTagName

getElementsByClassName

getAttribute

setAttribute

最佳实践需要记住：

平稳退化：让访问者可以在浏览器不支持Javascript的情况下，仍能顺利浏览网站。

渐进增强：用一些额外的信息去包裹原始数据，其目的是分离Javascript，让结构和行为分离。

要记住的知识点并不多，个人感觉主要的收获来源实践，跟着书中内容敲一遍，不花多少时间，但是感觉非常好，“用餐”很愉快，五星推荐。

12月底，公司TB，去了海南，30号回上海后，匆匆赶回老家，回来后觉得还是有必要整理下，偷个懒， 少字多图，记录下沿途风景。

玉带滩：

随处可见的小菠萝，水分足，推荐。

海水是咸的。

分界洲岛：

弹琴的小姐姐。

阳光从云缝中洒下来。

天涯海角：

日出：

正午：

亚龙湾：

over。

引入 moment

• 安装

  yarn:

  1	yarn add moment

  npm:

  1	npm i moment

• 配置

  在plugins目录下，新建文件：moment.js，放入以下内容：

  1 2 3 4 5 6 7

  import Vue from 'vue' import moment from 'moment' Vue.filter('moment', function(value, pattern = 'YYYY-MM-DD HH:mm:ss') { if (!value) { return null } return moment(value).format(pattern) })

  这里设置了默认的时间样式是YYYY-MM-DD HH:mm:ss。

  最后，在nuxt.config.js文件的plugins中添加：

  1 2 3 4 5

  plugins: [ 'xxxx', // 引入我们刚刚新增的文件moment.js '~/plugins/moment' ]

OK ,重启后就可以开始用了。

全局设置多种格式

比如需要配置两种格式，日期型和时间型。

修改plugins/moment.js:

1
2
3
4
5
6
7
8
9
10
11
12
13

import Vue from 'vue'
import moment from 'moment'

const formats = {
  "date": "YYYY-MM-DD",
  "datetime": "YYYY-MM-DD hh:mm:ss"
}

Vue.filter('moment', function(value, format='date') {
  if (!value) { return null }
  const pattern = formats[format]
  return moment(value).format(pattern)
})

这里，设置默认为日期格式。

页面使用

比如需要显示商品创建时间：

1
2
3
4
5

{{ product.created_at | moment('datetime') }}

// 或者仅仅显示日期
{{ product.created_at | moment('date') }}
{{ product.created_at | moment }}

因为设置了参数format默认是date, 当moment内不传参数时，则采用日期样式。

参考

how to format date for display

写在前面

之前老大就教过如何在chrome的开发者模式下，设置断点，调试JS，第一次知道chrome还有这功能，觉得新鲜神奇。可惜后面偷懒没有及时记录下来，这次又遇到JS调试，脑子里一堆问号：上次是咋整的？Google了下，找到了一篇文章JS断点调试心得，文章写得很详细，这里我就简单粗暴记录下操作要点，随时备忘。

快速设置断点

以bootstrap的button页面为例：

打开chrome的开发者模式：【右键，点击inspect】

选择 sources， 找到你要设置断点的文件，在你需要debug的地方，点击设置断点。

这里有一个小技巧，对于压缩后的JS文件，点击下面的一个{} 按钮：

会将代码格式化，非常有用。

逐句调试

有两个频繁使用的调试按钮，如图所示，一个点击去往下一个断点，另一个点击会前往下一条语句。

巧用console

使用快捷键ESC，打开console，可以在console中输入变量，比如e，可以看到变量的具体内容。或者直接把光标放在需要查看的变量上，也可以看到变量的具体内容。

注意这里的console与source旁边那个console不同。在source旁边的console中输入变量，会发现什么也不会发生。

条件断点

可以给断点添加条件，添加条件后的断点，颜色会变成橙色。

比如在下面这个循环体中，需要debug 某一次循环，就可以设置条件断点 n==2，设置后，刷新页面，在console中输入n，会车，就会发现此时 n 为2，然后就可以在n = 2 时，开始你的debug之旅。

取消断点

临时禁用按钮：

如果要取消或者移除所有断点：

注意，需要在面板的Breakpoints下点击右键，才会弹出上图所示的功能列表。

参考

推荐：JS断点调试心得

如果想要详细了解面板知识，推荐这篇：用Chrome调试你的Javascript

在nuxt中引入fontawesome的方法跟引入其他外部库基本一样，因为初次接触nuxt，所以引入fontawesome时，参考网上的各种vue fontaswesome的文章，一直无法显示，踩坑不少，最后才意识到我是要在nuxt里面引入啊。

记录下最后的解决方法，没准能给同我一般的nuxt小白节省点时间。

安装

Yarn:

1
2
3
4
5
6
7

// 套件
yarn add nuxt-fontawesome

// package，不收费
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Npm:

1
2
3
4
5
6
7

// 套件
npm i nuxt-fontawesome

// package，不收费
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-brands-svg-icons

备：Nuxt Font Awesome 中使用了官方提供的 vue-fontawesome。

配置

• 新建plugin

  在plugins目录下，新建文件：font-awesome.js，放入以下内容：

  1 2 3 4 5

  import Vue from 'vue' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false

  这里，引入了FontAwesomeIcon，同时通过Vue.component，生成可供使用的组件，组件的标签为font-awesome-icon。Vue.config.productionTip设置为false，表示关闭生产模式下给出的提示。

• 配置nuxt.config.js

  在nuxt.config.js文件中，在plugins，module部分分别添加如下代码：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  plugins: [ 'xxxx', // 引入我们刚刚新增的文件font-awesome.js '~/plugins/font-awesome' ] ..... modules: [ 'xxxxx', // 引入我们新增的套件nuxt-fontawesome 'nuxt-fontawesome' ] .... /* ** FontAwesome module configuration 配置FontAwesome */ fontawesome: { // See https://github.com/vaso2/nuxt-fontawesome // 这里设置了组建的标签为fa // 如果不设置，则默认为在font-awesome.js中，生成的：font-awesome-icon component: 'fa', imports: [ { set: '@fortawesome/free-solid-svg-icons', icons: ['fas'] }, { set: '@fortawesome/free-regular-svg-icons', icons: ['far'] }, { set: '@fortawesome/free-brands-svg-icons', icons: ['fab'] } ] }, .......

  这里，把三个免费的package都添加进来了。如果需要添加收费的pro版本，则是这样：

  1 2 3 4 5 6 7 8 9 10 11 12 13

  /* ** FontAwesome module configuration */ fontawesome: { // See https://github.com/vaso2/nuxt-fontawesome component: 'fa', imports: [ { set: '@fortawesome/pro-regular-svg-icons', icons: ['faAdjust'] } ] }

  [当然，这里set的库，都是之前通过npm / yarn 已经安装过的 ，具体参考：Nuxt Font Awesome]

使用

设定完成，就可以使用了，以一个简单的fontawesome icon 为例：

1

<i class="fas fa-music"></i>

在vue页面中引用上述music的icon时，这样写：

1
2
3
4
5

### 如果设置中，额外设置了component: 'fa':
<fa :icon="['fas', 'music']" />

### 如果没有设置component
<font-awesome-icon :icon="['fas', 'music']" />

OK！

更多使用参考Nuxt Font Awesome。

参考

推荐： 【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

Nuxt Font Awesome

问题：

工作中遇到的一个axios跨域请求问题，记录下最终的解决方法。

前端用Vue，引入了axios，调用的是rails项目中的接口。vue 2.5.17 , rails 5.2.1

Vue项目中，配置文件含如下内容：

1
2
3
4
5
6
7
8

axios: {
  // See https://github.com/nuxt-community/axios-module#options
  baseURL:
    process.env.NODE_ENV === 'production'
      ? 'https://xxxxxx/v2'
      : 'http://api.xxxxx:3000/v2',
  credentials: true
},

设置credentials为true，axios请求时，会自动携带cookie。本地运行 yarn run dev，设置端口为4000.

浏览器打开localhost:4000, 没有任何反应，查看chrome 开发者模式下的console，出现如下报错：

1

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

解决

需要在rails项目中，安装gem rack-cors

1

gem 'rack-cors', :require => 'rack/cors'

bundle后，在config/application.rb文件中，添加如下语句：

1
2
3
4
5
6

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

重启rails项目。

这时，本地再次访问locahost:4000，如果console依然报错：

1

Access to XMLHttpRequest at 'http://api.xxxxx:3000/v2' from origin 'http://localhost:4000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

请修改rails项目的config/application.rb文件，在resource中添加credentials: true，同时设置origins，添加正则来限定请求访问的来源地址，如果只是单单添加credentials: true，重启rails时，Rack::Cors会弹出报错：

1

Allowing credentials for wildcard origins is insecure. Please specify more restrictive origins or set 'credentials' to false in your CORS configuration. (Rack::Cors::Resource::CorsMisconfigurationError)

最终添加到config/application.rb文件的配置内容如下：

1
2
3
4
5
6

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins %r{/A***your-regex***\z/}x
    resource '*', headers: :any, methods: [:get, :post, :options], credentials: true
  end
end

重启rails项目。

再次访问，OK。

参考

如何使用 Rails 建立可跨域访问的 API？

用devise做用户登录，遇到的一个问题，记录下场景和leader指导出的解决方法。

场景：

添加项目成员member时，需要管理员新增用户user。

• 管理员在新增用户页面中输入邮箱；
• 管理员提交表单，用户的初始密码随机生成，随后给新建的用户发送一份账户激活的邮件；
• 新增用户登录注册的邮箱，点击邮件中的链接【看似激活，实则为重置密码的链接】；
• 用户重置密码完成，自动登录。

这里只涉及devise如何发送重置密码的邮件。

准备工作：

三个model：

对应的表结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# == Schema Information
#
# Table name: members
#
#  id         :integer          not null, primary key
#  user_id    :integer
#  project_id :integer
#  created_at :datetime         not null
#  updated_at :datetime         not null

# Table name: projects
#
#  id         :integer          not null, primary key
#  title      :string
#  created_at :datetime         not null
#  updated_at :datetime         not null

# Table name: users
#
#  id                     :integer          not null, primary key
#  email                  :string           default(""), not null
#  encrypted_password     :string           default(""), not null
#  reset_password_token   :string
#  reset_password_sent_at :datetime
#  remember_created_at    :datetime
#  sign_in_count          :integer          default(0), not null
#  current_sign_in_at     :datetime
#  last_sign_in_at        :datetime
#  current_sign_in_ip     :string
#  last_sign_in_ip        :string
#  created_at             :datetime         not null
#  updated_at             :datetime         not null

解决：

使用devise自带的sessions。在routes.rb中做如下修改：

1
2
3
4
5

### config/routes.rb

devise_for :users, path: "", controllers: {
    sessions: "sessions"
  }

新建一个sessionscontroller：rails g controller sessions

继承Devise::SessionsController.

1
2
3
4

### app/controllers/sessions_controller.rb

class SessionsController < Devise::SessionsController
end

如果希望root页面就是显示注册的页面，可以在routes.rb中添加如下代码：

1
2
3
4
5

### config/routes.rb

 devise_scope :user do
    get "/", controller: :sessions, action: :new
  end

激活账户涉及confirmable模块，使用rails g devise user 创建user时，默认没有confirmable的，需要自己手动添加，请在创建user时，确保含有以下字段：

1
2
3
4

t.string   :confirmation_token
t.datetime :confirmed_at
t.datetime :confirmation_sent_at
t.string   :unconfirmed_email # Only if using reconfirmable

「如果已经创建，使用rail g migration，给user添加上这些字段，同时迁移数据，给现有用户的confirmed_at赋值，不然无法登录。」

修改user.rb, 添加上模块：:confirmable

1
2
3
4
5
6

### app/models/user.rb

class User < ApplicationRecord
  devise :database_authenticatable, :rememberable, :validatable, :recoverable, :confirmable
  ......
end

同时在新增成员的表单中，允许输入用户的邮箱，如果邮箱存在，则直接添加该用户到项目成员中，如果邮箱不存在，则给该邮箱发送确认的邮件。

修改member.rb, 添加：

1
2
3

### app/models/member.rb

arr_accessor :email

这样member的new.html.erb中就可以使用f.input :email，随后在controller的create action中，通过传过来的email来判断用户是否已经存在。修改create中原来的@member.save，改成@member.submit， 在member.rb中添加submit 函数：

1
2
3
4
5
6
7
8
9
10
11
12

### app/models/member.rb

  def submit(email)
    password = SecureRandom.hex(4)
    user = User.where(email: email).first_or_initialize(password: password, password_confirmation: password)
    user.save
    self.user = user
    self.save
    errors.empty?
  end

### 这里省略了errors的delegate，如果email是无效的，需要将user的error delegate给member。

在members_controller中，修改create action：

1
2
3
4
5
6
7
8

#### app/controllers/projects/members_controller.rb

 def create
    if @member.submit(member_params[:email])
      @user = @member.user
      @user.send_activation_instructions unless @user.confirmed?
    end
  end

而对于send_activation_instructions，发送确认邮件的method，可以参考send_devise_notification 在 devise 中的定义：

1
2
3
4
5
6
7
8
9
10
11

### app/models/authenticatable.rb

def send_devise_notification(notification, *args)
  message = devise_mailer.send(notification, self, *args)
  # Remove once we move to Rails 4.2+ only.
  if message.respond_to?(:deliver_now)
    message.deliver_now
  else
    message.deliver
  end
end

这里message = devise_mailer.send(notification, self, *args)，devise_mailer使用send，调用参数notification传过来的方法名。

看Devise::Mailer，里面定义了5个methods, 用于发送不同类型的邮件需求:

1
2
3
4
5
6
7
8
9
10

#### app/mailers/devise/mailer.rb

## 以下是confirmation_instructions。

def confirmation_instructions(record, token, opts={})
  @token = token
  devise_mail(record, :confirmation_instructions, opts)
end

.......

参考这个，我们可以写出activation_instructions。

在 user.rb中，定义: send_activation_instructions。

1
2
3
4
5
6

### app/models/user.rb

def send_activation_instructions
  token = set_reset_password_token ## 生成 reset_password_token,赋给token变量
  send_devise_notification(:activation_instructions, token, {})
end

新增一个mailer： UserMailer，继承 devise_mailer, 定义 activation_instructions。

1
2
3
4
5
6
7
8
9

### app/mailers/user_mailer.rb

class UserMailer < Devise::Mailer

  def activation_instructions(record, token, opts = {})
    @token = token
    devise_mail(record, :activation_instructions, opts)
  end
end

修改user.rb，添加：

1
2
3
4
5

### app/models/user.rb

def devise_mailer
  UserMailer
end

同时，设置 reconfirmable 为false：

1
2
3

### app/models/user.rb
  devise :database_authenticatable, :rememberable, :trackable, :validatable, :recoverable, :confirmable, reconfirmable: false
  ......

这样在member调用submit时，user.save就不会抛出异常，要求confirm这个账户了。

在user_mailer的添加activation_instructions.html.erb 文件，文件内容可参考devise的confirmation_instructions.html.erb.

1
2
3
4
5
6

### app/views/user_mailer/activation_instructions.html.erb

<p><%= t('.greeting', recipient: @resource.name) %></p>

<p><%= t('.instruction') %></p>
<p><%= link_to t('.action'), edit_reset_password_url(reset_password_token: @token) %></p>

这里注意把confirmation_instructions.html.erb中，confirmation_url替换成 edit_reset_password_url，因为我们希望的是用户点击这个链接，跳转到密码修改的页面。

最后，把reset_password这个功能添加进来。

• 修改routes.rb，跳过devise自带的confirmations和passwords，用reset_password来完成验证邮箱和密码重置的功能，添加：

  1 2 3 4 5 6 7 8 9

  ### config/routes.rb devise_for :users, path: "", controllers: { sessions: "sessions" }, skip: [ :confirmations, :passwords ] devise_scope :user do resource :reset_password end

• 新建controller，继承自devise的passwordsController:

  1 2 3 4 5 6 7 8

  class ResetPasswordsController < Devise::PasswordsController def update super do |resource| resource.confirm if resource.errors.empty? && !resource.confirmed? end end end

  这里重新定义了update, 调用super时，传递了一个block，如果user 没有confirmed过，同时更新密码成功，就调用confirm。在修改密码的同时，完成了用户的邮箱验证。

• 在app/views/reset_passwords下，添加edit.html.erb，用户收到邮件时，点击“确认我的账户”时，会跳转到该页面，在该页面进行密码重置。具体页面内容，此处略。

BTW，有关邮箱的配置，可以参考rails的官方文档。在开发环境下，推荐安装 letter_opener这个gem, 就可以很轻松地查看是否正确发送了邮件了。

参考

devise

Action Mailer Basics

cancancan中load_resource的用法小结。

正文：

最基本的用法:

1
2
3
4
5

class TasksController < ApplicationController
  load_resource
end

#### 等同于 @task = Task.find(params[:id]), @task = Task.new, @tasks = Task.all

options 众多，来一一捋捋。【借鉴cancancan的wiki，以下代码多以 task，project 为例。】

• only / except

  同before_action中的only / except，指明load_resource在哪些action前调用。

  only:

  1 2 3 4 5

  class TasksController < ApplicationController load_resource only: [:index, :show] end ### 仅在 index，show action 前调用load_resource

  except:

  1 2 3 4 5

  class TasksController < ApplicationController load_resource except: [:sent] end ### 在除 sent action 外的其他actions前调用load_resource

• through

  通过A，B之间的关联来load某一方。

  1 2 3 4 5 6 7 8 9 10 11

  class Project < ActiveRecord has_many :tasks end class TasksController < ApplicationController load_resource :project load_resource :task, through: :project ## 这里也可以省略 :task end #### 等同于： @project = Project.find(params[:project_id]) #### @task = @project.tasks.find(params[:id])

  也可以通过method，比如：current_user，也就是wiki中所说的nested through method：

  1 2 3 4 5

  class TasksController < ApplicationController load_resource through: :current_user end #### 等同于： @task = current_user.tasks.find(params[:id])

• through_association

  与through的不同在于，project中，如果给tasks起了“别名”，不是，has_many tasks, 而是长这样：

  1 2 3

  class Project < ActiveRecord has_many :events, class_name: 'Task' end

  则在taskController中需要通过through_association来指明：

  1 2 3 4 5 6 7

  class TasksController < ApplicationController load_resource :project load_resource :task, through: :project, through_association: :events end #### 等同于：@project = Project.find(params[:project_id]), #### @task = @project.events.find(params[:id])

• shallow

  shallow是跟着through的，设置为true则允许parent resource为 nil，设置为false则不允许nil，默认为false。

  1 2 3 4 5 6 7 8

  class TasksController < ApplicationController load_resource :project load_resource :task, through: :project, shallow: true end #### 等同于： #### @project存在，则@task = @project.events.find(params[:id]) #### @project不存在，则@task = Task.find(params[:id])

• singleton

  当project与task存在一对一关系：

  1 2 3 4 5 6 7 8 9 10 11

  class Project < ActiveRecord has_one :task end class TasksController < ApplicationController load_resource :project load_resource :task, through: :project, singleton: true end #### 等同于： @project = Project.find(params[:project_id]) #### @task = @project.task

• parent

  根据这个resource是不是一个parent resource来决定，当resource的name与controller无法匹配时，则默认为是parent resource。比如：

  1 2 3 4

  class TasksController < ApplicationController load_resource :project load_resource :task, through: :project end

  这里，project在task的controller中，就是一个parent resource。

• class

  指定类名。多用于当controller与model无法匹配时。

  常见的是个人中心这样的ProfilesController，对应的类名是User：

  1 2 3 4 5

  class ProfilesController < ApplicationController load_resource :profile, class: User end #### 等同于： @profile = User.find(params[:id])

• find_by

  指定find_by_[attribute]。比如：

  1 2 3 4 5

  class PersonationsController < ApplicationController load_resource find_by: :token, class: User end #### 等同于： @personation = User.find_by_token(params[:id])

  注意，此处是params[:id]， 不是params[:token]，如果需要设置params fetch的attribute，可以用id_params.

• Id_params

  默认是id，可以改为其他的param key，比如上面的例子:

  1 2 3 4 5

  class PersonationsController < ApplicationController load_resource find_by: :token,, class: User, id_params: :token end #### 等同于： @personation = User.find_by_token(params[:token])

  可以将through，find_by, id_params 结合运用：

  以常见的一个订阅为例， 用户订阅项目：

  1 2 3 4 5 6 7

  class SubscriptionsController < ApplicationController before_action { @user = current_user } load_resource through: :user, find_by: :project_id, id_param: :project_id end #### 等同于： #### @subscription = @user.subscriptions.find_by_project_id(params[:project_id])

• new

  指定除默认的new，create之外，哪些action需要new resource。

  1 2 3 4 5 6 7 8 9

  class TasksController < ApplicationController load_resource new: :build def build ..... end end #### 等同于： 在调用build action前，执行 @task = Task.new

• prepend

  值为true或者false，默认false。如果设置为true，则会调用prepend_before_filter 而不是 before_filter。

参考

cancancan

cancancan load_resource

在travis CI中配置指定版本的node，分两种情况：

纯 node.js 项目

node是唯一的依赖，查看官网building a javascript and Node.js project，在.travis.yml中添加：

1
2
3
4

language: node_js
node_js:
  - "8"
  - "6"

如果需要安装指定版本的nodejs，需要借助于.nvmrc，具体操作见官网，这里主要看非node项目下，如何配置指定版本的node。

非node项目，项目中依赖node

比如Rails项目，language为ruby，这时就不能使用上面的方式来设置。

那么如何设置？

在docs里面没有搜到，参考了这篇文章Travis CI: Node Version Management on Non-Node Projects，搞定。

具体如下：

在.travis.yml中添加：

1
2
3
4
5
6

env:
  - TRAVIS_NODE_VERSION="8.12.0"

install:
  - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION
  - npm install

这里做了这么几件事：

• 设置了环境变量TRAVIS_NODE_VERSION， 指定版本号，这里指定的是8.12.0。
• rm -rf ~/.nvm 删除服务器上原来的nvm
• git clone https://github.com/creationix/nvm.git ~/.nvm, 从GitHub上拉取nvm
• cd ~/.nvm && git checkout git describe --abbrev=0 --tags 切换到最新版的nvm
• source ~/.nvm/nvm.sh 执行nvm.sh文件
• nvm install $TRAVIS_NODE_VERSION 安装指定版本node

OK。

后面老大给了更好的解决方法，附上：
在.travis.yml中添加：

1
2
3
4
5
6
7

env:
  - TRAVIS_NODE_VERSION="8.12.0"

install:
  - nvm install TRAVIS_NODE_VERSION
  - nvm alias default TRAVIS_NODE_VERSION
  - npm install

果然，简单多了。不得不说，小白还有很长的路要走。

参考：

Travis CI: Node Version Management on Non-Node Projects

building a javascript and Node.js project