[JAVA] [Rails] Implementierung der Tag-Funktion mit Acts-as-Taggable-On und der Funktion zur Vervollständigung der Tag-Eingabe mit Tag-It

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3

• Implementierung der Anmeldefunktion ・ Implementierung der Posting-Funktion

Implementierung der Tag-Funktion

1. Stellen Sie Gem vor

Gemfile

gem 'acts-as-taggable-on'

Gemfile

$ bundle

2. Tabelle hinzufügen

Terminal

$ rails acts_as_taggable_on_engine:install:migrations

Terminal

$ rails db:migrate

schema.rb

create_table "taggings", force: :cascade do |t|
  t.integer "tag_id"
  t.string "taggable_type"
  t.integer "taggable_id"
  t.string "tagger_type"
  t.integer "tagger_id"
  t.string "context", limit: 128
  t.datetime "created_at"
  t.index ["context"], name: "index_taggings_on_context"
  t.index ["tag_id", "taggable_id", "taggable_type", "context", "tagger_id", "tagger_type"], name: "taggings_idx", unique: true
  t.index ["tag_id"], name: "index_taggings_on_tag_id"
  t.index ["taggable_id", "taggable_type", "context"], name: "taggings_taggable_context_idx"
  t.index ["taggable_id", "taggable_type", "tagger_id", "context"], name: "taggings_idy"
  t.index ["taggable_id"], name: "index_taggings_on_taggable_id"
  t.index ["taggable_type"], name: "index_taggings_on_taggable_type"
  t.index ["tagger_id", "tagger_type"], name: "index_taggings_on_tagger_id_and_tagger_type"
  t.index ["tagger_id"], name: "index_taggings_on_tagger_id"
end

create_table "tags", force: :cascade do |t|
  t.string "name"
  t.datetime "created_at"
  t.datetime "updated_at"
  t.integer "taggings_count", default: 0
  t.index ["name"], name: "index_tags_on_name", unique: true
end

3. Bearbeiten Sie das Modell

book.rb

#Nachtrag
acts_as_taggable

4. Bearbeiten Sie den Controller

Fügen Sie dem starken Parameter tag_list hinzu.

books_controller.rb

def book_params
  params.require(:book).permit(:title, :body, :tag_list)
end

4. Ansicht bearbeiten

slim:books/new.html.slim

/Nachtrag
= f.label :tag_list, 'Etikett'
br
= f.text_field :tag_list, value: @book.tag_list.join(','), id: 'tags'
br

tag_list.join(',') ➡︎ Sie können mehrere Tags hinzufügen, indem Sie sie durch Kommas (,) trennen.

slim:books/index.html.slim

/Nachtrag
td
  - book.tag_list.each do |tag|
    span.label.label-default style='margin-right: 10px;'
      = tag

Implementierung der Funktion zur Vervollständigung der Eingabe

1. Laden Sie die erforderlichen Dateien herunter und verschieben Sie sie

** ① Greifen Sie auf den unten stehenden Link zu ** tag-it GitHub

** ② Klicken Sie auf "Klonen oder herunterladen" **

** ③ Klicken Sie auf Download ZIP **

** ④ Datei verschieben **

1. Entpacken Sie die heruntergeladene Datei.

2. Platzieren Sie "jquery.tagit.css" und "tagit.ui-zendesk.css" im Ordner "css" unter "Assets / Stylesheets".

3. Platzieren Sie tag-it.js im Ordner js unter assets / javascripts.

2. Stellen Sie Gem vor

Gemfile

gem 'jquery-ui-rails'

Terminal

$ bundle

3. Bearbeiten Sie application.js

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jquery-ui //Nachtrag
//= require bootstrap-sprockets
//= require tag-it
//= require_tree .

4. Bearbeiten Sie application.scss

application.scss

/*
 *= require_tree .
 *= require jquery.tagit //Nachtrag
 *= require tagit.ui-zendesk //Nachtrag
 *= require_self
*/