1 : Mugcup(基础编)的复习


Coffeecup header1

0 : 这个章的目的

  作网络聊天的网站会使用,在Mugcup(基础编)里说明的「作作看简单的网站」「Bootstrap」「主页」「用户管理」等等的內容。

在这里复习 的內容作作看下面图像一样的网站吧。 Chrome messages root add nav users sign in up


1 : 作刚开始的网站吧!

首先作刚开始的网站吧!
※ 详细的內容请参考这里
在这里设定
  • rails new
  • 导入Gem
  • 准备资料库
这个三个內容。

 ① : rails new


 首先作作看刚开始的网站吧!
Desktop < rails_project里作,网站的设定文件夾message-app

 首先移动到「rails_project」吧。


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


 terminal
1 2 cd Desktop cd rails_project

那么,在这里作作看设定「message-app」的网站的文件夾吧!
※ 详细请参考这里吧。

 terminal
1 rails new message-app -d mysql


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


 命令提示符
1 rails new message-app

在Finder的Desktop > rails_project里面,有沒有作好message-app的文件夾吗?
这个是设定「message-app」的网站的文件夾。

接着做导入gem(工具)吧!


 ② : 导入Gem


 在这里,导入工具・gem吧!

导入,作网站的时候使用的Gem
※ 不知道內容的话,请参考这里

编辑在设定gemGemfile的內容吧。
 使用Mac的话

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」的后面追加內容)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
26 25 27 28 29 30 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'devise'


设定好之后,打入下面的內容吧。

 terminal
1 bundle install

 不动的话删除「Gemfile.lock」之后,再试试看吧。

安裝好gem之后,作Bootstrap的安裝

 terminal
1 rails g bootstrap:install

 这样子做好了,在Mac上的「gem」的导入了。
 使用Windows的话

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」后面追加內容)
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。
26 27 gem 'coffee-script-source', '1.8.0' gem 'devise'

设定好了之后,在terminal上打入下面的內容吧。

 terminal
1 bundle install

 不动的話,删除「Gemfile.lock」之后,再试试看吧。

安裝好gem之后,参考这里安裝Bootstrap吧。

 这样,使用Windows的「gem」的导入完成了。
 这样做好了「gem」的设定。


 ③ : 准备资料库


 准备资料库吧!
为了保存资料,网站里必须作资料库。
※ 不知道的话,请参考这里吧。

那么作作看资料库吧。在terminal上打入下面的內容吧!

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

 不动的话,在前面追加「bundle exec」,打入「bundle exec rake db:create」吧。

这样,资料库作好了!
作好之后,在 Sequel Pro / SqliteBrowser 上看看有沒有「message-app_development」的资料库。
※ 请参考打开Sequel Pro 的方法打开SqliteBrowser 的方法吧。

 设定的內容请参考这里吧。


2 : 作主页!

 设定网站的设定文件夾也作好了,接着做这个网页的主页吧!
※ 详细请参考这里吧。
在这里做 这些內容。
首先做
  • 资料操作的文件(controller文件)
  • 显示网页的文件(views文件夾)
这个两个吧!
※ 详细请参考这里

为了作controller文件・views文件夾,在terminal上打入

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

的命令吧。

这样作好了
  • 操作资料的设定文件「app > controllers > welcome_controller.rb
  • 设定显示网页的文件夾「app > views > welcome
这个文件文件夾了。在这里设定内容。

设定这个两个的內容之前,首先设定「七个网页的设定」吧。

 ① : 七个网页的设定


设定七个网页(详细请参考这里)里使用哪一个网页的內容吧。
在这里设定,在主页「0.0.0.0:3000」里显示「welcome」的「index」网页吧!

七个网页的內容在config > routes.rb上面设定。
参考下面的內容,编辑文件吧!

 routes.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

在第3行里指定了使用「welcome」的「index」网页的设定,
在第4行里指定了在主页「0.0.0.0:3000」里显示「welcome」的「index」网页的设定。
※ 详细请参考这里吧。

这样设定好,七个网页的设定了。

接着做操作资料的设定吧。


 ② : 操作资料


接着做操作资料的设定吧!
资料操作在「controller」文件夾里的「welcome_controller.rb」文件设定。
这一次不用在「welocme」的「index」网页上操作资料,所以要设定下面的內容。
※ 详细请参考这里

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


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

這樣作好操作资料的设定了。

接下來,做网页的设定吧!


 ③ : 网页的设定


做做看网页的设定吧。
网页的显示在「app > views > welcome」文件夾设定。
首先在「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>

使用html设定的內容到这里。
接着把主页「0.0.0.0:3000Chrome messages root 1 显示的跟上面图像一样吧。

为了显示这样的內容,做做看
  • 保存要显示的图像
  • 设定CSS文件
吧。
※ 不知道的话,请参考这里
首先,在message-app」的「app > assets > images」文件夾里保存想在主页上显示的图像吧。
如果沒有想显示的图像的话,保存这里的图像吧。 Chrome image save assets1 Chrome image save assets2 完了之后,在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; }

做好这里之后,在message-app上打入

terminal
 使用Windows的话,用「命令提示符」吧。
1 rails s

启动服务器后,打开「0.0.0.0:3000」吧!
 使用Windows的话,打开「localhost:3000」吧。 Chrome messages root 1 有沒有显示上面图像一样的画面了吗?这样主页作好了!

设定的內容请参考这里吧。

接着使用「Bootstrap」,设定游览列吧!


3 : 使用Bootstrap吧!

那么使用「Bootstrap」,设定游览列・navigation-bar吧!
※ 详细请参考这里吧。
Mac上的Bootstrap的导入,打入

terminal
1 rails g bootstrap:install

的內容。
沒做好的话,再做一次吧!

 使用Windows的话,请参考这里吧。
那么,设定看上面的游览列吧!
游览列要在全部的网站上显示,所以在app > views > layouts」文件夾里的「application.html.erb」文件设定內容。
编辑application.html.erb的內容吧。
※ 详细请参考这里

 application.html.erb(追加第11〜27、29、30行)
※ 用半母字母数字打入。一起点击「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>

这个游览列「navigation-bar的设定以外,还要设定container」跟「main-page」的內容吧。
※ 详细请参考这里吧。
现在的网页上「navigation-bar」的地方会盖住图像,所以设定「main-page」的CSS文件修改內容吧。

编辑style.scss的內容。

 style.scss(追加第1〜3行)
※ 用半母字母数字打入。一起点击「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; }

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


编辑好了之后,打开「0.0.0.0:3000」吧!
 使用Windows的话,打开「localhost:3000」吧。 Chrome messages root 2 有沒有显示上面的网页了吗?

设定的內容请参考这里吧。


4 : 用户管理

最后用devise,设定用户管理。
※ 详细请参考这里
在这里做 这个四个设定吧。

 ① : 安裝「devise」


那么安裝「devise」吧!
为了安裝用gem导入的「devise」,在terminal上打入下面的命令。
※ 详细请参考这里

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

这样安裝好「devise」了!
接下作「devise」的会员资料库吧!


 ② : 作会员资料库


接着作「devise」的会员资料库吧!
在这里使用「devise」作「users」资料库。为了「devise」作「users」资料库,要在terminal打入下面的內容。
※ 详细请参考这里

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

这样作好了作「devise」的「users」资料库的设定文件了。
db > migrate 文件夾里的日子_devise_create_users.rb是这个设定文件。
在这个文件夾里追加下面的內容。

 日子_devise_create_users.rb(追加第33〜36行)
※ 用半母字母数字打入。一起点击「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

在这里追加了
  • 短的文章的「first_name」的框子
  • 短的文章的「family_name」的框子
  • 长的文章的「self_introduction」的框子
  • 数字的文章的「age」的框子
这个四个框子。
设定好了之后,作资料库吧!
为了用设定的文件作资料库,要在terminal上打入下面的命令。

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

 不动的话,在前面追加「bundle exec」,打入「bundle exec rake db:migrate」吧。

这样作好资料库了!

作完之后,在Sequel Pro / SqliteBrowser看看「message-app_development」的「users」资料库有沒有作好了沒!
※ 打开Sequel Pro的方法请参考这里、打开SqliteBrowser的方法请参考这里

接下來,装饰「devise」的注册・登入网页吧!


 ③ : 装饰注册・登入网页


用「devise」作注册・登入网页之后,装饰网页的內容吧!
在这里用「devise」作注册・登入网页之后,用Bootstrap装饰网页的內容吧。
為了用「devise」作网页的画面,要在terminal上打入下面的內容。
※ 详细请参考这里

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

在这个命令作好的几个文件文件夾里,使用
  • 注册画面
  • app > views > devise > registrations」文件夾里的「new.html.erb」文件
  • 登入画面
  • app > views > devise > sessions」文件夾里的「new.html.erb」文件
这个两个文件。在各个文件上设定內容。
※ 详细请参考这里

在这里做 这个三个內容。

 装饰注册・登入网页上的输入框・按钮

输入框跟按钮的装饰,使用Bootstrap的设定。
 首先从注册网页开始装饰。

在设定注册网页的设定文件是app > views > devise > registrations里的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" %>

为了把输入框的长度设定的短一点,在app > assets > stylesheets > style.scss里追加设定输入框的大小的CSS文件的设定「my-form」
※ 详细请参考这里

 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{ /* 以下省略 */

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


编辑好之后,打开「0.0.0.0:3000/users/sign_up」吧!
 使用Windows的话,打开「localhost:3000/users/sign_up」吧。 Chrome messages users sign up 有沒有显示上面图像一样的画面吗?
接着做登入网页的设定吧!

 接着装饰登入网页

显示登入网页的设定文件是app > views > devise > sessions里面的new.html.erb」文件

编辑sessions里面的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" %>

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


做好之后,打开「0.0.0.0:3000/users/sign_in」吧!
 使用Windows的话,打开「localhost:3000/users/sign_in」吧。 Chrome messages users sign in 有沒有显示上面图像一样的画面吗?
接着在游览列(navigation-bar)上追加,移动到注册・登入网页的连接。

 游览列(navigation-bar)上追加,移动到注册・登入网页的连接

「navigation-bar」的设定是,在application.html.erb里追加Bootstrap的装饰设定。
※ 详细请参考这里吧。

在这个章设定的「navigation-bar」里追加,移动到 的连接吧!

打开app > views > layouts > application.html.erb之后,参考下面的內容编辑文件的內容吧!
※ 详细请参考这里

 application.html.erb(追加第24〜28行)
※ 用半母字母数字打入。一起点击「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 <!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"> <%= yield %> </div> </body> </html>

用「if」「else」跟「user_signed_in?」,设定
  • 不是会员的话,显示「注册」「登入」的连接
  • 会员的话,显示「登出」的连接
的內容吧。
※ 详细请参考这里

这样游览列的设定好了!
一起点击「Command」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。
这样编辑好的內容会适用在网页上。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


编辑好了之后,打开「0.0.0.0:3000/posts」吧!
 使用Windows的话,打开「localhost:3000/posts」吧。 Chrome messages root add nav users sign in up 游览列(navigation-bar)上有沒有显示连接了吗?
做好之后点击连接,看看移动到的网页是对不对。
 追加注册・登入的通知

注册・登入的通知的设定,在application.html.erb里设定Bootstrap跟「if」「else」的条件判別。
※ 详细请参考这里

参考下面的內容,编辑application.html.erb的內容吧!

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


35 36 37 38 39 40 41 42 43 44 45 <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>

这样做好通知的设定了!
接着用「users」资料库,显示看「users」资料库的网页吧!



最后作作看用「users」资料库作的网页吧。
设定用资料库的网页的话,需要做
  • 七个网页的设定(routes.rb)
  • 操作资料的设定(controller)
  • 显示网页的设定(views)
这个三个设定。

首先为了作「users」资料库的资料操作・网页显示的设定文件,在terminal上打入下面的命令。
※ 详细请参考这里

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

这样作好
  • 资料操作的设定文件「app > controllers > users_controller.rb
  • 显示网页的设定文件夾「app > views > users
这两个了。
在这个文件文件夾上,设定內容。
应为「devise」会作好会员资料,所以「users」资料库里设定 这个四个內容

所以在显示网页的设定文件夾app > views > users里,保存
  • show.html.erb
  • index.html.erb
  • edit.html.erb
  • update.html.erb
这个四个文件吧(保存文件的方法请参考这里

到这里做好之后,首先设定「七个网页的设定」吧!
 七个网页的设定

「七个网页的设定」要在config > routes.rb里追加设定。编辑routes.rb的內容吧!
※ 详细请参考这里

 routes.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

这样设定好了使用「users」资料库的「show」「index」「edit」「update」网页的设定了!

那么,在各个网页上追加设定吧!

 show网页

要设定网页的时候,需要
  • 操作资料的设定(users_controller.rb
  • 显示网页的设定(html.erb
这个两个设定。
首先从操作资料的设定开始做吧。在app > controllers > users_controller.rb里追加资料操作的设定。

编辑users_controller.rb的內容吧。
※ 详细请参考这里

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


1 2 3 4 5 6 7 8 9 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) end end

在这里追加了
  • 设定在「show.html.erb」显示的标记「@user
  • 设定不让沒登入的会员看內容(请参考这里
这个两个设定。
接着设定显示网页的设定吧!
编辑app > views > users > show.html.erb的內容吧。
※ 详细请参考这里

 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 %>

显示「@user」的资料以外,
用「if」「else」,如果登入的会员跟网页上显示的会员是一样的时候而已,显示

编辑会员资料

的按钮。
※ 详细请参考这里

到这里「show」网页的设定完成了!

做好这里之后,
注册网页「0.0.0.0:3000/users/sign_up裡注册新的会员吧!
 使用Windows的话,打开「localhost:3000/users/sign_up」吧。 Chrome messages users sign up enter info 作好了之后,看看会员的网页「0.0.0.0:3000/users/1吧! Chrome messages users 1 no info 有沒有显示上面一样的內容吗?

接着做「index」网页吧!
 index网页

首先从资料操作(controller)开始做吧。
编辑app > controllers > users_controller.rb的內容吧。
※ 详细请参考这里

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


1 2 3 4 5 6 7 8 9 10 11 12 13 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 end

这样子设定好了,网页上显示的标记「@users」
接着设定显示的网页吧。

「index」网页的显示,在app > views > users > index.html.erb文件里设定显示的內容。
编辑index.html.erb的內容吧!
※ 详细请参考这里

 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>

在这个设定,把「users_controller.rb」设定的「@users」分成一个一个的內容显示在网页

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


做好之后,打开「0.0.0.0:3000/users」吧!
 使用Windows的话,打开「localhost:3000/users」吧。 Chrome messages users 有沒有显示上面图像一样的网页吗?

接着做「edit」网页吧
 edit网页

首先从资料操作开始做。
编辑app > controllers > users_controller.rb的內容吧。
※ 详细请参考这里

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


9 10 11 12 13 14 15 16 17 18 19 20 21 22 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 end

在这里也使用「if」「else」
  • 如果登入的会员跟在显示的会员一样的话,

  • 显示网页的內容

  • 如果登入的會員跟在顯示的會員不一樣的話,

  • 移动到"/"「0.0.0.0:3000网页,显示

    无效的会员

的设定。
※ 详细请参考这里
接下设定网页的显示吧。

「edit」网页的显示,在app > views > users > edit.html.erb文件里设定显示的內容。
编辑edit.html.erb的內容吧!
※ 详细请参考这里

 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>

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


编辑好了之后,打开「0.0.0.0:3000/users/1/edit」吧!
 使用Windows的话,打开「localhost:3000/users/1/edit」吧。 Chrome messages users 1 edit 有沒有显示上面图像一样的画面吗?

接着设定「update」网页的设定吧!
 update网页

在这里的「update」网页里想设定,编辑好了之后
不移动到编辑完成的网页,而移动到会员编辑的网页「0.0.0.0:3000/users/1/edit的设定。

在「edit」网页上点击「登录」之后,下面像图像一样再显示「edit」的网页。 Chrome messages users 1 update after 这个是在资料操作的「controller」文件上使用「redirect_to」跟「通知:flash设定。
那么在app > controllers > users_controller.rb上面设定內容吧。
详细请参考这里

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


13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 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

这一次也用「if」「else」条件判別(详细请参考这里)。
「if」「else」里面,新设定了

26 27 redirect_to "/users/#{@user.id}/edit" flash[:notice] = "会员资料编辑好了"

的內容。

可以理解,在第27行显示

会员资料编辑好了

的內容,

但是第28行redirect_to是移动到哪一个网页呢?
应该可以推测,在这里移动到「users」资料库的「edit」网页吧。

这个「#{@user.id}」跟显示网页的「html.erb」

1 <a href="/users/<%= @user.id %>/edit">编辑会员资料</a>

显示标记的

1 <%= @user.id %>

一样,显示资料「@user.id」。
这一次的

1 redirect_to "/users/#{@user.id}/edit"

是在「controller」文件显示「@user.id」的设定。

可是使用#{@user.id}的显示,也许觉得有一点奇怪。
「""」里的这个
#{}
大概可以说是,跟「html.erb」文件
<%= %>
一样的设定。

如果不用「#{}」的话,「""」里的「@user.id」的部分不会换成会员的号码
会移动到0.0.0.0:3000/users/@user.id/edit的网页。

如果资料操作的文件的「""」里面使用像「@user」一样的编辑的时候,用「#{}」显示资料。

 使用「redirect_to」移动到「posts」资料库的「show」网页的设定要怎么设定好呢?


1 redirect_to "/posts/#{@post.id}/edit"

※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。


 使用Windows的话,
 一起点击「ctrl」跟「c」停止,用「rails s」打开的服务器之后,再打入「rails s」吧。


做好之后,打开「0.0.0.0:3000/users/1/edit」吧!
 使用Windows的话,打开「localhost:3000/users/1/edit」吧。

打入资料之后点击「登录」吧! Chrome messages users 1 update after 有沒有显示上面图像一样的网页吗?
接着在0.0.0.0:3000/users/1的网页看看內容有沒有更改!

最后update.html.erb不用使用了,所以删除吧。

设定的內容请参考这里吧。


到这里作好了「message-app」的用户管理了!
这个章的內容都是复习,应该沒有很难的地方。

从下章,作作看网络聊天的网站吧!