深入Rails：富文本响应与项目结构解析

### 深入Rails：富文本响应与项目结构解析 #### 1. 富文本响应支持请求 为了让管理员能够响应支持请求，我们需要创建一个新的用户界面（UI），让他们可以查看需要响应的请求，提供响应内容，并编写代码将响应内容通过电子邮件发送给客户。这里我们将使用Rails的Action Text库，它可以让我们轻松实现富文本编辑体验。 ##### 1.1 创建支持请求UI 首先，我们要创建一个UI来查看和编辑支持请求。 - **添加路由**：在`config/routes.rb`中添加新的路由，用于`index`和`update`方法。 ```ruby Rails.application.routes.draw do get 'admin' => 'admin#index' controller :sessions do get 'login' => :new post 'login' => :create delete 'logout' => :destroy end resources :users resources :products do get :who_bought, on: :member end resources :support_requests, only: [:index, :update] scope '(:locale)' do resources :orders resources :line_items resources :carts root 'store#index', as: 'store_index', via: :all end end ``` - **创建控制器**：创建`app/controllers/support_requests_controller.rb`并实现`index`方法。 ```ruby class SupportRequestsController < ApplicationController def index @support_requests = SupportRequest.all end end ``` - **创建视图**：在`app/views/support_requests/index.html.erb`中创建视图。 ```erb <ul> <% @support_requests.each do |support_request| %> <li> <h1> On <%= support_request.created_at.to_formatted_s(:long) %> <code><%= support_request.email %></code> writes: </h1> <p> <blockquote> <h2><%= support_request.subject %></h2> <%= support_request.body %> </blockquote> </p> <% if support_request.order %> <h3>Recent Order</h3> <dl> <dt>Name</dt> <dd><%= support_request.order.name %></dd> <dt>Email</dt> <dd><%= support_request.order.email %></dd> <dt>Address</dt> <dd><%= support_request.order.address %></dd> <dt>PayType</dt> <dd><%= support_request.order.pay_type %></dd> <dt>Line Items</dt> <dd> <ul> <% support_request.order.line_items.each do |line_item| %> <li> <%= line_item.product.title %> (<%= line_item.product.price %>) </li> <% end %> </ul> </dd> </dl> <% else %> <h3 class="notice">No associated order</h3> <% end %> <hr> </li> <% end %> </ul> ``` 重启服务器，创建一些订单和支持请求，访问`http://localhost:3000/support_requests`，你应该能看到刚刚创建的UI。 ##### 1.2 集成Action Text实现富文本编辑 如果只需要纯文本响应，我们可以在`SupportRequest`模型中添加一个新属性来保存响应内容。但使用富文本时，情况有所不同。Action Text会将富文本存储在模型之外的独立表中。 - **在模型中添加富文本字段**：在`app/models/support_request.rb`中使用`has_rich_text`方法。 ```ruby class SupportRequest < ApplicationRecord belongs_to :order, optional: true has_rich_text :response end ``` - **安装Action Text**：运行Rake任务`action_text:install`。 ```bash bin/rails action_text:install ``` - **重新运行Webpack**：由于生成器修改了`app/javascript/packs/application.js`，需要重新运行Webpack。 ```bash bin/webpack ``` - **运行数据库迁移**：运行`db:migrate`任务添加Action Text所需的表。 ```bash bin/rails db:migrate ``` - **更新视图**：在`app/views/support_requests/index.html.erb`中使用`rich_text_area`替换普通的`text_area`。 ```erb <ul> <% @support_requests.each do |support_request| %> <li> <h1> On <%= support_request.created_at.to_formatted_s(:long) %> <code><%= support_request.email %></code> writes: </h1> <p> <blockquote> <h2><%= support_request.subject %></h2> <%= support_request.body %> </blockquote> </p> <% if support_request.order %> <!-- Current markup --> <% end %> <% if support_request.response.blank? %> <%= form_with(model: support_request, local: true, class: "depot_form") do |form| %> <div class="field"> <%= form.label :response, "Write Response" %> <%= form.rich_text_area :response, id: :support_request_response %> </div> <div class="actions"> <%= form.submit "Send Response" %> </div> <% end %> <% else %> <h4>Our response:< ```