[1 Stunde Herausforderung] Ich habe versucht, eine Wahrsagerseite zu erstellen, die für Python zu geeignet ist
Wahrsagerei Seite, die zu geeignet ist
Vor nicht allzu langer Zeit habe ich eine Wahrsagerseite erstellt, die zu geeignet ist.
Ich habe nach dem Erstellen einige Korrekturen vorgenommen, aber die Arbeitszeit beträgt ungefähr 1 Stunde.
Technologie verwendet
Die verwendete Technologie war Bottle, ein Python-Webframework.
Die Datenbank verwendete SQLite3 und das CSS-Framework Bulma.
Das Bereitstellungsziel ist Heroku.
Datenbank erstellen
Zunächst habe ich eine Datenbank (SQLite3) erstellt.
Der Datenbankname lautet database.db.
set_fortune.py
# -*- coding: utf-8 -*-
import sqlite3
from contextlib import closing
dbname = 'database.db'
with closing(sqlite3.connect(dbname)) as conn:
c = conn.cursor()
create_table = '''create table fortune (id int, text varchar(256))'''
c.execute(create_table)
insert_sql = 'insert into fortune (id, text) values (?,?)'
fortune = [
(1, 'Mayonnaise im Schatten zu trinken kann enttäuschend sein.'),
(2, 'Wenn du Kaffee trinkst, riechst du.'),
(3, 'Wenn ich mit meinen Augen mit dem anderen Geschlecht spreche, 50%Sie können mit einer Wahrscheinlichkeit von datieren.'),
(4, 'Es kann gut sein, mit Tabasco Meeresfrüchtenudeln zu essen.'),
(5, 'Wenn Sie Curry essen, beträgt Ihr IQ 150.'),
(6, 'Es gibt gute Dinge zu tun, wenn Sie versuchen, Zigarettenrauch aus Ihrer Nase zu bekommen.'),
(7, 'Selbst wenn Sie mitten auf der Straße ein Spiel machen, wird es ignoriert.'),
(8, 'Ich bekomme Nasenblut, wenn ich Schokoriegel esse.'),
(9, 'Drehen Sie den Wasserhahn und lassen Sie ihn laufen, bis er überläuft.'),
(10, 'Ich bin es leid, über die richtige Wahrsagerei nachzudenken.'),
]
c.executemany(insert_sql, fortune)
conn.commit()
select_sql = 'select * from fortune'
for row in c.execute(select_sql):
print(row)
Ich erstelle eine Tabelle namens Fortune und erstelle ID- und Textspalten.
Danach habe ich 10 Daten eingefügt.
Als Methode zum späteren Einfügen von Daten können Sie diese wie folgt einfügen.
$sqlite3 database.db
sqlite> insert into fortune values(11, 'Ich möchte gut in Qiita werden');
Quellcode
Schauen wir uns den Quellcode an.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="application-name" content="Angemessene Wahrsagerei">
<meta name="description" content="Machen Sie ein ordentliches Vermögen.">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sloppy fortune-telling</title>
<link rel="stylesheet" href="../static/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Kosugi&display=swap" rel="stylesheet">
</head>
<body>
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Sloppy fortune-telling
</h1>
<h2 class="subtitle">
Angemessene Wahrsagerei
</h2>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<div class="control">
<div class="select is-primary is-rounded is-medium">
<select>
<option>Widder</option>
<option>Stier</option>
<option>Zwillinge</option>
<option>Krabbensitz</option>
<option>Löwe</option>
<option>Jungfrau</option>
<option>Waage</option>
<option>Skorpion</option>
<option>Teza</option>
<option>Ziege</option>
<option>Mizugameza</option>
<option>Fische</option>
</select>
</div>
</div>
</div>
<input class="input is-primary is-rounded is-medium" type="text" placeholder="Input your name">
<div class="columns is-mobile is-centered">
<button class="button is-primary is-rounded is-large" id="open">Vermögen!</button>
</div>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Das heutige Vermögen</p>
</header>
<section class="modal-card-body">
{{result}}
</section>
<footer class="modal-card-foot">
<button class="button" id="close">Close</button>
</footer>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
$("#open").on("click", function() {
$("div.modal").addClass("is-active");
})
$("#close, div.modal-background").on("click", function() {
$("div.modal").removeClass("is-active");
})
});
</script>
</body>
</html>
Bulma wird von CDN gelesen und die Anzeige ist angeordnet.
Wenn Sie die Taste mit id = open drücken, wird Modal angezeigt und das Wahrsagergebnis angezeigt.
Aus Gründen des Erscheinungsbilds gibt es eine Auswahl an Konstellationen und ein Namenseingabefeld, das jedoch für nichts verwendet wird: D.
app.py
# -*- coding: utf-8 -*-
from bottle import Bottle, template, static_file, url
import os
import random
import sqlite3
app = Bottle()
@app.route('/static/:path#.+#', name='static')
def static(path):
return static_file(path, root='static')
@app.route('/')
def index():
con = sqlite3.connect('database.db')
cur = con.cursor()
num = str(random.randint(1,16))
sql = 'select * from fortune where id = ' + num + ';'
cur.execute(sql)
for row in cur:
result = row[1]
con.close()
return template('index', result=result)
@app.error(404)
def error404(error):
return "Error 404. Try again later."
@app.error(500)
def error500(error):
return "Error 500. Try again later."
# local test
app.run(host='localhost', port=8080, debug=True)
# heroku
# app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
Stellen Sie eine Verbindung zu einer Datenbank namens databaseese.db her und generieren Sie Zufallszahlen.
Da die Fortune-Tabelle eine ID-Spalte enthält, erhalten wir das Fortune-Telling-Ergebnis (Text), bei dem die generierte Zufallszahl und ID übereinstimmen.
In Heroku bereitstellen
Es wurde bis zu einem gewissen Grad fertiggestellt, also habe ich es für Heroku bereitgestellt.
Erstellen Sie zunächst die für die Bereitstellung erforderlichen Dateien.
$ pip3 freeze > requirements.txt
$ echo web: python3 app.py > Procfile
Es gibt verschiedene Möglichkeiten, um Heroku bereitzustellen.
Persönlich finde ich es einfacher, mit dem GitHub-Repository zu arbeiten.
Nachdem Sie ein Heroku-Konto erhalten haben, wählen Sie Neue App erstellen und legen Sie den App-Namen usw. fest.
Danach können Sie die Bereitstellung durchführen, indem Sie einfach GitHub aus der Bereitstellungsmethode "Bereitstellen" auswählen und verknüpfen.
Schließlich
Ich habe eine Wahrsagerseite erstellt, die zu geeignet ist.
Wenn es sich verbessert, nimmt es bis zu einem gewissen Grad Gestalt an. Ich denke.
Wenn es Ihnen nichts ausmacht, probieren Sie die Herausforderung bitte eine Stunde lang aus! !!
Referenz
Links
Zu geeignete Wahrsageseite: https://sloppy-fortune-telling.herokuapp.com/
GitHub: https://github.com/ShogoMurakami/sloppy-fortune-telling
Thanks, @shogo
Recommended Posts