* 多档案上传
* 图表资料分析  Chartkick gem或者 chart.js
* 用户权限控管  gem Pundit （6000✨）

* HTML E-mail 寄送 ： gem premailer-rails 

上传图片

使用gem ''CarrierWave'

Rails5.1 有了内建的ActiveStorage。更好使。这里只是了解一下老版本的上传方法。

CarrierWave的特点是，model需要添加一个string格式的column来储存image信息。

而ActiveStorage，建立了2个Model,和需要图片或文件的model关联。

Chart

HTML Canvas (点击见API)

HTML<canvas>元素用于在网页上画图，它是一个container。实际上必须使用script来画图（通常是JavaScript）。

getContext()返回一个对象，这个对象提供方法和特性来支持在canvas上画图。

getContext("2d")对象，可以用于画text， lines, boxes, circles等。

例子：

fillStyle()：填充color, gradient ,pattern

fillRect(x, y, width, height)： 画出一个长方形的空间

制作图表需要用到前端 JavaScript 套件

• Chartkick 这一套搭配 Rails 最简单（4800?），甚至不需要写 JavaScript 代码，有 Helper 可以使用

• Chart.js 这一套好用又漂亮，需要写 JavaScript
• D3.js 这一套功能最强，是专业的数据可视化套件，但也比较复杂

示范会使用 Chart.js，这也有中文文档。

Chart.js

Chart.js 有 chart-js-rails gem 可以安装，但是因为只有后台报表那一页有用到，所以我们就不包进 asset pipeline 了，而是使用 CDN 让用户直接从 CDN 服务器下载回去。

在国内免费的 CDN 服务器 BootCDN 上可以找到 Chart.js，编辑 app/views/admin/events/show.html.erb 把该位置贴上去：

app/views/admin/events/show.html.erb

+  <script src="//cdn.bootcss.com/Chart.js/2.5.0/Chart.bundle.min.js"></script+  <canvas id="myChart" width="400" height="200"></canvas>+  <script>

+  var ctx = document.getElementById("myChart");
+  var myChart = new Chart(ctx, {
+      type: 'bar',  #产生柱状图，还有"line"产生线图，等等
+      data: {
+          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+          datasets: [{
+              label: '# of Votes',
+              data: [12, 19, 3, 5, 2, 3],
+              backgroundColor: [
+                  'rgba(255, 99, 132, 0.2)',
+                  'rgba(54, 162, 235, 0.2)',
+                  'rgba(255, 206, 86, 0.2)',
+                  'rgba(75, 192, 192, 0.2)',
+                  'rgba(153, 102, 255, 0.2)',
+                  'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                  'rgba(255,99,132,1)',
+                  'rgba(54, 162, 235, 1)',
+                  'rgba(255, 206, 86, 1)',
+                  'rgba(75, 192, 192, 1)',
+                  'rgba(153, 102, 255, 1)',
+                  'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1
+          }]
+      },
+      options: {
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero:true
+                  }
+              }]
+          }
+      }
+  });
+  </script>

data: 实际应当写成data: <%= @data.to_json%>。从controller中得到@data数据，然后用to_json转化为javascript变量。例子，在控制器的show方法：

+   status_colors = { "confirmed" => "#FF6384","pending" => "#36A2EB"}+   @data1 = {
+       labels: ticket_names,
+       datasets: Registration::STATUS.map do |s|
+         {
+           label: I18n.t(s, :scope => "registration.status"),
+           data: @event.tickets.map{ |t| t.registrations.by_status(s).count },
+           backgroundColor: status_colors[s],
+           borderWidth: 1
+         }
+       end
+   }

labels: ticket_names将产生：

"labels": ["Guest","VIP 第一期","VIP 第二期"], // 这是 x 轴的标籤

datasets: [{}] 参数其实就是资料集的数组，这里使用循环会产生2个资料hash。

    "datasets":[{ "label": "报名尚未完成", // 这是第一个资料集 "data": [160,164,160], "backgroundColor":"#36A2EB", "borderWidth":1 }, { "label": "报名成功", // 这是第二个资料集 "data":[164,182,170], "backgroundColor":"#FF6384", "borderWidth":1 }

分析每日报名人数，并根据状态分类

分析从第一天到今天的每日报名人数，并根据状态分类。

编辑 app/controllers/admin/events_controller.rb。其中 labels 参数是 Y 轴，这里改成用 dates 数组，代表从有人报名的第一天到今天。

app/controllers/admin/events_controller.rb

+   if @event.registrations.any?
+     dates = (@event.registrations.order("id ASC").first.created_at.to_date..Date.today).to_a+     @data3 = {
+       labels: dates,
+       datasets: Registration::STATUS.map do |s|
+         {
+           :label => I18n.t(s, :scope => "registration.status"),
+           :data => dates.map{ |d|
+             @event.registrations.by_status(s).where( "created_at >= ? AND created_at <= ?", d.beginning_of_day, d.end_of_day).count
+           },
+           borderColor: status_colors[s]
+         }
+       end
+     }
+   end

跟上一节类似，data 有有两个资料集分别是报名尚未完成和报名完成。

编辑 app/views/admin/event/show.html.erb 加上图表，这里改成用 line 折线图：

app/views/admin/event/show.html.erb

   <hr>+  <canvas id="myChart3" width="400" height="200"></canvas>
+  <script>
+  var ctx3 = document.getElementById("myChart3");
+  var myChart3 = new Chart(ctx3, {
+      type: 'line',
+      data: <%= raw @data3.to_json %>,
+      options: {
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero:true
+                  }
+              }]
+          }
+      }
+  });
+  </script>

用户权限管理user.role = 'admin'

rails g migration add_role_to_users role: string

rails db:migrate

用 role 的设计好处是可以扩充不同角色，让我们新设计一个 editor 角色：

• admin 有全部后台权限
• editor 可以进入后台管理活动，但不能管理用户

在app/controllers/admin_controller.rb

   def require_editor!if current_user.role != "editor" && current_user.role != "admin"flash[:alert] = "您的权限不足"redirect_to root_pathendenddef require_admin!if current_user.role != "admin"flash[:alert] = "您的权限不足"redirect_to root_pathendend

然后在不同的controller中选择不同的权限审查: before_action :require_xxx!

在user.rb中增加2个角色,使用常量ROLES = ['admin', 'editor']

编辑 app/views/admin/users/edit.html.erb

app/views/admin/users/edit.html.erb

+  <div class="form-group">
+    <%= f.label :role %>
+    <%= f.select :role, User::ROLES.map{ |x| [t(x, :scope => "user.role"), x] }, { :include_blank => true }, :class => "form-control" %>
+  </div>

编辑 config/locales/zh-CN.yml 加上翻译。

编辑 app/controllers/admin/users_controller.rb

app/controllers/admin/users_controller.rb

   def user_params
     params.require(:user).permit(:email, :role, :group_ids => [])end

⚠️ :group_ids => [] 是数组集合必须放到最后面。否则会报告❌。

这样就可以编辑用户的角色了。请编辑任一个用户变成 editor，然后登出，改用那个帐号登入(假用户的密码是12345678)，就可以测试上一节的权限检查了：可以活动管理，但是点用户管理会跳出权限不足。

2个权限的gem

• Pundit （6000✨）推荐✅。
• Cancancan （4000?）

HTML E-mail 寄送

gem  letter_opener

本机开发的时候，不需要真的寄出 E-mail，安装 letter_opener，这样 Rails 会在寄信时，自动打开浏览器进行预览。

  group :development do
    gem 'letter_opener'

config/environments/development.rb

+  config.action_mailer.delivery_method = :letter_openerconfig.action_mailer.default_url_options = { :host => 'localhost:3000' }

可以使用重置密码进行测试。

寄送报名完成的 E-mail

目标：完成报名后，寄出通知 E-mail

执行 rails g mailer notification

app/mailers/notification_mailer.rb

  class NotificationMailer < ApplicationMailer+   def confirmed_registration(registration)
+     @registration = registration
+     @event = registration.event
+
+     mail( :to => @registration.email, :subject =>   I18n.t("notification.subject.confirmed_registration", :name => @event.name) )
+   endend

config/locales/zh-CN.yml

  "zh-CN":
+   notification:
+     subject:
+       confirmed_registration: "报名成功: %{name}"

⚠️  translate(key, options= {} ) 可以传递变量

新增 app/views/notification_mailer/confirmed_registration.text.erb 是 E-mail 样板

Hi <%= @registration.name %>, 您已完成报名 <%= @event.name %> <%= event_url(@event) %>

编辑 app/controllers/registrations_controller.rb 在报名完成后寄出 E-mail

app/controllers/registrations_controller.rb

  def step3_update略...if @registration.update(registration_params)flash[:notice] = "报名成功"+     NotificationMailer.confirmed_registration(@registration).deliver_laterredirect_to event_registration_path(@event, @registration)elserender "step3"endend

app/views/notification_mailer/confirmed_registration.html.erb

-   Hi <%= @registration.name %>,
+  <p>Hi <%= @registration.name %>,</p>-  您已完成报名 <%= @event.name %> <%= event_url(@event) %>
+  <p>您已完成报名 <%= link_to @event.name, event_url(@event) %></p>

提示：

由用户触发的系统信比较适合用 HTML E-mail，用户会感觉那是系统自动寄出的信件。但如果是客服回信或意见询问，用纯文字 E-mail 可能反而比较有诚意喔。因为用户会感觉那是人写的信件，而不是系统自动寄出的信。

因为 E-mail 的 CSS 属性支援程度不一，如果要完全自己写 CSS 测试会很辛苦，好在我们有现成的 Email Responsive Template 样板可以套。

• Transactional HTML Email Templates
• Really Simple Responsive HTML Email Template