在Ruby on Rails 4中实现动态Bootstrap轮播组件

Hey there! Let's get that dynamic Bootstrap carousel up and running in your Ruby on Rails app—no more hardcoding images, and your admin will be able to upload, edit, and manage slides without touching any code. I’ll walk you through a complete solution using CarrierWave (since you tried it before, we’ll iron out the kinks this time) plus all the model, controller, and view setup you need.

First, we need a model to store our carousel slides (image, title, description, etc.) and configure CarrierWave to handle file uploads.

1. Generate the Slide model:

   rails generate model Slide title:string description:text image:string
   rails db:migrate
   

2. Add CarrierWave to your Gemfile if you haven’t already:

   # Gemfile
   gem 'carrierwave'
   

   Run bundle install to install it.

3. Generate the CarrierWave uploader for images:

   rails generate uploader Image
   

4. Link the uploader to your Slide model:

   # app/models/slide.rb
   class Slide < ApplicationRecord
     mount_uploader :image, ImageUploader
     validates_presence_of :image # Ensure a image is always uploaded
   end
   

5. Tweak the uploader to restrict file types and set storage (local by default):

   # app/uploaders/image_uploader.rb
   class ImageUploader < CarrierWave::Uploader::Base
     storage :file # Switch to :fog if you want cloud storage like S3 later
   
     def store_dir
       "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
     end
   
     # Allow only image files
     def extension_allowlist
       %w(jpg jpeg gif png)
     end
   

Next, we’ll create an admin section to let your team manage slides without coding.

1. Generate an admin controller for slides:

   rails generate controller Admin::Slides index new create edit update destroy
   

2. Configure your routes to namespace the admin section:

   # config/routes.rb
   Rails.application.routes.draw do
     namespace :admin do
       resources :slides
     end
     # Your other routes go here...
   end
   

3. Fill in the admin controller logic:

   # app/controllers/admin/slides_controller.rb
   class Admin::SlidesController < ApplicationController
     before_action :set_slide, only: [:edit, :update, :destroy]
     # Add admin authentication here (e.g., authenticate_admin! if using Devise)
   
     def index
       @slides = Slide.all.order(created_at: :desc)
     end
   
     def new
       @slide = Slide.new
     end
   
     def create
       @slide = Slide.new(slide_params)
       if @slide.save
         redirect_to admin_slides_path, notice: 'Slide added successfully!'
       else
         render :new
       end
     end
   
     def edit
     end
   
     def update
       if @slide.update(slide_params)
         redirect_to admin_slides_path, notice: 'Slide updated successfully!'
       else
         render :edit
       end
     end
   
     def destroy
       @slide.destroy
       redirect_to admin_slides_path, notice: 'Slide deleted successfully!'
     end
   
     private
       def set_slide
         @slide = Slide.find(params[:id])
       end
   
       def slide_params
         params.require(:slide).permit(:title, :description, :image)
       end
   end
   

We need forms and a list view for the admin to interact with slides.

First, make a reusable form partial (app/views/admin/slides/_form.html.erb):

<%= form_with(model: slide, url: admin_slide_path(slide), local: true, html: { multipart: true }) do |form| %>
  <% if slide.errors.any? %>
    <div class="alert alert-danger">
      <h4><%= pluralize(slide.errors.count, "error") %> prevented this slide from saving:</h4>
      <ul>
        <% slide.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="mb-3">
    <%= form.label :title, class: "form-label" %>
    <%= form.text_field :title, class: "form-control" %>
  </div>

  <div class="mb-3">
    <%= form.label :description, class: "form-label" %>
    <%= form.text_area :description, class: "form-control", rows: 3 %>
  </div>

  <div class="mb-3">
    <%= form.label :image, class: "form-label" %>
    <%= form.file_field :image, class: "form-control" %>
    <% if slide.image.present? %>
      <p class="mt-2">Current image:</p>
      <%= image_tag slide.image.url, class: "img-thumbnail", style: "width: 150px;" %>
    <% end %>
  </div>

  <%= form.submit class: "btn btn-primary" %>
<% end %>

Then the index view (app/views/admin/slides/index.html.erb):

<div class="container mt-4">
  <h1>Manage Carousel Slides</h1>
  <%= link_to "Add New Slide", new_admin_slide_path, class: "btn btn-success mb-3" %>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Title</th>
        <th>Preview</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% @slides.each do |slide| %>
        <tr>
          <td><%= slide.title %></td>
          <td><%= image_tag slide.image.url, class: "img-thumbnail", style: "width: 100px;" %></td>
          <td>
            <%= link_to "Edit", edit_admin_slide_path(slide), class: "btn btn-sm btn-secondary" %>
            <%= link_to "Delete", admin_slide_path(slide), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-sm btn-danger" %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

For the new/edit views, just render the form:
app/views/admin/slides/new.html.erb:

<div class="container mt-4">
  <h1>Add New Slide</h1>
  <%= render "form", slide: @slide %>
  <%= link_to "Back to Slides", admin_slides_path, class: "btn btn-link mt-2" %>
</div>

app/views/admin/slides/edit.html.erb:

<div class="container mt-4">
  <h1>Edit Slide</h1>
  <%= render "form", slide: @slide %>
  <%= link_to "Back to Slides", admin_slides_path, class: "btn btn-link mt-2" %>
</div>

Now swap your static Bootstrap carousel with code that pulls slides from the database. Add this to the view where you want the carousel to appear:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <% Slide.all.each_with_index do |slide, index| %>
      <li data-target="#carouselExampleIndicators" data-slide-to="<%= index %>" <%= 'class="active"' if index == 0 %>></li>
    <% end %>
  </ol>

  <!-- Slide Content -->
  <div class="carousel-inner">
    <% Slide.all.each_with_index do |slide, index| %>
      <div class="carousel-item <%= 'active' if index == 0 %>">
        <%= image_tag slide.image.url, class: "d-block w-100" %>
        <% if slide.title.present? || slide.description.present? %>
          <div class="carousel-caption d-none d-md-block text-dark">
            <h5><%= slide.title %></h5>
            <p><%= slide.description %></p>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>

  <!-- Controls -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

If you had trouble with CarrierWave before, double-check these:

• Did you add html: { multipart: true } to your form? Without this, file uploads won’t work.
• Is the public/uploads folder writable by your Rails server?
• Did you run bundle install after adding the CarrierWave gem?
• Did you correctly mount the uploader in your Slide model with mount_uploader :image, ImageUploader?

If you want admins to reorder slides, add a position integer field to the Slide model:

rails generate migration AddPositionToSlides position:integer
rails db:migrate

Update the model to use position for sorting:

# app/models/slide.rb
class Slide < ApplicationRecord
  mount_uploader :image, ImageUploader
  validates_presence_of :image
  default_scope { order(position: :asc) }
end

Then add a position field to your admin form so admins can set the order of each slide.

内容的提问来源于stack exchange，提问作者fred1738