使用Bootstrap Bar来增加Onboarding Progress Bar功能。

佚名 6年前 (2019-04-11) 随笔 892人围观抢沙发百度已收录

git初始代码https://github.com/chentianwei411/at-mentions-with-action-text

首先，开分支onboardingbar.

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

然后，

rails g scaffold Team user:references name
rails g migration AddTwitterToUsers twitter
rails db:migrate

在user.rb上添加

has_many :teams

在_navbar.html.erb上添加导航链接：

<li class="nav-item"><%= link_to "Teams", teams_path, class: "nav-link" %></li>

在用户注册app/views/devise/registrations／edit.html.erb上添加twitter field:

<div class="form-group">
  <%= f.text_field :twitter, class: 'form-control', placeholder: 'Twitter Username' %>
</div>

在application_controller.rb上添加参数白名单：

  protected

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

添加OnboardingBar:

在app/views/home/index.html.erb

<% if user_signed_in? %>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%"></div>
  </div>

  <%= current_user.twitter? %>
  <%= current_user.teams.any? %>
<% end %>

下一步，user.rb添加方法来判断onboardingbar的进度：

  def onboarding_percent
    steps = [:twitter?, :has_team?]
    conplete = steps.select{ |step| send(step)}
    complete.length / steps.length.to_f * 100
  end

  def has_team?
    teams.any?
  end

# select()方法，筛选返回值为true的数组项
# Ruby#send()方法，可以使用symbol符号方法

在views/home/index.html.erb:

<%= current_user.onboarding_percent %>%

这样进度条就可以根据数据库传来的数据显示进度了。

下一步晚上进度条的说明，即缺哪一项：