修改 scss 完成页面美化

我们如果想要修改页面的代码的样式，就需要对于css的代码非常的清晰，这样才可以快速的完成代码的定位，不然难以完成代码的定位，所以大家下去之后需要进一步的理解盒子模型，这样才可以快速的完成自我的提高和进步；

首先将 scss 代码放入页面美化代码库中： app/assets/stylesheets/application.scss

 @import url(http://fonts.googleapis.com/css?family=Playfair+Display|Muli:300,400);
 @import "bootstrap-sprockets";
 @import "bootstrap";

 /* General styles */

 body {
     background-color: #fff;
     font-family: 'Playfair Display', serif;
 }

 h1, h2, h3, h4, h5, h6 {
     font-family: 'Muli', sans-serif;
     font-weight: 300;
 }

 .btn-custom {
     background-color: #fff;
     color: #0a8fd5;
     font-family: 'Muli', sans-serif;
     font-weight: 300;
     border-radius: 8px;
     padding: 10px 20px;
     &:hover {
         color: #383838;
         transition: 0.5s;
         background-color: #fff;
         text-decoration: none;
     }
 }

 .btn:hover {
     transition: 0.5s;
     color: #383838;
     background-color: #fff;
 }


 /* Navbar styles */

 .navbar {
     font-family: 'Muli', sans-serif;
     text-transform: uppercase;
 }

 .navbar-default {

     padding-top: 5px;
     padding-bottom: 5px;
     background-color: #fff;

     .navbar-nav > li > a {
         color: #222;
     }

     .navbar-link {
         color: #222;
     }

     .navbar-brand {
         color: #222;
         letter-spacing: 1.1px;
     }

 }


 /* Links styles */

 .links {
     margin-top: 20px;
     .btn-default {
         color: #0a8fd5;
     }
 }


 /* Message styles */

 .message {
     box-sizing: border-box;
     background-color: #383883;
     margin-bottom: 25px;
     margin-right: 10px;
     margin-left: 10px;
     padding: 1.4em 1.4em;
     height: 150px;
     /*border-bottom: 4px solid #0a8fd5;*/

     .message-title {
         font-size: 1.5em;
         font-family: 'Muli', sans-serif;
         font-weight: 300;
         margin-top: 0;
         color: white;
         margin-bottom: 25px;
     }

     .btn-custom {
         margin-top: 20px;
     }

 }

 .message:nth-child(4n) {
     clear: left;
 }

 /* Message show-page styles */

 .message-show {
     box-sizing: border-box;
     background-color: #383838;
     padding: 2.0em 1.5em;
     border-bottom: 4px solid #0a8fd5;
     color: #fff;
     font-family: 'Muli', sans-serif;
     font-weight: 300;

     h2 {
         margin-top: 0;
     }

     .message-desc {
         font-size: 1.1em;
         line-height: 1.75;
         margin-bottom: 50px;
     }

     .message-posted-by {
         color: #eee;
         font-size: 0.9em;
     }

     .reply-to-msg {
         margin-top: 50px;
     }

 }


 /* Comment styles */

 .comment {
     border-bottom: 1px solid #fff;
     padding-top: 15px;
     padding-bottom: 15px;

     .comment-content {
         font-size: 1.25em;
     }

     .comment-posted-by {
         color: #eee;
         font-size: 0.8em;
     }

     .links {
         margin-top: 15px;
         a {
             color: #0a8fd5;
             margin-right: 15px;
         }
     }
 }

修改全局代码库，添加代码样式： R :路由器代码

Rails.application.routes.draw do
  devise_for :users
  resources :messages do
    resources :comments
  end

  root 'messages#index'
end

M:model代码

message.rb

class Message < ApplicationRecord
  belongs_to :user
  has_many :comments
end

user.rb

class User < ApplicationRecord
  has_many :messages
  has_many :comments
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

comment.rb

class Comment < ApplicationRecord
  belongs_to :message
  belongs_to :user
end

db:代码展示 db/migrate/20180203011508_create_messages.rb

class CreateMessages < ActiveRecord::Migration[5.1]
  def change
    create_table :messages do |t|
      t.string :title
      t.text :description

      t.timestamps
    end
  end
end

db/migrate/20180203063544_devise_create_users.rb

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

db/migrate/20180203084514_add_user_id_to_messages.rb

class AddUserIdToMessages < ActiveRecord::Migration[5.1]
  def change
    add_column :messages, :user_id, :integer
  end
end

db/migrate/20180203100358_create_comments.rb

class CreateComments < ActiveRecord::Migration[5.1]
  def change
    create_table :comments do |t|
      t.text :content
      t.references :message, foreign_key: true
      t.references :user, foreign_key: true

      t.timestamps
    end
  end
end

C:controller的代码 app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  before_action :find_message,only: [:show,:edit,:update,:destroy]
  before_action :authenticate_user!, except: [:index, :show]

  def index
    @message = Message.all.order("created_at DESC")
  end

  def show

  end

  def new
    @message = current_user.messages.build
  end

  def create
    @message = current_user.messages.build(message_params)
    if @message.save
      redirect_to root_path
    else
      render 'new'
    end
  end

    def edit

    end

    def update
      if @message.update(message_params)
        redirect_to messages_path
      else
        render 'edit'
      end
    end

   def destroy
     @message.destroy
     redirect_to messages_path
   end

  private
   def message_params
      params.require(:message).permit(:title,:description)
   end

   def find_message
     @message = Message.find(params[:id])
end

end

app/controllers/comments_controller.rb

class CommentsController < ApplicationController
  before_action :find_message,only: [:create, :edit, :update, :destroy]
  before_action :find_comment,only: [:edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]
  def create
    # @message = Message.find(params[:message_id])
    @comment = @message.comments.create(comment_params)
    @comment.user_id = current_user.id

    if @comment.save
      redirect_to message_path(@message)
    else
      render 'new'
    end
  end


def edit
end

  def update
    if @comment.update(comment_params)
    redirect_to message_path(@message)
    else
      render 'edit'
  end
end

def destroy
  @comment.destroy
  redirect_to message_path(@message)
end


   private

     def comment_params
       params.require(:comment).permit(:content)
     end

       def find_message
       @message = Message.find(params[:message_id])
     end

      def find_comment
      @comment = @message.comments.find(params[:id])
      end
end

V：views的代码 message app/views/messages/_form.html.erb

<%= simple_form_for @message do |f| %>
<%= f.input :title, label: "message title" %>
<%= f.input :description, as: :wangeditor %>
<%= f.button :submit %>
<% end %>

app/views/messages/edit.html.erb

<h1>edit message</h1>

<%= render 'form' %>

app/views/messages/index.html.erb

<% @message.each do |message| %>
<div class="col-md-4">
  <div class="message">
    <h2 class="message-title"><%= message.title %></h2>
    <%= link_to "vive message", message_path(message),class: "btn btn-cusom" %>
  </div>
 </div>
<% end %>

app/views/messages/new.html.erb

<div class="col-md-8 col-md-offset-2">
  <h1>new message</h1>
  <%= render 'form' %>
</div>

app/views/messages/show.html.erb

<div class="col-md-8 col-md-offset-2">

<div class="message-show">
<h2><%= @message.title %></h2>
<p class="message-posted-by">posted by <%= @message.user.email %><%= time_ago_in_words(@message.created_at) %>ago</p>
<p class="message-desc"><%= @message.description %></p>
<!-- add a poster at timestamp -->


<h3>Comments:</h3>
<%= render @message.comments %>


<h3 class="reply-to-msg">reply to message:</h3>
<%= render 'comments/form' %>

<div class="links btn-group">
    <%= link_to "back", messages_path(@message),class: "btn btn-default" %>
    <% if user_signed_in? %>
    <% if @message.user_id == current_user.id %>
    <%= link_to "edit", edit_message_path(@message),class: "btn btn-default"  %>
    <%= link_to "Delete", message_path(@message), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-default" %>
    <% end %>
    <% end %>
   </div>
  </div>
</div>

comment

app/views/comments/_comment.html.erb

<div class="comment">
  <p class="comment-content"><%= comment.content %></p>
  <p class="comment-posted-by">posted by <%= comment.user.email %><%= time_ago_in_words(comment.created_at) %>ago</p>

<div class="links">
  <% if user_signed_in? %>
  <% if comment.user_id == current_user.id %>
  <%= link_to "edit", edit_message_comment_path(comment.message,comment),class: "btn btn-default"  %>
  <%= link_to "Delete", message_comment_path(comment.message, comment), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-default" %>
  <% end %>
  <% end %>
</div>
</div>

app/views/comments/_form.html.erb

<%= simple_form_for ([@message,@message.comments.build]) do |f| %>
<%= f.input :content, as: :wangeditor,label: "comment" %>
<%= f.button :submit, :class => 'btn-cusom' %>
<% end %>

app/views/comments/edit.html.erb

<h1>edit comment</h1>
<%= simple_form_for([@message,@comment]) do |f| %>
<%= f.input :content, label: "comment" %>
<%= f.button :submit %>
<% end %>

肖威 2018.02.14