Die erste Web-App, die von Python-Anfängern erstellt wurde

Dies ist ein Memorandum, als ein Anfänger, der Python noch nie berührt hat, eine sehr einfache Webanwendung erstellt hat. Dies ist Qiitas erster Beitrag. Ich bin immer verschuldet.

** ■ App-Übersicht ** ・ Zeigen Sie eine Webseite an, die Eingaben von Benutzern akzeptiert -Buch-API-Suchanforderung (Google Books API) basierend auf dem eingegebenen Buchtitel ・ Zeigen Sie die Miniaturansicht des Buches aus der Antwort an

Ich werde den Entstehungsprozess, den Ort, an dem ich süchtig war, und die Lösung beschreiben.

-Umgebung- Mac OS

1. Python-Installation

Standardmäßig ist auf Mac 2.x Python installiert. Überprüfen Sie die installierte Python-Version mit dem folgenden Befehl.

Terminal


$ python --version
Python 2.7.16

Die Python 2.x-Serie wird ab dem 1. Januar 2020 nicht mehr unterstützt. Es gibt viele Inkonsistenzen aufgrund des Unterschieds in der Version von der 3.x-Serie + Es scheint, dass Grundschüler zu diesem Zeitpunkt lachen werden, wenn sie die 2.x-Serie verwenden, also ... Aktualisieren Sie zunächst auf die 3.x-Serie.

↓ Laden Sie das Paket der 3.x-Serie von der offiziellen Website herunter https://www.python.org/downloads/

** Q1. Suchtpunkte ** Obwohl ich es installiert habe, bleibt die Version 2.x. Wenn Sie python3 --version überprüfen, handelt es sich um die 3.x-Serie

Terminal


$ python --version
Python 2.7.16
$ python3 --version
Python 3.7.7

** A1. Lösung **

  1. Installiere pyenv mit dem Befehl brown (ich weiß nicht, wie ich es lesen soll, ich lese es in meinem Herzen)

Terminal


$ brew install pyenv
  1. Fügen Sie die folgenden 4 Zeilen mit dem vi-Editor usw. zu ~ / .bash_profile hinzu. export PYENV_ROOT="$HOME/.pyenv" export PATH="$PYENV_ROOT/bin:$PATH" eval "$(pyenv init -)" export PATH="$HOME/.pyenv/shims:$PATH"

Terminal


$ vi ~/.bash_profile
# ~/.bash_Profil bearbeiten
$ source ~/.bash_profile
  1. Verwenden Sie pyenv, damit der gesamte Mac die Python 3.x-Serie erkennt.

Terminal


$ pyenv global 3.7.0
$ pyenv rehash

Jetzt können Sie die 3.x-Serie verwenden.

Terminal


$ python --version
Python 3.7.7

2. Ordnerstruktur

Platzieren Sie die Ordner index.html, server.py und cgi-bin direkt unter dem Stammordner des Projekts. Platzieren Sie index.py im Ordner cgi-bin.

project/
  ┝ ─ index.html
  ┝ ─ server.py
  └ ─ cgi-bin/
         └ ─ index.py

3. Erstellen Sie index.html

Dieses Mal werde ich ein HTML erstellen, das nur die Eingabe von Zeichenketten akzeptiert, ohne das Layout zu berücksichtigen.

index.html


<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form method="POST" action="cgi-bin/index.py">
      <label>Bildtitel des Akquisitionsbuchs:</label>
      <br>
      <input type="text" name="text">
      <button type="submit">Senden</button>
    </form>
  </body>
</html>

Um es zu erklären, Die Daten, die in dem Bereich eingegeben werden, der vom Tag \

umgeben ist, sind \ wird von der POST-Methode an cgi-bin / index.py gesendet. Es ist wie es ist.

Eine Seite wie die folgende wird erstellt. スクリーンショット 2020-04-03 21.20.59.png

Die in das Textfeld eingegebenen Daten werden an index.py gesendet, wenn Sie auf die Schaltfläche [Senden] klicken.

4. Erstellen Sie server.py

Sie benötigen es, um einen Server für die lokale Überprüfung einzurichten.

server.py


import http.server
http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler)

Wenn Sie die in Terminal erstellte Python-Datei starten, wird der lokale Server gestartet. Mit dem lokalen Server http://0.0.0.0:8000/ Wenn Sie darauf zugreifen, sollte die gerade gesehene index.html angezeigt werden.

Terminal


$ python server.py
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
  • Übrigens ist es Befehl + C, den lokalen Server zu stoppen.

5. Erstellen Sie index.py

Wir werden die von index.html gesendeten Daten verwenden, um eine Anfrage für die Google Buchsuch-API zu senden.

index.py


#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import cgi #CGI-Modul importieren
import cgitb
import sys
import requests
import json

#Buchsuch-API-Vorlage
api = "https://www.googleapis.com/books/v1/volumes?q={title}&maxResults=10&startIndex=0"

#Da es zum Debuggen verwendet wird, wird es in der Produktionsumgebung nicht beschrieben.
cgitb.enable()

#Holen Sie sich die vom Benutzer eingegebenen Formulardaten
form = cgi.FieldStorage()

#Header zum Schreiben von HTML
print("Content-Type: text/html; charset=UTF-8") 
print("")

#Wenn keine Formulardaten eingegeben wurden
if "text" not in form:
    print("<h1>Error!</h1>")
    print("<br>")
    print("Geben Sie den Text ein!")
    print("<a href='/'><button type='submit'>Rückkehr</button></a>")
    sys.exit() # index.Ende von py

text = form.getvalue("text") #Ermitteln Sie den Wert von Textdaten
url = api.format(title=text) #Buchsuche API-Suchwort{title}Wenden Sie den Eingabetext auf an
response = requests.get(url) #Wirf eine Anfrage
data = json.loads(response.text) #Konvertieren Sie die Antwort in das JSON-Format

#Reflektieren Sie die Antwort in HTML

print(data['items'][0]['volumeInfo']['title'])
print("<br>")
print("<img src=" + data['items'][0]['volumeInfo']['imageLinks']['thumbnail'] + ">")
print("<br>")
print("<a href='/'><button type='submit'>Rückkehr</button></a>")

Ich habe viel in den Kommentaren hinzugefügt, aber ich werde es erklären. ↓ Dies ist die URL der Google Books-API. https://www.googleapis.com/books/v1/volumes?q=いちご100&maxResults=10&startIndex=0 Geben Sie den Namen des Buches ein, nach dem Sie suchen möchten ** q = **, und es wird die entsprechende Antwort zurückgegeben.

Sie können es leicht mit Curl überprüfen.

Terminal


$ curl https://www.googleapis.com/books/v1/volumes?q=Erdbeere 100&maxResults=10&startIndex=0

"kind": "books#volumes",
 "totalItems": 2836,
 "items": [
  {
   "kind": "books#volume",
   "id": "vWSUDwAAQBAJ",
   "etag": "b/w9qaxsyy4",
   "selfLink": "https://www.googleapis.com/books/v1/volumes/vWSUDwAAQBAJ",
   "volumeInfo": {
    "title": "Ichigo 100% monochrome Version [Kostenlos für eine begrenzte Zeit] 2",
    "authors": [
     "Mizuki Kawashita"
    ],
    "publisher": "Shueisha",
    "publishedDate": "2002-10-04",
    "description": "[Spring Man!!Kostenlos für eine begrenzte Zeit!!/ Ein Labyrinth der Liebe, in dem sich Junpei Manaka plötzlich verirrt hat! Super Jugendliebeskomödie unter der Leitung von Erdbeerhosen! ] * Dies ist eine kostenlose Testversion für eine begrenzte Zeit bis zum 8. Mai 2019. Es wird nach dem 9. Mai 2019 nicht mehr verfügbar sein. Nishino und Tojo, das Gefühl der Mitte schwankt zwischen ihnen. Was magst du wirklich an Nishino? Oder ist es Tojo? Am Tag der Prüfung, als ich am Eingang des Labyrinths mit Erdbeermuster begrüßt wurde, ohne überhaupt zu studieren, stand ein phantomschönes Mädchen vor mir ...!!Was in der Mitte zu tun!?",
    "industryIdentifiers": [
     {
      "type": "OTHER",
      "identifier": "PKEY:088733268733043155P5"
     }
    ],
    "readingModes": {
     "text": true,
     "image": false
    },
    "pageCount": 188,
    "printType": "BOOK",
    "categories": [
     "Comics & Graphic Novels"
    ],
    "maturityRating": "NOT_MATURE",
    "allowAnonLogging": false,
    "contentVersion": "1.2.2.0.preview.2",
    "panelizationSummary": {
     "containsEpubBubbles": true,
     "containsImageBubbles": true,
     "epubBubbleVersion": "99b0fa95624a43e9_A",
     "imageBubbleVersion": "99b0fa95624a43e9_A"
    },
    "imageLinks": {
     "smallThumbnail": "http://books.google.com/books/content?id=vWSUDwAAQBAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
     "thumbnail": "http://books.google.com/books/content?id=vWSUDwAAQBAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
    },
    "language": "ja",
    "previewLink": "http://books.google.co.jp/books?id=vWSUDwAAQBAJ&dq=%E3%81%84%E3%81%A1%E3%81%94100&hl=&cd=1&source=gbs_api",
    "infoLink": "http://books.google.co.jp/books?id=vWSUDwAAQBAJ&dq=%E3%81%84%E3%81%A1%E3%81%94100&hl=&source=gbs_api",
    "canonicalVolumeLink": "https://books.google.com/books/about/%E3%81%84%E3%81%A1%E3%81%94100_%E3%83%A2%E3%83%8E%E3%82%AF%E3%83%AD%E7%89%88_%E6%9C%9F%E9%96%93%E9%99%90.html?hl=&id=vWSUDwAAQBAJ"
   },
   "saleInfo": {
    "country": "JP",
    "saleability": "NOT_FOR_SALE",
    "isEbook": false
   },
   "accessInfo": {
    "country": "JP",
    "viewability": "NO_PAGES",
    "embeddable": false,
    "publicDomain": false,
    "textToSpeechPermission": "ALLOWED",
    "epub": {
     "isAvailable": true
    },
    "pdf": {
     "isAvailable": true
    },
Abkürzung------------------------------------------------------

Die lange Antwort wie oben beschrieben wird als Antwort gespeichert. In Daten wird die Antwort in den JSON-Typ konvertiert und gespeichert.

Dieses Mal möchte ich [title] und [thumbnail] von ihnen verwenden, also data['items'][0]['volumeInfo']['title'] data['items'][0]['volumeInfo']['imageLinks']['thumbnail'] Zugriff auf und Abruf der erforderlichen Daten.

Durch Ändern des Wertes von [0] auf [1] [2] Sie können das abzurufende Suchergebnisziel ändern.

スクリーンショット 2020-04-03 21.42.24.png

↓↓↓

スクリーンショット 2020-04-03 21.43.06.png

Abschluss ○ △ □

** Q2. Suchtpunkte ** Wenn Sie die Senden-Taste drücken, FileNotFoundError: [Errno 2] No such file or directory: '/Users/hoge/project/cgi-bin/index.py' Fehler wird angezeigt und die Suchergebnisse werden nicht angezeigt

** A2. Lösung ** /Users/hoge/project/cgi-bin/index.py war vorhanden. Die erste Zeile von index.py war falsch × #!usr/bin/env python3 ○ #!/usr/bin/env python3

** Q3.Anfragen können nicht importiert werden ** import requests Am Ort von tritt ein Fehler auf

** A3. Lösung ** Dieser Artikel war sehr hilfreich. https://qiita.com/Kent_recuca/items/349586e9c034535f2991

In Python sys.path Behebung durch Hinzufügen des Pfads, in dem Anforderungen installiert sind

Zusammenfassung

Ich habe früher eine Web-App mit Spring Boot erstellt. Im Vergleich dazu sind die Ordnerstruktur und die Umgebungskonstruktion meiner Meinung nach einfacher und können sofort verschoben werden.

Ich wusste, dass es im Bereich des maschinellen Lernens verwendet wurde, aber ich war überrascht, dass es auch in der Webumgebung verwendet wurde. Da war ich neu in Python Warum der Fehler nach dem # auftritt, sollte ein Kommentar sein Warum wird index.html angezeigt, wenn ich den lokalen Server starte? Es gibt noch viele Rätsel, aber ich möchte mein Verständnis studieren und vertiefen.

Recommended Posts