[JAVA] [Rails] Buchsuche (asynchrone Kommunikation) mit Amazon PA API v5.0
Dies ist eine Fortsetzung von diesem Artikel.
Beim letzten Mal wurde die Ansichtsdatei nach dem Verknüpfen mit der API angezeigt. Diesmal werden die Daten jedoch von Ajax Communication erfasst und die Buchsuchergebnisse angezeigt. (Der Grund ist, dass dies cooler ist lol)
Vollständiges Bild
(Da das Erscheinungsbild mit CSS ein wenig angepasst wurde, unterscheidet sich das Erscheinungsbild ein wenig vom vorherigen Artikel.)
Prozessablauf
Wenn Sie das Suchformular ausfüllen und die Suchtaste drücken (Senden), wird es wie folgt verarbeitet
- Holen Sie sich Schlüsselwörter in das Suchformular
- Haben Sie Daten (Schlüsselwörter) im JSON-Format und fordern Sie die angegebene URL an (Ajax-Kommunikation).
- Verarbeiten Sie die API-Verknüpfung mit dem Controller und übergeben Sie die Daten an json
- Verwenden Sie die zurückgegebenen Daten, um das HTML neu zu schreiben und die Suchergebnisse anzuzeigen
Jede Datei
Regler
Es muss geschrieben werden, dass die Antwort mit json an den Controller zurückgegeben wird.
Bei reply_to ~
searches_controller
class SearchesController < ApplicationController
before_action :call_client, only: :index
def index
si = @client.search_items(keywords: keyword_params, SearchIndex: "Books")
@items = si.items
respond_to do |format|
format.html
format.json
end
end
private
def call_client
require 'paapi'
@client = Paapi::Client.new(access_key: Rails.application.credentials[:pa_api][:access_key_id],
secret_key: Rails.application.credentials[:pa_api][:secret_key],
market: :jp,
partner_tag: Rails.application.credentials[:pa_api][:associate_tag])
end
def keyword_params
params.require(:keyword)
end
end
jbuilder Erstellen Sie "index.json.jbuilder" in "views / [Verzeichnis mit demselben Namen wie der Controller-Name]". Dieses Mal wird "search_controller.rb" direkt unter "controller" erstellt, also "views / searches / index.json.jbuilder".
Da die json-Daten diesmal ein Array sind, muss geschrieben werden, wie jedes Element verarbeitet wird. Die zu extrahierenden Daten sind die Informationen des Bildes, des Titels, des Autors und des Herausgebers.
ruby:index.json.jbuilder
json.array! @items do |item|
json.image_url item.image_url
json.title item.title
json.authors item.authors
json.publisher item.publisher
end
js Datei
api-search.js
//Schreiben Sie mit jQuery
$(function() {
//Funktion zur Anzeige von Suchergebnissen
let search_list = $("#books")
function appendBook(image_url, title, author, publisher) {
const html = `<div class="search-book-content">
<div class="book-image">
<img class="book-image" src="${image_url}">
</div>
<div class="right-content">
<div class="book-info">
<div class="book-info__title">
${title}
</div>
<div class="book-info__author">
${author}
</div>
<div class="book-info__publisher">
${publisher}
</div>
</div>
</div>
</div>`
search_list.append(html);
}
//Anzeigefunktion gesucht
function dispLoading(msg){
let dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
$("body").append("<div id='loading'>" + dispMsg + "</div>");
}
//Funktion zum Ausschalten der Anzeige während der Suche
function removeLoading(){
$("#loading").remove();
}
//Ereignis wird ausgelöst, wenn die Suchtaste gedrückt wird
$("#book-search-form").on("submit", function(e) {
e.preventDefault();
const keyword = $("#keyword").val();
dispLoading("Suchen...");
//Details der Ajax-Kommunikation
$.ajax({
url: '/searches',
type: 'GET',
data: {'keywords': keyword},
dataType: 'json',
timeout: 10000
})
//Wenn Ajax funktioniert
.done(function(items){
$(".search-book-content").remove();
items.forEach(function(item){
let image_url;
let author;
let publisher;
if (item.image_url == null) {
image_url = `/assets/no_image-267acfcb976ba4942183409c682b62a768afb48c328b6ba60de7b57fd83c3b56.png`
} else {
image_url = item.image_url
}
if (item.authors.length == 0) {
author = 'Unbekannter Autor'
} else {
author = `${item.authors[0]}`
}
if (item.publisher == null) {
publisher = 'Unbekannter Verlag'
} else {
publisher = item.publisher
}
let title = item.title
appendBook(image_url, title, author, publisher);
})
})
//Wenn Ajax ausfällt
.fail(function(){
alert("Suche fehlgeschlagen");
})
//Gemeinsame Verarbeitung, unabhängig davon, ob Ajax erfolgreich ist oder fehlschlägt
.always( function(data) {
//Lading Bild löschen
removeLoading();
});
});
})
Wie Sie beim Lesen des Codes sehen können, schreiben wir den Prozessablauf.
■ Funktionsdefinition
- appendBook
Funktion zum Erstellen von HTML basierend auf Buchdaten - dispLoading
Funktion zum Anzeigen der durchsuchten GIF-Datei - removeLoading
Funktion zum Ausblenden der durchsuchten GIF-Datei
■ Ereignis
- Feuern Sie ein Ereignis mit einer Submit-Aktion ab
- Geben Sie die im Formular eingegebenen Schlüsselwörter ein
- Zeigen Sie den gesuchten Bildschirm an
- Anfrage für Ajax-Kommunikation (URL und Übertragungsdaten angeben)
- Verarbeitung bei erfolgreicher Ajax-Kommunikation
Machen Sie alle Daten zu einer Variablen und geben Sie sie an die AppendBook-Funktion weiter (Wenn keine Daten abgerufen werden können, stellen Sie sicher, dass Daten wie unbekannte Autoren eingegeben werden.) - Verarbeitung, wenn die Ajax-Kommunikation fehlschlägt
- Löschen Sie das gesuchte Bild als allgemeinen Vorgang
Da die Suche etwas Zeit in Anspruch nimmt, versuche ich, während der Ajax-Kommunikation ein GIF-Bild anzuzeigen, damit leicht zu verstehen ist, dass die Suche ausgeführt wird.
Wenn die Suche zu lange dauert, tritt ein Fehler auf. (10 Sekunden) Wenn Sie weiter suchen, wird der Benutzer besorgt sein.
Suchbildschirm (CSS-Datei)
CSS-Datei
#loading {
display: table;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
opacity: 0.8;
}
#loading .loadingMsg {
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 140px;
background: image-url("loading.gif") center center no-repeat;
}
Es gibt mehrere Websites, auf denen Sie kostenlos GIF-Dateien erstellen können. Erstellen wir also eine. Ich habe es auf [dieser Seite] gemacht (https://icons8.com/preloaders/).
Memo
Notieren Sie sich den Teil, der nicht funktioniert hat. (Ich wäre Ihnen dankbar, wenn Sie mir mehr darüber erzählen könnten ...)
-
Ich möchte wirklich nur keyword_params als Argument verwenden.
Wenn ich eine API auf Basis von Schlüsselwörtern auf dem Controller treffe und sie im Hash-Format alskeyword_paramsan das Argument von search_items übergebe, ist es erfrischend, aber aus irgendeinem Grund hat es nicht funktioniert. .. (Es fühlt sich an, als würden Sie es nicht erhalten, wenn es ein aktiver Hash ist ...) -
Es funktioniert nicht gut, wenn Turbolinks ausgeschaltet sind.
Es scheint, dass die Ajax-Kommunikation möglicherweise nicht funktioniert, wenn Turbolinks enthalten sind. Daher habe ich sie so eingestellt, dass sie nicht immer verwendet wird. Im Gegenteil, die Ajax-Kommunikation funktioniert gut, da keine Turbolinks vorhanden sind. Ich bin nicht dorthin gegangen lol. Ich verstehe nicht wirklich, wie dieser Bereich funktioniert ...
Recommended Posts