[RUBY] Zusammenfassung der ersten Arbeiten beim Erstellen einer App mit Rails

Einführung

Da dies wie jedes Mal beim Erstellen einer Anwendung mit Schienen festgelegt werden kann, fasse ich die anfänglichen Einstellungen zusammen. Die Arbeit ist wie folgt.

・ App-Erstellung ・ Datenbankerstellung ・ Einführung von Edelstein ・ Einführung von Haml · Tabelle erstellen ・ Controller- und Ansichtserstellung ・ Einführung von jquery

App-Erstellung

Erstellen Sie zunächst eine App, indem Sie Befehle über das Terminal eingeben.

Ich denke, es ist eine gute Idee, die Schienenversion anzugeben, mit der Sie vertraut sind. (Diesmal Version 5.2.3, Datenbank verwendet myspl) Gehen Sie in dem Verzeichnis, in dem Sie Ihre App speichern möchten, wie folgt vor: (Diesmal ist der App-Name ein Beispiel)

Terminal

$ rails _5.2.3_ new sample -d mysql

Wechseln Sie in das Verzeichnis der erstellten Anwendung.

Terminal

$ ｃｄ sample

Datenbankerstellung

Erstellen Sie eine Datenbank.

Terminal

$ rails db:create

Eine Datenbank für Entwicklung und Test sollte erstellt werden. (Überprüfen Sie mit einer App wie Sequel Pro)

Edelsteineinführung

Setzen Sie zuerst den Edelstein ein, von dem Sie glauben, dass Sie ihn für die Entwicklung verwenden werden. Ich denke, die folgenden vier können vorerst aufgenommen werden. Fügen Sie Ihrem Gemfile Folgendes hinzu.

Gemfile

group :development, :test do
  gem 'pry-rails'
end

gem 'haml-rails'
gem 'font-awesome-sass'
gem 'jquery-rails'

Ich werde jeden erklären Pry-Rails: Um die Verarbeitung auf dem Controller zu stoppen und den Inhalt der Parameter zu überprüfen haml: Weil haml verwendet wird (einfacher zu schreiben als erb) font-awesome-sass: um das font-awesome-Symbol zu verwenden jquery-rail: um jquery zu verwenden

Nach dem Hinzufügen installieren

Terminal

$ bundle install

Haml Einführung

Ich habe haml zu gem hinzugefügt, aber ich werde die erb-Datei, die ursprünglich beim Erstellen der App erstellt wurde, in haml ändern. Führen Sie einfach den folgenden Befehl aus:

Terminal

$ rails haml:erb2haml

Durch Ausführen des Befehls wird die vorhandene erb-Datei in eine haml-Datei konvertiert. Nach dem Ausführen des Befehls werden Sie gefragt, ob Sie die ursprünglichen .erb-Dateien löschen möchten. Geben Sie also y ein. (Die Frage ist, ist es in Ordnung, die ursprüngliche erb-Datei zu löschen? Beantworten wir mit gut → y, nein → n)

Tabelle erstellen

Erstellen Sie eine Tabelle in der Datenbank. Dieses Mal werde ich eine Beitragstabelle erstellen. (Ich denke, dass dies nach dem Entwerfen der Datenbank beim tatsächlichen Erstellen einer Anwendung geschehen wird, aber bitte denken Sie, dass dies zur einfachen Bestätigung des Ablaufs dient.)

■ Erstellen Sie zunächst ein Modell.

Terminal

$ rails g model post

Eine Migrationsdatei und eine Modelldatei sollten wie in der Abbildung unten gezeigt erstellt werden.

■ Bearbeiten Sie anschließend die Migrationsdatei. Beschreibt die Informationen der zu erstellenden Spalte. Diesmal ist der Spaltenname Inhalt, der Datentyp ist Zeichenfolge und es gibt eine Nullbeschränkung. Fügen wir es der Migrationsdatei hinzu! (Die Migrationsdatei befindet sich in db / migrate)

xxxxxxxxxxxxxx_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.string :content, null: false
      t.timestamps
    end
  end
end

■ Führen Sie eine Migration durch Migrieren Sie nach dem Schreiben der Migrationsdatei.

Terminal

$ rails db:migrate

Es ist in Ordnung, wenn die Tabelle wie in der Abbildung unten gezeigt erstellt wird.

Controller, Ansichtserstellung

■ Erstellen Sie zunächst einen Controller. (Ohne dies wird es keine App ...) Dieses Mal werden wir einen Posts-Controller erstellen.

Terminal

$ rails g controller posts

Ich denke, dass verschiedene Dateien erstellt werden, wenn Sie den Befehl ausführen, aber vorerst ist es in Ordnung, wenn Sie nur auf posts_controller.rb achten. (Hier wird auch ein Ansichtsordner für den Posts-Controller erstellt.)

■ Controller-Bearbeitung Schreiben Sie die Aktion auf den Controller. (Datei ist in App / Controller)

posts_controller.rb

class PostsController < ApplicationController
  def index
  end
end

Derzeit wird nur die Indexaktion beschrieben. Dieses Mal werde ich die Beschreibung des Inhalts wie Instanzvariablen weglassen.

■ Routing-Einstellungen Als nächstes legen wir das Routing für die Verwendung des Controllers fest. (Datei ist in Konfiguration)

routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts, only: :index
end

Die Indexaktion des Posts-Controllers kann verwendet werden. Ändern Sie auch den Stammpfad. (Ohne dies wird die von Rails vorbereitete Standardseite beim Zugriff auf den Stammpfad angezeigt.)

■ Routing-Bestätigung Lassen Sie uns überprüfen, ob das Routing richtig eingestellt ist

Terminal

$ rails routes

Es ist in Ordnung, wenn die Indexaktion des Posts-Controllers wie in der Abbildung unten gezeigt eingestellt ist.

■ Dateierstellung anzeigen Bereiten Sie nach dem Festlegen des Routings die Ansichtsdatei vor. (Selbst wenn Sie die Anfrage überspringen, wird ohne dies eine Fehlermeldung angezeigt, da keine Datei vorhanden ist.)

Erstellen Sie index.html.haml in app / views / posts. Schreiben wir etwas, damit der Inhalt leicht verständlich ist.

haml:index.html.haml

%h1 Indexseite

■ Überprüfen Sie mit einem Browser Lassen Sie uns nach dem Erstellen der Ansichtsdatei mit dem Browser prüfen, ob sie funktioniert. Starten Sie einen lokalen Server.

Terminal

$ rails s

Geben Sie localhost: 3000 / in die URL mit einem Browser wie Chrome ein, um darauf zuzugreifen. Es ist in Ordnung, wenn es gemäß der vorbereiteten Ansichtsdatei angezeigt wird (siehe Abbildung unten).

Jquery eingeführt

Wir werden jquery einführen. Fügen wir der Anwendung.js die Anforderung jquery hinzu.

application.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require_tree .

• Ein Fehler tritt nur auf, wenn die Position zum Hinzufügen von require jquery höher als require_tree ist.

--- beiseite --- Übrigens, wenn Ajax manuell mit jquery hinzugefügt wird, kann dies die Turbolinks beeinträchtigen. In meinem Fall habe ich also Turbolinks gelöscht. Kommentieren Sie die Beschreibung der Turbolinks in Gemfile aus Die Beschreibung der Turbolinks in der Datei application.html wurde entfernt Die Beschreibung der Turbolinks in der Datei application.js wurde entfernt

Lassen Sie uns abschließend überprüfen, ob jquery im Browser ordnungsgemäß funktioniert. Alles ist in Ordnung, schreiben Sie also Folgendes in die js-Datei und schauen Sie sich die Browserkonsole an! Sie können den Konsolenbildschirm mit dem Chrome-Überprüfungstool überprüfen. (Diesmal dient es zur Bestätigung, schreiben Sie es also in application.js)

application.js

$(function(){
  console.log("OK")
})

Wenn OK angezeigt wird (siehe Abbildung unten), funktioniert es ordnungsgemäß.

Dies ist das Ende aller Arbeiten beim Erstellen einer Anwendung. Ich würde mich freuen, wenn Sie auf Fehler hinweisen könnten.