[RUBY] [Rails] Tag-Verwaltungsfunktion (unter Verwendung von Acts-as-Taggable-On)

• Aufzeichnen, wenn die Tagging-Funktion implementiert ist. Ich war durch den Fehler verwirrt, also als Memorandum. --acts-as-taggable-on (gem), Tag-it (jQuery-Plug-in) für die Benutzeroberfläche.

Umgebung

• macOS Catalina
• ruby 2.5.1
• rails 5.0.7.2 --acts-as-taggable-on 6.5.0 (* Juwel, das ActiveRecord-Modelle markiert)
• DB mySQL

[Tagging-Funktion: Registrierung / Löschen / Anzeigen]

1. Edelstein vorstellen

• fungiert als taggable-on-GitHub Ein Migrationsfehler tritt auf.

Gemfile

gem 'acts-as-taggable-on', '~> 6.0'

Terminal

% bundle install
         :
#Installieren Sie die Migrationsdatei! Nachricht wird angezeigt, folgen Sie ihr ↓
  % rake acts_as_taggable_on_engine:install:migrations
    #Es werden 6 Migrationsdateien erstellt
    Copied migration 20200905143628_acts_as_taggable_on_migration.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine
    Copied migration 20200905143629_add_missing_unique_indices.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine
    Copied migration 20200905143630_add_taggings_counter_cache_to_tags.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine
    Copied migration 20200905143631_add_missing_taggable_index.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine
    Copied migration 20200905143632_change_collation_for_tag_names.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine
    Copied migration 20200905143633_add_missing_indexes_on_taggings.acts_as_taggable_on_engine.rb from acts_as_taggable_on_engine

#Im Fall von mySQL muss ↓ ausgeführt werden, bevor die Migration ausgeführt wird (für die anfängliche Einstellung).
% rake acts_as_taggable_on_engine:tag_names:collate_bin
% rails db:migrate   #Trotzdem tritt ein Fehler auf(Edelsteinwanze?)

• Die Migrationsdatei wurde korrigiert.

• Es scheint, dass die Ursache darin besteht, dass Sie versuchen, den Index zu löschen, ohne den externen Schlüssel zu löschen. Kommentieren Sie daher den externen Schlüsselteil aus, bevor Sie den Index löschen.

rb:xxxxxxxxx_add_missing_unique_indices.acts_as_taggable_on_engine.rb

         :
AddMissingUniqueIndices.class_eval do
  def self.up
    # add_index ActsAsTaggableOn.tags_table, :name, unique: true

    # remove_index ActsAsTaggableOn.taggings_table, :tag_id if index_exists?(ActsAsTaggableOn.taggings_table, :tag_id)
    # remove_index ActsAsTaggableOn.taggings_table, name: 'taggings_taggable_context_idx'
    # add_index ActsAsTaggableOn.taggings_table,
    #           [:tag_id, :taggable_id, :taggable_type, :context, :tagger_id, :tagger_type],
    #           unique: true, name: 'taggings_idx'
  end

  def self.down
    # remove_index ActsAsTaggableOn.tags_table, :name

    # remove_index ActsAsTaggableOn.taggings_table, name: 'taggings_idx'

    # add_index ActsAsTaggableOn.taggings_table, :tag_id unless index_exists?(ActsAsTaggableOn.taggings_table, :tag_id)
    # add_index ActsAsTaggableOn.taggings_table, [:taggable_id, :taggable_type, :context], name: 'taggings_taggable_context_idx'
  end
end

rb:xxxxxxxxxx_add_missing_taggable_index.acts_as_taggable_on_engine.rb

         :
AddMissingTaggableIndex.class_eval do
  def self.up
    # add_index ActsAsTaggableOn.taggings_table, [:taggable_id, :taggable_type, :context], name: 'taggings_taggable_context_idx'
  end

  def self.down
    # remove_index ActsAsTaggableOn.taggings_table, name: 'taggings_taggable_context_idx'
  end
end

** [Tabelle und Spalte erstellt] **

• Die Tags-Tabelle ist eindeutig: true (Eindeutigkeit).

Beispiel: fungiert als taggable-on-Methode

• Einzelheiten finden Sie in der Referenz.

[Erwerb und Suche]

Beispiel)Tag-Suche

class User < ActiveRecord::Base
  acts_as_taggable_on :tags, :skills
  scope :by_join_date, order("created_at DESC")
end
  User.tagged_with(params[:tag])       #Abrufen von Benutzerdaten, die Tags zugeordnet sind
  User.tagged_with("Tag 1")[0].id       # 1
  User.tagged_with("Tag 1,Tag 2")[0].id #Es kann eine durch Kommas getrennte Zeichenfolge anstelle eines Arrays sein.
  #Schließen Sie es ein?
  User.tagged_with("Tag 1").by_join_date
  User.tagged_with("Tag 1").by_join_date.paginate(page: params[:page], per_page: 20)
  #Perfekte Übereinstimmung(UND suchen)
  User.tagged_with(["Tag 1", "Tag 2"], match_all: true)
  #Zustandsübereinstimmung(ODER suchen)
  User.tagged_with(["Tag 1", "Tag 2"], any: true)
  #Ausschluss(Suchen Sie nach Dingen, die nicht enthalten sind)
  User.tagged_with(["Tag 1", "Tag 2"], exclude: true)

[Registrierung oder Löschung]

2. Modell (Assoziation)

• Fügen Sie dem Modell, das Sie markieren möchten, eine Zuordnung hinzu.

Postmodell

acts_as_taggable   # acts_as_taggable_on :Weglassen von Tags

#drei)Mehrfacheinstellungen sind möglich ↓
acts_as_taggable_on :skills, :interests  # @post.skill_Sie können Liste usw. verwenden.

3. Controller

• : tag_list zum starken Parameter für die Tag-Registrierung hinzugefügt.
• Aktionen für die Tag-Anzeige hinzugefügt.

Beiträge Controller

def index
  @posts = Post.all
  @tags = Post.tag_counts_on(:tags).most_used(20)    #Anzeige der Tag-Liste
end

def show
  @post = Post.find(params[:id])
  @tags = @post.tag_counts_on(:tags)    #Anzeige von Tags, die mit Posts verknüpft sind
end
      :
private
      :
def post_params
  params.require(:post).permit(:title, :content, :tag_list)
end

4. Anzeigen

4-1. Tagging-Formular

• Wenn Sie es mit , (Standard) trennen, wird es in mehrere Tags unterteilt.

Richten Sie ein Formular zum Markieren auf der Beitragsseite ein(haml)

- form_for @post do |f|
　　　　:
  = f.label :tag_list
  = f.text_field :tag_list, value: @post.tag_list.join(',')

-#drei)Wenn Sie mit dem Tag das Kontrollkästchen aktivieren möchten
- @tags.each do |tag|
  = f.check_box :tag_list, { multiple: true }, "#{tag.name}", nil
  = f.label " #{tag.name}(#{tag.taggings_count})"

4-2. Tag-Anzeige

--Die im Modell hinzugefügten : tags sind mit dem Post-Modell verknüpft. --Tag_list ist ein Array, also holen Sie es sich mit jeder Anweisung.

Anzeige von Tags(haml)

- if @tags.present?
  - @tags.each do |tag|  #Erhalten Sie 20 in der Reihenfolge der Anzahl der Registrierungen beim Controller(＠tags)
    = link_to "#{tag.name}(#{tag.taggings_count})", tags_path(tag.name)
- else
 %p Es sind keine Tags registriert

[Tag-Suche]

--Klicken Sie auf das Tag (Link), um eine Liste verwandter Beiträge auf der Indexseite für Beiträge anzuzeigen.

Beiträge Controller

def index
       :
  @tags = Post.tag_counts_on(:tags).order('count DESC')     #Alle Tags(Ruft die Tag-Spalte vom Post-Modell in absteigender Reihenfolge ab)
  if @tag = params[:tag]   #Für die Tag-Suche
    @post = Post.tagged_with(params[:tag])   #Mit Tags verknüpfte Beiträge
  end
end

--tagged_with ("tag name"): Eine Methode zum Eingrenzen der Suche. Holen Sie sich die angeklickten Tag-Informationen und suchen Sie nach tagged_with ("Tag-Name"). Sie können Beiträge mit demselben Tag erhalten.

Tag mit Link (haml)

- @tags.each do |tag|
  = link_to "#{tag.name}(#{tag.taggings_count})", posts_path(tag: tag.name)

Anzeige der mit dem Tag verknüpften Beitragsliste (haml)

- if @post.present?
  %h1 #{@tag}Beiträge im Zusammenhang mit
  - @post.each do |post|
    = post.user.name
    = post.name

[Bereiten Sie die Benutzeroberfläche vor (Tag-it)]

--Tag-it ist ein jQuery-Plug-In, das eine Tagging-Benutzeroberfläche bietet.

• GitHub：jquery-ui-rails、tag-it-rails、tag-it

1. Einleitung

1. Klicken Sie unter tag-it GitHub auf Clone → Download ZIP.
2. Entpacken Sie die Datei und speichern Sie sie in den Verzeichnissen JS und CSS. ** ・ ** jquery.tagit.css, tagit.ui-zendesk.css im CSS-Ordner → App / Assets / Stylesheets ** ・ ** tag-it.js, tag-it.min.js im Ordner js → Assets / Javascripts
3. Juwel eingeführt.

Gemfile

gem 'jquery-ui-rails'  # Tag-Es verwendet die jQuery-Benutzeroberfläche

2. Einstellungen

--Tag-it, Einstellungen zum Laden der jQuery-Benutzeroberfläche.

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require tag-it
//= require_tree .

// turbolinks(Die Rolle der Beschleunigung des Seitenladens)Gelöscht, da jQuery nur ausgelöst wird, wenn die Seite neu geladen wird(Invalidierung)。

application.scss

@import "reset";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "jquery.tagit";       //Achten Sie auf die Reihenfolge der Beschreibung
@import "tagit.ui-zendesk";   //Wenn Sie dies später nicht schreiben, wird die Tag-Löschung (x) nicht angezeigt
        :

3. Laden Sie tag-it (jQuery)

--Seite aktualisieren löst Tag-it-Ereignis aus. --Ändern Sie die Anzeige des Platzhalters für jeden Eingang ↓ ↓

• Eine Hilfemeldung wurde angezeigt (anscheinend ist die Klasse .ui-helper-hidden-access im Anzeigebereich für Nachrichten festgelegt). Daher habe ich vorerst display: none; verwendet, um sie auszublenden.

tag-Laden Sie es (jQuery)

//Tag auf Seite aktualisieren-es entzündet sich
$(document).ready(function() {
  $(".tag_form").tagit({  //Angegebener Selektor(Diesmal,:tag_Listentext_field )Zu markieren-Reflektiere es
    tagLimit:10,         //Maximale Anzahl von Tags
    singleField: true,   //Kennzeichnen Sie die Einzigartigkeit
 // availableTags: ['ruby', 'rails', ..]Sie können eine Liste festlegen, die automatisch vervollständigt wird(* Anordnung ist ok).. Übergeben Sie diesmal den Wert von DB per Ajax-Kommunikation(Siehe unten)。
  });
  let tag_count = 10 - $(".tagit-choice").length    //Registrierte Tags zählen
  $(".ui-widget-content.ui-autocomplete-input").attr(
    'placeholder','nach' + tag_count + 'Sie können sich einzeln registrieren');
})

//Ändern Sie den Platzhalter durch Eingabe von Tags
$(document).on("keyup", '.tagit', function() {
  let tag_count = 10 - $(".tagit-choice").length    //Es ist dasselbe wie ↑, daher ist es besser, es zusammenzufassen.
  $(".ui-widget-content.ui-autocomplete-input").attr(
  'placeholder','nach' + tag_count + 'Sie können sich einzeln registrieren');
});

  //drei:So schreiben Sie Platzhalter neu
    $(".input").attr('placeholder','Umgeschriebener Text');
  //drei:So löschen Sie Platzhalter
    $(".input").removeAttr('placeholder');

--Wenn das Ereignis mit $ (Selektor) .tagit () (jQuery) ausgelöst wird, auf haml, ** ・ ** Das Namensattribut: post [tag_list] wird dem Tag-Eingabeformular (text_field) hinzugefügt (* post_params (controller) erlaubt **: tag_list **, sodass Sie Tags registrieren können. ). Der ID-Name und der Klassenname werden ebenfalls hinzugefügt. ** ・ ** ul und li werden im Eingabeformular hinzugefügt.

Änderungen im Tag-Eingabeformular aufgrund des Auslösens des Tagit-Ereignisses(haml)

.input_form
  = f.text_field :tag_list, value: @post.tag_list.join(","), class: "tag_form tagit-hidden-field" name: "post[tag_list]" id: "post_tag_list"  #Der Klassenname, der Name und der ID-Name werden im Tagit-Ereignis hinzugefügt.
  -#Hinzugefügt im Tagit-Ereignis ↓ ↓
  %ul.tagit.ui-widget.ui-widget-content.ui-corner-all
    %li.tagit-new
      = f.text_field, class: "ui-widget-content ui-autocomplete-input", autocomplete: "off", placeholder: "Sie können 10 weitere registrieren"                  # autocomplete="off"Deaktivieren Sie das automatische Ausfüllen

4. Tag inkrementelle Suche

• Übergeben Sie bei der Ajax-Kommunikation die DB-Daten an die availableTags der Tag-it-Option.

4-1. Routing

• Ich möchte mit Ajax über die neue Registrierung (ohne ID-Informationen) kommunizieren und die Seite bearbeiten (mit ID-Informationen).
• Ich habe nicht vor, es in HTML zu bekommen, also werde ich json formatieren.

routes.rb

  resources :posts, expect: [:index] do
    get 'get_tag_search', on: :collection, defaults: { format: 'json' }
    get 'get_tag_search', on: :member, defaults: { format: 'json' }
  end

4-2. Controller

• Holen Sie sich alle Datensätze in der Tags-Tabelle, in denen die Namensspalte mit params [: key] beginnt (*: key ist der in jQuery definierte Eingabewert. Holen Sie sich das von Ajax gesendete Objekt).

Beiträge Controller

def get_tag_search
  @tags = Post.tag_counts_on(:tags).where('name LIKE(?)', "%#{params[:key]}%")
end

4-3. jbuilder

• Holen Sie sich nur die im Controller definierte Spalte @tags name.

rb:views/posts/get_tag_search.json.jbuilder

json.array! @tags do |tag|
  json.name tag.name
end
  # [{name: "Tag-Name 1"}, {name: "Tag-Name 2"}, ..]Ich verstehe es mit der Art von

4-4. jQuery

• Holen Sie sich den Eingabewert des Tag-Formulars und senden Sie es mit Ajax → DB-Suche mit dem Controller → Holen Sie sich die gewünschten Daten mit jbuilder → Übergeben Sie es mit jQuery an availableTags von Tag-it.

jQuery(Ajax-Kommunikationsteil)

$(document).on("keyup", '.tagit', function() {
           :
  //Holen Sie sich eine Liste der Tags mit Ajax
  let input = $(".ui-widget-content.ui-autocomplete-input").val();  //Speichern Sie den Eingabewert in der variablen Eingabe
  $.ajax({
    type: 'GET',
    url: 'get_tag_search',    //Die im Routing festgelegte URL
    data: { key: input },     //Eingegebener Wert:Übergeben Sie es als Schlüssel an die Steuerung
    dataType: 'json'
  })

  .done(function(data){
    if(input.length) {               //Nur wenn ein Eingabewert vorhanden ist
      let tag_list = [];             //Bereiten Sie ein leeres Array vor
      data.forEach(function(tag) {   //Speichern Sie den Namen der erfassten Daten in einem Array
        tag_list.push(tag.name);     //Fügen Sie eins nach dem anderen hinzu. Etikett_list = ["Tag-Name 1", "Tag-Name 2", ..]
      });
      $(".tag_form").tagit({
        availableTags: tag_list
      });
    }
  })
});