Devise进阶用法:修改注册页面、新增栏位

本篇文章将介绍如何在Devise中,于注册时直接新增User的姓名及管理者权限

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - 新增Devise相关页面,以便后续调整注册单页

Step 1. 确认当前页面

❖ 刚做完教程的同学们,没有意外的话,你的画面应该长得跟下图差不多 ❖

基础页面:

登录页面:

Step 2. 新增Devise相关Views页面

输入rails g devise:views,可以看到系统生成了许多与User相关的页面

❖ 刚安装完Devise的gem时,是没有相关的Views提供修改的 ❖

❖ 页面都放在app/views/devise里面 ❖


Part 2 - 新增User栏位

Step 1. 在User Model中新增姓名栏位

输入rails g migration add_name_to_user

Step 2. 在新增的magraion档案里加入以下代码并储存
add_column :users, :name, :string

Step 3. 执行db:migrate

输入rake db:migrate

※ 现在已经成功在User Model里新增name这个栏位,格式为string ※


Part 3 - 修改注册页面

Step 1. 新增姓名及管理者权限栏位
app/views/devise/registrations/new.html.erb
<%= f.input :name, required: true %>
<%= f.input :is_admin, as: :radio_buttons, collection:  [['一般用户', false], ['企业用户', true]], required: true %>

❖ 此时注册页面会跟下图一样 ❖


*Part 4. 实作新增功能

Step 1. 新增文件夹

输入mkdir app/controllers/users

Step 2. 新增文档

输入touch app/controllers/users/registrations_controller.rb

❖ 此文档为用来控制发生注册动作时的Controller ❖

*Step 3. 修改注册功能(将原先Devise的注册功能调整为我们想要的)
app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:is_admin,:name])
  end
end

*Step 4. 修改routes代码(设定注册时,使用上面修改的Controller)
config/routes.rb
- devise_for :users
+ devise_for :users, :controllers => { :registrations => "users/registrations" }

※ 注册功能修改成功,注册时可同时新增姓名及管理者权限 ※


Part 5 - 调整navbar导览栏

Step 1. 修改欢迎文字,从邮箱改为姓名
app/views/common/_navbar.html.erb
- Hi!, <%= current_user.email %>
+ Hi!, <%= current_user.name %>

Step 2. 此时可以尝试注册新用户,输入姓名及选择企业用户(管理者权限)

Step3. 可以看到导航栏正常显示用户姓名,下单选单里也有Admin Panel功能

大功告成!!








Plus - 优化Devise设定(选修)

当然Devise里可以修改的地方远不止上方介绍那些

可以看到之前生成的文件夹里有很多档案,透过修改HTML&CSS,可以呈现出不同的样貌,先介绍三个最常用的,其他的可自行摸索
- app/views/devise/registrations/new.html.erb 注册页面
- app/views/devise/sessions/new.html.erb 登录页面
- app/views/devise/passwords/new.html.erb 忘记密码页面


几乎每个页面下方都有这行代码
<%= render "devise/shared/links" %>

这是什么意思呢?代表他们都调用了这文档
app/views/devise/shared/_links.html.erb

透过修改文档内link_to后方的文字,就可修改如下方所示位置的文字


如果你的网站是中文语系,当然会想把提示语也更改为中文,这时候可以到这里修改,config/locales/devise.en.yml

下方红框内的文字,就是有关登录的提示,例如登录成功、登出成功等
同理,如果你想修改其他关于帐户操作时的提示,可以依需求调整,这里就不多做介绍




最后,当然你也可以针对注册/登录页面的CSS做优化,让整个网站看起来更美观


Tips

如果你在使用Devise上遇到任何问题,建议你先上
https://github.com/plataformatec/devise查看官方文档,里面会有详细的介绍及应用。不要被里面的英文所吓到,通常你都可以用关键字查到想要了解的用法,或者快速地看一下整篇文档,通常在实作代码下方都会范例可以参考,如果有解决不了的问题再Google。

一点心得与大家分享。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D



如果我的文章对你有帮助,欢迎随意打赏,谢谢你的支持! :D

comments powered by Disqus