[RUBY] Mettre en œuvre la fonction de catégorie de produit en utilisant l'ascendance ① (Préparation)

introduction

・ J'ai créé une application frima par le développement de l'équipe d'une certaine école de programmation. -Comme il a été très difficile de mettre en œuvre la fonction de catégorie de produit, je vais l'écrire sous forme de mémorandum. ・ Comme j'ai beaucoup à faire, je vais l'écrire plusieurs fois. ・ Je suis très confiant. Donc, j'espère que cela sera utile pour les débutants dans la même situation, je vais donc l'écrire sous forme d'article. ・ Je vous serais reconnaissant si vous pouviez signaler des erreurs.

Ceci est le formulaire rempli

-Sélectionner une catégorie parent affichera la catégorie enfant, la sélection d'une catégorie enfant affichera la catégorie petit-enfant, et pour les articles liés à la taille, la sélection de la catégorie petit-enfant affichera la taille. https://gyazo.com/97e3bdfac114bcced73aa3840f02801c

Au fait, qu'est-ce que l'ascendance

Documentation officielle https://github.com/stefankroes/ancestry [Français] Document officiel de Gem Ancestry https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871

Ancestry est un joyau qui vous permet d'organiser les enregistrements du modèle Ruby on Rails ActiveRecord sous forme d'arborescence (hiérarchie).

Cette fois, nous utiliserons l'ascendance pour implémenter une catégorie à plusieurs niveaux.

Définition de l'achèvement

・ Vous pouvez sélectionner jusqu'à la catégorie des petits-enfants ・ La taille peut être sélectionnée ・ Vous pouvez lister les produits ← Ceci est important

Cette fois, je vais créer une mini application

D'abord, faites rails new dans le terminal. Après cela, si le nom du fichier n'est pas affiché dans le bloc de code, il s'agit d'une opération dans le terminal.

$ rails _6.0.0_ new ancestry_app -d mysql
$ cd ancestry_app/

Installez quelques gemmes. Décrit en bas.

Gemfile

gem 'haml-rails'
gem 'jquery-rails'
gem 'ancestry'

gem'haml-rails' utilise la notation haml, gem'jquery-rails' est pour implémenter Ajax dans jQuery, «gem'ancestry» consiste à implémenter la fonctionnalité de catégorie », Vous avez besoin de chacun.

Modifiez le format de stockage des données.

config/database.yml

# encoding: utf8mb4
encoding: utf8

Ensuite, entrez les commandes suivantes dans l'ordre dans le terminal.

$ bundle install
$ rails db:create
$ rails haml:erb2haml

Activer la gemme, Créer une base de données, Convertissez le fichier décrit dans erb en notation haml (entrez y lorsque vous êtes invité à saisir une commande en chemin, ENTER) C'est un flux.

Créer une table d'éléments (afin que les éléments puissent être répertoriés)

$ rails g model item

Il existe un fichier de modèle appelé ʻitem.rbdans le répertoire des modèles. Il existe un fichier de migration appelé20200815022617_create_items.rb` dans le répertoire db / migrate. Chacun a été créé. (Le numéro dans le nom de fichier du fichier de migration est la date et l'heure de génération)

Modifiez le fichier de migration.

20200815022617_create_items.rb

class CreateItems < ActiveRecord::Migration[6.0]
  def change
    create_table :items do |t|
      #Cette fois, nous allons créer une colonne de nom de type chaîne, alors écrivez-la comme suit.
      t.string :name, null: false

      t.timestamps
    end
  end
end

Si «null: false» est ajouté, les données du produit ne peuvent pas être enregistrées à moins que la colonne de nom ne soit entrée (pas de contrainte nulle). Si vous utilisez simplement t.string: name, vous pouvez enregistrer les données produit même si la colonne name est vide. Créons maintenant une table d'éléments.

$ rails db:migrate

Vous avez maintenant un tableau des éléments. Regarder le contenu du tableau avec Sequel Pro ・ Colonne Id ・ Colonne de nom -Created_at colonne -Updated_at colonne Il devrait y avoir.

Créer un contrôleur d'éléments (créer également une vue)

Cette fois, nous allons implémenter la fonction de catégorie sur l'écran de liste des produits. Vous avez donc besoin d'un écran de localhost: 3000 / items / new. En plus de créer un contrôleur, je crée également une vue de la nouvelle action.

$ rails g controller items new

ʻApp / controllers / items_controller.rb et un contrôleur ʻApp / views / new.html.haml est un fichier de vue Chacun a été créé.

routes.rb

Rails.application.routes.draw do
  # get 'items/new'
  resources :items
end

Cette fois, c'est une mini application, donc pour le moment, je vais faire le routage comme ça. À l'origine, utilisez la seule option.

Maintenant, lorsque vous démarrez le serveur, vous devriez pouvoir accéder à localhost: 3000 / items / new. J'ai pu accéder à l'écran de liste des produits pour le moment.

① est à ici. La prochaine fois, nous commencerons par créer un tableau des catégories.

Résumé

Enfin, le résumé jusqu'à présent.

-Créer une application avec rails new ・ Installez des gemmes et créez des bases de données ・ Créer un écran de liste de produits

c'est tout. Il continuera au suivant. Nous apporterons des corrections et des ajouts au besoin.

référence

Documentation officielle https://github.com/stefankroes/ancestry [Français] Document officiel de Gem Ancestry https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871 [Rails] Implémentation de la fonction de catégorie d'ascendance gemme https://qiita.com/k_suke_ja/items/aee192b5174402b6e8ca