--Enregistrer lorsque la fonction de marquage est implémentée. J'ai été dérouté par l'erreur, donc comme un mémorandum. --acts-as-taggable-on (gem), Tag-it (plug-in jQuery) pour l'interface utilisateur.

Alt text

environnement

macOS Catalina
ruby 2.5.1
rails 5.0.7.2 --acts-as-taggable-on 6.5.0 (* Gemme qui marque les modèles ActiveRecord)
DB mySQL

[Fonction de marquage: enregistrement / suppression / affichage]

1. Présentation de gemme

agit-as-taggable-on GitHub Une erreur de migration se produit.

`Gemfile`


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

`Terminal`


% bundle install
         :
#Installez le fichier de migration! Le message s'affiche, suivez-le ↓
  % rake acts_as_taggable_on_engine:install:migrations
    #6 fichiers de migration sont créés
    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

#Dans le cas de mySQL, il est nécessaire d'exécuter ↓ avant d'exécuter la migration (pour la configuration initiale)
% rake acts_as_taggable_on_engine:tag_names:collate_bin
% rails db:migrate   #Pourtant, une erreur se produit(bug de gemme?)

Correction du fichier de migration.

Il semble que la cause soit que vous essayez de supprimer l'index sans supprimer la clé externe, alors commentez la partie de clé externe avant de supprimer l'index.

`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

** [Table et colonne créées] **

table des balises	table de balisage
name(Nom de la balise)	tag_id(identifiant de table de balises)
taggings_count(Nombre de balises enregistrées)	taggable_type
	taggable_id
	tagger_type
	tagger_id
	content

Unique: true est appliqué à la table des balises.

Exemple: méthode agit-as-taggable-on

Voir la référence pour plus de détails.

[Acquisition et recherche]

Méthode etc.	sens
tags_on(:tags)	Obtenez une liste de balises pour tous les articles
most_used	Tags avec un grand nombre d'inscriptions
least_used	Tags avec un petit nombre d'inscriptions
most_used(10)	Obtenu à partir de tags avec un grand nombre d'enregistrements. La valeur par défaut est 20
least_used(10)	Obtenu à partir de balises avec un petit nombre d'enregistrements. La valeur par défaut est 20
tag_counts	Données de toutes les balises
named("Nom de la balise")	Correspondance parfaite
named_any(["Nom de la balise 1", "Nom de la balise 2",..])	Correspondance parfaite(and)
named_like("Nom de la balise")	Match partiel
named_like_any(["Nom de la balise 1", "Nom de la balise 2",..])	Match partiel(or)

`Exemple)Recherche de tag`


class User < ActiveRecord::Base
  acts_as_taggable_on :tags, :skills
  scope :by_join_date, order("created_at DESC")
end
  User.tagged_with(params[:tag])       #Obtenir les données utilisateur associées aux balises
  User.tagged_with("Balise 1")[0].id       # 1
  User.tagged_with("Balise 1,Étiquette 2")[0].id #Il peut s'agir d'une chaîne séparée par des virgules au lieu d'un tableau.
  #L'avez-vous inclus?
  User.tagged_with("Balise 1").by_join_date
  User.tagged_with("Balise 1").by_join_date.paginate(page: params[:page], per_page: 20)
  #Correspondance parfaite(ET recherche)
  User.tagged_with(["Balise 1", "Étiquette 2"], match_all: true)
  #Correspondance de condition(OU rechercher)
  User.tagged_with(["Balise 1", "Étiquette 2"], any: true)
  #Exclusion(Rechercher des éléments qui n'incluent pas)
  User.tagged_with(["Balise 1", "Étiquette 2"], exclude: true)

[Enregistrement ou suppression]

Méthode etc.	sens
tag_list.add("Balise 1", "Étiquette 2", ..)	ajouter à
tag_list = 'Balise 1,Étiquette 2, ..'	Écraser
tag_list.remove("Balise 1", "Étiquette 2", ..)	Effacer
save	sauvegarder([id: 1, name: "Balise 1", taggings_count: 1],[id: 2, name: "Étiquette 2", taggings_count: 1])

2. Modèle (association)

Ajoutez une association au modèle que vous souhaitez étiqueter.

`Modèle de poste`


acts_as_taggable   # acts_as_taggable_on :Omission de balises

#Trois)Plusieurs réglages sont possibles ↓
acts_as_taggable_on :skills, :interests  # @post.skill_Vous pourrez utiliser la liste, etc.

3. Contrôleur

--Ajout de : tag_list au paramètre fort pour l'enregistrement des balises. --Ajout d'actions pour l'affichage des balises.

`contrôleur de postes`


def index
  @posts = Post.all
  @tags = Post.tag_counts_on(:tags).most_used(20)    #Affichage de la liste des balises
end

def show
  @post = Post.find(params[:id])
  @tags = @post.tag_counts_on(:tags)    #Affichage des tags associés aux posts
end
      :
private
      :
def post_params
  params.require(:post).permit(:title, :content, :tag_list)
end

4. Afficher

4-1. Formulaire de marquage

Si vous le séparez avec , (par défaut), il sera divisé en plusieurs balises.

`Mettre en place un formulaire de marquage sur la page de publication(haml)`


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

-#Trois)Lorsque vous souhaitez sélectionner avec la case à cocher tag
- @tags.each do |tag|
  = f.check_box :tag_list, { multiple: true }, "#{tag.name}", nil
  = f.label " #{tag.name}(#{tag.taggings_count})"

4-2. Affichage des étiquettes

Les «: tags» ajoutés au modèle sont liés au modèle Post. --Tag_list est un tableau, donc obtenez-le avec chaque instruction.

`Affichage des tags(haml)`


- if @tags.present?
  - @tags.each do |tag|  #Obtenez 20 dans l'ordre du nombre d'enregistrements auprès du contrôleur(＠tags)
    = link_to "#{tag.name}(#{tag.taggings_count})", tags_path(tag.name)
- else
 %p Il n'y a pas de balises enregistrées

[Recherche par tag]

--Cliquez sur la balise (lien) pour afficher une liste des articles associés sur la page d'index des articles.

`contrôleur de postes`


def index
       :
  @tags = Post.tag_counts_on(:tags).order('count DESC')     #Tous les tags(Obtenir la colonne de balises du modèle de publication dans l'ordre décroissant)
  if @tag = params[:tag]   #Pour la recherche de balises
    @post = Post.tagged_with(params[:tag])   #Messages associés aux tags
  end
end

--tagged_with ("tag name"): Une méthode pour restreindre la recherche. Obtenez les informations sur la balise cliquée et recherchez par tagged_with ("nom de la balise"). Vous pouvez obtenir des articles avec le même tag.

`Tag avec lien (haml)`


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

`Affichage de la liste des articles liés au tag (haml)`


- if @post.present?
  %h1 #{@tag}Messages liés à
  - @post.each do |post|
    = post.user.name
    = post.name

[Préparez l'interface utilisateur (Tag-it)]

--Tag-it est un plug-in jQuery qui fournit une interface utilisateur de balisage.

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

1. Introduction

Depuis tag-it GitHub, cliquez sur «Cloner» → «Télécharger le ZIP».
Décompressez le fichier et stockez-le dans les répertoires JS et CSS. ** ・ ** jquery.tagit.css, tagit.ui-zendesk.css dans le dossier css → app / assets / stylesheets ** ・ ** tag-it.js, tag-it.min.js dans le dossier js → assets / javascripts
Gemme introduite.

`Gemfile`


gem 'jquery-ui-rails'  # Tag-il utilise l'interface utilisateur jQuery

2. Paramètres

--Tag-it, paramètres de chargement de l'interface utilisateur jQuery.

`application.js`


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

// turbolinks(Le rôle d'accélérer le chargement des pages)Supprimé car jQuery ne se déclenche que si la page est rechargée(Annulation)。

`application.scss`


@import "reset";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "jquery.tagit";       //Faites attention à l'ordre de description
@import "tagit.ui-zendesk";   //Si vous n'écrivez pas ceci plus tard, la suppression de balise (x) ne sera pas affichée
        :

3. Chargez tag-it (jQuery)

L'actualisation de la page déclenche un événement tag-it. --Changer l'affichage de l'espace réservé pour chaque entrée ↓ ↓

Un message d'aide a été affiché (il semble que la classe .ui-helper-hidden-accessible est définie dans la zone d'affichage des messages), donc pour le moment, j'ai utilisé display: none; pour le cacher.

`tag-Chargez-le (jQuery)`


//Balise lors de l'actualisation de la page-ça s'enflamme
$(document).ready(function() {
  $(".tag_form").tagit({  //Sélecteur spécifié(Cette fois,:tag_texte de la liste_field )Taguer-Reflétez-le
    tagLimit:10,         //Nombre maximum de balises
    singleField: true,   //Unicité du tag
 // availableTags: ['ruby', 'rails', ..]Vous pouvez définir une liste à compléter automatiquement(* L'arrangement est ok).. Cette fois, passez la valeur de DB par la communication Ajax(Voir ci-dessous)。
  });
  let tag_count = 10 - $(".tagit-choice").length    //Compter les balises enregistrées
  $(".ui-widget-content.ui-autocomplete-input").attr(
    'placeholder','après' + tag_count + 'Vous pouvez vous inscrire individuellement');
})

//Modifier l'espace réservé en saisissant des balises
$(document).on("keyup", '.tagit', function() {
  let tag_count = 10 - $(".tagit-choice").length    //C'est la même chose que ↑, il vaut donc mieux résumer.
  $(".ui-widget-content.ui-autocomplete-input").attr(
  'placeholder','après' + tag_count + 'Vous pouvez vous inscrire individuellement');
});

  //Trois:Comment réécrire l'espace réservé
    $(".input").attr('placeholder','Texte réécrit');
  //Trois:Comment supprimer un espace réservé
    $(".input").removeAttr('placeholder');

--Lorsque l'événement est déclenché avec $ (selector) .tagit () (jQuery), sur haml, ** ・ ** L'attribut name: post [tag_list] est ajouté au formulaire d'entrée de balise (text_field) (* post_params (controller) permet **: tag_list **, vous pouvez donc enregistrer des balises. ). Le nom d'identifiant et le nom de classe sont également ajoutés. ** ・ ** ul et li sont ajoutés dans le formulaire d'entrée.

`Modifications du formulaire de saisie des balises en raison du déclenchement de l'événement tagit(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"  #Le nom de la classe, le nom et le nom de l'ID sont ajoutés dans l'événement tagit.
  -#Ajouté dans l'événement tagit ↓ ↓
  %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: "Vous pouvez en enregistrer 10 de plus"                  # autocomplete="off"Désactiver le remplissage automatique

4. Recherche incrémentielle de balises

Par communication Ajax, passez les données de la base de données à ʻavailableTags` de l'option Tag-it.

4-1. Routage

--Je veux communiquer avec Ajax sur la nouvelle inscription (sans informations d'identification) et modifier la page (avec les informations d'identification).

Je n'ai pas l'intention de l'obtenir en html, je vais donc formater json.

`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. Contrôleur

Obtenez tous les enregistrements de la table Tags, où la colonne de nom commence par params [: key] (*: key est la valeur d'entrée définie dans jQuery. Récupère l'élément envoyé par Ajax).

`contrôleur de postes`


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

4-3. jbuilder

Obtenez uniquement la colonne de nom @tags définie dans le contrôleur.

`rb:views/posts/get_tag_search.json.jbuilder`


json.array! @tags do |tag|
  json.name tag.name
end
  # [{name: "Nom de la balise 1"}, {name: "Nom de la balise 2"}, ..]Je comprends avec le type de

4-4. jQuery

Obtenez la valeur d'entrée du formulaire de balise et envoyez-la avec Ajax → Recherche de base de données avec le contrôleur → Obtenez les données souhaitées avec jbuilder → Passez-les aux tags disponibles de Tag-it avec jQuery.

`jQuery(Partie communication Ajax)`


$(document).on("keyup", '.tagit', function() {
           :
  //Obtenez une liste de balises avec Ajax
  let input = $(".ui-widget-content.ui-autocomplete-input").val();  //Stocker la valeur d'entrée dans l'entrée variable
  $.ajax({
    type: 'GET',
    url: 'get_tag_search',    //L'URL définie dans le routage
    data: { key: input },     //Valeur d'entrée:Passez-le au contrôleur comme clé
    dataType: 'json'
  })

  .done(function(data){
    if(input.length) {               //Uniquement lorsqu'il y a une valeur d'entrée
      let tag_list = [];             //Préparez un tableau vide
      data.forEach(function(tag) {   //Stocker le nom des données acquises dans un tableau
        tag_list.push(tag.name);     //Ajoutez un par un. marque_list = ["Nom de la balise 1", "Nom de la balise 2", ..]
      });
      $(".tag_form").tagit({
        availableTags: tag_list
      });
    }
  })
});

[RUBY] [Rails] Fonction de gestion des balises (en utilisant des actes comme des balises)

environnement

[Fonction de marquage: enregistrement / suppression / affichage]

1. Présentation de gemme

Gemfile

Terminal

rb:xxxxxxxxx_add_missing_unique_indices.acts_as_taggable_on_engine.rb

rb:xxxxxxxxxx_add_missing_taggable_index.acts_as_taggable_on_engine.rb

Exemple: méthode agit-as-taggable-on

[Acquisition et recherche]

Exemple)Recherche de tag

[Enregistrement ou suppression]

2. Modèle (association)

Modèle de poste

3. Contrôleur

contrôleur de postes

4. Afficher

4-1. Formulaire de marquage

Mettre en place un formulaire de marquage sur la page de publication(haml)

4-2. Affichage des étiquettes

Affichage des tags(haml)

[Recherche par tag]

contrôleur de postes

Tag avec lien (haml)

Affichage de la liste des articles liés au tag (haml)

[Préparez l'interface utilisateur (Tag-it)]

1. Introduction

Gemfile

2. Paramètres

application.js

application.scss

3. Chargez tag-it (jQuery)

tag-Chargez-le (jQuery)

Modifications du formulaire de saisie des balises en raison du déclenchement de l'événement tagit(haml)

4. Recherche incrémentielle de balises

4-1. Routage

routes.rb

4-2. Contrôleur

contrôleur de postes

rb:views/posts/get_tag_search.json.jbuilder

jQuery(Partie communication Ajax)

`Gemfile`

`Terminal`

`rb:xxxxxxxxx_add_missing_unique_indices.acts_as_taggable_on_engine.rb`

`rb:xxxxxxxxxx_add_missing_taggable_index.acts_as_taggable_on_engine.rb`

`Exemple)Recherche de tag`

`Modèle de poste`

`contrôleur de postes`

`Mettre en place un formulaire de marquage sur la page de publication(haml)`

`Affichage des tags(haml)`

`contrôleur de postes`

`Tag avec lien (haml)`

`Affichage de la liste des articles liés au tag (haml)`

`Gemfile`

`application.js`

`application.scss`

`tag-Chargez-le (jQuery)`

`Modifications du formulaire de saisie des balises en raison du déclenchement de l'événement tagit(haml)`

`routes.rb`

`contrôleur de postes`

`rb:views/posts/get_tag_search.json.jbuilder`

`jQuery(Partie communication Ajax)`