xiaoweirails (肖威)

Let's Build: With Ruby on Rails - Job Board with Payments (实践思路)

xiaoweirails — Thu, 12 Apr 2018 09:54:36 +0800

Let's Build: With Ruby on Rails - Job Board with Payments

这个案例是一个非常好的商业闭环的网站的设计。

Github Repo:

https://github.com/shenzhoudance/job_board_pay

在案例的学习过程中，可以完成五个环节的学习；

（1）功能体系：主要是完成一个招聘广告的发布，其中包含图片的上传；
（2）用户体系：使用 gem 'devise' 具备普通用户和管理员用户，没有管理员的后台？需要加上管理员的后台吗？
（3）设计体系：使用 gem 'bulma-rails'完成页面的设计工作，满足页面设计的需要；
（4）支付体系：使用 gem 'stripe' 完成支付，在这个体系使用的时候，思考 RMVC 的架构，处在 job controller 里面完成 create 广告功能。
（5）部署体系：使用 herkou 和 aliyun 完成部署，这一部分，没有完成，但是我可以完成教学；

mkdir workspace
cd workspace
rails new job_board_pay
cd job_board_pay
git init
git status
git add .
git commit -m "initial commit"
git remote add origin https://github.com/shenzhoudance/job_board_pay.git
git push -u origin master
atom .
rails servwe
http://localhost:3000/

git checkout -b gem
---
gem 'devise', '~> 4.4.3'
gem 'bulma-rails', '~> 0.6.2'
gem 'simple_form', '~> 3.5.1'
gem 'gravatar_image_tag', github: 'mdeering/gravatar_image_tag'
gem 'sidekiq', '~> 5.0'
gem 'figaro'
gem 'carrierwave', '~> 1.0'
gem 'mini_magick', '~> 4.8'
gem 'stripe'
gem 'trix', '~> 0.11.1'
group :development, :test do
  gem 'better_errors', '~> 2.4'
  gem 'guard', '~> 2.14'
  gem 'guard-livereload', '~> 2.5'
end

bundle install
rails generate simple_form:install
bundle exec guard init
bundle exec guard

rails generate devise:install
rails generate devise User
rails g devise:views
rake db:migrate
rails s
http://localhost:3000/

git checkout -b welcome
rails g controller welcome index
---
app/views/welcome/index.html.erb
---
<h1>欢迎来到才华横溢</h1>
<p>这里是改变你命运的地方！</p>

app/views/layouts/application.html.erb
---
<!DOCTYPE html>
<html>
  <head>
    <title>JobBoardPay</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
---
<!DOCTYPE html>
<html>
  <head>
    <title>才华横溢</title>
    <%= csrf_meta_tags %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', "https://js.stripe.com/v2/", "https://js.stripe.com/v3/", 'data-turbolinks-track': 'reload' %>

    <%= tag :meta, name: "stripe-public-key", content: Figaro.env.stripe_publishable_key %>

  </head>

  <body class="<%= yield (:body_class) %>">
    <% if flash[:notice] %>
      <div class="notification is-success global-notification">
        <p class="notice"><%= notice %></p>
      </div>
    <% end %>

    <% if flash[:alert] %>
    <div class="notification is-danger global-notification">
      <p class="alert"><%= alert %></p>
    </div>
    <% end %>

     <nav class="navbar is-light" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <%= link_to root_path, class:"navbar-item" do %>
          <h1 class="title is-5">才华横溢</h1>
        <% end  %>
        <div class="navbar-burger burger" data-target="navbar">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navbar" class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <%= link_to 'Post Job', "#", class: 'navbar-item button is-primary is-rounded' %>
              </p>
              <% if user_signed_in? %>
              <div class="navbar-item has-dropdown is-hoverable">
                <%= link_to 'Account', edit_user_registration_path, class: "navbar-link" %>
                <div class="navbar-dropdown is-right">
                  <%= link_to current_user.name, edit_user_registration_path, class:"navbar-item" %>
                  <%= link_to "Log Out", destroy_user_session_path, method: :delete, class:"navbar-item" %>
                </div>
              </div>
            <% else %>
            <p class="control">
              <%= link_to "Sign In", new_user_session_path, class:"navbar-item button is-rounded" %>
            </p>
            <p class="control">
              <%= link_to "Sign up", new_user_registration_path, class:"navbar-item button is-rounded"%>
            </p>
            <% end %>

          </div>
        </div>
      </div>
    </div>
  </nav>

    <%= yield %>

  <footer class="footer">
    <div class="container">
      <div class="content has-text-centered">
        <p>
        Visit <a href="https://superxschool.com" target="_blank">superxschool.com</a> for more builds like this one.
        </p>
      </div>
    </div>
  </footer>

  </body>
</html>

---
app/views/devise/registrations/new.html.erb
---
<h2>Sign up</h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :email, required: true, autofocus: true %>
    <%= f.input :password, required: true, hint: ("#{@user1gth} characters minimum" if @user2gth) %>
    <%= f.input :password_confirmation, required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
---
<div class="section">
  <div class="container">
  <div class="columns is-centered">

    <div class="column is-4">

    <h2 class="title is-2">Sign Up</h2>

    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= f.error_notification %>

    <div class="field">
      <div class="control">
      <%= f.input :name, required: true, autofocus: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" } %>
      </div>
    </div>

    <div class="field">
      <div class="control">
      <%= f.input :email, required: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" } %>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <%= f.input :password, required: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" }, hint: ("#{@user3gth} characters minimum" if @user4gth) %>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <%= f.input :password_confirmation, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" } %>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <%= f.button :submit, "Sign up", class:"button is-primary is-rounded" %>
      </div>
    </div>

    <% end %>
      <br />
      <%= render "devise/shared/links" %>
    </div>
    </div>
  </div>
</div>
---
app/views/devise/registrations/edit.html.erb
---
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :email, required: true, autofocus: true %>

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <p>Currently waiting confirmation for: <%= resource.unconfirmed_email %></p>
    <% end %>

    <%= f.input :password, autocomplete: "off", hint: "leave it blank if you don't want to change it", required: false %>
    <%= f.input :password_confirmation, required: false %>
    <%= f.input :current_password, hint: "we need your current password to confirm your changes", required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Update" %>
  </div>
<% end %>

<h3>Cancel my account</h3>

<p>Unhappy? <%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

<%= link_to "Back", :back %>
---
app/views/devise/sessions/new.html.erb
---
<h2>Log in</h2>

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-inputs">
    <%= f.input :email, required: false, autofocus: true %>
    <%= f.input :password, required: false %>
    <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Log in" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

---
<section class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-4">
                <h2 class="title is-2">Log in</h2>
                <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

                  <div class="field">
                    <div class="control">
                        <%= f.input :email, required: false, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
                    </div>
                  </div>

                  <div class="field">
                    <div class="control">
                    <%= f.input :password, required: false, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
                        </div>
                    </div>

                    <div class="field">
                    <div class="control">
                    <%= f.input :remember_me, wrapper: false, as: :boolean if devise_mapping.rememberable? %>
                    </div>
                    </div>

                  <%= f.button :submit, "Log in", class:"button is-rounded is-primary" %>
                <% end %>
                <br/>
                <%= render "devise/shared/links" %>
            </div>
        </div>
    </div>
</section>

git add .
git commit -m "add welcome index & devise"
git push origin welcome

git checkout -b cart
---
rails g migration add_card_info_to_users
---
db/migrate/20180411082034_add_card_info_to_users.rb
---
class AddCardInfoToUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :stripe_id, :string
    add_column :users, :card_brand, :string
    add_column :users, :card_last4, :string
    add_column :users, :card_exp_month, :string
    add_column :users, :card_exp_year, :string
    add_column :users, :expires_at, :datetime
  end
end
---
rake db:migrate

rails g migration add_admin_to_users admin:boolean
rake db:migrate
---
rails c
2.3.1 :001 > user = User.last
2.3.1 :002 > user.admin = true
2.3.1 :003 > user.save
2.3.1 :004 > user
2.3.1 :005 > exit
---

git checkout -b job-scaffold

rails g scaffold Job title:string description:text url:string job_type:string location:string job_author:string remote_ok:boolean apply_url:string
rake db:migrate

---
app/views/jobs/_form.html.erb
---
<%= simple_form_for(@job) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.input :description %>
    <%= f.input :url %>
    <%= f.input :job_type %>
    <%= f.input :location %>
    <%= f.input :job_author %>
    <%= f.input :remote_ok %>
    <%= f.input :apply_url %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>
---
<%= simple_form_for @job, html: { multipart: true } do |f| %>
  <%= f.error_notification %>

      <div class="field">
        <div class="control">
        <%= f.input :title, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" }, placeholder: "Frontend Developer" %>
        </div>
      </div>

      <div class="field">
        <div class="control">
          <%= f.input :apply_url, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" }  %>
        </div>
      </div>


    <div class="columns">
      <div class="field column is-4">
        <div class="control">
          <label class="label">Job Type:</label>
          <div class="control has-icons-left">
            <span class="select">
              <%= f.input_field :job_type, collection: Job::JOB_TYPES, prompt: "Select a job type" %>
            </span>
            <span class="icon is-small is-left">
              <i class="fa fa-briefcase"></i>
            </span>
          </div>
        </div>
      </div>

      <div class="column">

        <div class="field">
          <div class="control">
            <%= f.input :location, require: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" }, hint: 'Examples: "San Francisco, CA", "Seattle", "Anywhere"' %>
          </div>
        </div>

        <div class="field">
          <div class="control">
            <label for="job[remote_ok]">
              <%= f.input :remote_ok, required: false, input_html: { class: "checkbox"}, wrapper: false, label: false %>
              Work can be done remotely
            </label><i class="fa fa-wifi"></i>
          </div>
        </div>
      </div>
    </div>

      <div class="field">
        <div class="control">
          <%= f.input :description, required: true, input_html: { class: "textarea" }, wrapper: false, label_html: { class: "label" } %>
        </div>
      </div>


    <div class="columns">

      <div class="field column">
        <div class="control">
          <%= f.input :job_author, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" }, label: "Company" %>
        </div>
      </div>

      <div class="field column">
        <div class="control">
          <%= f.input :url, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" }, label: "Company Website", placeholder: "http://company.com" %>
        </div>
      </div>

    </div>

    <div class="columns">
      <div class="field column is-4">
        <div class="control">
          <label class="label">Logo Image</label>
          <div class="file">
            <label class="file-label">
              <%= f.input :avatar, as: :file, required: false, input_html: { class:"file-input job-avatar" }, label: false, wrapper: false %>
                <span class="file-cta">
                  <span class="file-icon"><i class="fa fa-upload"></i></span>
                  <span class="file-label">Choose a file…</span>
                </span>
            </label>
          </div>
        </div>
      </div>
      <div class="column">
        <output id="list"></output>
      </div>
    </div>

    <hr />

    <%#= render 'payment' %>

    <%= f.button :submit, class: "button is-primary is-large is-rounded mv4" %>

<% end %>

app/assets/stylesheets/_functions.scss
---
:root {
 --spacing-none: 0;
 --spacing-extra-small: .25rem;
 --spacing-small: .5rem;
 --spacing-medium: 1rem;
 --spacing-large: 2rem;
 --spacing-extra-large: 4rem;
 --spacing-extra-extra-large: 8rem;
 --spacing-extra-extra-extra-large: 16rem;
}

/* Functional Styles: http://tachyons.io/docs/ */
.pa0 { padding: var(--spacing-none); }
.pa1 { padding: var(--spacing-extra-small); }
.pa2 { padding: var(--spacing-small); }
.pa3 { padding: var(--spacing-medium); }
.pa4 { padding: var(--spacing-large); }
.pa5 { padding: var(--spacing-extra-large); }
.pa6 { padding: var(--spacing-extra-extra-large); }
.pa7 { padding: var(--spacing-extra-extra-extra-large); }

.pl0 { padding-left: var(--spacing-none); }
.pl1 { padding-left: var(--spacing-extra-small); }
.pl2 { padding-left: var(--spacing-small); }
.pl3 { padding-left: var(--spacing-medium); }
.pl4 { padding-left: var(--spacing-large); }
.pl5 { padding-left: var(--spacing-extra-large); }
.pl6 { padding-left: var(--spacing-extra-extra-large); }
.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0 { padding-right: var(--spacing-none); }
.pr1 { padding-right: var(--spacing-extra-small); }
.pr2 { padding-right: var(--spacing-small); }
.pr3 { padding-right: var(--spacing-medium); }
.pr4 { padding-right: var(--spacing-large); }
.pr5 { padding-right: var(--spacing-extra-large); }
.pr6 { padding-right: var(--spacing-extra-extra-large); }
.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0 { padding-bottom: var(--spacing-none); }
.pb1 { padding-bottom: var(--spacing-extra-small); }
.pb2 { padding-bottom: var(--spacing-small); }
.pb3 { padding-bottom: var(--spacing-medium); }
.pb4 { padding-bottom: var(--spacing-large); }
.pb5 { padding-bottom: var(--spacing-extra-large); }
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0 { padding-top: var(--spacing-none); }
.pt1 { padding-top: var(--spacing-extra-small); }
.pt2 { padding-top: var(--spacing-small); }
.pt3 { padding-top: var(--spacing-medium); }
.pt4 { padding-top: var(--spacing-large); }
.pt5 { padding-top: var(--spacing-extra-large); }
.pt6 { padding-top: var(--spacing-extra-extra-large); }
.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0 {
 padding-top: var(--spacing-none);
 padding-bottom: var(--spacing-none);
}
.pv1 {
 padding-top: var(--spacing-extra-small);
 padding-bottom: var(--spacing-extra-small);
}
.pv2 {
 padding-top: var(--spacing-small);
 padding-bottom: var(--spacing-small);
}
.pv3 {
 padding-top: var(--spacing-medium);
 padding-bottom: var(--spacing-medium);
}
.pv4 {
 padding-top: var(--spacing-large);
 padding-bottom: var(--spacing-large);
}
.pv5 {
 padding-top: var(--spacing-extra-large);
 padding-bottom: var(--spacing-extra-large);
}
.pv6 {
 padding-top: var(--spacing-extra-extra-large);
 padding-bottom: var(--spacing-extra-extra-large);
}

.pv7 {
 padding-top: var(--spacing-extra-extra-extra-large);
 padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ph0 {
 padding-left: var(--spacing-none);
 padding-right: var(--spacing-none);
}

.ph1 {
 padding-left: var(--spacing-extra-small);
 padding-right: var(--spacing-extra-small);
}

.ph2 {
 padding-left: var(--spacing-small);
 padding-right: var(--spacing-small);
}

.ph3 {
 padding-left: var(--spacing-medium);
 padding-right: var(--spacing-medium);
}

.ph4 {
 padding-left: var(--spacing-large);
 padding-right: var(--spacing-large);
}

.ph5 {
 padding-left: var(--spacing-extra-large);
 padding-right: var(--spacing-extra-large);
}

.ph6 {
 padding-left: var(--spacing-extra-extra-large);
 padding-right: var(--spacing-extra-extra-large);
}

.ph7 {
 padding-left: var(--spacing-extra-extra-extra-large);
 padding-right: var(--spacing-extra-extra-extra-large);
}
.ma0  {  margin: var(--spacing-none); }
.ma1 {  margin: var(--spacing-extra-small); }
.ma2  {  margin: var(--spacing-small); }
.ma3  {  margin: var(--spacing-medium); }
.ma4  {  margin: var(--spacing-large); }
.ma5  {  margin: var(--spacing-extra-large); }
.ma6 {  margin: var(--spacing-extra-extra-large); }
.ma7 { margin: var(--spacing-extra-extra-extra-large); }

.ml0  {  margin-left: var(--spacing-none); }
.ml1 {  margin-left: var(--spacing-extra-small); }
.ml2  {  margin-left: var(--spacing-small); }
.ml3  {  margin-left: var(--spacing-medium); }
.ml4  {  margin-left: var(--spacing-large); }
.ml5  {  margin-left: var(--spacing-extra-large); }
.ml6 {  margin-left: var(--spacing-extra-extra-large); }
.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0  {  margin-right: var(--spacing-none); }
.mr1 {  margin-right: var(--spacing-extra-small); }
.mr2  {  margin-right: var(--spacing-small); }
.mr3  {  margin-right: var(--spacing-medium); }
.mr4  {  margin-right: var(--spacing-large); }
.mr5  {  margin-right: var(--spacing-extra-large); }
.mr6 {  margin-right: var(--spacing-extra-extra-large); }
.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0  {  margin-bottom: var(--spacing-none); }
.mb1 {  margin-bottom: var(--spacing-extra-small); }
.mb2  {  margin-bottom: var(--spacing-small); }
.mb3  {  margin-bottom: var(--spacing-medium); }
.mb4  {  margin-bottom: var(--spacing-large); }
.mb5  {  margin-bottom: var(--spacing-extra-large); }
.mb6 {  margin-bottom: var(--spacing-extra-extra-large); }
.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0  {  margin-top: var(--spacing-none); }
.mt1 {  margin-top: var(--spacing-extra-small); }
.mt2  {  margin-top: var(--spacing-small); }
.mt3  {  margin-top: var(--spacing-medium); }
.mt4  {  margin-top: var(--spacing-large); }
.mt5  {  margin-top: var(--spacing-extra-large); }
.mt6 {  margin-top: var(--spacing-extra-extra-large); }
.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0   {
 margin-top: var(--spacing-none);
 margin-bottom: var(--spacing-none);
}
.mv1  {
 margin-top: var(--spacing-extra-small);
 margin-bottom: var(--spacing-extra-small);
}
.mv2   {
 margin-top: var(--spacing-small);
 margin-bottom: var(--spacing-small);
}
.mv3   {
 margin-top: var(--spacing-medium);
 margin-bottom: var(--spacing-medium);
}
.mv4   {
 margin-top: var(--spacing-large);
 margin-bottom: var(--spacing-large);
}
.mv5   {
 margin-top: var(--spacing-extra-large);
 margin-bottom: var(--spacing-extra-large);
}
.mv6  {
 margin-top: var(--spacing-extra-extra-large);
 margin-bottom: var(--spacing-extra-extra-large);
}
.mv7  {
 margin-top: var(--spacing-extra-extra-extra-large);
 margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0   {
 margin-left: var(--spacing-none);
 margin-right: var(--spacing-none);
}
.mh1   {
 margin-left: var(--spacing-extra-small);
 margin-right: var(--spacing-extra-small);
}
.mh2   {
 margin-left: var(--spacing-small);
 margin-right: var(--spacing-small);
}
.mh3   {
 margin-left: var(--spacing-medium);
 margin-right: var(--spacing-medium);
}
.mh4   {
 margin-left: var(--spacing-large);
 margin-right: var(--spacing-large);
}
.mh5   {
 margin-left: var(--spacing-extra-large);
 margin-right: var(--spacing-extra-large);
}
.mh6  {
 margin-left: var(--spacing-extra-extra-large);
 margin-right: var(--spacing-extra-extra-large);
}
.mh7  {
 margin-left: var(--spacing-extra-extra-extra-large);
 margin-right: var(--spacing-extra-extra-extra-large);
}

/* Color */
.bg-gray { background-color: #f8f8f8; }

/* Font Size */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; }

/* Font Weight */
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 600; }

.text-sans-serif { font-family: sans-serif; }
.text-serif { font-family: serif; }
.text-uppercase { text-transform: uppercase; }

/* Border */
.border-light { border: 1px solid #dddddd; }
.border { border: 1px solid #dedede; }

.border-bottom {
 border-bottom: 1px solid #dddddd;
 &:last-of-type {
   border-bottom: 0;
 }
}

.border-top { border-top: 1px solid #dddddd; }
.border-right { border-right: 1px solid #dddddd; }

.border-radius-3 { border-radius: 3px; }

.justify-center { justify-content: center; }
.align-items-center { align-items: center; }

/* Display */
.inline-block { display: inline-block; }
.block { display: block; }

/* Background */
.bg-white { background-color: white; }
.bg-light { background-color: whitesmoke; }
---
app/assets/stylesheets/application.scss
---
// *= require trix

@import "bulma";
@import "functions";
@import "jobs";
@import "stripe";

.notification {
  border-radius: 0;
}

.notification:not(:last-child) {
  margin-bottom: 0;
}

.hint {
  font-size: small;
}

.tag {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 9px !important;
}
---
app/views/jobs/show.html.erb
---
<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @job.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= @job.description %>
</p>

<p>
  <strong>Url:</strong>
  <%= @job.url %>
</p>

<p>
  <strong>Job type:</strong>
  <%= @job.job_type %>
</p>

<p>
  <strong>Location:</strong>
  <%= @job.location %>
</p>

<p>
  <strong>Job author:</strong>
  <%= @job.job_author %>
</p>

<p>
  <strong>Remote ok:</strong>
  <%= @job.remote_ok %>
</p>

<p>
  <strong>Apply url:</strong>
  <%= @job.apply_url %>
</p>

<%= link_to 'Edit', edit_job_path(@job) %> |
<%= link_to 'Back', jobs_path %>
---

<div class="columns pt4 pb7">
  <div class="column is-7 is-offset-1">

    <p class="f7"><i class="fa fa-clock"></i> Posted <%= time_ago_in_words(@job.created_at) %> ago</p>
    <h1 class="title is-2"><%= @job.title %></h1>

    <ul class="list pb4">
      <li class="inline-block f6 pr2"><%#= job_type(@job.job_type) %></li>
      <li class="inline-block f6 ph2"><i class="fa fa-pin"></i> <%= @job.location %></li>
      <% if @job.remote_ok? %>
        <li class="inline-block f6 ph2"><i class="fa fa-wifi"></i> Remote Job</li>
      <% end %>
    </ul>

    <div class="content text-serif f4">
      <%= @job.description.html_safe %>
    </div>

    <%= link_to 'Apply to this job', @job.apply_url, class:"button is-rounded is-large is-fullwidth is-link" %>

  </div>

  <div class="column is-2 is-offset-1 has-text-centered">

    <%# if !@job.avatar.file.nil? %>
      <%#= link_to image_tag(@job.avatar_url(:thumb), alt: @job.job_author, class: "has-text-centered"), @job.url %>
    <%# end %>

    <h5 class="is-5 has-text-centered"><%= link_to @job.job_author, @job.url %></h5>

    <div class="mt2 mb4">
    <%= link_to @job.url do %>
      <i class="fa fa-globe"></i>
    <% end %>
    </div>

    <%= link_to 'Apply to this job', @job.apply_url, class:"button is-rounded is-fullwidth is-link" %>

    <%# if current_user.try(:admin) || job_author(@job) %>
      <ul class="pv3">
        <li class="pv1 f6">Admin controls: </li>
        <li class="pv1 inline-block">
          <%= link_to 'View', @job, class: 'button is-small is-link is-outlined' %></li>
        <li class="pv1 inline-block">
          <%= link_to 'Edit', edit_job_path(@job), class: 'button is-small is-link is-outlined' %></li>
        <li class="pv1 inline-block">
          <%= link_to 'Delete', @job, method: :delete, data: { confirm: 'Are you sure?' }, class: 'button is-small is-link is-outlined' %></li>
      </ul>
    <%# end %>
  </div>
</div>
---
app/views/jobs/index.html.erb
---
<p id="notice"><%= notice %></p>

<h1>Jobs</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>Url</th>
      <th>Job type</th>
      <th>Location</th>
      <th>Job author</th>
      <th>Remote ok</th>
      <th>Apply url</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @jobs.each do |job| %>
      <tr>
        <td><%= job.title %></td>
        <td><%= job.description %></td>
        <td><%= job.url %></td>
        <td><%= job.job_type %></td>
        <td><%= job.location %></td>
        <td><%= job.job_author %></td>
        <td><%= job.remote_ok %></td>
        <td><%= job.apply_url %></td>
        <td><%= link_to 'Show', job %></td>
        <td><%= link_to 'Edit', edit_job_path(job) %></td>
        <td><%= link_to 'Destroy', job, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Job', new_job_path %>
---
<div class="columns border-top">

  <div class="column is-2 bg-light">
    <div class="pl3 pr1">
      <%= render 'panel' %>
    </div>
  </div>

  <div class="column is-9 pl6">
    <% @jobs.each do |job| %>
    <div class="columns border-bottom pt4">
      <div class="column is-1">
        <% if !job.avatar.file.nil? %>
          <%= link_to image_tag(job.avatar_url(:thumb), alt: job.job_author, width: 100, height: 100), job.url %>
        <% end %>
      </div>
      <div class="column is-8">
        <h3 class="title is-4 index-title"><%= link_to job.title, job %></h3>
          <ul>
            <li><%= link_to job.job_author, job.url %></li>
          </ul>
        <div class="pv2 f6">
          <%= sanitize(job.description.truncate(200, separator: '</p>')) %>
        </div>

        <% if current_user.try(:admin) || job_author(job) %>
          <ul class="pv3">
            <li class="inline-block f6">Admin controls: </li>
            <li class="inline-block">
              <%= link_to 'View', job, class: 'button is-small is-link is-outlined' %></li>
            <li class="inline-block">
              <%= link_to 'Edit', edit_job_path(job), class: 'button is-small is-link is-outlined' %></li>
            <li class="inline-block">
              <%= link_to 'Delete', job, method: :delete, data: { confirm: 'Are you sure?' }, class: 'button is-small is-link is-outlined' %></li>
          </ul>
        <% end %>

        </div>
        <div class="column has-text-right">
          <%= job_type(job.job_type) %>
          <p class="pt2 f6"><%= job.location %></p>
        </div>
      </div>
    <% end %>
  </div>

</div>
----
app/views/jobs/_panel.html.erb
---
<nav class="panel">

  <p class="text-uppercase has-text-grey pv1 f6">filter by job type</h3>

  <ul class="mb3 pa0">

    <li class="pv1">
      <%= link_to 'All', jobs_path, class: 'button is-fullwidth is-dark' %>
    </li>


    <li class="pv1">
      <%= link_to 'Full-time', jobs_path(job_type: "Full-time"), class: 'button is-fullwidth is-primary' %>
    </li>

    <li class="pv1">
      <%= link_to 'Part-time', jobs_path(job_type: "Part-time"), class: 'button is-fullwidth is-link' %>
    </li>

    <li class="pv1">
      <%= link_to 'Freelance', jobs_path(job_type: "Freelance"), class: 'button is-fullwidth is-warning' %>
    </li>

    <li class="pv1">
      <%= link_to 'Contract', jobs_path(job_type: "Contract"), class: 'button is-fullwidth is-info' %>
    </li>
  </ul>

</nav>
---

git add .
git commit -m "edit job index & show & form add panel"
git push origin job-scaffold

git checkout -b uploader
rails generate uploader Avatar
---
app/uploaders/avatar_uploader.rb
---
include CarrierWave::MiniMagick

version :thumb do
  process resize_to_fit: [50, 50]
end

def extension_whitelist
  %w(jpg jpeg gif png)
end

---
rails g migration add_avatar_to_jobs avatar:string
rake db:migrate
---

app/models/user.rb
---
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  has_many :jobs
end

app/models/job.rb
---
class Job < ApplicationRecord
  belong_to :user
  mount_uploader :avatar, AvatarUploader

  JOB_TYPES = ["Full-time", "Part-time", "Contract", "Freelance"]
end
---

git add .
git commit -m "add uploader"
git push origin uploader

git checkout -b figaro
bundle exec figaro install
rails g migration add_user_id_to_jobs user_id:integer
rake db:migrate
---
app/controllers/jobs_controller.rb
---
class JobsController < ApplicationController
  before_action :set_job, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]

  # GET /jobs
  # GET /jobs.json
  def index
    if(params.has_key?(:job_type))
      @jobs = Job.where(job_type: params[:job_type]).order("created_at desc")
    else
      @jobs = Job.all.order("created_at desc")
    end
  end

  # GET /jobs/1
  # GET /jobs/1.json
  def show
  end

  # GET /jobs/new
  def new
    @job = current_user.jobs.build
  end

  # GET /jobs/1/edit
  def edit
  end

  # POST /jobs
  # POST /jobs.json
  def create
    @job = current_user.jobs.build(job_params)

    token = params[:stripeToken]
    job_type = params[:job_type]
    job_title = params[:title]
    card_brand = params[:user][:card_brand]
    card_exp_month = params[:user][:card_exp_month]
    card_exp_year = params[:user][:card_exp_year]
    card_last4 = params[:user][:card_last4]

    charge = Stripe::Charge.create(
      :amount => 30000,
      :currency => "usd",
      :description => job_type,
      :statement_descriptor => job_title,
      :source => token,
    )
    current_user.stripe_id = charge.id
    current_user.card_brand = card_brand
    current_user.card_exp_month = card_exp_month
    current_user.card_exp_year = card_exp_year
    current_user.card_last4 = card_last4
    current_user.save!

    respond_to do |format|
      if @job.save
        format.html { redirect_to @job, notice: '🎉 Your job listing was purchased successfully!' }
        format.json { render :show, status: :created, location: @job }
      else
        format.html { render :new }
        format.json { render json: @job.errors, status: :unprocessable_entity }
      end
    end

    rescue Stripe::CardError => e
      flash.alert = e.message
      render action: :new
  end

  # PATCH/PUT /jobs/1
  # PATCH/PUT /jobs/1.json
  def update
    respond_to do |format|
      if @job.update(job_params)
        format.html { redirect_to @job, notice: 'Job was successfully updated.' }
        format.json { render :show, status: :ok, location: @job }
      else
        format.html { render :edit }
        format.json { render json: @job.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /jobs/1
  # DELETE /jobs/1.json
  def destroy
    @job.destroy
    respond_to do |format|
      format.html { redirect_to jobs_url, notice: 'Job was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_job
      @job = Job.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def job_params
      params.require(:job).permit(:title, :description, :url, :apply_url, :job_type, :job_author, :remote_ok, :location, :avatar)
    end
end

---
app/views/jobs/new.html.erb
---
<h1>New Job</h1>

<%= render 'form', job: @job %>

<%= link_to 'Back', jobs_path %>
---
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-8 is-offset-2">
        <h1 class="title is-3">Post new Job</h1>
        <%= render 'form', job: @job %>
      </div>
    </div>
  </div>
</section>
---
app/views/jobs/_payment.html.erb
---
<% if !@job.persisted? %>
  <h4 class="subtitle is-4">Payment</h4>

  <div class="notification is-light has-text-centered">
    <i class="fa fa-credit-card"></i>
    All jobs cost <strong>$300</strong> USD for 30 days.
    <span class="block mb4"></span>
  </div>

  <div class="form-row">
    <label for="card-element" class="label">
      Enter credit or debit card
    </label>

    <div id="card-element" class="form-control">
      <!-- a Stripe Element will be inserted here. -->
    </div>
    <!-- used to display Element errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <% if current_user.stripe_id.present? %>
    <div class="last-card bg-light pa4 border-radius-3 mt4">
      <h5 class="is-6 title pt2">Previously used card</h5>
      <table class="table is-narrow bg-light is-fullwidth">
        <thead>
          <th>Card Brand</th>
          <th>Last 4 Digits</th>
          <th>Expiration Month</th>
          <th>Expiration Year</th>
        </thead>
        <tr>
          <td><%= current_user.card_brand %></td>
          <td><%= current_user.card_last4 %></td>
          <td><%= current_user.card_exp_month %></td>
          <td><%= current_user.card_exp_year %></td>
        </tr>
      </table>
    </div>
  <% end %>
<% end %>
---
config/initializers/stripe.rb
---
Rails.configuration.stripe = {
  :publishable_key => ENV['stripe_publishable_key'],
  :secret_key      => ENV['stripe_api_key']
}

Stripe.api_key = ENV['stripe_api_key']
---
app/helpers/jobs_helper.rb
---

module JobsHelper

  def job_type(job_type)
    if job_type == "Full-time"
      content_tag :span, "#{job_type}", class: "tag is-primary"
    elsif job_type == "Part-time"
      content_tag :span, "#{job_type}", class: "tag is-link"
    elsif job_type == "Freelance"
      content_tag :span, "#{job_type}", class: "tag is-warning"
    elsif job_type == "Contract"
      content_tag :span, "#{job_type}", class: "tag is-info"
    else
      ""
    end
  end

  def job_author(job)
    user_signed_in? && current_user.id == job.user_id
  end
end
---

添加数据

user = User.new(
  id: 3,
  email: "xiaowei@example.com",
  password: "password",
  password_confirmation: "password"
)
user.save!

Job.create!([{
  title: "React Engineer",
  description: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Venenatis dapibus posuere. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.",
  url: "https://facebook.com",
  apply_url: "https://facebook.com/apply",
  job_type: "Full-time",
  location: "San Francisco, CA",
  job_author: "Facebook",
  user_id: user.id,
  remote_ok: false
},
{
  title: "Product Designer",
  description: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Venenatis dapibus posuere. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.",
  url: "https://slack.com",
  apply_url: "https://slack.com/apply",
  job_type: "Contract",
  location: "San Francisco, CA",
  job_author: "Slack",
  user_id: user.id,
  remote_ok: false
},
{
  title: "UI/UX Designer",
  description: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Venenatis dapibus posuere. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.",
  url: "https://trello.com",
  apply_url: "https://trello.com/apply",
  job_type: "Full-time",
  location: "Anywhere",
  job_author: "Trello",
  user_id: user.id,
  remote_ok: true
}
])
---
rake db:drop
rake db:create
rake db:migrate
rake db:seed
rails server
---

rails c
2.3.1 :001 > user = User.last
2.3.1 :002 > user.admin = ture
2.3.1 :003 > user.admin = true
2.3.1 :004 > user.save
2.3.1 :005 > exit

结束表现形式

让我们用 Ruby on Rails 来构建 Dribbble

xiaoweirails — Sun, 01 Apr 2018 13:55:45 +0800

Let's Build: A Dribbble Clone With Ruby On Rails

最后的表现效果

Github Repo:

https://github.com/shenzhoudance/dribbble_clone

出现的两个问题

第一个问题是：图片的引入部分错误；
第二个问题是：评论的用户部分错误；

后续需要好好思考这个地方；在处理 js 的代码的时候，明显感觉掌握的力度不够，还需要进一步的强化才好；

对于 Dribbble 的案例的思考：

针对于视频的教材来看，逻辑体系相对来说比较的混乱，容易出现代码的错误。

所以我们在完成这个案例的教学练习的时候，应该从这个方面来完成案例的增量的开发；

博客功能的开发（包括：增删改查的功能 + 评论的功能 + 投票） gem "bulma-rails", "~> 0.6.1" gem 'simple_form', '~> 3.5' gem 'acts_as_votable', '~> 0.11.1'
用户功能的开发（包括：导航条的制作 + 用户页面的美化 gem 'devise', '~> 4.3' gem 'gravatar_image_tag'
图片功能的开发（包括：图片的上传和引入） gem 'carrierwave', '~> 1.2', '>= 1.2.1' gem "mini_magick"

- 项目云端的部署（包括：heroku 部署和 aliyun 部署）

主要完成的任务的实现：

gem 的使用

gem "bulma-rails", "~> 0.6.1"
gem 'devise', '~> 4.3'
gem 'carrierwave', '~> 1.2', '>= 1.2.1'
gem 'simple_form', '~> 3.5'
gem "mini_magick"
gem 'impressionist', '~> 1.6'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'gravatar_image_tag'
gem 'acts_as_votable', '~> 0.11.1'
---
group :development do
---
gem 'better_errors', '~> 2.4'
gem 'guard', '~> 2.14', '>= 2.14.1'
gem 'guard-livereload', '~> 2.5', '>= 2.5.2', require: false

功能的架构 1、博客（blog）：基本的 CRUD（增删改查） + Comment（评论） + Upvote(点赞) + View（预览） 2、推特（twitter）：导航 Nav（导航） + Devise 的使用 3、达波（dribble）：图片 Image 的使用 4、装修 SCSS 的使用
云端的部署 1、heroku 的部署 2、aliyun 的部署 https://teratail.com

cd workspace
rails new dribbble_clone
cd dribbble_clone
atom .
rails s
http://localhost:3000/
---
git add .
git commit -m "initial commit"
git remote add origin https://github.com/shenzhoudance/dribbble_clone.git
git push -u origin master

git checkout -b gems
---
gem "bulma-rails", "~> 0.6.1"
gem 'devise', '~> 4.3'
gem 'carrierwave', '~> 1.2', '>= 1.2.1'
gem 'simple_form', '~> 3.5'
gem "mini_magick"
gem 'impressionist', '~> 1.6'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'gravatar_image_tag'
gem 'acts_as_votable', '~> 0.11.1'
---
group :development do
---
gem 'better_errors', '~> 2.4'
gem 'guard', '~> 2.14', '>= 2.14.1'
gem 'guard-livereload', '~> 2.5', '>= 2.5.2', require: false

bundle install
guard init livereload
bundle exec guard
exit
rails generate simple_form:install

app/assets/stylesheets/application.scss
---
@import "bulma";

# git checkout -b home
rails g controller home index
---
root 'home#index'
rails server
app/views/home/index.html.erb
---
<h1>欢迎来到才华横溢的世界</h1>

# git checkout -b navbar
---
app/views/layouts/application.html.erb
---
<!DOCTYPE html>
<html>
  <head>
    <title>DribbbleClone</title>
    <%= csrf_meta_tags %>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <% if flash[:notice] %>
        <div class="notification is-primary global-notification">
        <p class="notice"><%= notice %></p>
        </div>
    <% end %>
    <% if flash[:alert] %>
    <div class="notification is-danger global-notification">
      <p class="alert"><%= alert %></p>
    </div>
    <% end %>
     <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <%= link_to root_path, class:"navbar-item" do %>
          <h1 class="title is-5 has-text-white">Dribbble Clone</h1>
     <% end %>
     </nav>

<%= yield %>
 </body>
</html>

# git checkout -b devise
rails g devise:install
rails g devise:views
rails g devise User
rake db:migrate

config/routes.rb
---
Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'registrations' }
  root 'home#index'
end
---
app/controllers/registrations_controller.rb
---
class RegistrationsController < Devise::RegistrationsController

 private

  def sign_up_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation)
  end

  def account_update_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation, :current_password)
  end

end

rails g migration AddFieldsToUsers name:string
rake db:migrate
rails server
http://localhost:3000/users/sign_up

app/views/devise/sessions/new.html.erb
---
<h2>Log in</h2>

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="form-inputs">
    <%= f.input :email, required: false, autofocus: true %>
    <%= f.input :password, required: false %>
    <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Log in" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
---
app/views/devise/registrations/new.html.erb
---
<h2>Sign up</h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :email, required: true, autofocus: true %>
    <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
    <%= f.input :password_confirmation, required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
---
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-4">
                <h2 class="title is-2">Sign up</h2>

                <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
                  <%= f.error_notification %>


                <div class="field">
                    <div class="control">
                        <%= f.input :name, required: true, autofocus: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
                    </div>
                  </div>


          <div class="field">
            <div class="control">
                    <%= f.input :email, required: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
                    </div>
                    </div>

          <div class="field">
            <div class="control">
                    <%= f.input :password, required: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" }, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
                    </div>
                    </div>

          <div class="field">
            <div class="control">
                    <%= f.input :password_confirmation, required: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
                    </div>
                    </div>

                <%= f.button :submit, "Sign up", class:"button is-primary is-medium" %>

                <% end %>
                <br />
                <%= render "devise/shared/links" %>
            </div>
        </div>
    </div>
</section>
---
app/views/devise/registrations/edit.html.erb
---
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :email, required: true, autofocus: true %>

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <p>Currently waiting confirmation for: <%= resource.unconfirmed_email %></p>
    <% end %>

    <%= f.input :password, autocomplete: "off", hint: "leave it blank if you don't want to change it", required: false %>
    <%= f.input :password_confirmation, required: false %>
    <%= f.input :current_password, hint: "we need your current password to confirm your changes", required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Update" %>
  </div>
<% end %>

<h3>Cancel my account</h3>

<p>Unhappy? <%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

<%= link_to "Back", :back %>
---
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-4">

      <h2 class="title is-2">Edit <%= resource_name.to_s.humanize %></h2>
      <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
        <%= f.error_notification %>

          <div class="field">
            <div class="control">
              <%= f.input :name, required: true, autofocus: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <%= f.input :email, required: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
            </div>
          </div>

          <div class="field">
          <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
            <p>Currently waiting confirmation for: <%= resource.unconfirmed_email %></p>
          <% end %>
          </div>

          <div class="field">
            <div class="control">
            <%= f.input :password, autocomplete: "off", hint: "leave it blank if you don't want to change it", required: false, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
            </div>
          </div>

          <div class="field">
            <div class="control">
            <%= f.input :password_confirmation, required: false, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <%= f.input :current_password, hint: "we need your current password to confirm your changes", required: true, input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
            </div>
        </div>

        <%= f.button :submit, "Update", class:"button is-primary" %>

      <% end %>

        <hr />
        <h3 class="title is-5">Cancel my account</h3>
        <p>Unhappy? <%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

      </div>
    </div>
  </div>
</section>

# git checkout -b scaffold-shot
rails g scaffold Shot title:string description:text user_id:integer
rake db:migrate
---
app/models/shot.rb
---
class Shot < ApplicationRecord
  belongs_to :user
end
---
app/models/user.rb
---
has_many :shots, dependent: :destroy
---
config/routes.rb
root 'shots#index'

app/views/shots/index.html.erb
---


<h1>Shots</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>User</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @shots.each do |shot| %>
      <tr>
        <td><%= shot.title %></td>
        <td><%= shot.description %></td>
        <td><%= shot.user_id %></td>
        <td><%= link_to 'Show', shot %></td>
        <td><%= link_to 'Edit', edit_shot_path(shot) %></td>
        <td><%= link_to 'Destroy', shot, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
---
app/views/shots/show.html.erb
---
<p>
  <strong>Title:</strong>
  <%= @shot.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= @shot.description %>
</p>


<%= link_to 'Edit', edit_shot_path(@shot) %> |
<%= link_to 'Back', shots_path %>
---
app/views/shots/_shot.json.jbuilder
---
json.extract! shot, :id, :title, :description, :created_at, :updated_at
json.url shot_url(shot, format: :json)
---
app/views/shots/_form.html.erb
---
<%= simple_form_for(@shot) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.input :description %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>
---
<!DOCTYPE html>
<html>
  <head>
    <title>DribbbleClone</title>
    <%= csrf_meta_tags %>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <% if flash[:notice] %>
        <div class="notification is-primary global-notification">
        <p class="notice"><%= notice %></p>
        </div>
    <% end %>
    <% if flash[:alert] %>
    <div class="notification is-danger global-notification">
      <p class="alert"><%= alert %></p>
    </div>
    <% end %>
     <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <%= link_to root_path, class:"navbar-item" do %>
          <h1 class="title is-5 has-text-white">Dribbble Clone</h1>
        <% end  %>
      <div class="navbar-burger burger" data-target="navbar">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

      <div id="navbar" class="navbar-menu">

        <div class="navbar-start">
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <%= link_to 'Shots', root_path , class:"button is-dark" %>
              </p>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="field is-grouped">
              <% if user_signed_in? %>
              <p class="control">
                <%= link_to new_shot_path, class:"button is-primary"  do %>
                  <span class="icon is-small"><i class="fa fa-upload"></i></span>
                  <span>New Shot</span>
                <% end %>
              </p>
              <p class="control">
                <%= link_to current_user.name, edit_user_registration_path, class:"button is-dark" %>
              </p>
              <p class="control">
                <%= link_to "Log Out", destroy_user_session_path, method: :delete, class:"button is-dark" %>
              </p>
              <% else %>
              <p class="control">
                 <%= link_to "Sign In", new_user_session_path, class:"button is-dark" %>
              </p>
              <p class="control">
                <%= link_to "Sign up", new_user_registration_path, class:"button is-dark"%>
              </p>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <%= yield %>
  </body>
</html>
---
app/assets/stylesheets/application.scss
---
$pink: #ea4c89;
$pink-invert: #fff;

$primary: $pink;
$primary-invert: $pink-invert;
$link: $primary;
$link-hover: darken($primary, 20%);


@import "bulma";

html, body {
 min-height: 100vh;
 background-color: #f4f4f4;
}

#drop_zone {
 position: relative;
 padding: 3rem 0;
 border: 2px dashed #ccc;
 text-align: center;
 border-radius: 6px;
 background-color: #f8f8f8;
 &.dragging::before {
   content: "";
   position: absolute;
   left: 0; width: 100%;
   top: 0; height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.5em;
   background-color: rgba($primary, .3);
   pointer-events: none;
   z-index: 99;
 }
 &.fire::before {
   content: "";
   position: absolute;
   left: 0; width: 100%;
   top: 0; height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.5em;
   background-color: rgba($green, .3);
   pointer-events: none;
   z-index: 99;
 }
}

.notification {
 border-radius: none;
}
.notification:not(:last-child) {
 margin-bottom: 0;
}

.visible {
 display: block !important;
}

# 用户名称的对应
rails c
2.3.1 :001 > @user = User
2.3.1 :002 > User.connection
2.3.1 :003 > @user = User
2.3.1 :004 > @user.last
2.3.1 :005 > @user.last
2.3.1 :006 > @user.destroy
2.3.1 :007 > @user.last
2.3.1 :009 > @user.destroy
2.3.1 :009 > @user.destroy
2.3.1 :010 > @user.destroy
2.3.1 :011 > exit

git checkout -b shot-view
app/views/shots/new.html.erb
---
<h1>New Shot</h1>

<%= render 'form', shot: @shot %>

<%= link_to 'Back', shots_path %>
---
<section class="section">
    <div class="container">
        <h1 class="title is-2 has-text-centered">What are you working on?</h1>
        <%= render 'form', shot: @shot %>
    </div>
</section>
---
app/views/shots/_form.html.erb
---

<%= simple_form_for(@shot) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.input :description %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>
---
<%= simple_form_for @shot, html: { multipart: true }  do |f| %>
  <%= f.error_notification %>
  <div class="columns is-centered">
    <div class="column is-half">

    <%#unless @shot.user_shot.blank? %>
    <%#= image_tag (@shot.user_shot_url), id: "previewImage" %>
    <%# end %>

    <output id="list"></output>
    <div id="drop_zone">Drag your shot here</div>
    <br />

    <%#= f.input :user_shot, label: false, input_html: { class: "file-input", type: "file" }, wrapper: false, label_html: { class: "file-label" } %>

    <div class="field">
      <div class="control">
        <%= f.input :title, label: "Title", input_html: { class: "input"}, wrapper: false, label_html: { class: "label" } %>
      </div>
    </div>

    <div class="field">
        <div class="control">
        <%= f.input :description, input_html: { class: "textarea"}, wrapper: false, label_html: { class: "label" } %>
      </div>
    </div>

    <div class="field">
        <div class="control">
        <%= f.button :submit, class:"button is-primary" %>
      </div>
    </div>
  </div>
</div>


<% end %>
---

rails g uploader Shot
rails g uplooader user_shot
rails g uploader user_shot
rails g migration add_user_shot_to_shots
rake db:migrate

app/uploaders/shot_uploader.rb
---
class ShotUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
   include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  ---
  app/uploaders/user_shot_uploader.rb
  ---
  class UserShotUploader < CarrierWave::Uploader::Base
    # Include RMagick or MiniMagick support:
    # include CarrierWave::RMagick
     include CarrierWave::MiniMagick

    # Choose what kind of storage to use for this uploader:
    storage :file
    # storage :fog

    # Override the directory where uploaded files will be stored.
    # This is a sensible default for uploaders that are meant to be mounted:
    def store_dir
      "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end

    # Provide a default URL as a default if there hasn't been a file uploaded:
    # def default_url(*args)
    #   # For Rails 3.1+ asset pipeline compatibility:
    #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
    #
    #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
    # end

    # Process files as they are uploaded:
    # process scale: [200, 300]
    #
    # def scale(width, height)
    #   # do something
    # end

    # Create different versions of your uploaded files:
     version :full do
       process resize_to_fit: [800, 600]
     end

     version :thumb do
       process resize_to_fit: [400, 300]
     end

    # Add a white list of extensions which are allowed to be uploaded.
    # For images you might use something like this:
     def extension_whitelist
       %w(jpg jpeg gif png)
     end

    # Override the filename of the uploaded files:
    # Avoid using model.id or version_name here, see uploader/store.rb for details.
    # def filename
    #   "something.jpg" if original_filename
    # end
  end
  ---
  db/migrate/20180331055004_add_user_shot_to_shots.rb
  ---
  class AddUserShotToShots < ActiveRecord::Migration[5.1]
    def change
      add_column :shots, :user_shot, :string
    end
  end
  ---
app/models/shot.rb
---
class Shot < ApplicationRecord
  belongs_to :user
  mount_uploader :user_shot, UserShotUploader
end
---
app/views/shots/_form.html.erb
---
<output id="list"></output>
<div id="drop_zone">Drag your shot here</div>
<br />

<%= f.input :user_shot, label: false, input_html: { class: "", type: "file" }, wrapper: false, label_html: { class: "file-label" } %>
---

app/assets/javascripts/shots.js
---
document.addEventListener("turbolinks:load", function() {

    var Shots = {
        previewShot() {
            if (window.File && window.FileList && window.FileReader) {

                function handleFileSelect(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();

                    let files = evt.target.files || evt.dataTransfer.files;
                    // files is a FileList of File objects. List some properties.
                    for (var i = 0, f; f = files[i]; i++) {

                        // Only process image files.
                        if (!f.type.match('image.*')) {
                            continue;
                        }
                        const reader = new FileReader();

                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                let span = document.createElement('span');
                                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                    '" title="', escape(theFile.name), '"/>'
                                ].join('');
                                document.getElementById('list').insertBefore(span, null);
                            };
                        })(f);

                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }
                }

                function handleDragOver(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
                }

                // Setup the dnd listeners.
                // https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page
                const dropZone = document.getElementById('drop_zone');
                const target = document.documentElement;
                const fileInput = document.getElementById('shot_user_shot');
                const previewImage = document.getElementById('previewImage');
                const newShotForm = document.getElementById('new_shot');


                if (dropZone) {
                    dropZone.addEventListener('dragover', handleDragOver, false);
                    dropZone.addEventListener('drop', handleFileSelect, false);

                    // Drop zone classes itself
                    dropZone.addEventListener('dragover', (e) => {
                        dropZone.classList.add('fire');
                    }, false);

                    dropZone.addEventListener('dragleave', (e) => {
                        dropZone.classList.remove('fire');
                    }, false);

                    dropZone.addEventListener('drop', (e) => {
                        e.preventDefault();
                        dropZone.classList.remove('fire');
                        fileInput.files = e.dataTransfer.files;
                        // if on shot/id/edit hide preview image on drop
                        if (previewImage) {
                            previewImage.style.display = 'none';
                        }
                        // If on shots/new hide dropzone on drop
                        if(newShotForm) {
                            dropZone.style.display = 'none';
                        }
                    }, false);

                    // Body specific
                    target.addEventListener('dragover', (e) => {
                        e.preventDefault();
                        dropZone.classList.add('dragging');
                    }, false);

                    // removes dragging class to body WHEN NOT dragging
                    target.addEventListener('dragleave', (e) => {
                        dropZone.classList.remove('dragging');
                        dropZone.classList.remove('fire');
                    }, false);
                }
            }
        },
        shotHover() {
            $('.shot').hover(function() {
                $(this).children('.shot-data').toggleClass('visible');
            });
        }

    };
    Shots.previewShot();
    Shots.shotHover();


});
---

实现突破的拖拽上传功能

git add .
git commit -m "add image Drag"
git push origin shot-view

app/controllers/shots_controller.rb
---
before_action :set_shot, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, only: [:edit, :update, :destroy]

def index
   @shots = Shot.all.order('created_at DESC')
end

def new
  @shot = current_user.shots.build
end

def create
@shot = current_user.shots.build(shot_params)

app/views/shots/index.html.erb
---


<h1>Shots</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>User</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @shots.each do |shot| %>
      <tr>
        <td><%= shot.title %></td>
        <td><%= shot.description %></td>
        <td><%= shot.user_id %></td>
        <td><%= link_to 'Show', shot %></td>
        <td><%= link_to 'Edit', edit_shot_path(shot) %></td>
        <td><%= link_to 'Destroy', shot, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

---
<section class="section">
  <div class="shots">
    <% @shots.each do |shot| %>
      <div class="shot-grid-item">
        <div class="shot-wrapper">

        <%#= link_to shot, class: "shot" do %>
          <%#= image_tag shot.image.thumb.url unless shot.image.blank? %>
          <div class="shot-data">
            <h3 class="shot-title"><%= shot.title %></h3>
            <div class="shot-description"><%= truncate(shot.description, length: 60) %></div>
            <div class="shot-time">
              <%= time_ago_in_words(shot.created_at) %>
            </div>
          </div>
          <%# end %>

           </div>
        </div>
     <% end %>
   </div>
</section>

.shot-wrapper {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    border-radius: 2px;
    padding: 10px;
    background: white;
}
.shots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
    @media only screen and (min-width: 1600px) {
        grid-template-columns: repeat(6, 1fr);
    }
    @media only screen and (max-width: 1300px) {
        grid-template-columns: repeat(4, 1fr);
    }
    @media only screen and (max-width: 1100px) {
        grid-template-columns: repeat(3, 1fr);
    }
    @media only screen and (max-width: 800px) {
        grid-template-columns: 1fr 1fr;
    }
    @media only screen and (max-width: 400px) {
        grid-template-columns: 1fr;
    }

}
.shot {
    position: relative;
    display: block;
    color: #333 !important;

    .shot-data {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 10px;
        background: rgba(white, .9);
        cursor: pointer;
        .shot-title {
            font-weight: bold;
        }
        .shot-description {
            font-size: .9rem;
        }
        .shot-time {
            font-size: .8rem;
            padding-top: .5rem;
        }
    }
}

.user-data {
    padding: 1rem 0 0 0;
}

.user-name {
    display: inline-block;
    position: relative;
    top: -4px;
    padding-left: 5px;
}

.user-thumb {
    display: inline-block;
    img {
        border-radius: 50%;
    }
}

.by,
.shot-time {
    display: inline-block;
    position: relative;
    top: -4px;
}

.shot-analytics {
    text-align: right;
    @media only screen and (max-width: 800px) {
        text-align: right;
        .level-item {
            display: inline-block;
            padding: 0 4px;
        }
        .level-left+.level-right {
            margin: 0;
            padding: 0;
        }
        .level-item:not(:last-child) {
            margin: 0;
        }
    }
}

.shot-analytics,
.panel.show-shot-analytics {
    font-size: .9rem;
    a,
    .icon {
        color: #aaa;
    }
    .icon:hover,
    a:hover {
        color: darken(#aaa, 25%);
    }
}

.panel.show-shot-analytics {
    a { color: #333; }
    .icon {
        padding-right: .5rem;
    }
    .likes .vote_count {
        margin-left: -4px;
    }
}


.shot-container {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    border-radius: 2px;
    padding: 40px;
    background: white;
    @media only screen and (max-width: 800px) {
        padding: 10px;
    }
    .content,
    .comments {
        margin-top: 1rem;
        padding: 20px;
        @media only screen and (max-width: 800px) {
            padding: 0;
        }
    }
}

.shot-full {
    text-align: center;
}
---

app/views/shots/index.html.erb
---
<section class="section">
  <div class="shots">
    <% @shots.each do |shot| %>
      <div class="shot-grid-item">
        <div class="shot-wrapper">

        <%#= link_to shot, class: "shot" do %>
          <%#= image_tag shot.image.thumb.url unless shot.image.blank? %>
          <div class="shot-data">
            <h3 class="shot-title"><%= link_to shot.title, shot %></h3>
            <div class="shot-description"><%= truncate(shot.description, length: 60) %></div>
            <div class="shot-time">
              <%= time_ago_in_words(shot.created_at) %>
            </div>
          </div>
          <%# end %>

          <nav class="level shot-analytics">
            <div class="level-left"></div>
            <div class="level-right">
              <div class="level-item views data">
                <%= link_to shot do %>
                  <span class="icon"><i class="fa fa-eye"></i></span>
                  0<%#= shot.impressionist_count %>
                <% end %>
              </div>

              <div class="level-item comments data">
                <%= link_to shot do %>
                  <span class="icon"><i class="fa fa-comment"></i></span>
                   0<%#= shot.comments.count %>
                <% end %>
              </div>

              <div class="level-item likes">

                    <%= link_to "" do %>
                      <span class="icon"><i class="fa fa-heart"></i></span>
                      <span class="vote_count"></span>
                      0
                    <% end %>
              </div>
            </div>
          </nav>


          <div class="user-data">
            <div class="user-thumb">
              <%= gravatar_image_tag(shot.user.email.gsub('spam', 'mdeering'), alt: shot.user.name, gravatar: { size: 20 }); %>
            </div>

            <div class="user-name"><%= shot.user.name %></div>
          </div>
        </div>
     </div>
     <% end %>
    </div>
  </section>
---

app/views/shots/show.html.erb
---
<p>
  <strong>Title:</strong>
  <%= @shot.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= @shot.description %>
</p>


<%= link_to 'Edit', edit_shot_path(@shot) %> |
<%= link_to 'Back', shots_path %>
---
<div class="section">
    <div class="container">
        <h1 class="title is-3"><%= @shot.title %></h1>
        <div class="columns">
            <div class="column is-8">
                <span class="by has-text-grey-light">by</span>
                <div class="user-thumb">
                    <%= gravatar_image_tag(@shot.user.email.gsub('spam', 'mdeering'), alt: @shot.user.name, gravatar: { size: 20 }); %>
                </div>
                <div class="user-name has-text-weight-bold"><%= @shot.user.name %></div>
                <div class="shot-time"><span class="has-text-grey-light">posted</span><span class="has-text-weight-semibold">
                    <%= verbose_date(@shot.created_at) %>
                </span></div>
       </div>
      </div>
    </div>
</div>

app/helpers/application_helper.rb
---
module ApplicationHelper
    def verbose_date(date)
        date.strftime('%B %d %Y')
    end
end
---

app/views/shots/show.html.erb
---
<div class="section">
    <div class="container">
        <h1 class="title is-3"><%= @shot.title %></h1>
        <div class="columns">
            <div class="column is-8">
                <span class="by has-text-grey-light">by</span>
                <div class="user-thumb">
                    <%= gravatar_image_tag(@shot.user.email.gsub('spam', 'mdeering'), alt: @shot.user.name, gravatar: { size: 20 }); %>
                </div>
                <div class="user-name has-text-weight-bold"><%= @shot.user.name %></div>
                <div class="shot-time"><span class="has-text-grey-light">posted</span><span class="has-text-weight-semibold">
                    <%= verbose_date(@shot.created_at) %>
                </span></div>
       </div>
      </div>
    </div>
</div>

<div class="columns">
            <div class="column is-8">
                <div class="shot-container">
                    <div class="shot-full">
                         <%#= image_tag @shot.user_shot_url unless @shot.user_shot.blank? %>
                    </div>

                    <% if user_signed_in? && (current_user.id == @shot.user_id) %>
                        <div class="buttons has-addons">
                            <%= link_to 'Edit', edit_shot_path(@shot), class: "button" %>
                            <%= link_to 'Delete', shot_path, class: "button", method: :delete, data: { confirm: 'Are you sure you want to delete this shot?'} %>
                        </div>
                    <% end %>

                    <div class="content">
                        <%= @shot.description %>
                    </div>

          </div>
        </div>


        <div class="column is-3 is-offset-1">
                <div class="nav panel show-shot-analytics">
                    <div class="panel-block views data">
                        <span class="icon"><i class="fa fa-eye"></i></span>
                        0<%#= pluralize(@shot.impressionist_count, 'View') %>
                    </div>
                    <div class="panel-block comments data">
                        <span class="icon"><i class="fa fa-comment"></i></span>
                        0<%#= pluralize(@shot.comments.count, 'Comment') %>
                    </div>

                    <div class="panel-block likes data">
                    <span class="icon"><i class="fa fa-heart has-text-primary"></i></span>
                  0
                    </div>

                </div>
            </div>
      </div>
---

git checkout -b comment
rails g controller comments
---
config/routes.rb
---
Rails.application.routes.draw do
  resources :shots do
    resources :comments
  end
  devise_for :users, controllers: { registrations: 'registrations' }
  root 'shots#index'
end
---
rails g model Comment name:string response:text
rake db:migrate
rails g migrate AddShotIdToComments
db/migrate/20180401021635_add_shot_id_to_comments.rb
---
class AddShotIdToComments < ActiveRecord::Migration[5.1]
  def change
    add_column :comments, :shot_id, :integer
  end
end
---
rake db:migrate
---
app/models/comment.rb
---
class Comment < ApplicationRecord
    belongs_to :shot
    belongs_to :user
end
---
app/models/user.rb
---
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  has_many :shots, dependent: :destroy
  has_many :comments, dependent: :destroy
end
---
app/models/shot.rb
---
class Shot < ApplicationRecord
  belongs_to :user
  has_many :comments, dependent: :destroy
  mount_uploader :user_shot, UserShotUploader
end
---

app/controllers/comments_controller.rb
---
class CommentsController < ApplicationController
    before_action :authenticate_user!, only: [:create, :destroy]

  def create
    @shot = Shot.find(params[:shot_id]) # finds the shot with the associated shot_id
    @comment = @shot.comments.create(comment_params) # creates the comment on the shot passing in params
    @comment.user_id = current_user.id if current_user # assigns logged in user's ID to comment
    @comment.save!

    redirect_to shot_path(@shot)

  end

  def destroy
    @shot = Shot.find(params[:shot_id])
    @comment = @shot.comments.find(params[:id])
    @comment.destroy
    redirect_to shot_path(@shot)
  end

  private

  def comment_params
    params.require(:comment).permit(:name, :response)
  end
end
---
app/views/comments/_form.html.erb
---
<%= simple_form_for([@shot, @shot.comments.build]) do |f| %>

    <div class="field">
        <div class="control">
            <%= f.input :name, input_html: { class: 'input'}, wrapper: false, label_html: { class: 'label' } %>
        </div>
    </div>

    <div class="field">
        <div class="control">
            <%= f.input :response, input_html: { class: 'textarea' }, wrapper: false, label_html: { class: 'label' } %>
        </div>
    </div>

    <%= f.button :submit, 'Leave a reply', class: 'button is-primary' %>
<% end %>
---
app/views/shots/show.html.erb
---
<section class="comments">
  <h2 class="subtitle is-5"><%= pluralize(@shot.comments.count, 'Comment') %></h2>
  <%= render @shot.comments %>
  <hr />
  <% if user_signed_in? %>
<div class="comment-form">
  <h3 class="subtitle is-3">Leave a reply</h3>
  <%= render 'comments/form' %>
</div>
<% else %>
<div class="content"><%= link_to 'Sign in', new_user_session_path %> to leave a comment.</div>
<% end %>
</section>
---

最后效果

git checkout -b impression1
rails g impressionist
db/migrate/20180401041606_create_impressions_table.rb
---
class CreateImpressionsTable < ActiveRecord::Migration[5.1]
---

app/models/shot.rb
---
class Shot < ApplicationRecord
  belongs_to :user
  has_many :comments, dependent: :destroy
  mount_uploader :user_shot, UserShotUploader
  is_impressionable
end
---
app/controllers/shots_controller.rb
---
before_action :set_shot, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, only: [:edit, :update, :destroy,]
impressionist actions: [:show], unique: [:impressionable_type, :impressionable_id, :session_hash]

app/views/shots/index.html.erb
---
<section class="section">
  <div class="shots">
    <% @shots.each do |shot| %>
      <div class="shot-grid-item">
        <div class="shot-wrapper">

        <%#= link_to shot, class: "shot" do %>
           <%#= image_tag @shot.user_shot_url unless @shot.user_shot.blank? %>
          <div class="shot-data">
            <h3 class="shot-title"><%= link_to shot.title, shot %></h3>
            <div class="shot-description"><%= truncate(shot.description, length: 60) %></div>
            <div class="shot-time">
              <%= time_ago_in_words(shot.created_at) %>
            </div>
          </div>
          <%# end %>

          <nav class="level shot-analytics">
            <div class="level-left"></div>
            <div class="level-right">
              <div class="level-item views data">
                <%= link_to shot do %>
                  <span class="icon"><i class="fa fa-eye"></i></span>
                  <%= shot.impressionist_count %>
                <% end %>
              </div>

              <div class="level-item comments data">
                <%= link_to shot do %>
                  <span class="icon"><i class="fa fa-comment"></i></span>
                   <%= shot.comments.count %>
                <% end %>
              </div>

              <div class="level-item likes">

                    <%= link_to "" do %>
                      <span class="icon"><i class="fa fa-heart"></i></span>
                      <span class="vote_count"></span>
                      0
                    <% end %>
              </div>
            </div>
          </nav>


          <div class="user-data">
            <div class="user-thumb">
              <%= gravatar_image_tag(shot.user.email.gsub('spam', 'mdeering'), alt: shot.user.name, gravatar: { size: 20 }); %>
            </div>

            <div class="user-name"><%= shot.user.name %></div>
          </div>
        </div>
     </div>
     <% end %>
    </div>
  </section>
---
app/views/shots/show.html.erb
---
<div class="section">
    <div class="container">
        <h1 class="title is-3"><%= @shot.title %></h1>
        <div class="columns">
            <div class="column is-8">
                <span class="by has-text-grey-light">by</span>
                <div class="user-thumb">
                    <%= gravatar_image_tag(@shot.user.email.gsub('spam', 'mdeering'), alt: @shot.user.name, gravatar: { size: 20 }); %>
                </div>
                <div class="user-name has-text-weight-bold"><%= @shot.user.name %></div>
                <div class="shot-time"><span class="has-text-grey-light">posted</span><span class="has-text-weight-semibold">
                    <%= verbose_date(@shot.created_at) %>
                </span></div>
       </div>
      </div>
    </div>
</div>

<div class="columns">
            <div class="column is-8">
                <div class="shot-container">
                    <div class="shot-full">
                         <%= image_tag @shot.user_shot_url unless @shot.user_shot.blank? %>
                    </div>

                    <% if user_signed_in? && (current_user.id == @shot.user_id) %>
                        <div class="buttons has-addons">
                            <%= link_to 'Edit', edit_shot_path(@shot), class: "button" %>
                            <%= link_to 'Delete', shot_path, class: "button", method: :delete, data: { confirm: 'Are you sure you want to delete this shot?'} %>
                        </div>
                    <% end %>

                    <div class="content">
                        <%= @shot.description %>
                    </div>

                    <section class="comments">
                    <h2 class="subtitle is-5"><%= pluralize(@shot.comments.count, 'Comment') %></h2>
                      <%= render @shot.comments %>
                    <hr />
                    <% if user_signed_in? %>
                    <div class="comment-form">
                        <h3 class="subtitle is-3">Leave a reply</h3>
                        <%= render 'comments/form' %>
                    </div>
                <% else %>
                    <div class="content"><%= link_to 'Sign in', new_user_session_path %> to leave a comment.</div>
                <% end %>
       </section>

          </div>
        </div>


        <div class="column is-3 is-offset-1">
                <div class="nav panel show-shot-analytics">
                    <div class="panel-block views data">
                        <span class="icon"><i class="fa fa-eye"></i></span>
                        <%= pluralize(@shot.impressionist_count, 'View') %>
                    </div>
                    <div class="panel-block comments data">
                        <span class="icon"><i class="fa fa-comment"></i></span>
                        <%= pluralize(@shot.comments.count, 'Comment') %>
                    </div>

                    <div class="panel-block likes data">
                    <span class="icon"><i class="fa fa-heart has-text-primary"></i></span>
                  0
                    </div>

                </div>
            </div>
      </div>

---

git status
git add .
git commit -m "add impression views eyes"
git push origin impression1

git checkout -b acts_as_votable
rails generate acts_as_votable:migration
rake db:migrate
---
app/models/shot.rb
---
class Shot < ApplicationRecord
  belongs_to :user
  has_many :comments, dependent: :destroy
  mount_uploader :user_shot, UserShotUploader
  is_impressionable
  acts_as_votable
end
---
app/models/user.rb
---
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  has_many :shots, dependent: :destroy
  has_many :comments, dependent: :destroy
  acts_as_voter
end
---

app/controllers/shots_controller.rb
---
before_action :set_shot, only: [:show, :edit, :update, :destroy, :like, :unlike]
before_action :authenticate_user!, only: [:edit, :update, :destroy, :like, :unlike]
impressionist actions: [:show], unique: [:impressionable_type, :impressionable_id, :session_hash]

def like
  @shot.liked_by current_user
  respond_to do |format|
    format.html { redirect_back fallback_location: root_path }
    format.json { render layout:false }
  end
end

def unlike
  @shot.unliked_by current_user
  respond_to do |format|
    format.html { redirect_back fallback_location: root_path }
    format.json { render layout:false }
  end
end
---
app/views/shots/index.html.erb
---
<div class="level-item likes">
   <% if user_signed_in? %>

     <% if current_user.liked? shot %>
       <%= link_to unlike_shot_path(shot), method: :put, class: "unlike_shot" do %>
         <span class="icon"><i class="fa fa-heart has-text-primary"></i></span>
         <span class="vote_count"><%= shot.get_likes.size %></span>
       <% end %>
     <% else %>
       <%= link_to like_shot_path(shot), method: :put, class: "like_shot" do %>
         <span class="icon"><i class="fa fa-heart"></i></span>
         <span class="vote_count"><%= shot.get_likes.size %></span>
       <% end %>
     <% end %>
   <% else %>
       <%= link_to like_shot_path(shot), method: :put, class: "like_shot" do %>
         <span class="icon"><i class="fa fa-heart"></i></span>
         <span class="vote_count"><%= shot.get_likes.size %></span>
       <% end %>
    <% end %>
---
config/routes.rb
---
Rails.application.routes.draw do
  resources :shots do
    resources :comments
    member do
        put 'like', to: "shots#like"
        put 'unlike', to: "shots#unlike"
    end
end

  devise_for :users, controllers: { registrations: 'registrations' }
  root 'shots#index'
end

app/views/shots/show.html.erb
---
<div class="panel-block likes data">
  <% if user_signed_in? %>
    <% if current_user.liked? @shot %>
      <%= link_to unlike_shot_path(@shot), method: :put, class: "unlike_shot" do %>
        <span class="icon"><i class="fa fa-heart has-text-primary"></i></span>
        <span class="vote_count"><%= pluralize(@shot.get_likes.size, 'Like') %></span>
      <% end %>
    <% else %>
      <%= link_to like_shot_path(@shot), method: :put, class: "like_shot" do %>
        <span class="icon"><i class="fa fa-heart"></i></span>
        <span class="vote_count"><%= pluralize(@shot.get_likes.size, 'Like') %></span>
      <% end %>
    <% end %>
  <% else %>
      <%= link_to like_shot_path(@shot), method: :put, class: "like_shot" do %>
        <span class="icon"><i class="fa fa-heart"></i></span>
        <span class="vote_count"><%= pluralize(@shot.get_likes.size, 'Like') %></span>
      <% end %>
  <% end %>

git add .
git commit -m "add acts_as_votable"
git push origin acts_as_votable

git checkout -b hero
app/views/shots/_hero.html.erb
---
<% if !user_signed_in? %>
    <section class="hero is-dark">
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title is-size-5">
                    What are you working on? <span class="has-text-grey-light">Dribbble is where designers get inspired and hired.</span>
                </h1>
                <div class="content">
                    <%= link_to "Login", new_user_session_path, class: "button is-primary" %>
                </div>
            </div>
        </div>
    </section>
<% end %>
---

app/views/shots/index.html.erb
---
<%= render 'hero' %>
---
app/assets/javascripts/application.js
---
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

最后的表现效果

让我们用 Ruby on Rails 构建一个 Twitter

xiaoweirails — Fri, 30 Mar 2018 19:24:13 +0800

才华横溢 twitter 教学案例

Let's Build: A Twitter Clone With Ruby on Rails

本案例主要完成了

gem 的使用
crud 功能 + layouts 导航
devise 的使用
scss 的使用

Github Repo:

https://github.com/shenzhoudance/twitter

属于一个基本的案例

cd workspace
rails new twitter
cd tiwwter
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/shenzhoudance/twitter.git
git push -u origin master
rails s

git checkout -b scaffold
rails g scaffold Tweeet tweeet：text
rake db:migrate
git add .
git commit -m "sacffold tweeet"
rails s

config/routes.rb
---
Rails.application.routes.draw do
  resources :tweeets
  root 'tweeets#index'

end
----

git checkout -b gem
https://rubygems.org/
---
group :development do
---
gem 'better_errors', '~> 2.4'
gem 'guard', '~> 2.14', '>= 2.14.2'
gem 'guard-livereload', '~> 2.5', '>= 2.5.2', require: false
---
bundle install
guard init livereload
bundle exec guard

---
gem 'bulma-rails', '~> 0.6.2'
gem 'simple_form', '~> 3.5', '>= 3.5.1'
gem 'gravatar_image_tag', '~> 1.2'
gem 'devise', '~> 4.4', '>= 4.4.3'
---
bundle install
rails s
---
app/assets/stylesheets/application.scss
@import "bulma";
---

rails generate simple_form:install
rails generate devise:install
rails generate devise:views
---

git status
git add .
git commit -m "add gems"
git push origin gem

git checkout -b nav
app/views/layouts/application.html.erb
---
<body>
  <% if flash[:notice] %>
  <div class="notification is-primary global-notification">
    <p class="notice"><%= notice %></p>
  </div>
  <% end %>
  <% if flash[:alert] %>
  <div class="notification is-danger global-notification">
    <p class="alert"><%= alert %></p>
  </div>
  <% end %>
<nav class="navbar is-info">
<div class="navbar-brand">
  <%= link_to root_path, class:"navbar-item" do %>
    <h1 class="title is-5">Twittter</h1>
  <% end  %>
  <div class="navbar-burger burger" data-target="navbarExample">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<div id="navbarExample" class="navbar-menu">

  <div class="navbar-end">
    <div class="navbar-item">
      <div class="field is-grouped">
        <p class="control">
          <%= link_to 'New Tweeet', new_tweeet_path, class:"button is-info is-inverted" %>
        </p>

      </div>
    </div>
  </div>
</div>
</nav>
  <%= yield %>
</body>
---
app/assets/stylesheets/application.scss
---
.navbar-brand .title {
    color: white;
}
// round images
.image {
    border-radius: 50%;
    img {
        border-radius: 50%;
    }
}

.notification:not(:last-child) {
    margin-bottom: 0;
}
---

git status
git add .
git commit -m "add nav"
git push origin nav

git checkout -b views
app/views/layouts/application.html.erb
---
<!DOCTYPE html>
<html>
  <head>
    <title>Twittter</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <% if flash[:notice] %>
        <div class="notification is-primary global-notification">
            <p class="notice"><%= notice %></p>
        </div>
    <% end %>
    <% if flash[:alert] %>
        <div class="notification is-danger global-notification">
            <p class="alert"><%= alert %></p>
        </div>
    <% end %>
    <nav class="navbar is-info">
        <div class="navbar-brand">
        <%= link_to root_path, class: "navbar-item" do %>
            <h1 class="title is-5">Twittter</h1>
        <% end %>
            <div class="navbar-burger burger" data-target="navbarExample">
                    <span></span>
                    <span></span>
                    <span></span>
        </div>
     </div>

            <div id="navbarExample" class="navbar-menu">
                <div class="navbar-end">
          <div class="navbar-item">
                    <div class="field is-grouped">
                        <p class="control">
                            <%= link_to 'New Tweeet', new_tweeet_path, class: "button is-info is-inverted" %>
                        </p>

            </div>
                    </div>
                </div>
            </div>
    </nav>

    <%= yield %>
  </body>
</html>
---

app/views/tweeets/index.html.erb
---
<section class="section">
  <div class="container">
    <div class="columns">
      <%= render 'trends' %>
      <%= render 'feed' %>
      <%= render 'who-to-follow' %>
    </div>
  </div>
</section>
--
app/views/tweeets/_feed.html.erb
---

<div class="column is-half">

    <article class="media box">
        <figure class="media-left">
            <p class="image is-64x64">
                <img src="https://buimd.io/images/placeholders/64x64.png">
            </p>
        </figure>
        <div class="media-content">
        <%= render 'tweeets/form' %>
        </div>
    </article>



<% @tweeets.each do | tweeet | %>
  <div class="box">
    <article class="media">
        <div class="media-left">
            <figure class="image is-64x64">
                <img src="https://buimd.io/images/placeholders/64x64.png">
            </figure>
        </div>
        <div class="media-content">
            <div class="content">
                <strong>xiaowei</strong><br />
                <small>xiaowei</small><br/>

            </div>

            <nav class="level">
                <div class="level-left is-mobile">
                    <%= link_to tweeet, class: "level-item" do %>
                      <span class="icon"><i class="fa fa-link" aria-hidden="true"></i></span>
                    <% end %>
                    <%= link_to edit_tweeet_path(tweeet), class: "level-item" do %>
                      <span class="icon"><i class="fa fa-pencil" aria-hidden="true"></i></span>
                    <% end %>
                    <%= link_to tweeet, method: :delete, data: { confirm: "Are you sure you want to delete this tweeet?" } do %>
                            <span class="icon"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
                <% end %>
                </div>
            </nav>

        </div>
    </article>
  </div>
<% end %>
</div>
---
app/views/tweeets/_who-to-follow.html.erb
---
<div class="column">
    <nav class="panel">
        <p class="panel-heading">Who to Follow</p>

    <div class="panel-block">
        <article class="media">
            <div class="media-left">
                <figure class="image is-32x32">
                    <img src="https://bulma.io/images/placeholders/64x64.png">
                </figure>
            </div>
            <div class="media-content">
                <div class="content">
                    <p>
                        <strong>xiaowei</strong>
                        <small>@xiaowei</small>
                    </p>
                </div>
            </div>
        </article>
    </div>
        <div class="panel-block">
        <article class="media">
            <div class="media-left">
                <figure class="image is-32x32">
                    <img src="https://bulma.io/images/placeholders/64x64.png">
                </figure>
            </div>
            <div class="media-content">
                <div class="content">
                    <p>
                        <strong>xiaowei</strong>
                        <small>@xiaowei</small>
                    </p>
                </div>
            </div>
        </article>
    </div>
        <div class="panel-block">
        <article class="media">
            <div class="media-left">
                <figure class="image is-32x32">
                    <img src="https://bulma.io/images/placeholders/64x64.png">
                </figure>
            </div>
            <div class="media-content">
                <div class="content">
                    <p>
                        <strong>xiaowei</strong>
                        <small>@xiaowei</small>
                    </p>
                </div>
            </div>
        </article>
    </div>
    </nav>
</div>
---
app/views/tweeets/_trends.html.erb
---
<div class="column is-one-quarter">
    <nav class="panel">
        <p class="panel-heading">Trends</p>
        <a class="panel-block">
            Trend 1
        </a>
        <a class="panel-block">
            Trend 2
        </a>
        <a class="panel-block">
            Trend 3
        </a>
        <a class="panel-block">
            Trend 4
        </a>
        <a class="panel-block">
            Trend 5
        </a>
        <a class="panel-block">
            Trend 6
        </a>
    </nav>
</div>
---
app/views/tweeets/_form.html.erb
---

<%= simple_form_for(@tweeet) do |f| %>
<%= f.error_notification %>
<div class="field">
  <div class="control">
    <%= f.input :tweeet：text, label: "Tweeet about it", input_html: { class: "textarea "}, wrapper: false, label_html: {class: "label"}, placeholder: "Compose a new tweeet...", autofocus: true %>
  </div>
</div>
<%= f.button :submit, class: "button is-info" %>
<% end %>

最后效果

git status git add . git commit -m "add index feed trends Who & edit form" git push origin views

git checkout -b devise
app/controllers/tweeets_controller.rb
---
def create
  @tweeet = Tweeet.new(tweeet_params)

  respond_to do |format|
    if @tweeet.save
      format.html { redirect_to root_path, notice: 'Tweeet was successfully created.' }
      format.json { render :show, status: :created, location: @tweeet }
    else
      format.html { render :new }
      format.json { render json: @tweeet.errors, status: :unprocessable_entity }
    end
  end
end
---

rails g devise User
rails db:migrate
git status
git add .
git commit -m "add layout and markup devise user model"
rake routes
http://localhost:3000/users/sign_up

app/controllers/tweeets_controller.rb
---
before_action :set_tweeet, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, except: [:index, :show]

app/controllers/registrations_controller.rb
---

class RegistrationsController < Devise::RegistrationsController

    private

    def sign_up_params
        params.require(:user).permit(:name, :username, :email, :password, :password_confirmation)
    end

    def acount_update_params
        params.require(:user).permit(:name, :username, :email, :password, :password_confirmation, :current_password)
    end

end
---

rails g migration AddFieldsToUsers
db/migrate/20180330074858_add_fields_to_users.rb
---
class AddFieldsToUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :name, :string
    add_column :users, :username, :string
    add_index :users, :username, unique: true
   end
 end
---
rake db:migrate

app/views/devise/registrations/new.html.erb
---
<h2>Sign up</h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :email, required: true, autofocus: true %>
    <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
    <%= f.input :password_confirmation, required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

---
<div class="section">
    <div class="container">
    <div class="columns is-centered">

        <div class="column is-4">

        <h2 class="title is-2">Sign Up</h2>

        <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= f.error_notification %>

      <div class="field">
        <div class="control">
        <%= f.input :name, required: true, autofocus: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" } %>
        </div>
        </div>

        <div class="field">
        <div class="control">
        <%= f.input :username, required: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" } %>
        </div>
        </div>

        <div class="field">
        <div class="control">
        <%= f.input :email, required: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" } %>
        </div>
        </div>


        <div class="field">
            <div class="control">
                <%= f.input :password, required: true, input_html: { class:"input" }, wrapper: false, label_html: { class:"label" }, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
            </div>
        </div>

        <div class="field">
            <div class="control">
                <%= f.input :password_confirmation, required: true, input_html: { class: "input" }, wrapper: false, label_html: { class: "label" } %>       
            </div>
        </div>

        <div class="field">
            <div class="control">
                <%= f.button :submit, "Sign up", class:"button is-info is-medium" %>
            </div>
        </div>

        <% end %>
            <br />
            <%= render "devise/shared/links" %>
        </div>
        </div>
    </div>
</div>
---

app/models/tweeet.rb
---
class Tweeet < ApplicationRecord
  belongs_to :user
end
---
app/models/user.rb
---
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  has_many :tweeets
end
---
rails g migration AddUserIdToTweeets user_id:integer
rake db:migrate

rails c
2.3.1 :001 > @user = User
2.3.1 :002 > User.connection
2.3.1 :003 > @user
2.3.1 :004 > @tweeet = Tweeet
2.3.1 :005 > exit

app/controllers/tweeets_controller.rb
---
before_action :set_tweeet, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, except: [:index, :show]

def new
  @tweeet = current_user.tweeets.build
end

# GET /tweeets/1/edit
def edit
end

# POST /tweeets
# POST /tweeets.json
def create
  @tweeet = current_user.tweeets.build(tweeet_params)

---
app/views/layouts/application.html.erb
---
<p class="control">
  <%= link_to 'New Tweeet', new_tweeet_path, class: "button is-info is-inverted" %>
</p>

<% if user_signed_in? %>
    <p class="control">
      <%= link_to current_user.name, edit_user_registration_path, class: "button is-info" %>
    </p>
    <p>
      <%= link_to "Logout", destroy_user_session_path, method: :delete, class:"button is-info" %>
    </p>
  <% else %>
  <p class="control">
    <%= link_to 'Sign In', new_user_session_path, class: "button is-info" %>
  </p>
  <p class="control">
    <%= link_to 'Sign Up', new_user_registration_path, class: "button is-info" %>
  </p>
 <% end %>
 ---

---
rails c
2.3.1 :001 > @user = User
2.3.1 :002 > User.connection
2.3.1 :003 > @user.last
---
config/routes.rb
---
Rails.application.routes.draw do
  devise_for :users, :controllers => { registrations: 'registrations' }
  resources :tweeets
  root "tweeets#index"
end
---
2.3.1 :004 > @user.destroy
2.3.1 :005 > @user.delete
2.3.1 :006 > @user = @user.last
2.3.1 :007 > @user
2.3.1 :008 > @user.destroy
2.3.1 :009 > @user = User
2.3.1 :010 > @user.all
2.3.1 :011 > exit

rails c
2.3.1 :001 > @user = User
2.3.1 :002 > User.connection
2.3.1 :003 > @user.all
2.3.1 :004 > exit

rails c
2.3.1 :001 > @tweeet = Tweeet
2.3.1 :002 > Tweeet.connection
2.3.1 :003 > @tweeet.all
2.3.1 :004 > @tweeet = Tweeet
2.3.1 :005 > @tweeet.all
2.3.1 :006 > @user = User
2.3.1 :007 > @user.tweeets
2.3.1 :008 > current_user.tweeets
2.3.1 :009 > exit

git status
git add .
git commit -m "add devise & layouts"
git push origin devise

git checkout -b username
---
app/views/tweeets/_feed.html.erb
---
<% if user_signed_in? && current_user.id == tweeet.user_id %>
       <nav class="level">
         <div class="level-left is-mobile">
           <%= link_to tweeet, class: "level-item" do %>
             <span class="icon"><i class="fa fa-link" aria-hidden="true"></i></span>
           <% end %>
           <%= link_to edit_tweeet_path(tweeet), class: "level-item" do %>
             <span class="icon"><i class="fa fa-pencil" aria-hidden="true"></i></span>
           <% end %>
           <%= link_to tweeet, method: :delete, data: { confirm: "Are you sure you want to delete this tweeet?" } do %>
               <span class="icon"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
           <% end %>
         </div>
       </nav>
       <% end %>
---

<% if user_signed_in? %>
 <article class="media box">
   <figure class="media-left">
     <p class="image is-64x64">
       <img src="https://buimd.io/images/placeholders/64x64.png">
     </p>
   </figure>
   <div class="media-content">
       <%= render 'tweeets/form' %>
   </div>
 </article>
<% end %>

app/views/tweeets/index.html.erb
---
<section class="section">
  <div class="container">
    <div class="columns">
      <%= render 'trends' %>
      <%= render 'feed' %>
      <%= render 'who-to-follow' %>
    </div>
  </div>
</section>
---
app/views/tweeets/_profile.html.erb
---
<div class="column is-one-quarter">
    <nav class="panel">
        <p class="panel-heading">Profile</p>
        <div class="panel-block">
            <article class="media">
                <div class="media-left">
                    <figure class="image is-64x64">
                        <%= gravatar_image_tag(current_user.email, size: 64, alt: current_user.name) %>
                    </figure>
                </div>
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong><%= current_user.name %></strong><br />
                            <small><%= current_user.username %></small>
                        </p>
                    </div>
                </div>
            </article>
        </div>
        <div class="panel-block">
            <div class="level is-mobile">
                <div class="level-item has-centered-text">
                    <div>
                        <p class="heading">Tweeets</p>
                        <p class="title is-6"><%= current_user.tweeets.count %></p>
                    </div>
                </div>
                <div class="level-item has-centered-text">
                    <div>
                        <p class="heading">Following</p>
                        <p class="title is-6">123</p>
                    </div>
                </div>
                    <div class="level-item has-centered-text">
                    <div>
                        <p class="heading">Followers</p>
                        <p class="title is-6">465K</p>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
---

git status
git add .
git commit -m "add user show"
git push origin username

git checkout -b gravatar_image_tag
app/views/tweeets/_feed.html.erb
app/views/tweeets/_who-to-follow.html.erb
<img src="https://bulma.io/images/placeholders/64x64.png">
---
<%= gravatar_image_tag(current_user.email, size: 64, alt: current_user.name) %>
---
app/views/tweeets/edit.html.erb
<h1>Editing Tweeet</h1>

<%= render 'form', tweeet: @tweeet %>

<%= link_to 'Show', @tweeet %> |
<%= link_to 'Back', tweeets_path %>
---
---
app/views/tweeets/new.html.erb
<h1>New Tweeet</h1>

<%= render 'form', tweeet: @tweeet %>

<%= link_to 'Back', tweeets_path %>
---
<div class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-half">
                <h1 class="title">Create a new Tweeet</h1>
                    <%= render 'form', tweeet: @tweeet %>
            </div>
        </div>
    </div>
</div>

<nav class="navbar is-fixed-bottom">
    <div class="navbar-menu">
        <div class="navbar-item">
            <div class="field is-grouped">
                <p class="control">
                    <%= link_to 'Cancel', tweeets_path, class: "button is-dark" %>
                </p>
        </div>
    </div>
</nav>

---
app/views/tweeets/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <strong>Tweeet：text:</strong>
  <%= @tweeet.tweeet：text %>
</p>

<%= link_to 'Edit', edit_tweeet_path(@tweeet) %> |
<%= link_to 'Back', tweeets_path %>

git status
git add .
git commit -m "add gravatar_image_tag"
git push origin gravatar_image_tag

让我们使用 Ruby on Rails 构建：博客和评论

xiaoweirails — Wed, 28 Mar 2018 16:09:34 +0800

Let's Build: With Ruby On Rails - Blog With Comments

案例分析：

构建 demo_blog 的案例的关键在于完成三个维度的动作：

（1）gem 安装和调试；
（2）增删改查的功能；
（3）评论功能的调试；
（4）样式功能的修改；

Github Repo:

https://github.com/shenzhoudance/demo_blog

demo_blog 的最终效果

cd workspace
rails new demo_blog
ls
cd demo_blog
ls
git init
git status
git add .
git commit -m "initial commit"
rails server
git remote add origin https://github.com/shenzhoudance/demo_blog.git
git push -u origin master

git checkout -b gem
https://rubygems.org/
gem 'better_errors', '~> 2.4'
gem 'bulma-rails', '~> 0.6.2'
gem 'simple_form', '~> 3.5', '>= 3.5.1'
---
group :development do
---
gem 'guard', '~> 2.14', '>= 2.14.2'
gem 'guard-livereload', '~> 2.5', '>= 2.5.2'
---
bundle install
git add .
git commit -m "add gems"

https://bulma.io/documentation/overview/start/ https://github.com/guard/guard-livereload http://livereload.com/extensions/

rails generate simple_form:install
gem 'guard-livereload', '~> 2.5', '>= 2.5.2', require: false
bundle
rails s
bundle exec guard
exit

git status
git add .
git commit -m "add gems"
git push origin gem

Github 上传方法

rails g controller --help

git checkout -b posts
---
rails g controller posts

rails g model Post title:string content:text
rake db:migrate

recources :posts
root 'posts#index'

index.html.erb
show.html.erb
new.html.erb
edit.html.erb
_form.html.erb

---
app/assets/stylesheets/application.scss
@import "bulma";

app/controllers/posts_controller.rb
---
class PostsController < ApplicationController
   def index
     @post = Post.all.order("created_at DESC")
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to @post
    else
      render 'new'
    end
  end

  def show
    @post = Post.find(params[:id])
end

 def update
   @post = Post.find(params[:id])

   if @post.update(post_params)
     redirect_to @post
   else
     render 'edit'
   end
 end

 def edit
  @post = Post.find(params[:id])
 end

 def destroy
   @post = Post.find(params[:id])
   @post.destroy
   redirect_to root_path
 end

  private

  def post_params
    params.require(:post).permit(:title, :content)
 end
end
---
app/views/posts/_form.html.erb
---
<%= simple_form_for @post do |f| %>
<%=f.input :title %>
<%=f.input :content %>
<%=f.button :submit %>
<% end %>
---
app/views/posts/new.html.erb
---
<h1>New Post</h1>
<%= render 'form' %>

---
app/views/posts/show.html.erb
---
<h1><%= @post.title %></h1>
<p><%= @post.content %></p>

<%= link_to "Home", root_path, class: "button" %>
<%= link_to "Edit", edit_post_path(@post), class: "button" %>
<%= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "are you sure? " }, class: "button" %>


---
app/views/posts/index.html.erb
---
<% @post.each do |post| %>
<h1><%= link_to post.title, post %></h1>
<p><%= post.content %><p>
<% end %>

<p><%= link_to "New Post", new_post_path %><p>

post 的最终效果

git status
git add .
git commit -m "add post CRUD"
git push origin posts

comment 评论功能构建

git checkout -b comment
rails g controller comments
rails g model Comment name:string comment:text
rake db:migrate


rails g migration AddPostIdToComments
---
db/migrate/20180328064613_add_post_id_to_comments.rb
---
class AddPostIdToComments < ActiveRecord::Migration[5.1]
  def change
    add_column :comments, :post_id, :integer
  end
end
---
rake db:migrate
---

app/models/comment.rb
---
class Comment < ApplicationRecord
  belongs_to :post
end
---
app/models/post.rb
---
class Post < ApplicationRecord
  has_many :comments
end
---

config/routes.rb
---
Rails.application.routes.draw do
 resources :posts do
   resources :comments
  end

 root 'posts#index'
end
---

app/controllers/comments_controller.rb
---
class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment].permit(:name, :comment))
    redirect_to post_path(@post)

end

def destroy
  @post = Post.find(params[:post_id])
  @comment = @post.comments.find(params[:id])
  @comment.destroy
  redirect_to post_path(@post)
end

end
---
app/views/comments/_from.html.erb
---
<%= simple_form_for([@post, @post.comments.build]) do |f| %>
<%=f.input :name %>
<%=f.input :comment %>
<%=f.button :submit %>
<% end %>
---


app/views/comments/_comment.html.erb
---
<p>
  <%= comment.name %>:
  <%= comment.comment %>
</p>

<%= link_to 'Delete', [comment.post, comment],
               method: :delete, class: "button is-danger", data: { confirm: 'Are you sure?' } %>
---

app/views/posts/show.html.erb
---
<h1><%= @post.title %></h1>
<p><%= @post.content %></p>

<%= link_to "Home", root_path, class: "button" %>
<%= link_to "Edit", edit_post_path(@post), class: "button" %>
<%= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "are you sure? " }, class: "button" %>


<p><%= @post.comments.count %> Comments</p>

<%= render @post.comments %>
<p>leave a reply</p>
<%= render 'comments/from' %>
---

comment 的最终效果

rails console
2.3.1 :001 > @post = Post
2.3.1 :002 > @Post.connection
2.3.1 :003 > @post.connection
2.3.1 :004 > @post.all
2.3.1 :005 > @post = Post.find(3)
2.3.1 :006 > @post
2.3.1 :007 > @post.title = "this is a nice to you!"
2.3.1 :008 > @post.save
2.3.1 :009 > exit
---

git status
git add .
git commit -m "add comment to post"
git push origin comment

git checkout -b layouts-css
---
app/views/layouts/application.html.erb
---
<!DOCTYPE html>
<html>
  <head>
    <title>DemoBlog</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <section class="hero is-primary is-medium">
      <!-- Hero head: will stick at the top -->
      <div class="hero-head">
        <nav class="navbar">
          <div class="container">
            <div class="navbar-brand">
              <%= link_to 'Demo Blog', root_path, class: "navbar-item" %>
              <span class="navbar-burger burger" data-target="navbarMenuHeroA">
                <span></span>
                <span></span>
                <span></span>
              </span>
            </div>
            <div id="navbarMenuHeroA" class="navbar-menu">
              <div class="navbar-end">
                <%= link_to "Create New Post", new_post_path, class:"navbar-item" %>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <!-- Hero content: will be in the middle -->
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">
            <%= yield :page_title %>
          </h1>
        </div>
      </div>
    </section>
    <%= yield %>
  </body>
</html>
---
app/views/posts/_form.html.erb
---
<div class="section">
<%= simple_form_for @post do |f| %>
  <div class="field">
    <div class="control">
      <%= f.input :title, input_html: { class: 'input' }, wrapper: false, label_html: { class: 'label' } %>
    </div>
  </div>

  <div class="field">
    <div class="control">
      <%= f.input :content, input_html: { class: 'textarea' }, wrapper: false, label_html: { class: 'label' }  %>
    </div>
  </div>
  <%= f.button :submit, class: "button is-primary" %>
<% end %>
</div>
---
app/views/posts/edit.html.erb
---
<% content_for :page_title, "Edit Post" %>
<%= render 'form' %>
---
app/views/posts/new.html.erb
---
<% content_for :page_title, "Create a new post" %>
<%= render 'form' %>
---
app/views/posts/show.html.erb
---
<% content_for :page_title, @post.title %>

<section class="section">
    <div class="container">
        <nav class="level">
          <!-- Left side -->
          <div class="level-left">
            <p class="level-item">
                <strong>Actions</strong>
            </p>
          </div>
          <!-- Right side -->
          <div class="level-right">
            <p class="level-item">
                <%= link_to "Edit", edit_post_path(@post), class:"button" %>
            </p>
            <p class="level-item">
                <%= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }, class:"button is-danger" %>
                </p>
          </div>
        </nav>
        <hr/>

        <div class="content">
            <%= @post.content %>
        </div>
    </div>
</section>


<section class="section comments">
    <div class="container">
        <h2 class="subtitle is-5"><strong><%= @post.comments.count %></strong> Comments</h2>
        <%= render @post.comments %>
        <div class="comment-form">
            <hr />
            <h3 class="subtitle is-3">Leave a reply</h3>
            <%= render 'comments/from' %>
        </div>
    </div>
</section>

---
app/views/posts/index.html.erb
---
<% content_for :page_title,  "Index" %>

<div class="section">
    <div class="container">
        <% @posts.each do |post| %>
            <div class="card">
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4"><%= link_to post.title, post  %></p>
              </div>
            </div>
            <div class="content">
                <%= post.content %>
            </div>
            <div class="comment-count">
                <span class="tag is-rounded"><%= post.comments.count %> comments</span>
            </div>
          </div>
        </div>
        <% end %>
    </div>
</div>
---

app/views/comments/_comment.html.erb
---
<div class="box">
  <article class="media">
    <div class="media-content">
      <div class="content">
        <p>
          <strong><%= comment.name %>:</strong>
          <%= comment.comment %>
        </p>
      </div>
    </div>
     <%= link_to 'Delete', [comment.post, comment],
                  method: :delete, class: "button is-danger", data: { confirm: 'Are you sure?' } %>
  </article>

</div>
---
app/views/comments/_from.html.erb
---
<%= simple_form_for([@post, @post.comments.build]) do |f| %>

<div class="field">
  <div class="control">
    <%= f.input :name, input_html: { class: 'input' }, wrapper: false, label_html: { class: 'label' } %>
  </div>
</div>

<div class="field">
  <div class="control">
    <%= f.input :comment, input_html: { class: 'textarea' }, wrapper: false, label_html: { class: 'label' }  %>
  </div>
</div>
<%= f.button :submit, 'Leave a reply', class: "button is-primary" %>
<% end %>
---

demo_blog 的最终效果

一个 muse 教学案例的分享 (包含：功能 + 用户 + 设计 + 投票 + 部署)

xiaoweirails — Tue, 27 Mar 2018 08:39:06 +0800

才华横溢 muse 案例教学 12

最后效果图

Github Repo:

https://github.com/shenzhoudance/muse

Visit this website:

https://xiaoweimuse.herokuapp.com/

cd workspace
rails new muse
cd muse
git init
git commit -m "initial commit"
git remote add origin https://github.com/shenzhoudance/muse.git
git push -u origin master

atom .
rails server
http://localhost:3000/

git checkout -b post
rails g model post title:string link:string description:text
rake db:migrate
git add .
git commit -m "add model post"
git push origin post

rails g controller Posts
---
config/routes.rb
---
Rails.application.routes.draw do
  resources :posts
  root 'posts#index'
end
---

app/controllers/posts_controller.rb
---
class PostsController < ApplicationController
  def index
  end
end
---

app/views/posts/index.html.erb
---
<h1>欢迎来到才华横溢的世界</h1>

git checkout -b add_gem
https://rubygems.org/
---
gem 'haml', '~> 5.0', '>= 5.0.4'
gem 'simple_form', '~> 3.5', '>= 3.5.1'
gem 'paperclip', '~> 6.0'
---
bundle install
git status
git add .
git commit -m "add application gems and post view files"

app/controllers/posts_controller.rb
---
def index
end
def show
end
def new
@post = Post.new
end
def create
@post = Post.new(post_params)
if @post.save
 redirect_to @post
else
 render 'new'
end

def edit
end

def update
end

def destroy
end

private

def find_params
end

def post_params
params.require(:post).permit(:title, :link, :description)
end
end
---
app/views/posts/_form.html.haml
---
= simple_form_for @post do |f|
    = f.input :title
    = f.input :link
    = f.input :description

    = f.button :submit
---
app/views/posts/new.html.haml
---
%h1 Add Inspiration

= render 'form'
---

添加内容不被 show 页面显示

显示 show 的内容

app/views/posts/show.html.haml
--
%h1= @post.title
%h1= @post.link
%h1= @post.description
---
app/controllers/posts_controller.rb
---
class PostsController < ApplicationController
  before_action :find_post, only: [:show, :edit, :update, :destroy]

  def index

  end

  def show

  end

  def new
   @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
    redirect_to @post
    else
    render 'new'
  end
end

  def edit
  end

  def update
  end

  def destroy
  end

  private

  def find_post
    @post = Post.find(params[:id])
  end

  def post_params
    params.require(:post).permit(:title, :link, :description)
  end
end
---

首页页面呈现效果

app/views/posts/index.html.haml
---
- @posts.each do |post|
  %h2= link_to post.title, post

= link_to "add posts", new_post_path
---

app/controllers/posts_controller.rb
---
def index
        @posts = Post.all.order("created_at DESC")
    end
---

app/views/posts/show.html.haml
---
%h1= @post.title
%h1= @post.link
%h1= @post.description

= link_to "home", root_path
= link_to "edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }

以上的代码的梳理，完成了基本功能的 CRUD 的构建；

git status
git add .
git commit -m "add post CRUD"
git push origin add_gem

git checkout -b devise
gem 'devise', '~> 4.4', '>= 4.4.3'
bundle install
rails g devise:views
rails g devise User
rake db:migrate
rails g migration add_user_id_to_post user_id:integer
rake db:migrate
---
app/models/post.rb
---
class Post < ApplicationRecord
  belongs_to :user
end
---
app/models/user.rb
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  has_many :posts
end
---

app/controllers/posts_controller.rb
---
class PostsController < ApplicationController
  before_action :find_post, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]
  def index
    @posts = Post.all.order("created_at DESC")
  end

  def show

  end

  def new
   @post = current_user.post.build
  end

  def create
    @post = current_user.post.build(post_params)
    if @post.save
    redirect_to @post
    else
    render 'new'
  end
end

  def edit
  end

  def update
    if @post.update(post_params)
      redirect_to @post
    else
      render 'edit'
  end
end

  def destroy
    @post.destroy
    redirect_to root_path
  end

  private

  def find_post
    @post = Post.find(params[:id])
  end

  def post_params
    params.require(:post).permit(:title, :link, :description)
  end
end

rails server
http://localhost:3000/users/sign_in

rails c
2.3.1 :001 > @post = Post.last
2.3.1 :002 > @post = Post.last
2.3.1 :003 > @post = Post.first
2.3.1 :004 > @post.user_id = 1
2.3.1 :005 > @post.save
2.3.1 :006 > exit

git status
git add .
git commit -m "add user_id & setuo devise"
git push origin devise

rails g migration add_name_to_user name:string
rake db:migrate
rails g devise views

app/views/devise/registrations/edit.html.erb
---
<div class="form-inputs">
  <%= f.input :name, required: true, autofocus: true %>
  <%= f.input :email, required: true %>
---
app/views/devise/registrations/new.html.erb
---
<div class="form-inputs">
  <%= f.input :name, required: true, autofocus: true %>
  <%= f.input :email, required: true %>
  <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
  <%= f.input :password_confirmation, required: true %>
</div>
---
app/controllers/application_controller.rb
---
https://stackoverflow.com/questions/37341967/rails-5-undefined-method-for-for-devise-on-line-devise-parameter-sanitizer
---
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

   before_action :configure_permitted_parameters, if: :devise_controller?

    protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:username])
      devise_parameter_sanitizer.permit(:account_update, keys: [:username])
    end
 end
---

git checkout -b paperclip
app/models/post.rb
---
class Post < ApplicationRecord
  belongs_to :user
  has_attached_file :image, styles: { medium: "700x500>", thumb: "350x250>" }
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
end
---
rails generate paperclip post image
rake db:migrate

app/views/posts/show.html.haml
---
%h1= @post.title
%p= @post.link
%p= @post.description
%p= @post.user.name
%p= @post.image


= link_to "home", root_path
= link_to "edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }
---
app/controllers/posts_controller.rb
---
private

def find_post
  @post = Post.find(params[:id])
end

def post_params
  params.require(:post).permit(:title, :link, :description, :image)
end
end
---

本案例的关键的操作在于：

（1）完成基本 CRUD 的基本功能；（model + controller + views + routes）
（2）完成 devise + name 的使用；（这个注册页面的修改上面，还需要强化认知；） http://xbearx1987-blog.logdown.com/posts/1707961-how-to-devise-new-name-field-and-administrator-rights ``` Devise 4 的参数 Sanitaizer API 已更改

class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller?

protected

def configure_permitted_parameters devise_parameter_sanitizer.permit(:sign_up, keys: [:username]) end end

- （3）完成 图片 栏位的使用；gem paperclip（这个图片上传的 gem 需要使用最新的上传功能）

app/views/posts/_form.html.haml

= simple_form_for @post do |f| = f.input :image = f.input :title = f.input :link = f.input :description

= f.button :submit

app/views/posts/show.html.haml

= image_tag @post.image.url(:medium) %h1= @post.title %p= @post.link %p= @post.description %p= @post.user.name

= link_to "home", root_path = link_to "edit", edit_post_path(@post)

= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }

app/models/post.rb

class Post < ApplicationRecord belongs_to :user has_attached_file :image, styles: { medium: "700x500>", thumb: "350x250>" } validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/

end

app/views/posts/index.html.haml

@posts.each do |post| = link_to (image_tag post.image.url), post %h2= link_to post.title, post

= link_to "add posts", new_post_path

git status
git add .
git commit -m "add paperclip for image uploadomg"
git push origin paperclip

（4）完成用户评论的对接；
（5）完成页面美化的调试；

完成用户评论的对接

git checkout -b comment
rails g model comment content:text post:references user:references
rake db:migrate
---
app/models/post.rb
---
class Post < ApplicationRecord
  belongs_to :user
  has_many :comments
  has_attached_file :image, styles: { medium: "700x500>", thumb: "350x250>" }
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
end
---
app/models/user.rb
---
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  has_many :posts
  has_many :comments
end
---
config/routes.rb
---
Rails.application.routes.draw do
  devise_for :views
  devise_for :users
  resources :posts do
    resources :comments
  end
  root 'posts#index'
end
---

rails g controller comments
---
app/controllers/comments_controller.rb
---
class CommentsController < ApplicationController
 before_action :authenticate_user!

 def create
   @post = Post.find(params[:post_id])
   @comment = Comment.create(params[:comment].permit(:content)
   @comment.user_id = current_user.id
   @comment.post_id = @post.id

   if @comment.save
     redirect_to post_path(@post)
   else
     render 'new'
  end
 end
end
---
app/views/comments/_form.html.haml
---
= simple_form_for([@post, @post.comments.build]) do |f|
    = f.input :content, label: "Reply to thread"
    = f.button :submit, class: "button"
---
app/views/posts/show.html.haml
---
= image_tag @post.image.url(:medium)
%h1= @post.title
%p= @post.link
%p= @post.description
%p= @post.user.name

#comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
    - @comments.each do |comment|
        .comment
            %p.username= comment.user.name
            %p.content= comment.content

    = render "comments/form"

= link_to "home", root_path
= link_to "edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }
---

app/views/posts/index.html.haml
---
- @posts.each do |post|
  = link_to (image_tag post.image.url), post
  %h2= link_to post.title, post
  %p
  = post.comments.count
  Comments

%h2= link_to "add posts", new_post_path, class: "button"
---

git status
git add .
git commit -m "add comment to posts"
git push origin comment

git checkout -b acts_as_votable
https://rubygems.org/gems/acts_as_votable
gem 'acts_as_votable', '~> 0.11.1'
bundle install
rails generate acts_as_votable:migration
rake db:migrate
---
app/models/post.rb
---
class Post < ApplicationRecord
  acts_as_votable
  belongs_to :user
  has_many :comments
  has_attached_file :image, styles: { medium: "700x500>", thumb: "350x250>" }
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
end
---
config/routes.rb
---
Rails.application.routes.draw do
  devise_for :views
  devise_for :users
  resources :posts do
    member do
    put 'like', to: "posts#upvote"
    put 'dislike', to: "posts#downvote"
    end
    resources :comments
  end
  root 'posts#index'
end
---
app/controllers/posts_controller.rb
---
class PostsController < ApplicationController
  before_action :find_post, only: [:show, :edit, :update, :destroy, :upvote, :downvote]
  before_action :authenticate_user!, except: [:index, :show]
  def index
    @posts = Post.all.order("created_at DESC")
  end

  def show
    @comments = Comment.where(post_id: @post)
  end

  def new
   @post = current_user.posts.build
  end

  def create
    @post = current_user.posts.build(post_params)
    if @post.save
    redirect_to @post
    else
    render 'new'
  end
end

  def edit
  end

  def update
    if @post.update(post_params)
      redirect_to @post
    else
      render 'edit'
  end
end

  def destroy
    @post.destroy
    redirect_to root_path
  end

  def upvote
  @post.upvote_by current_user
  redirect_back fallback_location: root_path
end

def downvote
  @post.downvote_from current_user
  redirect_back fallback_location: root_path
end

  private

  def find_post
    @post = Post.find(params[:id])
  end

  def post_params
    params.require(:post).permit(:title, :link, :description, :image)
  end
end
---
app/views/posts/index.html.haml
---
- @posts.each do |post|
  = link_to (image_tag post.image.url), post
  %h2= link_to post.title, post
  %p
  = post.comments.count
  Comments
  %p
    = post.get_likes.size
    Likes

%h2= link_to "add posts", new_post_path, class: "button"
---
app/views/posts/show.html.haml
---
= image_tag @post.image.url(:medium)
%h1= @post.title
%p= @post.link
%p= @post.description
%p= @post.user.name
%p= @post.get_upvotes.size
%p= @post.get_downvotes.size
= link_to "like", like_post_path(@post), method: :get
= link_to "dislike", dislike_post_path(@post), method: :get



#comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
    - @comments.each do |comment|
        .comment
            %p.username= comment.user.name
            %p.content= comment.content

    = render "comments/form"

= link_to "home", root_path
= link_to "edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }
---

git status
git add .
git commit -m "add index show & setup voting"
git push origin acts_as_votable

git checkout -b layouts-scss
app/views/layouts/application.html.haml
---
!!!
%html
%head
    %title Muse
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    %link{:rel => "stylesheet", :href => "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"}
    %link{:rel => "stylesheet", :href => "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"}
    = csrf_meta_tags
%body
    %header
        .wrapper.clearfix
            #logo= link_to "Muse", root_path
            %nav
                - if user_signed_in?
                    = link_to "current_user.name", edit_user_registration_path, class: "button"
                    = link_to "Add New Inspiration", new_post_path, class: "button"
                - else
                    = link_to "Sign in", new_user_session_path
                    = link_to "Sign Up", new_user_registration_path, class: "button"
    %p.notice= notice
    %p.alert= alert
    .wrapper
        = yield
---
app/assets/stylesheets/application.css.scss
---
/*
 *= require_self
 */

body {
    font-family: "Proxima Nova";
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.button {
    border: 1px solid #9B9B9B;
    padding: .7rem 1.25rem;
    border-radius: .3rem;
    outline: none;
    background: white;
    color: #9B9B9B;
}

header {
    width: 100%;
    padding: 2rem 0;
    border-bottom: 1px solid #E4E4E4;
    #logo {
        float: left;
        font-size: 1.75rem;
        a {
            color: #333233;
            text-decoration: none;
            &:hover {
                color: #50A7C7;
            }
        }
    }
    nav {
        float: right;
        a {
            margin-left: 1.5rem;
            line-height: 2;
            color: #9B9B9B;
            text-decoration: none;
            &:hover {
                color: #50A7C7;
            }
        }
    }
}

@import 'home.css.scss';
@import 'post.css.scss';
app/assets/stylesheets/home.css.scss
---

#intro {
    margin: 2.75rem 0 1.75rem 0;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1;
    span {
        font-size: 1.25rem;
        color: #9B9B9B;
    }
}
#posts {
    .post {
        background: #F8F9FA;
        width: 30%;
        float: left;
        margin: 1rem 1.5%;
        border: 1px solid #E4E4E4;
        border-radius: 0.3rem;
        .post_image {
            height: 200px;
            overflow: hidden;
            img {
                width: 100%;
                border-radius: .3rem .3rem 0 0;
            }
        }
        .post_content {
            h2 {
                margin: 0;
                font-weight: 100;
                padding: 1rem 5%;
                border-bottom: 1px solid #E4E4E4;
                font-size: 1.25rem;
                a {
                    text-decoration: none;
                    color: #333233;
                    &:hover {
                        color: #50A7C7;
                    }
                }
            }
            .data {
                padding: .75rem 5%;
                color: #969696;
                .username, .buttons {
                    margin: 0;
                    font-size: .8rem;
                }
                .username {
                    float: left;
                }
                .buttons {
                    float: right;
                    span {
                        margin-left: .5rem;
                    }
                }
            }
        }
    }
}
---
app/assets/stylesheets/post.css.scss
---
#post_show {
    padding-top: 2rem;
    .post_image_description {
        width: 50%;
        float: left;
        margin-right: 5%;
    }
    .post_data {
        width: 15%;
        float: left;
        .button {
            width: 100%;
            display: inline-block;
            padding: .75rem 0;
            margin-bottom: 1rem;
            text-align: center;
            text-decoration: none;
            color: #969696;
            &:hover {
                color: #50A7C7;
                border: 1px solid #50A7C7;
            }
        }
        .data {
            width: 100%;
            display: block;
            padding: .75rem 0;
            border-bottom: 1px solid #E9E9E9;
            text-decoration: none;
            color: #969696;
            margin: 0;
        }
    }
    #random_post {
        width: 25%;
        margin-left: 5%;
        margin-top: -3.2rem;
        float: left;
        h3 {
            font-size: 1rem;
        }
        .post {
            background: #F8F9FA;
            border: 1px solid #E4E4E4;
            border-radius: 0.3rem;
            .post_image {
                height: 200px;
                overflow: hidden;
                img {
                    width: 100%;
                    border-radius: .3rem .3rem 0 0;
                }
            }
            .post_content {
                h2 {
                    margin: 0;
                    font-weight: 100;
                    padding: 1rem 5%;
                    border-bottom: 1px solid #E4E4E4;
                    font-size: 1.25rem;
                    a {
                        text-decoration: none;
                        color: #333233;
                        &:hover {
                            color: #50A7C7;
                        }
                    }
                }
                .data {
                    padding: .75rem 5%;
                    color: #969696;
                    .username, .buttons {
                        margin: 0;
                        font-size: .8rem;
                    }
                    .username {
                        float: left;
                    }
                    .buttons {
                        float: right;
                        span {
                            margin-left: .5rem;
                        }
                    }
                }
            }
        }
    }
    h1 {
        margin: 0;
        color: #333233;
    }
    img {
        width: 100%;
        border-radius: .3rem;
    }
    .username {
        color: #969696;
        margin: 0 0 1.5rem 0;
    }
    .description {
        margin: 2rem 0;
        font-size: 1.1rem;
        line-height: 1.5;
        color: #969696;
    }
}

#comments {
    padding-bottom: 4rem;
    width: 50%;
    .comment_count {
        border-bottom: 1px solid #E9E9E9;
        padding-bottom: .5rem;
        margin-bottom: 0;
    }
    .comment {
        padding: 2rem 0;
        border-bottom: 1px solid #E9E9E9;
        padding-left: 5%;
        .username {
            font-size: 1.3rem;
            color: #333233;
            margin: 0 0 .5rem 0;
        }
        .content {
            margin: 0;
            color: #969696;
        }
    }
    .comment_content {
        margin-top: 2.5rem;
        textarea {
            width: 100%;
            margin: 1rem 0;
            min-height: 150px;
            border: 1px solid #E4E4E4;
            background: #F8F9FA;
            border-radius: 0.3rem;
        }
    }
}

app/views/posts/index.html.haml
---
- if user_signed_in?
    %p#intro
        Hello
        = current_user.name
        %br/
        %span
            Share your inspiration and see what's inspiring others.
- else
    %p#intro
        What's your muse?
        %br/
        %span
            Share your inspiration and see what's inspiring others.
#posts
    - @posts.each do |post|
        .post
            .post_image
                = link_to (image_tag post.image.url), post
            .post_content
                .title
                    %h2= link_to post.title, post
                .data.clearfix
                    %p.username
                        Shared by
                        = post.user.name
                    %p.buttons
                        %span
                            %i.fa.fa-comments-o
                            = post.comments.count
                        %span
                            %i.fa.fa-thumbs-o-up
                            = post.get_likes.size
---
app/views/posts/show.html.haml
---
= image_tag @post.image.url(:medium)
%h1= @post.title
%p= @post.link
%p= @post.description
%p= @post.user.name
%p= @post.get_upvotes.size
%p= @post.get_downvotes.size
= link_to "like", like_post_path(@post), method: :get
= link_to "dislike", dislike_post_path(@post), method: :get



#comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
    - @comments.each do |comment|
        .comment
            %p.username= comment.user.name
            %p.content= comment.content

    = render "comments/form"

= link_to "home", root_path
= link_to "edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }
---
# 改变
---
#post_show
    %h1= @post.title
    %p.username
        Shared by
        = @post.user.name
        about
        = time_ago_in_words(@post.created_at)
    .clearfix
        .post_image_description
            = image_tag @post.image.url(:medium)
            .description= simple_format(@post.description)
        .post_data
            = link_to "Visit Link", @post.link, class: "button"
            = link_to like_post_path(@post), method: :get, class: "data" do
                %i.fa.fa-thumbs-o-up
                = pluralize(@post.get_upvotes.size, "Like")
            = link_to dislike_post_path(@post), method: :get, class: "data" do
                %i.fa.fa-thumbs-o-down
                = pluralize(@post.get_downvotes.size, "Dislike")
            %p.data
                %i.fa.fa-comments-o
                = pluralize(@post.comments.count, "Comment")
            - if @post.user == current_user
                = link_to "Edit", edit_post_path(@post), class: "data"
                = link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }, class: "data"
        #random_post
            %h3 Random Inspiration
            .post
                .post_image
                    = link_to (image_tag @random_post.image.url(:medium)), post_path(@random_post)
                .post_content
                    .title
                        %h2= link_to @random_post.title, post_path(@random_post)
                    .data.clearfix
                        %p.username
                            Shared by
                            = @random_post.user.name
                        %p.buttons
                            %span
                                %i.fa.fa-comments-o
                                = @random_post.comments.count
                            %span
                                %i.fa.fa-thumbs-o-up
                                = @random_post.get_likes.size

#comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
    - @comments.each do |comment|
        .comment
            %p.username= comment.user.name
            %p.content= comment.content

    = render "comments/form"
---
app/controllers/posts_controller.rb
---
def show
  @comments = Comment.where(post_id: @post)
  @random_post = Post.where.not(id: @post).order("RANDOM()").first
end
---
app/views/posts/show.html.haml
---
#post_show
    %h1= @post.title
    %p.username
        Shared by
        = @post.user.name
        about
        = time_ago_in_words(@post.created_at)
    .clearfix
        .post_image_description
            = image_tag @post.image.url(:medium)
            .description= simple_format(@post.description)
        .post_data
            = link_to "Visit Link", @post.link, class: "button"
            = link_to like_post_path(@post), method: :get, class: "data" do
                %i.fa.fa-thumbs-o-up
                = pluralize(@post.get_upvotes.size, "Like")
            = link_to dislike_post_path(@post), method: :get, class: "data" do
                %i.fa.fa-thumbs-o-down
                = pluralize(@post.get_downvotes.size, "Dislike")
            %p.data
                %i.fa.fa-comments-o
                = pluralize(@post.comments.count, "Comment")
            - if @post.user == current_user
                = link_to "Edit", edit_post_path(@post), class: "data"
                = link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }, class: "data"
        #random_post
            %h3 Random Inspiration
            .post
                .post_image
                    = link_to (image_tag @random_post.image.url(:medium)), post_path(@random_post)
                .post_content
                    .title
                        %h2= link_to @random_post.title, post_path(@random_post)
                    .data.clearfix
                        %p.username
                            Shared by
                            = @random_post.user.name
                        %p.buttons
                            %span
                                %i.fa.fa-comments-o
                                = @random_post.comments.count
                            %span
                                %i.fa.fa-thumbs-o-up
                                = @random_post.get_likes.size

#comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
    - @comments.each do |comment|
        .comment
            %p.username= comment.user.name
            %p.content= comment.content

    = render "comments/form"
---

git status
git add .
git commit -m "edit show & index post"
git push origin layouts-scss

最后效果图

git checkout -b heroku
---
Gemfile
---
group :development, :test do
  gem 'sqlite3', '1.3.13'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :production do
  gem 'pg', '0.20.0'
end
---
bundle install
rails server
---
git add .
git commit -a -m "Update Gemfile for Heroku"

heroku 云端部署

heroku create xiaoweimuse
git push heroku heroku:master
rake assets:clean
heroku run rake db:migrate
heroku open

[付费咨询] 微信支付和支付宝对接功能制作？

xiaoweirails — Sat, 17 Feb 2018 10:52:28 +0800

提问：

最近公司已经完成了微信支付和支付宝支付的账号，在这个过程中，发现大量的信息其实是没有价值，不可以帮助我完成对于支付功能的对接，所以在这个过程中，使用付费咨询的形式完成功能的咨询。

我对于当下的互联网容器的认知：

网页端
移动端
微信端

在这三段的过程中，我们可以使用 Ruby on Rails 完成网页端和微信端的产品的开发，使用 React Native 完成移动端的构建，所以其实我我们需要完成的不外乎是五个功能的构建：

功能结构
用户体系
设计体系
部署体系
支付体系

在以上容器打造完毕之后，通过内容和运营完成货币的交易，所以在当下这个阶段中，我对于功能体系的认知已经逐渐的清晰，我们对于用户的结构也非常的清晰，对于页面的设计需要时间不断的打磨，对于云端部署其实已经慢慢在熟悉，现在对于支付的功能的时候，缺乏一个样板可以完成操作，所以在这个地方付费开始完成咨询；

获取微信支付和支付宝支付的网页端的经验：

支付费用：1000 元

#截止时间：2018 年 2 月 17 日 -2018 年 3 月 15 日

如果你自己真实的做过支付功能，有这个信心可以教授这个技能，可以通过回复信息完成教学，需要给我看证明你实力的简历和经历的项目，完成投标；

肖威 2018.02.17

[北京] 2017.10.28 北京 Ruby 活动即将开始

xiaoweirails — Fri, 13 Oct 2017 09:14:22 +0800

北京 2017.10.28 Ruby 技术活动

活动时间

10 月 28 日 (周六) 下午 02:00 - 06:00

活动地点

北京

活动简介

10 月 21 日，上海 Go Hack 2017 即将开始，才华横溢科技（北京）有限责任公司特组队参与了本次比赛。

我们将为大家带来最新的 Go Hack 的分享，希望北京的朋友们能一起聚起来，交流想法

活动内容

主持人开场白

携带装备

Mac 电脑

报名地址

请通过活动行完成线上报名。

担心找不到路的朋友，请记下组织者的号码：157 0158 7150 肖威 2017 年 10 月 27 日

现场照片，实时直播。

现场直播照片地址

新手入门 Ruby On Rails 必备的知识体系

xiaoweirails — Sat, 30 Sep 2017 05:09:52 +0800

为什么撰写技术的文档

最近在筹备互联网的公司，在这个过程中，发现找到可以使用的人才和愿意学习的人才是一件非常困难的事情，在这个过程中，我将自己在学习 Ruby 的语言的过程和思考撰写写来，希望可以帮助想要学习 Ruby 的人少走一些弯路，同时尽可能的招募到我想要的学习型的人才。

如何快速的学习 Ruby

在学习 ruby 以前最快速的方法是知道如何快速的完成 Web App 完成的规则，只有知道了一个 Web App 整个流程的体系，就可以快速的完成自己的编程的学习；我们自学习编程的过程中，最主要的学习的方式最要集中在三个方面，我将这三个方面做了下面的归纳和梳理；

其中分别是：前端的架构，后端的框架，应用的部署；

第一个学习的方面：首先我们来谈一谈前端的框架

主要使用的是 html 完成整个页面的布局，css 完成页面的服装的布局，js 主要涉及到一些动态的元素的使用，在使用前端的框架的时候，主要在完成对于盒子模型的使用，需要大量的在使用的过程中，才可以快速的掌握其中的核心要求和要领，在这个过程中，12vs12 的 landing page 的制作的方法，给与了非常好的借鉴意义；在这个前端使用的过程中，我们最应该掌握的部分是 html 的 css 的使用，我们需要首先完成页面的早图的构思，然后使用 ps 完成页面的设计，最后使用 atom 完成 html 的页面的布局和 css 的元素的定义，从而完成前端的布局的工作，在这个过程中，其实没有太难的部分，关键是需要使用大量的案例的实战，来让自己对于整个页面的布局有一个清晰的认知，所以关键的部分在于大量的前端页面的设计的训练，大量模仿真实的案例，学会拆分和组装各种想要的元素的过程，来完成自己对于前端的提升，针对于整个应用来说，前端的技能体系很容易被后端的人所取代，其中的关键在于前端的个体没有完成整个应用的设计工作，而仅仅是完成了一层皮的包装，所以在这个过程中，我们可以普遍的发现单纯的前端的待遇没有后端的待遇多的主要原因就在于这个地方，但是在完成作品展示的时候，前端可以完成大量的作品的展示，而后端的技术的水平很难快速的得到凸显，所以在这个过程中，后端的个体一定要善于撰写自己的技术的文档，遇到什么问题，解决的方案是什么，已经解决后提升了那些性能，这样才可以更好的为自己的职业加分；

第二个学习的方面：其次我们来谈一谈前端的框架

我们在使用后端语言的使用的时候，最要在于完成 RMVC 的逻辑思维的架构，在这个架构的过程中，仅仅是一个人来玩这个应用，当我们想要完成 deivse 的用户的系统的时候，就会涉及到一对多和多对多的逻辑，在这个时候就更多的时候考验一个人对于整个逻辑的思维的架构问题了，所以我们在做应用的时候，关键是从不同的人完成不同的事情入手，在完成不同事情的时候，完成定义，这样就可以来完成后端的页面的搭建，我们在搭建页面的时候，主要在于完成 RMVC 的控制，在这个过程中，R 代表了 ROOT，其中在于完成路由器的控制的问题，使用 rake 命令可以完成路由器的查看，其中包好了 7 大基本的功能：indew、show、new、create、update、destory、edit；在这个过程中，我们可以使用 reascours 命令来完成整个路由的设定，在这个过程中，想要完成页面的展示，路由是一个非常重要的部分，没有设定好路由的应用，难以完成我们应该完成的效果；在完成路由之后，我们所需要去完成的是是 C 的部分，也就是 controller 的部分，完成对于原始的控制，在完成原始的控制的过程中，我们也是在七大动作的基础上完成的，对于基本的 CURD 来说，我们一开始的确难以记住其中的代码功能，所以一开始最好还是使用背诵的方式完成这个功能的展示，才可以最快速的学习如何完成一个页面的控制，在完成页面控制的时候需要玩是数据的处理，在处理数据的时候，我们会使用到 modle 的功能元素，在这个过程中，我们需要去构建一个 rails g modle 命名，后面的所有的需要可以在 DB 的元素里面添加，所以关键在于命名的部分，完成了命名之后，我们需要完成的是一一对应的关系；在这个过程中 modle 的文件夹里面主要是告诉你现在我们有哪些功能性元素，在 DB 里面主要告诉你我们应该完成哪些的处理的工作，这是我们所需要完成的，当我们非常的清晰了 modle 的结构，接下来就需要完成 view 的元素的处理，在处理元素的时候，主要完成 index、show、new、edit 的四个代码的书写工作，在书写以上的代码的元素的时候，我们主要需要完成的是首页的展示和编辑后的展示，在这个过程中，new 和 edit 的代码基本上是完全相同的，所以其实就会涉及到如何我弄成 index 和代码展示和 show 代码的展示，其实也就是涉及到前端的知识架构。

所以在这个过程中，我们所需要完成的就是三个动作，第一个动作是如何做好路由器 root 的处理，第二个动作是如何做好数据 modle 处理规则的调用，在调用规则的时候，使用控制器 controller 告诉 view 完成四个页面的展示工作，从而完成一个页面的展示，在展示这个页面的过程中，我们需要完成用户逻辑的调用，学会完成一对多和多对多的规则的调用，就可以完成应用的人与人的交互；

第三个学习的方面：最后我们来谈一谈应用的部署

对于一个基本的应用来说，我们现在使用的是两个工具完成的应用的部署，第一个工具是代码的协作的工具，例如：GitHub，第二个工具是应用展示的工具 Herkou 的代码的部署，在使用 herkou 完成应用部署的时候，我们会发现图片的加载是非常慢的过程，所以在这个时候，我们最需要做的事情就是完成应用和数据库分离，也就需要各种云来帮助我们完成应用的部署工作，所以使用七牛云和阿里云就成为了一种需要，想要更好的完成网上页面的跳转工作，就需要使用域名完成跳转，也就是完成完成域名的购买和域名的部署，这样就可以完成应用的正式的上线；

最后是关于移动端的配置

我们使用 Ruby 所打造出来的 Web App，天生就是全栈的应用，可以通过使用 IOS 工具和 Android 的工具快速的完成前端页面的修改工作，从而完成应用程序在安卓系统和苹果系统完成上线部署，所以在这个过程中，学习 Ruby 之后懂得了 RMVC 的框架之后，在从事移动端的开发，就会变得相对比较容易；

对于应用程序的思考

作为一款商业的使用的应用，前期是完成程序的搭建，在这个时候技术是第一位的，当我们技术已经搭建完毕，后期所需要使用的是大量的运营的手段完成用户的积累的过程，这是一个缓慢和长时间的积累的过程，所以编程在互联网世界里面，不完全是第一位的，只有将自己的应用真正的变成为一个商业级别的应用，才可以快速的完成自己的劳动价值的回报；

肖威

才华横溢科技（北京）有限责任公司

董事长

对于 Ruby on Rails 初学者入门的思考

xiaoweirails — Fri, 29 Sep 2017 12:10:04 +0800

前一段时间我完成了对于程序的上线的整个流程的架构，在这个过程中，完成了最简单的前端展示页面的呈现，在这个过程中，我们基本熟悉了一个简单程序上线的全部的流程，而在这个过程中，我们将进入的是相对最有价值的 CRUD 的程序的制作，在制作这个可以用来完成文本和数据上传的管道的过程中，我们可以发现下面几种需要掌握的知识体系：

第一个知识体系是

1、数据库的数据池，我们需要通过使用 rails g modle 命名标题内容图片完成一个数据的结构架构，在这个过程中需要使用到 DB 的数据结构，这个部分需要深入的掌握；

2、当我们将我们的数据完成了数据池的搭建，接下里就是完成数据的控制和数据的展示，在这个过程中，我们需要完成的是对于 controller 和 viwes 的代码的控制，在控制这个代码的过程中，通过终端控制器完成数据结构的搭建，使用 atom 完成数据的调试，在这个过程中，我觉得对于代码的使用至关重要。

3、当我们将我们想要的 root 的路由器搭建好，使用 rake 命名可以查看我们对应的路由的网址情况，在这个过程中，我们需要完成的是 MVC 的一一对应的关系体系，这样才可以完成我们想要的页面的展示。

第二个知识体系是

1、我们知道了以上的知识体系的结构架构，在这个过程中，其实相对比较难的是如何更好的完成 RMVC 的对应关系，在这个过程中，只有对应关系的正确性，才可以完成程序的展示，没有正确的程序的展示，也就不可以完成我们想要的结果的表达，这是我们需要深刻认知到的核心的体系架构。

2、我们通过学习三个人的知识体系，可以比较快速的完成整个知识结构的架构；

（1）学习某某的课程可以最快速的熟悉整个的知识架构，只是郑伊廷的代码写的不够优雅，没有按照正确化的代码结构来完成代码的书写，所以在案例的解读上，有很大的阅读障碍，所以在这个过程中，我们需要进一步的了解代码的原理和命名的规则，在这个时候才可以进一步的完成自我的快速的提高。

（2）在通过阅读某某的实战圣经的过程当中，也会遇到一些问题，就是知识点太对于分散，没有实际的案例可以作为参考，这是在学习的一个弊端。

（3）在学习 12vs12 的课程的过程中，可以看到一些操作的实际的案例，懂得如何做好一个首页的展示的图，也可以看到一个网站搭建的全过程，仅仅在于小伙子使用的是 haml 语言和使用的是 rails4 的语言，这对于现在的我们来说，不利于快速的掌握和提高；所以其实我们希望获得是是当今现在最新的 rails 的案例使用的场景，只有大量的接触到大量的 rails 的实际的案例的公司，这样才可以快速的帮助我们自己获得快速的成长。

但是以上的三个人的知识体系，都是值得我们学习的，我们在发现别人不足的过程中，是因为我们自己的实力提升了，不代表刚入门的时候，老师没有教导好，仅仅在于需要打造自己的产品的时候会发现有不足的地方。

思考：如何才可以加上自己学习 Ruby On Rails 的速度

1、大量真实运行案例的观测和维护；

我们需要在最短的时间里面知道整个软件是如何部署成功的，如何运营的过程，这样就可以知道猪是如何跑的，通过看猪如何跑，方便自己快速的完成杀猪的过程，我们过去在学习里面学习最大的问题就在于我们接触的实际的案例太少，当我们学习和掌握的实际案例太少之后所带来的问题就是不可以快速的完成独立的产品的架构，这样我们就缺乏完成产品化的能力，没有产品化的能力，其实也就难以快速的完成自我的提高；所以一个想要快速的提高自己能力的个体，最应该做的事情是看大量的实际运行的案例，只有大量的案例的辅助，才可以快速的提升自己的实力。

2、上线自己真实可行的案例，不断优化；

学习是在模仿的基础上完成的，我们如果想要更加快速的提升自己的实力，关键还是在于不断的解决自己的问题的过程中，快速的提升自己的实力，所以一切学习的模仿最后都需要完成自己的产品的打造，只有真实的打造出了自己的产品，才能真正的掌握一门编程的技能体系；

3、行业的小班化交流；

真正的实操性的知识体系，有些事不宜在大会上演讲的，所以积极的参加一些行业的小班化的实战的线下的交流是非常必要的，感觉现在的这个方面，还是比较的欠缺一些，后期会针对 RMVC 的对应关系，系统化的讲解一些 R、M、V、C 的使用，这样既帮助自己快速的梳理知识结构，也可以快速的帮助初学者快速的入门；

温习提示：

如何快速的掌握 Ruby On Rails 所需要掌握的入门级别的知识

1、Ruby On Rails 环境的搭建

2、GitHub 的账号的使用

3、Heroku 的账号的使用

4、完成最简单的展示页的呈现完成两个账号的记录

（1）GitHub 地址：

（2）Heroku 地址：

作者介绍：

肖威

才华横溢（科技）有限责任公司

董事长

关于创业后的几点心得体会

xiaoweirails — Fri, 29 Sep 2017 11:17:25 +0800

什么人在创业？

第一类人：啥都没有，想要创业；（大学生群体）

第二类人：有一技之长，在公司学成归来，用技术创业；（企业高管）

第三类人：已经成功，想要更高的追求，来参与创业；（投资人在创业）

创业与什么有关？

创业的本质是为了完成企业的盈利，至于你做的是什么东西，在企业的财务报表的数字上来说，是没有任何关系的，所以我们单纯的看一家公司的好坏可以通过查看公司财务报表来知晓，前提是这一家公司没有完成财务报表的造假；

创业需要具备什么东西？

我们很多的孩子对于创业这一件事其实是不够了解的，真正的创业的关键是为了完成时间服务的一种交换，只有学会交换的思维体系，才可以更好的在这个社会上立足，在这个过程中，如何说你也想要创业，其实更多的时候，你需要问问你的手上有什么可以用来交换的东西，只有具备了交换的东西，才可以具备创业的可能性。

大学生适不适合创业？

针对当今的教学体系来说，我个人觉得绝大多数的大学生是普遍不适合创业的，关键就在于我们的大学生没有对于社会的清晰的认知，因为对于社会的认知不够清晰，所以在这个时候，普遍对于商业的逻辑都不清晰，但是我还是主张大学生应该在大学期间创业，当你具备了创业的经历，能够让你更好的成为一家企业的管理者，但是不建议毕业后没有任何准备的创业，这样没有行业的经验的积累，盲目的浪费自己成长的时间，是一件非常不划算的事情。

赚钱重不重要？

对于刚刚毕业的大学生来说，我个人觉得成长比赚钱更重要，在一个时间不断增长的时代里面，赚钱这一件事情其实会变得相对越来越容易，但是能够成为这个时代里面真正优秀的人的机会却没有那么多，所以在职业的早期，选择一个高速发展的行业和高速成长的企业对于自己来说，会比单纯的金钱更有价值。

暂时谈到这个地方，如果大家对于创业和就业有什么不清晰的地方，可以在下面提问，有时间的时候，给与大家一些帮助和启迪。

创业有风险，入市须谨慎；

肖威才华横溢科技（北京）有限责任公司董事长

[北京] 才华横溢 (共享教育项目) Ruby 全栈开发工程师 (薪资 1.8K~8.8K)

xiaoweirails — Wed, 27 Sep 2017 10:59:36 +0800

我们是谁：

才华横溢科技（北京）有限责任公司。

位于北京市海淀区中关村创业大街。目前公司发展良好，需要完成人才储备若干。

我们是一家什么样的公司？

我们是一家专注于帮助普通人获得成功的公司。

薪酬福利：

薪水范围 1.8K~8.8K，月度奖金 1.0k~30k，具体看能力和公司的业绩而定。

人才招募岗位：

A：前端设计师

（具备 PS 设计、网页端实现者优先考虑）

负责公司的移动端 + 微信端 + 网页端的前端视觉化的呈现；

B：后端 Ruby 工程师

（不局限 Ruby，可以是 Go、PHP、JAVA 等其他的后端语言，关键是具备学习能力）

负责公司的移动端 + 微信端 + 网页端的后端功能的实现；

负责公司产品的运维的稳定；为我们产品提供炮弹：产品 API 接口开发；让产品功能靠谱：产品后端功能开发；让运营开足马力：完善产品后台的建设；跟外援搞好关系：第三方 SDK，API 的嵌套开发。

加分项

1.编程基础扎实，有较强的学习能力，对创新技术有强烈求知欲，愿意学习新知识；

2.一年以上 Ruby On Rails 的开发经验；

3.熟练使用 Github 等工具；

4.熟悉关系型和非关系型数据库的开发；

5.良好的编码风格，很强的自学能力，良好的团队合作意识及积极的心态；

C：新媒体运营

负责公司的对外的新媒体的运营工作。

D：因人设岗

如果你觉得以上的岗位没有适合你的，而你想要从事自己想要从事的岗位，欢迎投递简历；

我们会根据实际的业务的需要，完成人才的储备，为你专门设置你想要从事的工作岗位；

E：付费学习

针对于想要加入互联网公司的应届毕业生，或者是想要完成转行的其他人员，我们有针对于你们所完成的职业培训项目，可以通过付费的形式，完成自己能力的提升，从而获得进入互联网公司的门票，请前往公司洽谈；

联系人：肖威电话：157 0158 7150 邮箱：494410617@qq.com

地点：北京市海淀区中关村创业大街天使汇

我们会在 48 小时内通知面试或答复。

xiaoweirails (肖威)

Let's Build: With Ruby on Rails - Job Board with Payments (实践思路)

Let's Build: With Ruby on Rails - Job Board with Payments

Github Repo:

在案例的学习过程中，可以完成五个环节的学习；

添加数据

结束表现形式

让我们用 Ruby on Rails 来构建 Dribbble

Let's Build: A Dribbble Clone With Ruby On Rails

最后的表现效果

Github Repo:

出现的两个问题

- 项目云端的部署（包括：heroku 部署 和 aliyun 部署）

主要完成的任务的实现：

实现突破的拖拽上传功能

最后效果

最后的表现效果

让我们用 Ruby on Rails 构建一个 Twitter

才华横溢 twitter 教学案例

Let's Build: A Twitter Clone With Ruby on Rails

本案例主要完成了

Github Repo:

最后效果

让我们使用 Ruby on Rails 构建：博客和评论

Let's Build: With Ruby On Rails - Blog With Comments

案例分析：

构建 demo_blog 的案例的关键在于完成三个维度的动作：

Github Repo:

demo_blog 的最终效果

Github 上传方法

post 的最终效果

comment 评论功能构建

comment 的最终效果

demo_blog 的最终效果

一个 muse 教学案例的分享 (包含：功能 + 用户 + 设计 + 投票 + 部署)

才华横溢 muse 案例教学 12

最后效果图

Github Repo:

Visit this website:

添加内容不被 show 页面显示

显示 show 的内容

首页页面呈现效果

以上的代码的梳理，完成了基本功能的 CRUD 的构建；

本案例的关键的操作在于：

app/views/posts/_form.html.haml

= f.button :submit

app/views/posts/show.html.haml

= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }

app/models/post.rb

end

app/views/posts/index.html.haml

= link_to "add posts", new_post_path

完成 用户 评论的对接

最后效果图

heroku 云端部署

[付费咨询] 微信支付和支付宝对接功能制作？

提问：

我对于当下的互联网容器的认知：

获取微信支付和支付宝支付的网页端的经验：

支付费用：1000 元

[北京] 2017.10.28 北京 Ruby 活动即将开始

北京 2017.10.28 Ruby 技术活动

活动时间

活动地点

活动简介

活动内容

携带装备

报名地址

现场照片，实时直播。

现场直播照片地址

新手入门 Ruby On Rails 必备的知识体系

为什么撰写技术的文档

如何快速的学习 Ruby

其中分别是：前端的架构，后端的框架，应用的部署；

第一个学习的方面：首先我们来谈一谈前端的框架

第二个学习的方面：其次我们来谈一谈前端的框架

第三个学习的方面：最后我们来谈一谈应用的部署

最后是关于移动端的配置

对于应用程序的思考

肖威

- 项目云端的部署（包括：heroku 部署和 aliyun 部署）

完成用户评论的对接