保华的Rails学习笔记

暂未记住的知识点汇总

做了许多遍,有些知识点还是默写不出来,为了能让自己记住,就贴在这里,时不时的看一眼,时间长了,相信总是能熟练快速的写出来。
会一直更新内容,自己记住的,就删除,记不住的就先丢过来,继续前行,老师说要冲进度,其实非常有道理

1、bootstrap中关于alert的代码

app/views/common/_flashes.html.erb

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>
app/helpers/flashes_helper.rb

module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end

  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning" 
  end
end

2、rake routes

有些verb还是没记住,例如patch是哪个action的,这些先背下来,总会用上的

3、db/seed.rb的写法

db/seed.rb
puts "這個種子檔會自動建立一個admin帳號, 並且創建 10 個 public jobs, 以及10個hidden jobs"

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

create_jos = for i in 1..10 do
  Job.create!([title: "Job no.#{i}", description: "這是用種子建立的第 #{i} 個Public工作", wage_upper_bound: rand(50..99)*100, wage_lower_bound: rand(10..49)*100, is_hidden: "false"])
end
puts "10 Public jobs created."

create_jos = for i in 1..10 do
  Job.create!([title: "Job no.#{i+10}", description: "這是用種子建立的第 #{i+10} 個Hidden工作", wage_upper_bound: rand(50..99)*100, wage_lower_bound: rand(10..49)*100,is_hidden: "true"])
end
puts "10 Hidden jobs created."

4、在做simple_form_for表单的时候,如果不想用表单的原始名称,可以用label,例如f.input :wage_lower_bound, :label: "薪资下限“

<h1>Edit a job</h1>
<%= simple_form_for [:admin,@job] do |f| %>
  <%= f.input :title %>
  <%= f.input :description %>
  <%= f.input :wage_lower_bound, :label => "薪资下限" %>
  <%= f.input :wage_upper_bound, label: "薪资上限" %>
  <%= f.input :contact_email %>
  <%= f.submit "Submit" %>
<% end %>

注意两种写法都是可以的

5、薪资大于0的正确写法

validates :wage_lower_bound, numericality: { greater_than: 0}

app/models/job.rb

  validates :wage_upper_bound, presence: true
  validates :wage_lower_bound, presence: true
  validates :wage_lower_bound, numericality: { greater_than: 0}

6、被隐藏的文章应该在首页看不到的正确写法

def index
    @jobs = Job.where(is_hidden: false)
  end

或者

def index
    @jobs = Job.where(:is_hidden => false)
  end

注意:这两种写法都可以,但是false不能加引号,一加引号就执行不正确

7、安装 FontAwesome

各种围标在:http://fontawesome.io/icons/
1)在gem挂上 gem 'font-awesome-rails'
2)执行bundle install
3)修改 app/assets/stylesheets/application.scss
加入*= require font-awesome
也加入@import "font-awesome";
4)重开rails server
5)helper改为

app/helpers/jobs_helper.rb
  def render_job_status(job)
    if job.is_hidden
      content_tag(:span, "", :class => "fa fa-lock")
    else
      content_tag(:span, "", :class => "fa fa-globe")
    end
  end

要改变图标,改变class中fa fa-后边的即可,例如 fa fa-map、fa fa-map-pin

8、加分题中的实作hide与public

1)在controller中写hide与public这两个action

def publish
    @job = Job.find(params[:id])
    @job.publish!
    redirect_to :back
  end
  def hide
    @job = Job.find(params[:id])
    @job.hide!
    redirect_to :back
  end

2)在model中写hide!和public!

app/models/job.rb
class Job < ApplicationRecord
  def publish!
    self.is_hidden = false
    self.save
  end

  def hide!
    self.is_hidden = true
    self.save
  end
end  

3)写routes.rb文件,把public与hide的path添加进去

config/routes.rb
  namespace :admin do
    resources :jobs do
      member do
        post :publish
        post :hide
      end
    end
  end

4)在index.html.erb中,在edit/delete后边添加public或者hide按钮

<% if job.is_hidden %>

    <%= link_to("Publish", publish_admin_job_path(job) , :method => :post, :class => "btn btn-xs btn-default") %>
  <% else %>
    <%= link_to("Hide", hide_admin_job_path(job), :method => :post,  :class => "btn btn-xs btn-default") %>
  <% end %>

9、下拉菜单的实现代码(前端)

<div class="dropdown clearfix pull-right">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      排序
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
        <li>
          <%= link_to("按照薪资下限排序", jobs_path(:order => "by_lower_bound")) %>
        </li>
        <li>
            <%= link_to("按照薪资上限排序", jobs_path(:order => "by_upper_bound")) %>

        </li>
        <li>
          <%= link_to("按照发表时间排序", jobs_path ) %>

        </li>
    </ul>
</div>

结构分析:1)总体是一个div代码 2)div代码中有一个button代码与一个ul代码,3)ul代码中有3个li代码

10、carrierwave的应用

1)、在gem挂上carrierwave
(1)gem 'carrierwave'
(2)终端执行bundle install
(3)重开rails s
2)、在resume上增加字段attachment
(1)rails g migration add_attachment_to_resume
(2)新产生的文件内容

class AddAttachmentToResume < ActiveRecord::Migration[5.0]
  def change
    add_column :resumes, :attachment, :string
  end
end

(3)rake db:migrate
3)挂上 Attachment Uploader 到 Resume 上
carrierwave 使用的是“Uploader”这个机制,因此呢,我们要

rails g uploader attachment
然后再修改 model,挂上去

app/models/resume.rb
class Resume < ApplicationRecord
  belongs_to :user
  belongs_to :job

  mount_uploader :attachment, AttachmentUploader

  validates :content, presence: true
end

然后修改

app/views/resumes/new.html.erb
<%= simple_form_for [@job, @resume] do |f| %>
  <%= f.input :content %>
  <%= f.input :attachment %>

  <%= f.submit "送出" %>
<% end %>

4)修改 resume_params

app/controllers/resumes_controller.rb
  def resume_params
    params.require(:resume).permit(:content, :attachment)
  end

11、添加搜索框

1)在index里边添加代码

def index
    jobs = Job.all
    if params[:search]
      @jobs = Job.published.search(params[:search])
    elsif
    @jobs = case params[:order]
            when 'by_lower_bound'
              Job.published.order('wage_lower_bound DESC')
            when 'by_upper_bound'
              Job.published.order('wage_upper_bound DESC')
            else
              Job.published.recent
            end
    end
  end

2)在model里边添加代码

  def self.search(search)
      where("title LIKE ? OR description LIKE ? ", "%#{search}%","%#{search}%")
  end

3)在view页面添加代码,这里添加到jobs首页

<%= form_tag(jobs_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search jobs" %>
<%= submit_tag "Search" %>
<% end %>

王秒老师分享课知识点汇总

由于听的时候VPN不稳定,截图一直不行,就文字总结提取了
terminal常用指令Top10
1、cd --change directory
2、ls --list
3、touch
4、mkdir make directory
5、rm -- remove
6、rails s -- rails server
rails g -- rails generate
rails c -- raisl console
7、pwd --print work directory
8、rake -- ruby make
9、db -- database
10、git 时光机
解bug小套路
听ruby的话
有一种无效的学习方式叫视而不见

expecting应该有,但是没有
expected应该有,但是没有写
unexpected不应该有,但是写了
atom package ruby-block,点击end的时候,与它一对的会灰色显示
stackoverflow看解答时,要看上面问题发出的时间,以及rails的版本,越与我们最近的越好,而且要看下解答的
谷歌搜索的时候,太个性化的内容要删掉再搜索

如何写好git commit -m ""
写好git commit -m ""是成为好队友的前提
教材中commit书写原则:简练、表达清楚、无歧义
add 添加、新增
例如:
add user_id to group
add validation to title
add post button
add bootstrap flash function
add permission check on show page
当增加了新功能时,用add
implement 实作、实际完成
例如
implement post creation function
implement backend CRUD
implement wage part
implement groups#show
install 安装
例如
install divese
install font-awesome-rail
install simpleform with bootstrap
can权限,当你给某个用户群体加权限的时候用到
例如
user can login/logout/signup
only admin can access backend panel
people can't see edit button unless he is group owner
when 应用场景相关的
例如
when created a group, join it automatically
check owner permission when access edit/update/destroy
还有其它动词
例如
create groups index
replace root with groups#index
move form to partial
style form with bootstrap
show group's creator info

01/23 ORID日志-ico取色配色

Objective
关于今天的课程, 你记得什么?
完成了什么?
魔改作品,完成了搜索功能的添加:http://baohua.logdown.com/posts/1346643-search-function-added
优化了登录页面
听了王妙老师的直播课程
又听了一遍yy老师的直播课程(关于魔改大赛的)

Reflective
你要如何形容今天的情绪
今天的高峰是什么?
完成搜索功能后,感觉还是蛮开心的,昨天研究了一下ransack没做出来,今天用更简单的方法做出来了。

今天的低潮是什么?
感觉很多东西要学,而且都要花时间,可是时间总是有限的,每次想到这些,都会多少有些焦虑,学东西还是不能太心急了,把时间拉长一些吧,追求每天都进步一些。

Interpretive
我们今天学到了什么?
今天一个重要的领悟是什么?
1、添加了搜索功能,分别在MVC三个页面添加代码就可以完成
2、rails g devise:views可以在views下边产生一个devise的文件夹,通过对里边内容的修改,可以对登录注册页面的样式进行修改
3、在heroku上的作品,如果想创建一个admin帐户,用seed.rb是一个方法,也可以用另外一种方法:http://baohua.logdown.com/posts/1348078-heroku-create-admin-account-on-the-top-the-easy-way
4、找ico去http://fontawesome.io/http://fa2png.io/这个网站,制作去
5、取色用本地的digital color
6、配色用http://paletton.com/这个网站

Decisional
我们会如何用一句话形容今天的工作
进展缓慢,小有进步

有哪些工作需要明天继续努力?
继续购物网站的学习

heroku上边创建admin帐户的简便方法

当把自己的网站上传到heroku上边时,本地的用户名失效了,需要重新注册用户名,当需要admin帐户时,可以按照以下步骤操作:
1、把自己的网站push上边时,先在自己网站注册一个用户名
2、在终端运行
heroku run console
3、在heroku的console下边修改帐户的权限
1)输入u = User.first
2)u.is_admin = true
3)u.save

搜索功能的添加

1)在index里边添加代码

def index
    jobs = Job.all
    if params[:search]
      @jobs = Job.published.search(params[:search])
    elsif
    @jobs = case params[:order]
            when 'by_lower_bound'
              Job.published.order('wage_lower_bound DESC')
            when 'by_upper_bound'
              Job.published.order('wage_upper_bound DESC')
            else
              Job.published.recent
            end
    end
  end

2)在model里边添加代码

  def self.search(search)
      where("title LIKE ? OR description LIKE ? ", "%#{search}%","%#{search}%")
  end

3)在view页面添加代码,这里添加到jobs首页

<%= form_tag(jobs_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search jobs" %>
<%= submit_tag "Search" %>
<% end %>

CSS作业

1、margin 与 padding 的差异

padding是内边距,它是内容与边框之前的距离,它定义了元素的边框与元素的内容之间的空白距离,它可以接受长度与百分比
它的声明可以在一句话,也可以用padding-top padding-right padding-bottom padding-left分别来定义
外边距是用margin表示,外边距就是围绕在元素边框的空白区域,设置外边距会在元素外创建额外的空白。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em

2、margin写法

h1 {margin : 10px 0px 15px 5px;}
margin-top是10px
margin-right为0px
margin-bottom为15px
margin-left为5px

3、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。


内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

01/22 ORID日志

Objective
关于今天的课程, 你记得什么?
完成了什么?
完成了htm与css作业
css作业:http://baohua.logdown.com/posts/1346038
html作业:http://baohua.logdown.com/posts/1343122-html-jobs
购物网站第二遍做了一部分

Reflective
你要如何形容今天的情绪
今天的高峰是什么?
快过年了,家里很多事情,总是会耽误、打断,进展有些缓慢,而且状态也没之前好

今天的低潮是什么?
看了ransack,可是搜索还是没搭建出来,有些泄气,继续努力

Interpretive
我们今天学到了什么?
今天一个重要的领悟是什么?
学了HTML、CSS一些基础的,对之前的课程更加理解了一些。

Decisional
我们会如何用一句话形容今天的工作
进展缓慢,小有进步

有哪些工作需要明天继续努力?
继续搜索功能的研究
继续购物网站的学习

Html作业

1、div与span的不同

div是块级元素,而span内联元素
大多数HTML标签都是被分为块级元素和内联元素的
常见的块级元素有:
<h1>、<p>、<ul>、<table>
块级元素一般都是以新的行开始和新的行结尾的
内联元素在开始时并不是新的行开始,常见的内联元素有:
<a>、<img>、<td>、<b>

本身没什么含义,它主要与css一起使用来完成排版工作,它属于块级元素,它可以是其它HTML元素的容器。
元素前后都会有新行产生。它的主要功能就是文档的布局 是内联元素,它可以用作是文本的容器,它并不产生换行效果,它也没什么特定的含义,一般可以与css结合着用。可以对文本进行格式的操作。 ##2、class 与 id 的不同 class是规定了元素的类名,在css与js中,这个类名可以用于作用不同的样式与形式 注意:可以给html元素赋予多个类名,例如: ```` span就有left_menu与important两个类,这样两个类的css样式合并到span。 例如:
<html>
<head>
<style type="text/css">
h1.intro
{
color:blue;
text-align:center;
}
.important {background-color:yellow;}
</style>
</head>

<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>

</html>


共同作用(intro是实现蓝字居中,important是实现黄色背影)后的效果为:

id规定元素的唯一id,id在html中必须是唯一的,通过给元素赋予id,可以通过js与css改变显示样式与形式。
在css中,id是以#开始,而class是以.开头。

3、p与br的不同

p是段落,当需要一个段落的时候,一般用p,p是块元素,br是换行,可以单独使用,用了br就会产生换一行的效果。p标签一定要成对出现,需要闭合,但是br标签不需要成对出现。p一般加于一段文本上,而且br一般是单独出现,不用作用于文本

4、如何使用 table 排版

表格是由table来定义的,每个表格都由几行分成几个单元格,行是由<tr>定义,而单元格是由<td>定义,table可以有表头,它是用<th>来定义

01/20错误日志记录

1、


点击的时候,下拉菜单的登出并没有显示出来
原因:class=droopdown这里没有加引号

加了后

注意:没加引号的时候,下边的代码很多是绿色的,包括下边的

  • 等html标签,都是绿色的,正常的应该是红色的。下次遇到这种的bug,这也是一个排查代码出错的方法,可以从html代码是绿色(应该是红色)的那行往上一行排查。
    2、

    出错原因:def index这个action写错位置了,写到了private下边了
    解决办法:把它移到private上边

01/18 ORID日志

Objective
关于今天的课程, 你记得什么?
完成了什么?
完成了魔改大赛的初版,已上传到参赛页面

Reflective
你要如何形容今天的情绪
今天的高峰是什么?
今天完成了大赛的初版,看着自己做好的作品(学了一个多月),还是非常开心的,至少是对这一段时间学习的一个总结,一个检验。

今天的低潮是什么?
低潮就是新的购物网站课程已经开始了,可是自己还没有开始去做,一直都在忙于大赛作品。有些焦虑,不过很快意识到了,这大概就是自己的元认知能力提高的表现吧

Interpretive
我们今天学到了什么?
今天一个重要的领悟是什么?
今天提交了参赛作品,并且得到了一些同学的好评,感觉还是挺开心的,其实在做之前,自己也不知道会做出什么样的页面出来,看到最终的成果,还是有些感慨的,无论学什么,只要用心,用正确的方法,短时间内都可以提高不少的,学习确实是有方法的,如果方法不对头,很容易就放弃了,如果开始一直学语法,等把语法搞熟悉了,再去写项目,估计自己早就放弃了,早就被繁杂的语法给吓退了,xdite老师的这个方法挺好的,大家一直赶进度,很少去关注语法知识,都是做了之后再补充一些基础的语法知识,这个过程中也很少被语法给绊倒,这样一路走下来,感觉还是掌握了不少知识,一些功能,自己不用看教程也可以写出来了。

Decisional
我们会如何用一句话形容今天的工作
提交作品后,非常兴奋

有哪些工作需要明天继续努力?
开始购物课程,对于魔改,会持续优化