10 : 用户管理②

上章:用户管理①

Header10 这个章是,上章「用户管理①」继续的內容。
还沒看完上章的內容的话,请参考这里吧。

3 : 作「users」网页

到这里作了,沒有登入的利用者不能看全部的「posts」网页的网站了。
用作好的「users」资料库,接着作「users」资料库的网页吧。
在这个章作的「users」资料库的网页的设定是,
  • show
  • 显示会员的资料
  • index
  • 显示全部的会员的资料
  • edit
  • 打入编辑的会员的资料
  • update
  • 用「edit」网页打入的內容,更新会员的资料
这个四个內容。

在这里,在「users」资料库上设定 这个三个內容。
首先从「七个网页的设定」开始做吧!

 ① : 七个网页的设定


要设定网页的时候,在「config > routes.rb」文件里设定要用哪一个网页。
首先用Sublime Text打开myapp之后,编辑「config > routes.rb」文件的內容吧。
※ 使用Sublime Text打开文件的方法请参考这里
 使用Windows的Sublime Text打开文件文件夾的方法请参考这里


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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ... 61 62 Rails.application.routes.draw do devise_for :users resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] 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". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

追加的內容是用「users」资料库的七个网页的设定

在这里设定,使用「users」资料库的「show」「index」「edit」「update」网页
仔细看內容可以看到,第3行里有新追加的设定。

 routes.rb(第3行)
3 devise_for :users

这个设定是,在作「users」资料库的设定文件的时候

 terminal
1 rails g devise user

自动追加的內容,在设定使用
等等的「devise」作的网页。
到这里,设定了要使用「users」资料库的「show」「index」「edit」「update网页。
接着做资料的操作吧。


 ② : 显示网页・操作资料的设定


设定好了七个网页的设定,接着设定显示网页跟操作资料吧。

要作显示网页跟操作资料的文件文件夾,要terminal上打入
rails g controller 资料库的名字
的命令。

同样作作看「users」资料库的设定文件文件夾吧!

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

有沒有显示下面图像一样的画面吗? Rails g controller users 这个打入自动会作app > controllers > users_controller.rb文件跟app > views > users文件夾,看看有沒有作好了沒!
确认文件文件夾作好之后,设定「users_controller」的文件吧。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class UsersController < ApplicationController def show end def index end def edit end def update end end

※ 这个设定在「posts」资料库也设定过了,详细的內容请参考这里

这一次要设定
的网页。
※ new」跟「create的网页,「devise」已经在注册登入的网页作好了。
在这里保存要使用的显示网页的设定文件吧(详细请参考这里)。
为了作网页,在app > views > users文件夾里保存
  • show.html.erb
  • index.html.erb
  • edit.html.erb
  • update.html.erb
这个四个文件吧。
※ 保存文件的方法请参考这里

在这些文件上,设定网页的显示吧。

 那么,设定各个资料操作跟网页显示吧

 ⑴ : show网页


show」网页的资料操作是用id显示网页的內容,像下面设定。
※ 详细的说明,请参考「posts」资料库的「show」网页

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


3 4 5 def show @user = User.find(params[:id]) end

用这个@user在网页上显示会员的资料。
接着,在app > views > users > show.html.erb文件上追加显示的內容。编辑show.html.erb的內容吧。
※ 详细的內容,请参考「posts」资料库的「show」网页

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


1 2 3 4 5 6 7 8 <h1>會員資料</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %></p> <p>自我介绍:<%= @user.self_introduction %></p> <hr> <p><a href="/posts" class="btn btn-info">返回主页</a></p> <p><a href="/users" class="btn btn-primary">返回会员一览</a></p> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">编辑会员资料</a>

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


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


编辑好了之后,打開「0.0.0.0:3000/users/1」吧!
 使用Windows的话,打开「localhost:3000/users/1」吧。

有沒有显示下面图像一样的网页吗? Chrome users 1 还沒保存「users」资料库的
  • 「family_name」
  • 「first_name」
  • 「self_introduction」
这些框子的资料,所以內容还不会显示。


过一会儿作好edit」「update」网页之后,在网页上显示保存好的资料吧!
连接有
  • 移动到「users」资料库的「index」网页的连接

  • 1 <p><a href="/users" class="btn btn-primary">返回会员一览</a></p>
    返回会员一览
  • 「users」资料库的「edit」网页的连接

  • 1 <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">编辑会员资料</a>

    编辑会员资料

这个两个。
但是点击这些连接之后移动到的网页的內容还沒设定好,所以移动后也显示空白的网页。
咱們接着设定剩下的网页吧。


 ⑵ : index网页


index」网页的资料操作是,从「users」资料库选择全部的资料的资料操作。
※ 详细的內容,请参考「posts」资料库的「index」网页的设定

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


7 8 9 def index @users = User.all end

在网页上,显示在这里设定的,选择「users」资料库的全部的资料@users」。
接着在app > views > users > index.html.erb上追加显示的设定。编辑index.html.erb的內容吧。
※ 详细的內容请参考「posts」资料库的「index」网页

 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="/posts" class="btn btn-info">返回主页</a>

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


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


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

有沒有显示下面图像一样的画面吗? Chrome users 在这里也沒有保存family_name」跟「first_name的资料,所以沒有显示会员的名字吧。



edit」网页的资料操作要选择编辑的资料。
参考下面,编辑里面的內容吧!
※ 详细的说明,请参考「posts」资料库的「edit」网页

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


11 12 13 def edit @user = User.find(params[:id]) end

用这个@user的资料,设定打入的输入框发信按钮
接着在app > views > users > edit.html.erb上追加设定。编辑edit.html.erb的內容吧。
※ 网页的说明,请参考「posts」资料库的「edit」网页
※ 输入框的class等等,请参考Bootstrap的说明

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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.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 users 1 edit before 输入框也做好了,接着作资料的更新吧!



update」网页的资料操作是,用在「edit」网页打入的资料更新资料。
参考下面,设定內容吧。
※ 详细的內容,请参考「posts」资料库的「update网页吧。

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


15 16 17 18 def update @user = User.find(params[:id]) @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction)) end

选择更新的资料之后,用「edit」网页打入的资料更新资料。

为了不让別的框子的资料(id或者email等等)更新,设定只让「users」资料库的
  • family_name
  • first_name
  • self_introduction
这个三个框子更新。

接着在app > views > users > update.html.erb上设定內容吧。编辑update.html.erb的內容吧。
※ 详细的內容,请参考「posts」资料库的「update网页吧。

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


1 2 3 4 5 6 7 8 <h1>会员资料编辑好了。</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %></p> <p>自我介绍:<%= @user.self_introduction %></p> <hr> <p><a href="/users/<%= @user.id %>" class="btn btn-primary">返回会员资料</a></p> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">编辑会员资料</a></p> <p><a href="/posts" class="btn btn-info">返回主页</a></p>

※ 一起点击「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 users 1 edit 有沒有移动到编辑完成的网页了吗? Chrome users 1 update 出现网页之后,打开0.0.0.0:3000/users/1吧!
 使用Windows的话,打开「localhost:3000/users/1」吧。 Chrome users 1 after 在「show」网页上,有沒有显示编辑的资料了吗?



最后追加检查利用者有沒有登入的设定。
追加下面的设定吧。
※ 详细的说明,请参考登入机能

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


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

这一次设定「users」资料库的「show」「index」「edit」「update」网页上,检查利用者有沒有登入的设定。


到这里设定好了「users」资料库的网页的设定了。

因为是设定的內容,因该沒有很难的地方吧。
接着为了把网站设定的更方便,追加看「users」网页的连接吧。


 ③ : navigation-bar上追加「users」网页的连接


到这里,做好了「users」资料库的网页。
最后在游览列・navigation-bar上,追加移动到「users」网页连接吧。
沒有登入的时候,在游览列上显示「登入」「注册」的连接 Chrome users sign in nav 登入的时候,在游览列上显示「会员一览」「会员资料」「作投稿」「登出」的连接 Chrome posts all nav after login 显示的这样子的设定吧。

 ⑴ : 追加移动到「users」网页的连接


首先在游览列・navigation-bar里,追加「users」网页的连接吧。

 那么移动到「users」资料库的「index」网页的连接「会员一览」要怎么设定好呢?


1 <a href="/users">会员一览</a>

事先在游览列・navigation-bar上设定,移动到这个users」的「index」网页的连接吧。

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


23 24 25 26 27 28 29 30 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">注册</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">会员一览</a></li> <li><a href="/posts/new">作投稿</a></li> </ul> </div>

那么打开看自己喜欢的网页吧。在游览列上追加了「会员一览」的连接了吗?

接着追加users」资料库的「show」网页的连接吧!
要设定的移动到「users」的「show」网页的连接,必须要移动到自己的会员的网页。
那么,在利用的会员的(利用者自己的)资料要怎么取得呢?

在这里使用「devise」作
current_user
这个设定。用「<% %>」(或者是「<%= %>」)里打入这个內容,可以取得利用者的资料。

用这个「current_user」的设定,例如说想显示利用者的「first_name」的话,

1 <p><%= current_user.first_name %></p>

这样子可以显示內容。

使用这个「current_user」,在navigation-bar上追加移动到利用者的网页的连接吧。

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


23 24 25 26 27 28 29 30 31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">注册</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">会员一览</a></li> <li><a href="/users/<%= current_user.id %>">会员资料</a></li> <li><a href="/posts/new">作投稿</a></li> </ul> </div>

编辑完了之后,打开自己喜欢的网页吧。有沒有显示「会员资料」的连接吗? Chrome posts all nav add users 有显示「会员资料」的连接的话,点击连接吧。移动到会员资料的网页(0.0.0.0:3000/users/1)了吗?

这一次使用去的利用者的id,

28 <li><a href="/users/<%= current_user.id %>">会员一览</a></li>

设定移动到利用者的会员资料的网页的连接。

 这样,在登入的利用者的资料可以用
current_user
取得。
最后设定登出」的连接吧。
登出的连接的內容,

1 <%= link_to "显示的文字", destroy_user_session_path, :method => :delete %>

设定。
追加看下面的內容吧。

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


23 24 25 26 27 28 29 30 31 32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">会员一览</a></li> <li><a href="/users/<%= current_user.id %>">会员资料</a></li> <li><a href="/posts/new">作投稿</a></li> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> </ul> </div>

编辑完了之后,在自己喜欢的网页上看看游览列(navigation-bar有沒有显示。 Chrome posts 1 nav add logout 到这里,网页全部的连接设定完了。


 ⑵ : user_signed_in?


首先点击看「登出」的连接吧。可不可以登出呢?

点击之后,应该会出现下面一样的画面。 Chrome posts after logout 这个是因为会员已经登出了沒有登入的会员的资料,所以「current_user」不能取得登入的会员的资料,显示的错误的画面。

在这里更改这个设定吧。
因为有这样的错误,登入的时候跟沒有登入的时候必须要显示別的连接。

  • 登入的时候

  • 显示「会员一览」「会员资料」「作投稿」「登出」的连接 Chrome posts all nav after login
  • 登出的时候

  • 显示「注册」「登入」的连接 Chrome users sign in nav

使用在登入的通知的解释的判別条件的
<% if 条件 %>
  内容
<% end %>
的设定跟,

「devise」上,判別利用者有沒有登入的,
user_signed_in?
这个设定判別。

那么,使用这个「user_signed_in?」跟「<% if %>」,
设定,登入的时候显示「会员一览」「会员资料」「作投稿」「登出」的连接的设定吧


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


21 22 23 24 25 26 27 28 29 30 31 32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">注册</a></li> <li><a href="/users/sign_in">登入</a></li> <% if user_signed_in? %> <li><a href="/users">会员一览</a></li> <li><a href="/users/<%= current_user.id %>">会员资料</a></li> <li><a href="/posts/new">作投稿</a></li> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> <% end %> </ul> </div>

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


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



再打开同样的网页吧。 Chrome posts root after logout 这一次应该沒问题打开网页了吧。

应为现在利用者沒有登入,所以「会员资料」沒有像上一次一样的显示。这样现在沒有出现错误了。
那么再登入看吧。
有沒有像下面一样登入了吗? Chrome posts root after login 这样看,虽然已经登入了,但是还显示「注册」「登入」的连接现在已经登入好了,还有这些连接是有一点奇怪。
这个也用<% if %>的设定出掉吧。

如果是要判别条件成立的话,使用
<% if 条件 %>
  内容
<% end %>
这个设定在判别条件。
相反的如果要判别条件不成立的话,使用
<% if 条件 %>
  内容(跟条件一样的时候)
<% else %>
  内容(跟条件不同的时候)
<% end %>
判別条件。

那么,设定不让登入的会员显示「注册」「登入」的连接的內容吧。

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


21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% if user_signed_in? %> <li><a href="/users">会员一览</a></li> <li><a href="/users/<%= current_user.id %>">会员资料</a></li> <li><a href="/posts/new">作投稿</a></li> <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>

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


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



编辑完了之后,登入会员再打开自己喜欢的网页吧。 Chrome posts all nav after login 网页上沒有显示注册」「登入的连接吧。
如果沒有显示的话,再登出吧。 Chrome users sign in nav 沒有登入的时候显示的连接的话OK。
最后总结解释的內容。



在这里使用利用者有沒有登入的条件,区别navigation-bar的显示的设定。
为了做这个设定,使用下面的三个设定。
  • current_user(取得登入的会员的资料)
  • user_signed_in?(判別利用者有沒有登入)
  • <% else %>(跟条件不成立的时候显示内容)
在这里说明各个设定。

设定的內容请参考这里
  • current_user

  • 如果想取得登入的的资料的话,用「devise」的设定,在「<% %>」「<%= %>」里面设定
    current_user
    
    这个內容。

    1 <li><a href="/users/<%= current_user.id %>">会员资料</a></li>

  • user_signed_in?

  • 如果想判別利用者有沒有登入的话,用「devise」的设定在「<% %>」里设定
    if user_signed_in?
    
    这个內容。

    1 <% if user_signed_in? %>

  • <% else %>

  • <% if 条件 %>
    
    判別条件的时候,显示条件不成立的设定用「<% else %>」。

    1 2 3 4 5 6 <% 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 %>

到这里设定了「users」网页了。
最后做这里的总结吧。

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



在这个章,使用在上章设定的「devise」的「users」资料库作网页。

设定的內容请参考这里
为了设定「users」网页的內容、首先做用哪一个网页的设定
之后在各个网页上,做显示网页・操作资料的设定

网页的设定也做好了之后,用
  • current_user
  • user_signed_in?
  • <% else %>
设定游览列(详细的內容请参考这里)。
到这里,可以看会员资料了。

接着在投稿的「posts」资料库里加会员资料从投稿的资料看会员的资料吧。