发表于 | 分类于 |   |   303 words

引入 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

发表于 | 分类于 |   |   537 words

写在前面

之前老大就教过如何在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

发表于 | 分类于 |   |   663 words

在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

发表于 | 分类于 |   |   495 words

问题：

工作中遇到的一个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？

发表于 | 分类于 |   |   1,428 words

用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

发表于 | 分类于 |   |   780 words

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

发表于 | 分类于 |   |   392 words

在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

发表于 | 分类于 |   |   351 words

最近老大布置了个任务，升级JS库，升级的过程中遇到了一些问题，记录下。

问题1：

在package.json中更新版本后，执行yarn install, 报错：

1
node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v64-darwin-x64.tar.gz

本地Node 10.6.9, npm 6.4.1.

打开https://fsevents-binaries.s3-us-west-2.amazonaws.com，list里面确实没有这个版本的fsevents.

解决:

Google后，发现fsevents#196 中有提到类似的问题。

解决方法也很简单，下载符合版本要求的node，可以找到fsevents的下载包，这里我下载了[email protected]，版本号：8.12.0.

终端执行：

1
2
3
4
5
node -v
brew unlink node
brew search node
brew install [email protected] ##这里选择[email protected]，如果已经有[email protected],则无须安装
brew link [email protected]

再次执行yarn install, OK。

问题2:

执行bin/webpack-dev-server 报错：

1
Cannot find module 'webpack-cli/bin/config-yargs'

本地webpack 3.12.0, 想要升级webpack-dev-server至最新版3.1.9.

解决:

Google，在webpack-dev-server releasev3.0.0中，明确指出了 webpack-dev-server 3.x 支持 webpack 4.x，不再支持旧版本webpack.

1
Breaking change: webpack v4 is now supported. Older versions of webpack are not supported.

两种解决方法：升级webpack为v4+ 或者 降级 webpack-dev-server 为v2+.

参考：

Pre-built binaries not found for [email protected] and [email protected]

cannot find module ‘webpack/bin/config-yargs’

发表于 | 分类于 |   |   274 words

问题描述：

写接口的时候，遇到的一个问题：

通常情况下，通过ID来查找instance，类似这样：

1
2
3
resources :books do
  get :publish_info, on: :member
end

想要查找某本书详细的出版信息时，URL长这样：

1
/books/{book_id}/publish_info

假定现在要求传递的是商品的序列号ISBN，而不是book.id，怎么写？

解决方法：

在rails的routes部分有介绍，类似这样：

1
2
3
get 'books/*section/:title', to: 'books#show'

get 'photos/:id', to: 'photos#show', id: /[A-Z]\d{5}/

可以用其他字段来代替id，且可以给字段添加上正则校验。

比如上面的ISBN，可以这么写：

1
2
3
resources :books, params: :isbn do
  get :publish_info, on: :member
end

同时参考RegExLib.com, ISBN 10 or 13 对应的正则表达式是^(97(8|9))?\d{9}(\d|X)$ ，故可以添加上正则校验：

1
2
3
resources :books, params: :isbn, isbn: %r{^(97(8|9))?\d{9}(\d|X)$} do
  get :publish_info, on: :member
end

OK。

参考：

Rails Routing from the Outside In

Rails Patch: Change the Name of the :id Parameter in Routing Resources

Slash usage in to_param results in escaped character and no route match with 4.1.2 upgrade

RegExLib.com

发表于 | 分类于 |   |   204 words

问题描述：

表单中上传文件时遇到的一个问题：

正常情况下，上传文件后，传递的params应该是这样：

1
"attachments_attributes"=>[{"file"=>#<ActionDispatch::Http::UploadedFile:0x007f9fcd2b4188 @tempfile=#Tempfile:/var/folders/w4/qw3_jsfs0572hmqcl34v9xx00000gn/T/RackMultipart20180918-7216-12k5se6.jpg, @original_filename="sunset.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name="attachments_attributes[file]"; filename="sunset.jpg"\r\nContent-Type: image/jpeg\r\n">}]

但是我的却是这样：

1
"attachments_attributes"=>[{"file"=> "sunset.jpg"}]

解决：

解决方法其实就在ROR文档中。【果然，文档要细细读啊！】

在action view form helpers中明明白白提到了：

image-20180919092904541

代码中使用了form_tag，如果需要上传文件，必须添加multipart: true。

当form_tag添加了multipart: true ，等同于：

1
2
form_tag('/upload', multipart: true)
# => <from action ="/upload", enctype="multipart/form-data" method="post">

而当表单中含有上传文件的控件时，必须使用enctype=”multipart/form-data”。

参考：

action view form helpers

form_tag