---
# System prepended metadata

title: Rails 超方便會員系統套件 devise
tags: [Rails]

---

# Rails 超方便會員系統套件 devise
###### tags: `Rails`


記得在一開始學Rails時，在手刻會員系統這塊花了非常多時間學習，畢竟包含了MVC彼此間的互動、甚至還要有session的、初階的資料加密觀念等。[這裡有基礎教學](https://www.youtube.com/watch?v=wkNR1hG4yOk&list=PLm8ctt9NhMNV75T9WYIrA6m9I_uw7vS56&ab_channel=GoRails)


有了基礎觀念打底後，在實作上我們可以使用「devise」這個套件，直接幫我們生成會員系統，除了基本的註冊功能外，甚至連edit、log_out的頁面都做好了，真是感謝這群佛心的大大們，那我們就直接開始安裝吧。

## Step1: 安裝devise
首先先到devise的git-hub
https://github.com/heartcombo/devise#getting-started
照著流程走到rails generate devise MODEL
這裡的MODEL是placeholder，我們可以視專案內容來調整，這邊我把它改成User

接著我們就可以把相關資料建成資料庫了
rails db:migrate

## Step2: devise幫我們做了什麼
在安裝的時候我們可以發現終端機上的訊息
```
      invoke  active_record
      create    db/migrate/20211214003127_devise_create_users.rb
      create    app/models/user.rb
      invoke    rspec
      create      spec/models/user_spec.rb
      invoke      factory_bot
      create        spec/factories/users.rb
      insert    app/models/user.rb
       route  devise_for :users
```
devise除了幫我們建立migration檔案之外，還幫我們建立好了route

![](https://i.imgur.com/pMWCRiM.png)

而且我們試著在網址列輸入(http://localhost:3000/users/sign_up)，發現裡面竟然已經有內容了！！雖然外觀略顯陽春，但裡面的欄位都是可以輸入跟提交的。

有了devise的加持，美觀的部分就交給我們自己完成吧！

### Step3: 客製化devise的view畫面
Rails的專案中View是主要放各個action對應到的HTML畫面，但在devise建立資料表的過程中，並沒有一起建立view的資料，所以我們要利用終端機客製化我們的外觀，這裡有官方文件介紹。
https://github.com/heartcombo/devise#getting-started


```
$ rails generate devise:views
```
這時會發現devise長出好多東西給我們
```
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb
```

接著就可以去
app/views/devise/sessions/new.html.erb
app/views/devise/registrations/new.html.erb
修改我們的註冊以及登入畫面