傲慢的军令状

Published on:

距离二月一日加入全栈营已经快两个月了,一篇logdown都没写,这就是傲慢啊!傲慢啊!

傲慢:“没有认真听从教练老师大神的指示,没按时保质保量完成作业”就是傲慢。

这个行为背后隐含着这样的逻辑:“没按照某人的指示,是因为我有更好的。”
类似于逆反期的孩子,在成年人的眼中是可笑的。

我的傲慢:

没有写笔记,ROID和错误纪记录都没有写;
纸质版错误记录的不全;
中间两次出差,中断了学习。
导致:掉进去的坑还会被绊倒

在这段时间里 做了 什么呢?
五万大课的开学典礼、元学习课、Rails第一课:环境建置、全栈营学习设计理论、VIP入学手册的阅读;
Rails第二课:初级练习、Rails第三课:Rails101分别做了三遍;
Rails第二课:初级练习 加分题 是在做第三遍的时候 傲慢的 做了,还没做出来,少了路由routes的设定,去论坛里找的教程,傲慢的伤悲......

从今天开始,重新 做人。三个月:
放弃:得到专栏 通往财富自由之路
放弃:一块听听 天天用英语
放弃:锻炼身体
放弃:纸质版的日记
放弃:电影观看
放弃:书籍阅读
放弃:众多订阅号
放弃:购物
放弃:PC

购买的 设备 们:
椅子:Aeron 座椅
地毯:卡乐美复古民族风蓝色100cm*200cm
插排:公牛插座独立开关电源插排插线板接线板拖线板1.8米
插排:公牛插座usb魔方多功能立式插排
电脑:MacBook Pro(15-inch,2016)16GB
显示器:京东dostyle DM320 32英寸高清显示器
音响:JBL PEbbles 音乐蜗牛
键盘:樱桃(Cherry) G80-3000LXCEU-2
触控板:Magic Trackpad2
眼镜:睿米B1防蓝光护目镜
支架:CROSSLINE显示器增高架
转type-c的各种线:
秋叶原 QD6305 USB type C-HDMI /F
秋叶原 HDMI线
绿联 Type-C有线百兆网卡 USB-C转RJ45网口转换器
奥睿科 ARH4-U3 全铝高速4口USB集线器HUB分线器Type-C圆形

废掉的:鼠标垫、type c-VGA转换线、电脑数据对拷线。

罗列设备是想激励自己,已然付出这么多,千万不要放弃半途而废,一定要成功!

付出

每天拿出五个小时来学习全栈营,一个小时反思复盘写logdown。这是我最大的诚意了,在人力允许的范围内尽量保持,不排除地震、台风、火山爆发、磁极调转、大寒流、陨石撞地球等不可抗拒因素……

这就是我立下的 军令状 ,希望三个月之后,我能说:“看,我早就说过……”

ps:军令状还有一条,每天一更,要是你发现我哪天没更,请联系我(微信:m60_06m,请附言:logdown),红包送上。
pps:因为是军令状,所以不算更,更一会附上。

停更两天

Published on:

昨天没做什么

今天也是

明天估计依旧

周一能正常吧 吧吧

ORID20170629

Published on:

ORID

Objective

关于今天的课程, 你记得什么?

如何面对开放世界
协作
注意力
价值观
共同成长

完成了什么?

听了直播 写了笔记

Reflective

你要如何形容今天的情绪

还行吧

今天的高峰是什么?

今天的低点是什么?

Interpretive

我们今天学到了什么?

注意力放在哪里了?

今天一个重要的领悟是什么?

持续进步

Decisional

我们会如何用一句话形容今天的工作

出来玩 打代码的时间必然会减少吧

有哪些工作需要明天继续努力?

ppt

ORID20170628

Published on:

ORID

Objective

关于今天的课程, 你记得什么?

目标和圈子 能不能和执行力串起来?

完成了什么?

简历

Reflective

你要如何形容今天的情绪

还行吧

今天的高峰是什么?

看中一家北京的公司

今天的低点是什么?

一直都没回复

Interpretive

我们今天学到了什么?

也许人就是很贱

今天一个重要的领悟是什么?

放弃 nothing last forever

Decisional

我们会如何用一句话形容今天的工作

还行吧

有哪些工作需要明天继续努力?

练练百宝箱吧

ORID20170627

Published on:

ORID

Objective

关于今天的课程, 你记得什么?

莫名其妙的bug

完成了什么?

作业

Reflective

你要如何形容今天的情绪

还行吧

今天的高峰是什么?

今天的低点是什么?

Interpretive

我们今天学到了什么?

写东西吧 少年

今天一个重要的领悟是什么?

艰难的一战 已经开始了

Decisional

我们会如何用一句话形容今天的工作

还行吧

有哪些工作需要明天继续努力?

作业喽

更改链接样式

Published on:

更改突出链接的样式

我想要一个这样的效果

要大 要突出

右键 检查 就出现这个东东

ok 我们就去scss里面搞 a 就行了

我开开心心的就上传了

然后有一段时间 我的网站就变成了 这样

还有这样

WTF!!!!

这神马毛线鬼呀!!!

坑爹呢这是!!!

我只想改这张的啊!!

前端不决问w3c,找到了一个伪类的概念:

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

我还用这个埋了一个彩蛋

a:link {color: #D52E28;
  font-size:300%;
  font-weight:900;
}
a:visited {
   color:#071BC7;
   font-size:300%;

 }
 a:hover {
   color: #FFEB3B;
   font-size:300%;
   font-weight:900;}
   a:active {color: #071BC7}

不对不对,我不是来埋彩蛋的,我是来解决问题的!

去群里问了一下:


两位大神回答了一下,不过我还是没有懂,span是什么东东?前面的 .哪去了,我应该如何写?方方方方 方很方

内外不决问Google吧
又查到了这个东西:

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

所以呢,我的顺序也是没问题的。

1.不对链接进行操作时:a:link{text-decoration:none;}//不显示下划线a:link{text-decoration:underline;}//显示下划线
2.访问链接后:a:visited{text-decoration:none;}//不显示下划线a:visited{text-decoration:underline;}//显示下划线
3.鼠标悬停在链接上时:a:hover{text-decoration:none;}//不显示下划线a:hover{text-decoration:underline;}//显示下划线
4.鼠标点击链接时a:active{text-decoration:none;}//不显示下划线a:active{text-decoration:underline;}//显示下划线

不过我觉得下划线挺好的,有够特别。要不大家都一样,怎么看的出来我是链接?

不对不对不对,我也不是查这个的,链接!链接!链接!重要的事说三遍!

旁白:上面的也都是链接呀。

我:你哪儿凉快儿哪儿呆着去儿!
在怼走了旁边之后,终于找到了这个:

a.footer{                          /*超链接颜色:爱马仕橙色,无下划线*/
     color: #FF6600;

     text-decoration: none;
 }
a.footer:hover {                 /*鼠标指向超链接颜色:黑色,无下划线*/
   color:black;
    text-decoration: none;
 }

$HTML
<footer class="container-fluid bg-footer-grey" >
  <p class="text-center">
    联系我们 | 招商合作 | 错误反馈 | 加入我们
    <br>
    Copyright ©2017 iFuture Design by
    <a class="footer" href="http://michelle-blog.logdown.com">Michelle</a>
    and 
    <a class="footer" href="http://hukui-blog.logdown.com">Hukui</a>
  </p>
</footer>

yeah 这个好 又有css又有html的东西

然后就改成了这样:

其他的都变回来了

但是,我要的效果也没了

我又仔细的看了一遍群里的图,大概明白是什么意思了,答案只有一个:

yeah 开心

如果你有更好的方式 请留言告知 欢迎挑错
参考:
0.http://www.w3school.com.cn/cssref/pr_target.asp
1.http://www.w3school.com.cn/css/css_pseudo_classes.asp
2.http://xyy601-blog.logdown.com/posts/1368861-the-basics-removing-link-underline
3.http://xyy601-blog.logdown.com/posts/1401207-today-tips-made-with-link-to-do-with-icon-links

seed

Published on:

这可能是最详细的全栈营【seed】教程

job-listing

最开始对seed产生兴趣是因为这篇文章:

https://forum.qzy.camp/t/heroku-app/436

 puts "这个seeds文件可以自动建立一个admin账号,并且创建10个public jobs,以及10各hidden jobs"

 create_account = User.create([email: 'example@gmail.com', password:'123456', password_confirmation: '123456', is_admin: 'true'])
 puts "Admin account created."

 create_job = for i in 1..10 do
   Job.create!([title: "Job no.#{i}", description: "这是用seeds文件建立的第 #{i} 个公开的工作", wage_upper_bound: rand(50..99)*100, wage_lower_bound: rand(10..49)*100, is_hidden: "false"])
 end
 create_job = for i in 1..10 do
   Job.create!([title: "Job no.#{i}", description: "这是用seeds文件建立的第 #{i} 个隐藏的工作", wage_upper_bound: rand(50..99)*100, wage_lower_bound: rand(10..49)*100, is_hidden: "true"])
 end

 puts "10 Hidden jobs created."

这可能是第一次直观感受到xdite老师说的“编程可以解放重复劳动”,当时就觉得好牛牪犇啊!

这篇seed中需要注意的是:

1循环呀

for i in 1..10 do

end

这是一个循环语句,更常见的循环在我们的教程里应该是index.html中的

<% xxxx.each do |xxx| %>

<% end %>

当然还有其他的循环写法,就不多说啦。

2 生成随机数啦

语法是这样的:

rand(5..10)*10

括号内的是范围,是一个闭区间,生成整数,后面可以写数学表达式,加减乘除都是可以的,但对我们用处最大的还是*100,向上面那种写法,就是随机生成500、600、700、800、900、1000,会比较好看。

3屏幕显示咧

puts “xxx” 终端会显示出 双引号中的内容 ,开心吧,嘻嘻。

第一次基本就用这个啦,没做太多研究。

但在无意中发现irb里的东西都可以写到seed里,语法一模一样呀,直接搬过来!

单图上传

后来写了图片上传的功能,seed没有跟上,不知道怎么写,直到看到这篇:

https://forum.qzy.camp/t/seeds-rb-jdstore/600

 products =[{title:"Apple iPhone 6 64GB",
            description: "This Certified Refurbished product has been tested and certified 
                  to work and look like new, with minimal to no signs of wear, by a specialized
                  third-party seller approved by Amazon. The product is backed by a minimum 90-day warranty, 
                  and may arrive in a generic brown or white box. Accessories may be generic and not directly 
                  from the manufacturer.",
            image_path: "#{Rails.root}/app/assets/images/iphone.jpg"},

            {title:"A Mid-Back Mesh Chair",
            description: "Ergonomic office chair with contoured mesh back for breathability
                  Pneumatic seat-height adjustment; padded seat for comfort.",
            image_path: "#{Rails.root}/app/assets/images/chair.jpg"}
 ]

 u = User.create([ email: 'a@a.com' ,  password: '123456' ,password_confirmation:'123456',is_admin:true])
 puts "create a adminer"

 p1 = Product.create([title:products[0][:title],description:products[0][:description],quantity:20,price:30,image:open(products[0][:image_path])])
 p2 = Product.create([title:products[1][:title],description:products[1][:description],quantity:20,price:30,image:open(products[1][:image_path])])
 puts "create products"

这已经是一个数组啦,而且还是二维的,但是有一个小问题,他的图片都是放在文件夹里的,上传到heroku上容易报错,还得预编译,麻烦呀,增加出错概率的事情,我是肯定不会做的!

后来应该是在slack上看到的,具体在哪里找不到了,好像是一个做鲜花的同学问的,仿照着写出了这么个东西:

title = [
    "北京烤鸭",
    "大闸蟹",
    "东坡肉",
    "剁椒鱼头",
    "法式鸡公煲",
    "宫保鸡丁",
    "锅包肉",
    "过桥米线",

    "煎饼果子",
    "麻辣香锅",
    "墨西哥肉卷",
    "三明治",
    "三文鱼扒 ",
    "水煮鱼",
    "小笼包",
    "红烧肉"
  ]

  images = [
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrq4hl3blj30rs0jqdjg.jpg",
    "http://ww2.sinaimg.cn/large/006tNbRwgy1ffrqa6g8lbj30i80r540z.jpg",
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqaet2crj308c0693yt.jpg",
    "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqalyuc6j30dw09bgm7.jpg",
    "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqarbpb1j30dc06odgw.jpg",
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqb1t147j30r80kfdkw.jpg",
    "http://ww2.sinaimg.cn/large/006tNbRwgy1ffrqb83ynaj30hs0a3diy.jpg",
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbeb3lgj30b408ctd5.jpg",

    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbtofakj30c807sdgi.jpg",
    "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqceyovbj30m80etgx2.jpg",
    "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqcrtif5j30h40cu75f.jpg",
    "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqd72vprj30p00e2my3.jpg",
    "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqdgbtptj30ec09k42j.jpg",
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqdo4poej30dw099wfq.jpg",
    "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqe008olj30le0c8q9k.jpg",
    "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbloodsj30p00gowj0.jpg"
  ]

  for i in 0..15 do
    Product.create!(
    title: title[i],
    description:"这只是底料,请去实验室DIY!",
    quantity:rand(6..10),
    price:rand(50..100)*10,
    image: open(images[i])
    )
  end

可以的呦,两个一维数组。图片事先用ipic转成链接,也可以仿照这个把description也写成一个数组,很方便。

多图上传

做了多图上传之后,问题又产生了,logdown上找到了这篇文章:

http://yammy-blog.logdown.com/posts/1497305

第一遍还没看懂,修行不够呀,其实核心就几行:

 p1 = Product.create([title:products[0][:title],description:products[0][:description],body:products[0][:body],category:products[0][:category],quantity:rand(3..9) * 100 ,price:rand(1..5)])

 Photo.create!(product_id:1,avatar: open(photos[0]))
 Photo.create!(product_id:1,avatar: open(photos[1]))

第一行是商品建立,第二行是第一个商品的第一张图片,第三行是第二个商品的第二张图片。

重复操作这三行程序,就可以达到多图上传的目的。

但是这样的写法又需要把图片放在文件夹里,感觉好像还退步了...... 上一次还能写循环呢,这一次就只能一条一条写了啊!

更好的写法

还是研究了一维数组:

 title = [
     "北京烤鸭",
     "大闸蟹",
     "东坡肉",
     "剁椒鱼头",
     "法式鸡公煲",
     "宫保鸡丁",
     "锅包肉",
     "过桥米线",
 ]

 image1s = [
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrq4hl3blj30rs0jqdjg.jpg",
     "http://ww2.sinaimg.cn/large/006tNbRwgy1ffrqa6g8lbj30i80r540z.jpg",
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqaet2crj308c0693yt.jpg",
     "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqalyuc6j30dw09bgm7.jpg",
     "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqarbpb1j30dc06odgw.jpg",
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqb1t147j30r80kfdkw.jpg",
     "http://ww2.sinaimg.cn/large/006tNbRwgy1ffrqb83ynaj30hs0a3diy.jpg",
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbeb3lgj30b408ctd5.jpg",
image1s = [
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbtofakj30c807sdgi.jpg",
     "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqceyovbj30m80etgx2.jpg",
     "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqcrtif5j30h40cu75f.jpg",
     "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqd72vprj30p00e2my3.jpg",
     "http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqdgbtptj30ec09k42j.jpg",
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqdo4poej30dw099wfq.jpg",
     "http://ww1.sinaimg.cn/large/006tNbRwgy1ffrqe008olj30le0c8q9k.jpg",
     "http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqbloodsj30p00gowj0.jpg"
 ]

 for i in 0..7 do
     Product.create!(
     title: f_title[i],
     description:"这只是底料,请去实验室DIY!",
     quantity:rand(6..10),
     price:rand(50..100)*10,
     )
 end

 for i in 0..15 do
    Photo.create!(product_id: (i+1) ,avatar:open(image1s [i]))
    Photo.create!(product_id: (i+1) ,avatar:open(image2s [i]))
end

看起来是不是顺眼多啦。

需要注意的地方

两个循环得分开写,合到一起的写法,还没成功,有人研究出来的话,请告诉我吧,谢谢。

单图更好的写法

其实有人已经写过了seed上传的分享,本来不想写的,但今天看到了一个写法,感觉更好!

上面的写法有一个问题,就是数组元素太多的时候,要更换的话,还的去重读小学数学,一个一个数,有点笨,今天有翻到这样的写法

products_info = [
 {title: 'a', description: '4',image: 'http://ww4.sinaimg.cn/large/006tNbRwgy1ffrq4hl3blj30rs0jqdjg.jpg'},
 {title: 'b', description: '3',image: 'http://ww2.sinaimg.cn/large/006tNbRwgy1ffrqa6g8lbj30i80r540z.jpg'},
 {title: 'c', description: '2',image: 'http://ww4.sinaimg.cn/large/006tNbRwgy1ffrqaet2crj308c0693yt.jpg'},
 {title: 'd', description: '1',image: 'http://ww3.sinaimg.cn/large/006tNbRwgy1ffrqalyuc6j30dw09bgm7.jpg'},
]

products_info.each do |info|
     Product.create!(
         title: info[:title],
         description: info[:description],
         quantity: rand(5..6),
         price: rand(5..6),
         image: open(info[:image])
         )
 end

这样看起来直观多了不是么。终于告别了小学数学,开心呦。

PS:本贴案例用于我们的jdstore作品第四版黑暗料理模块,希望你能帮我们做下测试和提意见,如果喜欢请帮我们投上一票。谢谢你能读到最后。

这有一些其他的教程 可能对你有帮助

这可能是全栈营最详细的【带缩略图的轮播图】教程

这可能是全栈营最详细的【省市区详细地址】教程

这可能是全栈营最详细的【下拉菜单和按钮失效】解决办法]

这可能是最详细的全栈营【seed】教程

这可能是最容易出现的全栈营【七牛云上传】教程

这可能是全栈营最详细的【客服系统】教程

欢迎随时和我交流

七牛云上传

Published on:

上传图片到七牛云容易出现的问题与解法

question1

教材

12-3使用七牛云(用来存储图片)

strp3:在专案中设置七牛云

有这么一个步:

大部分都没有注意到这个地方,什么叫 “选择不同的区域”呢?”

这一步如果操作不妥当的话,图片就会半小时消失,消失……

其实这部是和上一步 step2:创建存储空间 是有关系的!

如果有幸选择华东的话,按照教程上的操作完全没问题,但是如果像我一样选择别区域的话(甚至为了就近还去google一下),就会报错,

解法在这里:

如果选择的是华北config/initializers/carrierwave.rb里请这么写

CarrierWave.configure do |config|
  config.storage             = :qiniu
  config.qiniu_access_key    = ENV["qiniu_access_key"]
  config.qiniu_secret_key    = ENV["qiniu_secret_key"]
  config.qiniu_bucket        = ENV["qiniu_bucket"]
  config.qiniu_bucket_domain = ENV["qiniu_bucket_domain"]
  config.qiniu_block_size    = 4*1024*1024
  config.qiniu_protocol      = "http"
  config.qiniu_up_host       = "http://up-z1.qiniu.com"  #我是华北
end

如果选择的是华南的话,config/initializers/carrierwave.rb里请这么写

CarrierWave.configure do |config|
  config.storage             = :qiniu
  config.qiniu_access_key    = ENV["qiniu_access_key"]
  config.qiniu_secret_key    = ENV["qiniu_secret_key"]
  config.qiniu_bucket        = ENV["qiniu_bucket"]
  config.qiniu_bucket_domain = ENV["qiniu_bucket_domain"]
  config.qiniu_block_size    = 4*1024*1024
  config.qiniu_protocol      = "http"
  config.qiniu_up_host       = "http://up-z2.qiniu.com"  #我是华南
end

就ok啦

question2

还是

12-3使用七牛云(用来存储图片)

strp3:在专案中设置七牛云

上传到heroku上没问题了,本地rails s会报红,好红!

为啥?上传到heroku的图片被你保存的七牛了,在本地运行的时候是不是应该改回来!

那难道每次上传之前都改过去,成功了之后再改过来么?

你还别说,我有一段时间真是这么做的,宝宝心里苦,但宝宝不说TAT。

其实有更简单的办法呀!

app/uploaders/image_uploader.rb

注释掉第8行、第9行,加上

  if Rails.env.production? #远端
    storage :qiniu
  elsif Rails.env.development? #本地
    storage :file
  end

就ok啦!

当然还有别的写法,我就不多说了,防止粗心的人重复操作。

这两条大概就可以解决掉80%的问题了,嘻嘻。

PS:本贴案例用于我们的jdstore作品第四版黑暗料理模块,希望你能帮我们做下测试和提意见,如果喜欢请帮我们投上一票。谢谢你能读到最后。

这有一些其他的教程 可能对你有帮助

这可能是全栈营最详细的【带缩略图的轮播图】教程

这可能是全栈营最详细的【省市区详细地址】教程

这可能是全栈营最详细的【下拉菜单和按钮失效】解决办法]

这可能是最详细的全栈营【seed】教程

这可能是最容易出现的全栈营【七牛云上传】教程

这可能是全栈营最详细的【客服系统】教程

欢迎随时和我交流

省市区地址gem

Published on:

如何加入省市区(县)三级详细地址

身为一个购物网站,买家的地址,填的不详细那怎么行!东西向哪里寄呀,从实际需求出发,这应该是一个必备的功能。现在就和大家分享一下如何使用gem,完成上述功能。

一共分为四步,然后是我的一些坎坷,应该还蛮简单的的。

0.准备工作:

0.1 Gemfile

在合适的位置加上

gem 'china_city' 

别忘了bundle install

0.2 app/assets/javascripts/application.js

在合适的位置加上

//= require jquery
//= require 'china_city/jquery.china_city'

注 如果已经有//= require jquery 请不要重复加。

0.3 config/routes.rb

在合适的位置加上

mount ChinaCity::Engine => '/china_city'

这样准备工作就做好了。下面才是重头戏。

1 给order加栏位

终端运行

rails g migration add_address_to_orders

把db/migrate/xxx_add_address_to_orders.rb变成这样:

class AddAddressToOrders < ActiveRecord::Migration[5.0]
  def change
    +add_column :orders, :province, :string
    +add_column :orders, :city, :string
    +add_column :orders, :district, :string
  end
end

别忘了终端运行 rake db:migrate

2 在orders_controller 下加白名单

把app/contorllers/order_controller.rb

def order_params 
    -params.require(:order).permit(:billing_name, :billing_address, :shipping_name, :shipping_address)
    +params.require(:order).permit(:province, :city, :district, :billing_name, :billing_address, :shipping_name, :shipping_address)
  end

3.views

需要改的地方有几个

首先,我们要让顾客在checkout时把地址输进去;

app/views/carts/checkout.html.erb 中合适的位置加入:

            <div class="city-group">
              <%= f.select :province,  ChinaCity.list.unshift(["--省份--", 230000]), {}, class: "city-select "%>
              <%= f.select :city,      ChinaCity.list(f.object.province).presence || [["--城市--", 230900]],    {}, class: "city-select " %>
              <%= f.select :district,  ChinaCity.list(f.object.city).presence     || [["--地区--", 230903]],    {}, class: "city-select " %>
            </div>

然后,我们要让顾客在结账之后能看到地址;

app/views/order/show.html.erb中合适的位置加入:

                详细地址:
                <%= ChinaCity.get(@order.province) %>
                <%= ChinaCity.get(@order.city) %>
                <%= ChinaCity.get(@order.district) %>

所以的寄到邮箱的、付过款的、没付过款的、取消的order都要能看到寄送资讯
分别在:
app/views/order_mailer/apply_cancel.html.erb
app/views/order_mailer/notify_cancel.html.erb
app/views/order_mailer/notify_order.html.erb
app/views/order_mailer/notify_ship.html.erb
中合适的位置加入

    <tr>
      <td>
        <%= ChinaCity.get(@order.province) %>
        <%= ChinaCity.get(@order.city) %>
        <%= ChinaCity.get(@order.district) %>
      </td>
    </tr>

ok 大功告成啦

最终效果如下:

坎坷

过程当然也不是一帆风顺啦,

最开始想写到user中,一个user对应一个地址,

理想是美好的,现实都是白骨精!

遇到的问题,user的controller是device建立的,

rails g devise:controllers users

叫出了一大堆controller,白名单要加载哪里?

slack问助教,先不加试试,

接下来又遇到了输入地址,simple_form_for xxxx又不会写了,@user不对,@order.user也不对,又去问助教,这个是太难为人了,没做过的功能,都需要花打大量的时间,而且我越看越觉得应该加在order里!又开始了第二次尝试。

功能可以实现,有几个小细节。

如果user在输入的时候,忘记输入地址,生成的订单就会报错,解决这个问题有三个思路。

一是限制不得为空,尝试了教程中model的方法,不成,据报错显示,什么都不填的时候,传回来的不是空,而是[],所以 validates :shipping_address, presence: true就不好用呢。

二是在html加if elsif end,套用限制admin选单的方式,但好像需要跳转才能显示,又失败了。

三是设置默认值,总感觉自己用了gem比别人nb怎样,其实都是一样的,现在的默认值是我家里的地址,嘿嘿嘿,所以不细心填写的人东西都会寄到我这里,嘿嘿嘿。

还有一个问题,这个gem本来是四级级联的,省市区街道,但街道我是死活没写出来,按理来说按照下面的代码就应该成了:

 <%= f.select :street,  ChinaCity.list(f.object.district).presence     || [["--地区--", 230903]],    {}, class: "city-select " %>

但这样子只能出出区域,为啥子不出街道咧,不得其解。

and 这个gem不支持港澳台!这个gem不支持港澳台!!这个gem不支持港澳台!!!

不开心!不开心!!不开心!!!

欢迎来到大天朝我不带你玩固步自封局域网。

写了这么多希望大家来和我交流呦,厚着脸皮把所有错误、费解都扔上来了,都是为了抛砖引玉,希望大家用玉拍死我,谢谢。

PS:本贴案例用于我们的jdstore作品第四版黑暗料理模块,希望你能帮我们做下测试和提意见,如果喜欢请帮我们投上一票。谢谢你能读到最后。

这有一些其他的教程 可能对你有帮助

这可能是全栈营最详细的【带缩略图的轮播图】教程

这可能是全栈营最详细的【省市区详细地址】教程

这可能是全栈营最详细的【下拉菜单和按钮失效】解决办法]

这可能是最详细的全栈营【seed】教程

这可能是最容易出现的全栈营【七牛云上传】教程

这可能是全栈营最详细的【客服系统】教程

欢迎随时和我交流