8 months ago

'form_for'是一个helper用于生成HTML的表单,'do \f\'中的'|f|' 为 'form builder'表单生成器

form_for用来将表单绑定到对象上,从而快速地添加需要编辑的对象的属性。

<%= form_for @article, url: { action: "create" }, html: { class: "nifty_form" } do |f| %>
<%= f.text_field :title %>
<%= f.text_area :body, size: "60x12" %>
<%= f.submit "Created" %>
<% end %>
@article 是要编辑的对象
form_for 方法的参数只有一个Hash,各种选项均为嵌套Hash,如url(表单提交的地址),method(表单提交方法),html(表单html属性),namespace(命名空间,将其值作为前缀添加到id属性上)
form_for 方法会拽入一个表单构造器对象—f变量
生成表单控件的帮助方法在表单构造器对象f上调用

详解:
2.2 将表单绑定至对象

当 Person 有很多属性时,我们得一直重复传入 :person 来生成对应的表单。 Rails 提供了 form_for 让你把表单绑定至 model 的对象。

假设我们有个处理文章的 controller:app/controllers/articles_controller.rb:

def new
@article = Article.new
end

对应的 view app/views/articles/new.html.erb:

<%= form_for @article, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>
<%= f.text_field :title %>
<%= f.text_area :body, size: "60x12" %>
<%= f.submit "Create" %>
<% end %>

几件事情要说明一下:

@article 是实际被编辑的对象。
有两个 options (hash)::url 与 :html。还可传入 :namespace,用来生成独一无二的 ID。
|f| 为 form builder。
本来写成 text_field(:article) 改为 f.text_filed。
生成的 HTML 为:

<form accept-charset="UTF-8" action="/articles/create" method="post" class="nifty_form">
<input id="article_title" name="article[title]" type="text" />
<textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea>
<input name="commit" type="submit" value="Create" />
</form>

除了 form builder,还有个 fields_for 可用。这在使用相同表单,来编辑多个 model 对象的场合下很有用。比如你有个 Person model,有一个与之关联的 ContactDetail model,则可生成可同时编辑两个 model 的表单:

<%= form_for @person, url: {action: "create"} do |person_form| %>
<%= person_form.text_field :name %>
<%= fields_for @person.contact_detail do |contact_details_form| %>
<%= contact_details_form.text_field :phone_number %>
<% end %>
<% end %>

会生成:

<form accept-charset="UTF-8" action="/people/create" class="new_person" id="new_person" method="post">
<input id="person_name" name="person[name]" type="text" />
<input id="contact_detail_phone_number" name="contact_detail[phone_number]" type="text" />
</form>

 
8 months ago

在复习Rails101~4-2 实作讨论群“新增”功能~step2的时候,
教程效果是新增页面居中显示,而我的是居左显示,于是看了英文教程:
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
在"Triy it yourself"中有一句Resize the browser window to see the effect
调整拉大浏览器窗口后就显示居中了,确实是自适应哈!

使用bootstrap可以在不同屏幕比如电脑手机端,内容自动适应屏幕大小,一行最多占12个标签,
small grid (≥ 768px) = .col-sm-,用于小屏幕设备
medium grid (≥ 992px) = .col-md-
,用于中等屏幕设备
large grid (≥ 1200px) = .col-lg-*.,用于大屏幕设备
col-xs用于超小型设备(max-width:768px);后面跟数字是几,也就是占几份。比如是4,也就是一行可以显示3个;或者12,就是一行可以显示1个;
使用的时候,一般设置的话四个属性都用到会比较好,
如果要兼容所有分辨率都用.举个栗子:

lg=4 md=4 sm=12 xs=12

这样就可以在不同屏幕上很好的展示;
又比如:你有了12个section标签,你想让他们在不同屏幕大小的时候有不同的展示方式,大屏时一行显示6个(12栅格/6=2,所以写col-lg-2),中屏时一行显示3个,小屏时一行展示2个,超小屏一行展示1个,你就可以在每一个section标签里面这样写,

lg=4 md=4 sm=12 xs=12

参考全局CSS样式 · Bootstrap v3 文档

 
8 months ago

item2常用快捷键总结

⌘ + number 切换标签页

⌘ + ←/→ 按方向切换标签页

⌘ + ⏎ 切换全屏

⌘ + f 查找

⌘ + d 垂直分屏,⌘ + shift + d 水平分屏。使用⌘ + ]和⌘ + [在最近使用的分屏直接切换.而⌘ + opt + ←/→切换到指定位置的分屏。

⌘ + t 新的标签页

⌘ + w 关闭当前标签页

⌘ + ; 自动补全历史命令。

⌃ + u 清空当前行。

⌃ + a 到行首

⌃ + e 行末

⌃ + f/b 前进后退,相当于左右方向键,原po说比移开手按方向键更快,我倒是觉得更加难按。

⌃ + d 删除当前字符

⌃ + h 删除之前的字符

⌃ + w 删除光标前的单词

⌃ + k 删除到文本末尾

好用的技巧:⌃ + a/e控制到行首和行尾的移动,按照单词移动大为⌥ + ←/→

 
8 months ago

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
...
</div>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

更多内容:全局 CSS 样式

 
8 months ago

scope就是相当于以前洗衣服手洗的话要分很多步骤,现在来了一个全自动洗衣机,把这些步骤都打包好了,你只要一声下令“帮我洗衣服“这个管家就给你搞定了

它的作用就是将常用或者麻烦的对象关系映射(Object Relation Mapping)语法组合成懒人包,下次要用这个功能就叫它的名字就好了
比如:
class Topic < ActiveRecord::Base
scope :recent, -> { order("created_at DESC") }
end
recent这个scope定义好了以后,我们要语句的功能的时候,叫小名,后面.rencent这个方法就可以实现后面花括号里的功能了


在Joblisting里面有没有带参数的例子:
class Post < ActiveRecord::Base
scope:published, -> { where(published: true) }
end

讨论版课程里面带参数的列子:
class Post < ActiveRecord::Base
scope :created_before, ->(time) { where("created_at < ?", time) }
end

还可以几个scope方法接在一起使用,顺序无影响,比如:
class Event < ActiveRecord::Base
scope :published, -> { where(published: true) }
scope :created_before, ->(time) { where("created_at < ?", time) }
end
将published和created_before两个scope接起来使用:
Event.published.created_before(Time.now)
但是最好不要太多,后续代码维护起来可能比较麻烦

 
9 months ago

validation是在Model中验证内容是否合法的方法,以保证内容符合我们的要求。
validation在SQL指令执行之前,所以如果ActiveRecord认为这笔资料验证未通过,就不会将ruby转成SQL写入,而是报错。

写法:
class Topic < ActiveRecord::Base

presence: true代表这个资料必须有值,不为空

validates :title, presence: true

content最多只能200字

validates :content, length: { maxmum: 200 }
end

create,save,update方法可以引发验证

validate fail时候create会把object丢回来,update和save则回传false,
秘诀:在method后面加感叹号可以知道错误原因
for example:

topic.save

=> false

topic.save!

=> ActiveRecord::RecordInvalid: Validation failed: Title can't be blank

 
9 months ago

用法:建立多对多关联资料库时使用


例如一个学生可以参加多门课程,一门课程可以有很多学生,这就是多对多的关系。
课程和学生都是一个Model,要建立多对多的关系,我们就需要第三个Model扮演连结的桥梁,来登记每个学生所参加的课程以及课程目前报名的学生名单。我们从这个第三个model可以知道每个学生的状况和课程的状况,所以叫做through
学生through《第三个model》 has_many 课程

同理球队,球员也是多对多,体育协会来当作桥梁
代码如下:
models/player.rb
class Player < ActiveRecord::Base
has_many :sports_associations(player这个model在协会有多笔资料)
has_many :teams, :through => :sports_associations(这些资料要用来判断这个球员参与多少球队)
end

models/team.rb
class Team < ActiveRecord::Base
has_many :sports_associations
has_many :players, :through => :sports_associations
end

models/sports_associations.rb
class SportsAssociations < ActiveRecord::Base

体育协会对球员和球队负责,所以体育协会belongs_to球员和球队

belongs_to :team
belongs_to :player
end

 
9 months ago

书写是为了更好的思考,通过写logdown我相信了这句话,因为以前只是知道,却从来体会不到书写的好处,有时候东西在脑子里面转啊转其实是很累的,把它写下来脑子一下子清晰了许多。

其实学习全栈,很大程度是在学习学习的方法
因为旧的学习习惯比较差,新的学习方法还不熟练,常用的学习方法确实掌握起来了,比如如何google,如何debug
如何写orid来总结,说实话没用起来的方法也确实都忘光了,通过全栈也就是让我们打磨学习的能力

学到的一些很有用的概念,具体来说是一起一直在踩的坑:不如怎么样使用自己的注意力,如何增加自己的时间(购买服务),碰到问题第一个先问问自己,把错的问题记下来,
通过元学习,学到德雷福斯模型,通过玩swift playground知道编程并不像想象中的那么难,破除了”编程难于上天”这个迷信,
然后通过练习rails101入门体验到了重复练习高频小套路,学会用正确的方式问问题(这个挺像非暴力沟通表达需求的技巧),通过魔改大赛实践了工程师解决问题的方法论:做事情的过程中整合需要的资源。

在这个过程中,我发现我更加了解了自己,了解了自己的学习不良习惯:比如傲慢,不敢面对错误,到后面意识到出错也只是暂时的,一定可以解决,并且可以让自己更厉害,以前虽然有听过很多类似的错误不要害怕错误,但是其实很多时候是不相信的,对未来的自己不自信的,现在看到错误会先想到这是个好的反馈,就像路上的招牌一样不必紧张,深吸一口气来解决。

写一下我一些成长与进步:

  1. 这个课程很大程度上帮我克服了拖延症,特别是工作中的,我感觉自己变的更加主动了,因为学会了”骗大脑”,懒的开始的时候,骗自己一下,只是玩玩,先玩个十分钟,结果就进入状态了,不知不觉把事情做完了
  2. 学习英语,阅读更加流畅了,这个至少在Google代码方面
  3. 更加会管理精力了,学会工作时候专心工作,休息时候专注的休息,而不是处在两者中间干扰状态
  4. 学会自我项目管理,正确估算任务时间,合理预留处理意外的时间
  5. 认识比自己更牛的人,特别是三观都”进取”型的,不再感到孤独
  6. 在大学的时候编程的学习方式导致不敢去编程。这是一次超越自己的机会,其实我是做梦也不敢想自己可以做一个网站出来,而且还可以自己装扮网站,真的感觉是从0到1的飞跃
 
9 months ago

本周日全栈队友们为了更好的学习和成长,大家在厦门AKPx晓学堂meetup活动
对我来讲地点在中山路附近也很理想,一个小时内可以到达这家学堂。意外的是有2位同学从福州赶来参加meetup,这种积极主动的精神很佩服。
这次meetup大的惊喜是有好几个新队友加入,加起来达到了10人,大家真的是各行各页的都有,脑洞打开也想不出来:有海军部队的吴同学,有美容行业的余同学,有烟草公司的王同学,有生活全能型选手郭健同学,但是重要的是,大家都是通过全栈学习不断变得更加进取型人格。
活动中大家在一起分享了为什么要学习全栈。了解到大多数人都是通过认识笑来,而且非常认同笑来的活在未来、七年就是一辈子、不断学习进步、拥有一技之长成为更好的自己的价值观,而学习编程就是很好的学习、践行锻炼方法。

Objective
在meetup中认识了彼此,分享了学习全栈的心路历程和故事,分享并收获了了最棒和最坑的概念。

  1. 伍同学给我们讲了为什么懂财务金融技能的还要会懂计算机编程,对她讲的段子感觉印象深刻。然后还给我们分享了知识迁移的经验,比如对于小孩子的陪伴质量是更重要的,学习完执行力这个概念,以前可以给小孩子讲天使和恶魔的故事和道理,现在有了升级版本:黑马白马和马车夫的故事😄。
  2. 周同学分享了计算机思维和笑来的逻辑对自己生活的启发:你不需要打败谁就可以很好的生活,跟自己比,每天都取得进步。
  3. 高同学分享了他作为电信软件公司软件开发的经验,介绍了软件工作中的分工,比如项目管理、构架师、外包团队。在软件开发工作中,最好要有项目管理等更高层次的意识,这样工作学习才能进步更快。 高同学展示了年会一个转盘抽奖程序,感觉神奇html居然可以这样用😺,即便对前端不专业也可以通过Google学习网络开源开获取开发程序必要的资源
  4. 写高频套路和orid在工作中提升效率的运用,第一次碰到坑可能花了1天搞定,总结流程和反思之后下次再做同样的事情1小时就可以搞定了。
  5. 通过对于对于压力、抱怨的思考交流,自己对这两个概念做了思考逻辑总结: 元认知能力强的人在发出抱怨前就想到了自己的需求进而分辨自己的这个需求能否改变,如果可以改变就尝试去努力耐心改变,若是无法改变的事情,就不要浪费时间精力去改变它,因为时间和精力注意力是最宝贵的,可以用来做更好对自己更有价值的事情。更好的做法应该是先弄清楚实际状况,真诚沟通、互相了解和鼓励,然后具体说出自己的需求,从更高层次的地方找出都能达成双方需求满意的办法,和对方坦诚相待一起找出方案,达成双赢或多赢的局面。 古典老师有篇文章提到正面和负面两种抱怨:A.抱怨不是坏事,抱怨背后是有良好的期待,通过抱怨可以理解自己的需求。 B.抱怨之所以是坏事,因为你把满足自己需求的期待放到了别人身上,所以也和成长无缘了。 在《原则》里面第27条雷达里奥的定义更精确,而不是混杂在一起,他把古典说的第一个正面意义表述为合理诉求 “27d) Distinguish between 1) idle complaints and 2) complaints that are meant to lead to improvement. 27d) 要区分两个概念:1)无用的抱怨 2)旨在实现改善的合理诉求。” 所以应该的步骤是通过问WHY提高学习的欲望-意识到自己的需求而不抱怨-通过沟通来知道how,弄清楚what降低行动门槛   Reflective 大家一起分享学习过程中的心路历程,找到队友感觉很棒, 全栈学习过程中难免会有焦虑、开心,担心,成就感,惊喜, 这也许就是学习的必经的曲线

Interpretive
对于这次meetup活动,发现生活中用以致学是很棒的方法,同样是业余时间学习全栈编程,能把学到的概念和自己遇到的问题、认识整合迭代出新的方法来运用的人,践行就会有成长
 
Decisional
跟上学习的节奏和进度,网站内容做的多,碰到的坑才多,发现的惊喜才多,再反思总结一下。meetup是促进分享的一个方法,有提前思考和准备分享的质量都明显比较高,大家感觉有惊喜自然也比较有动力参加分享。参加meetup可以学到东西,最后写meetup总结和反思也是必要的,写得多少和进步速度是成正比的

 
9 months ago

1.为什么要将 CSS 放在最顶层,将 JavaScript 放在最底层?

  • 浏览器的运作过程:下载HTML,把css放在head区块里面,浏览器下载完css就开始根据css画网页了,这样可以让页面先逐步呈现,所以要将css放在最顶层。
  • 标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。body 元素定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)把Javascript放在body里面是因为JS数据比较大,放在head里面的话会影响css下载速度,网页是下载完毕才执行特效的所以把JS放在最底层不会察觉到任何改动。 2.如何尽可能减少HTTP Requests? 部署时把所有 CSS 复制贴上打包成一支 CSS,先进的框架Rails在部署的过程当中,自动压制( rake assets:precompile )上传,所以不需要我们做什么就自动帮我们处理好了 3.CDN是什么?请用自己的话解释 cnd是相当于下载软件的时候有镜像服务器,我一般选择离自己近的服务器下载软件 4.如何提升自己的网站加载速度? 起多个域名,都连接到同一台主机上 修改 config/enviorments/production.rb 这一行就可以把全站的 image/css/js 网址全部都一并改了。 config.action_controller.asset_host = "http://cdn%d.jd.com"