PXF_LY's Blog

2017年3月15日 Bug-本周最大坑

在做https://fullstack.xinshengdaxue.com/posts/226rails实战:购物网站6-1购物车练习作业时,登录admin上传图片后,出现这个报错教材.

Showing /Users/liyi/jdstore2/jdstore/app/views/products/index.html.erb where line #6 raised:

undefined method `thumb' for "#<ActionDispatch::Http::UploadedFile:0x007f9c17e4c8d8>":String

rails s 的log如下

ActionView::Template::Error (undefined method `thumb' for "#<ActionDispatch::Http::UploadedFile:0x007f9c17e4c8d8>":String):
    3:     <div class="col-xs-6 col-md-3">
    4:       <%= link_to product_path(product) do %>
    5:         <% if product.image.present? %>
    6:           <%= image_tag(product.image.thumb.url, class: "thumbnail") %>
    7:         <% else %>
    8:           <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
    9:         <% end %>

app/views/products/index.html.erb:6:in `block (2 levels) in _app_views_products_index_html_erb__2444230285775715085_70154268980340'
app/views/products/index.html.erb:4:in `block in _app_views_products_index_html_erb__2444230285775715085_70154268980340'
app/views/products/index.html.erb:2:in `_app_views_products_index_html_erb__2444230285775715085_70154268980340'
  Rendering /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout
  Rendering /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_source.html.erb
  Rendered /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_source.html.erb (5.3ms)
  Rendering /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb
  Rendered /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (2.0ms)
  Rendering /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb
  Rendered /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.3ms)
  Rendered /Users/liyi/.rvm/gems/ruby-2.3.1/gems/actionpack-5.0.0/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout (65.2ms)

Step1

-对照教材,本节并没有出错

step2

-Google查询参考Debughttp://stackoverflow.com/questions/10544598/carrierwave-thumb-issue Slack上查询类似bug。https://fullstack-hq.slack.com/messages/online-group-04/search/undefined%20method%20%60thumb/'

Step3

-解决办法1:报错提示 “undefined method `thumb' for” ,把“app/views/admin/products/index.html.erb” 内thumb关键字( <%= image_tag(product.image.thumb.url, class: "thumbnail") %>)删掉,能正常上传。

助教意见:thumb可以去掉,尤其是目前你产品图片的尺寸都比较常规的话。
但可能是你在其他文件里代码有问题,比如app/uploaders/image_uploader.rb里面,建议再检查一下。

step4:

页面变成这样,我检查了view/products/show的代码,并没有错。

step5:

解决办法2:在stack overflow上找。
uploader/image_uploader
process resize_to_fill: [200,200]
换成等价写法
process :resize_to_fit => [200, 200]
依然报错。

step6

重启rails s 依然报错

step7:

问助教
我在https://fullstack.xinshengdaxue.com/posts/207
4-4中 少做了Step 3这一步:

挂上 image uploader

app/models/product.rb
class Product < ApplicationRecord
+ mount_uploader :image, ImageUploader
end

step8:

再次从头对照发现上面mount_uploader :image, ImageUploader贴错了地方

总结本周最大的坑:

做到第6课的时候,才发现自己在4-4出了问题。

为何滞后这么多才发现问题呢?
  • 第一遍做到第五章的时候,由于没按照教材要求切分支,导致不能pull request,所以重做。
  • 第二遍重做,应为赶进度,所以是按照教程贴的。
  • 第一步较慢,没出bug,第二遍以为自己不会出bug。做了上传图片功能后,并没有实际上传过图片,看到发布的product show页面,有no pic的栏位在,就自以为能上传图片。到第6节,真正上传图片,一下就爆掉了。
为什么出现这个问题呢?
  • 第一遍做到第五章的时候,由于没按照教材要求切分支,导致不能pull request,所以重做。
  • 第二遍重做,应为赶进度,所以是按照教程贴的。
  • 做的时候,自以为自己熟悉教程了,为了求快,就开了很多个Atom的页面,教材也没仔细阅读。
  • 这就导致将一个文件的一行代码,粘贴到了另一个比较陌生的文件中。
  • 这个文件夹总共三行代码,在将这行“未做的代码”补上后,依然报错。
  • 原因是,这行代码贴错的代码位于顶部,且被错误的贴到了一个很陌生的文件中,一直都不知道到底是哪里出了问题。
  • 最后对照教材只字不差的、从头到尾的对照,才发现这个问题。