[JAVA] Mettre en œuvre la fonction de recherche avec l'API Rakuten Books (DVD)

introduction

Nous développons actuellement un service de recherche de films et avons implémenté une communication asynchrone utilisant des rails et ajax. Après quelques jours de dépendance, je l'ai enfin mis en œuvre, je vais donc en garder une trace. J'ai touché un peu jquery quand je faisais des mouvements comme des boutons de hamburger, mais c'était la première fois que je touchais à l'Ajax et je suis resté bloqué pendant quelques jours. (Il y avait également une relation selon laquelle le code n'était pas reflété car le serveur n'avait pas été redémarré.)

environnement

-rails (5.2.4.1) -ruby (2.5.3)

Si vous souhaitez implémenter Rakuten API (dans le cas de Rails), veuillez installer gem. La procédure de montage est omise. Pour plus d'informations, cliquez ici __ __ here __

Spécification de traitement du contrôleur

Tout d'abord, spécifiez l'action dans posts_contriller pour traiter le contenu saisi dans le champ de recherche.

routes.rb

get 'search', to: 'posts#search'　#Exécuter une action de recherche lors de la recherche d'un mot-clé

Recherche, affichage des résultats de recherche

Formulaire de recherche

erb:search_from.html.erb

#réduction
 <div class='content'>
  <div id="search-box">
    #url: search_OBTENIR une action de recherche avec chemin
    <%= form_with(url: search_path, method: :get) do |f| %> 
      <%= f.text_area :title, id: :title, placeholder: "Tapez le mot-clé", style: "width: 200px;"%> #:Le mot de recherche est frappé dans le titre
      <%= f.submit "Chercher", id: "search_button"%> #Chercherワード記入ご自動ChercherかChercherボタン後にChercherどちらでも
    <%end%>
  </div>
  <h2>Résultats de recherche</h2>
  <div id='item_list'> 
    #Vous pouvez renvoyer le rendu partiel avec, mais après l'élément de traitement ajax_list.html.J'essaye d'afficher erb.
  </div>
</div>

Affichage des résultats de recherche

erb:item_list.html.erb

<% items.each do |item| %>
  <% if item[:title].present? %>
    <div class="item">
      <div class= "item-image">
        <%= image_tag(item[:imageUrl], width: '55px') %>
      </div>
      <div class= "item-title">
        <p><%= item[:title] %></p>
      </div>
    </div>
  <% end %>
<% end %>

action de recherche

posts_controller.rb

class PostsController < ApplicationController
~ abrégé
  def search
    contents = render_to_string(partial: 'posts/item_list.html.erb', locals:{items: search_by_rakuten(params[:title])})
    #Renvoie le contenu à json
    render json: {contents: contents} #Si vous ne le hachez pas, il ne lira pas
  end

  private

   def search_by_rakuten(title)
    items = []　#Pour appeler la méthode[]Laissez vide
    if title.present?
      results = RakutenWebService::Books::DVD.search(
        title: title,　#Mots-clés du champ de recherche
        booksGenreId: '003',　#Désignation du genre de DVD de film
        hits: 10　#Obtenez seulement 10 informations sur les hits
        #Obtenir des informations en spécifiant des conditions
      )
      results.each do |result|
         #Hachez les informations acquises et entrez une valeur dans la clé
        item = {
          title: result['title'],
          url: result['itemUrl'],
          imageUrl: result['smallImageUrl'].gsub('?_ex=64x64', '')
        }#Mettez les données hachées dans un tableau
        items << item
      end
    end
    items
  end
end

Ajax

• jquery implémente ajax, mais dans ce cas, chaque personne a une méthode différente, comme cliquer sur la fonction de recherche et taper des caractères dans le champ de recherche pour une communication asynchrone, de sorte que seule la partie communication d'ajax est répertoriée. Il y a beaucoup d'informations ajax, donc si vous êtes intéressé, veuillez les vérifier.

post.js

$(function{
  funtion search(title){
  //réduction
  $.ajax({
        url: "/search",
        type: "GET",　//Accédez à l'action de recherche avec get
        dataType: "json",
        async: true,
        data: { title: title },　//Spécification des paramètres de recherche(:title)
      }).done(function (data) {
        $("#item_list").css("display", "");
        $("#item_list").html(data.contents); //render json:{contents: contents}Affichage du contenu de
      });
}
})

La fonction de recherche est maintenant implémentée.

À la fin

Avec ce qui précède, la fonction de recherche peut être mise en œuvre et les informations recherchées peuvent être obtenues. Il m'a fallu quatre ou cinq jours pour implémenter cette fonctionnalité. Cela m'a fait réaliser que mon json, ajax et ruby manquaient de connaissances, mais j'ai pu réaliser la génialité de la communication de désaccord. Nous continuerons le développement.