Mugcup(基础编)的复习:设定一览

Mugcup(基础编)的复习

Coffeecup header1

0 : 这个章的复习

 看「Mugcup(基础编)的复习」的设定一览


1 : 设定一览

在「Mugcup(基础编)的复习」设定了

  • 作刚开始的「message-app」的网站
  • 作主页「0.0.0.0:3000
  • Bootstrap
  • devise

这个四个设定,作「message-app」网站。


在这里复习学习的內容。

  • 作「message-app」

  • 刚开始,用terminal作「message-app」。打入

     terminal
     使用Windows的话,用「命令提示符」。
    1 2 cd Desktop cd rails_project

    移动到「rails_project」之后,


     用Windows移动的方法,请参考这里


    在这个「rails_project」文件夾里作「message-app」刚开始的网站。

     terminal
    1 rails new message-app -d mysql

     使用Windows的话,打入下面的命令吧。

     命令提示符
    1 rails new message-app



    完了之后做工具(gem)的设定跟导入

     terminal
     使用Windows的话,用「命令提示符」。
    1 bundle install

    接着做资料库的准备
    「资料库的准备」是,在terminal打入下面的命令。

     terminal
     使用Windows的话,用「命令提示符」。
    1 rake db:create

    这样作好了message-app_development」的资料库了。

  • 作主页

  • 为了作主页的设定文件,打入下面的命令。

     terminal
     使用Windows的话,用「命令提示符」。
    1 rails g controller welcome

    使用这个命令作好的设定文件
    • 操作资料的设定文件「app > controllers > welcome_controller.rb
    • 显示网页的设定文件「app > views > welcome
    里追加设定。

    首先在「route.rb」设定「七个网页中使用的网页」

     route.rb(追加第3、4行)
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 ... 60 Rails.application.routes.draw do resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

    操作资料在app > controllers > welcome_controller.rb里面设定。

     welcome_controller.rb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 class WelcomeController < ApplicationController def index end end

    网页显示,在app > views > welcome文件夾里保存index.html.erb文件(保存文件的方法,请参考这里),编辑里面的內容。

     index.html.erb(保存在「app > views > welcome」文件夾)
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 <div class="header-image"> <h1 class="text-center header-content"><strong>欢迎光临</strong></h1> </div>

    接着在app > assets > stylesheets里保存「style.scss」,追加下面的內容。

     style.scss
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 .header-image{ background-image: url(/assets/保存好的图像的名字); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

    最后追加「Bootstrap」的设定。

     terminal
    1 rails g bootstrap:install

     使用Windows的话,请参考这里导入Bootstrap。

  • Bootstrap

  • application.html.erb里设定,使用Bootstrap的游览列・navigation-bar的显示。

     application.html.erb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container main-page"> <%= yield %> </div> </body> </html>

    追加这个內容,再追加CSS的设定。

     style.scss
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .main-page{ margin-top:50px; } .header-image{ background-image: url(/assets/保存的图像的名字); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

  • devise

  • 首先从「devise」的安装开始做。

     terminal
     使用Windows的话,用「命令提示符」。
    1 rails g devise:install

     terminal
     使用Windows的话,用「命令提示符」。
    1 rails g devise user

    编辑,用这个打入作好的db > migrate > 日子_devise_create_users.rb的內容。

     日子_devise_create_users.rb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 class DeviseCreateUsers < ActiveRecord::Migration 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.string :first_name t.string :family_name t.text :self_introduction t.integer :age 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

    编辑好了之后,为了适用內容打入

     terminal
     使用Windows的话,用「命令提示符」。
    1 bundle install

    的內容。

    做好了之后,为了设定显示的內容打入下面的內容。

     terminal
     使用Windows的话,用「命令提示符」。
    1 rails g devise:views

    在这个打入作好的
    • 注册网页「app > views > devise > registrations > new.html.erb
    • 登入网页「app > views > devise > sessions > new.html.erb
    里面设定显示的网页的设定。

    注册的网页「new.html.erb」的设定是,

     new.html.erb(编辑第8、16、21、23、25行)
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control my-form" %> </div> <br> <div class="actions"> <%= f.submit "Sign up", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

    登入的网页「new.html.erb」的设定是

     new.html.erb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <h2>Log in</h2> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <% if devise_mapping.rememberable? -%> <div class="field"> <%= f.check_box :remember_me %> <%= f.label :remember_me %> </div> <% end -%> <br> <div class="actions"> <%= f.submit "Log in", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

    为了调整输入框的长度,追加CSS的设定。

     style.scss
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 ... .main-page{ margin-top:50px; } .my-form{ width:500px; } .header-image{ /* 省略 */

    接着,追加游览列・navigation-bar的设定通知:flash

     application.html.erb(追加第24〜28行跟第36〜43行)
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% if user_signed_in? %> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> <% else %> <li><a href="/users/sign_up">注册</a></li> <li><a href="/users/sign_in">登入</a></li> <% end %> </ul> </div> </div> </nav> <div class="container main-page"> <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div> </body> </html>

    最后作了「users」资料库的网页了。首先作设定文件。

     terminal
     使用Windows的话,用「命令提示符」。
    1 rails g controller users

    在这里作好的
    • 操作资料的文件「app > controllers > users_controller.rb
    • 显示网页的文件夾「app > views > users
    里追加设定。

    app > views > users」文件夾里,保存「show.html.erb」「index.html.erb」「edit.html.erb」文件(保存的方法请参考这里)。
     首先在route.rb里追加「七个网页的设定」。

     route.rb(追加第6行)
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 ... 62 Rails.application.routes.draw do devise_for :users resources :welcome, :only => [:index] root "welcome#index" resources :users, :only => [:show, :index, :edit, :update] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

     接着在app > controllers > users_controller.rb追加操作资料的设定。

     users_controller.rb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) end def index @users = User.all end def edit @user = User.find(params[:id]) if @user.id == current_user.id else redirect_to "/" flash[:alert] = "无效的会员" end end def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "编辑好了!" else redirect_to "/" flash[:alert] = "无效的会员" end end end

     最后在「app > views > users」文件夾里的文件,设定网页的显示。

     show.html.erb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 <h1>会员资料</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>歲)</p> <p>自我介绍:<%= @user.self_introduction %></p> <hr> <p><a href="/users" class="btn btn-primary">返回会员一览</a></p> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">编辑会员资料</a> <% end %>

     index.html.erb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 <h1>会员资料</h1> <hr> <% @users.each do |u| %> <p><a href="/users/<%= u.id %>"><%= u.family_name %><%= u.first_name %></a></p> <hr> <% end %> <a href="/" class="btn btn-info">返回主页</a>

     edit.html.erb
    ※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
     使用Windows的话,点击「ctrl」跟「s」可以保存內容。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>编辑会员资料</h1> <hr> <%= form_for @user do |f| %> <p>姓字</p> <%= f.text_field :family_name, :class => "form-control my-form" %> <p>名字</p> <%= f.text_field :first_name, :class => "form-control my-form" %> <p>年龄</p> <%= f.number_field :age, :class => "form-control my-form" %> <p>自我介绍</p> <%= f.text_area :self_introduction, :class => "form-control my-form" %> <hr> <%= f.submit "登录", :class => "btn btn-primary" %> <% end %> <hr> <a href="/users/<%= @user.id %>" class="btn btn-info">返回会员资料</a>