[RUBY] Erstellen Sie mit Sinatra eine Familien-ToDo-Liste

Erstellen Sie mit Sinatra eine Familien-ToDo-Liste

Ich habe es erstellt, indem ich versucht habe, eine App mit Sinatra zu erstellen. Auf die Funktion als Basis wird hier jedoch Bezug genommen.

Einführung in Sinatra (insgesamt 17 Mal) - Nicht für die Programmierung installieren

Dieses Mal werden wir eine Funktion hinzufügen, damit es sich um eine Aufgabenliste handelt, die von der Familie verwendet werden kann. Die wichtigsten hinzuzufügenden Funktionen sind die folgenden vier Punkte.

• Anzeige der Buchungszeit
• Aktivieren Sie das Kontrollkästchen, um den Benutzer auszuwählen --Do Anzeige entsprechend dem Benutzer --Neue Benutzerregistrierung

Ich denke, es wird ein gutes Thema sein, um die Einführung in Sinatra voranzutreiben. Zunächst ist es der Bildschirm der ausgefüllten Bewerbung.

Das Folgende ist eine Beschreibung des Codes.

Anzeige der Buchungszeit

Laden Sie die Date-Klasse in die rb-Datei.

tlist.rb

require ‘date’

Fügen Sie created_at zu der in der SQL-Datei erstellten Tabelle hinzu (die Zeit für die Datensatzgenerierung wird automatisch abgerufen).

table.sql

create table todos
(
  id integer PRIMARY key,
  users_id integer,
  body text,
  created_at
);

Es wurde ein Block hinzugefügt, der die Buchungszeit in dem Block beschreibt, in dem die Body-Elemente in der Reihenfolge mit jeder Methode für die Instanzvariable @todos angezeigt werden. Wechseln Sie mit der To_time-Methode in die Time-Klasse und formatieren Sie sie für die einfache Anzeige mit der strftimeme-Methode.

index.erb

<div class=“time”>
  <%= todo.created_at.to_time.strftime(“%Y/%m/%d %H:%M:%S”)%>
  <span class=“delete delete_todo”>[x]</span>
</div>

Installation des Auswahlfelds zur Angabe des Benutzers

Erstellen Sie eine Benutzertabelle in einer SQL-Datei.

table.sql

create table users
(
  id integer primary key,
  userName text
);

Speichern Sie Tabelleninformationen in der Users-Klasse mit der ActiveRecord :: Base-Methode.

tlist.rb

class Users < ActiveRecord::Base
  validates :userName, presence: true
end

Übergeben Sie die Users-Klasse an die Instanzvariable.

tlist.rb

get ‘/‘ do
  @title ="Aufgabenliste"
  @todos = Todos.all
  @users = Users.all
  erb :index
end

Durch sequentielles Anzeigen der Werte im Auswahlfeld bei jeder Methode kann der Benutzer im Auswahlfeld ausgewählt werden.

index.erb

<select name=“users_id” >
  <% @users.each do |user|%>
    <option value=“<%= user.id%>”><%= user.userName%></option>
  <% end %>
</select>

Anzeige von Aufgabenelementen, die dem Benutzer entsprechen

Ich wusste nicht, wie man mit Eins-zu-Viele-Tabellen implementiert, also fügte ich das Ergebnis hinzu, wenn die IDs in der if-Anweisung übereinstimmen. Der zuvor von select gesendete Wert ist die ID der Benutzertabelle und wird so festgelegt, dass er an die Benutzer-ID der Tabelle todos übergeben wird.

tlist.rb

post ‘/create_todo’ do
  Todos.create(body: params[:body],users_id: params[:users_id])
  redirect to(‘/‘)
end

index.erb

  <% @users.each do |user| %>
    <div class=“user_box” data-user_id = “<%=user.id%>” data-token = “<%= Rack::Csrf.csrf_token(env)%>”>
        <div class=“user_name”>
          <%= Rack::Utils.escape_html(user.userName)%>
          <span class=“delete delete_user”>[x]</span>
        </div>
        <ul>
          <% @todos.each do |todo|%>
            <%if user.id == todo.users_id%>
              <li data-id = “<%= todo.id%>” data-token = “<%= Rack::Csrf.csrf_token(env)%>”>
                <div class=“todo_body”>
                  <%= Rack::Utils.escape_html(todo.body)%>
                </div>
              </li>
          <% end%>
        </ul>
      <% end %>
    </div>
  <% end %>

Neue Benutzerregistrierungsfunktion

Erstellen Sie ein Formular ähnlich dem Eingabeformular der Todo-Liste und geben Sie den eingegebenen Wert als Benutzername zurück.

index.erb

<div class=“user_form”>
  <form action=“/create_user” method = “post”>
    <%= Rack::Csrf.csrf_tag(env)%>
    <span>Neuer Benutzername:</span>
    <input type=“text” name=“userName” class=“user_input_box”>
    <input type=“submit” value=Klasse "Neue Registrierung"= ‘btn btn_user’>
  </form>
</div>

Generieren Sie Daten in der Benutzertabelle.

tlist.rb

post ‘/create_user’ do
  Users.create(userName: params[:userName])
  redirect to(‘/‘)
end

Das meiste davon ist vollständig. Andere Funktionen zur Tokenverarbeitung und zum Löschen von Benutzern werden hier weggelassen. Die Produkte finden Sie unter github.

Weitere Hinweise

Über Csrf-Maßnahmen (Antragszwang) ※(CSRF：Cross-site Request Forgery) Es wird bereitgestellt, um zu verhindern, dass die Anforderung gegen die Absicht des Benutzers gesendet wird. Sie können überprüfen, ob die Anforderung von der legitimen Seite auf der Anforderungszielseite gesendet wurde. Als Prozess wird ein Token in den Eingabedaten mit einem versteckten Element belastet, und das Anforderungsziel bestätigt, ob das Token formal ist.

Referenz: CSRF-Maßnahmen, zusammengefasst vom Chick Engineer (soll jederzeit aktualisiert werden) | Chronodrive