Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 1 zu erstellen (Mit SQLITE verbinden, mit Flask anzeigen) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 2 zu erstellen (Wie man mit POST und GET in Flask umgeht) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 3 zu erstellen (Anmeldeformular hinzufügen) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 4 zu erstellen (Suchformular hinzufügen)
Jetzt, da ich jeden gelernt habe, ist es Zeit, sich zu registrieren. Um sich zu registrieren, tippen Sie einfach auf die empfangene POST-Methode und registrieren Sie sie in Sqlite. Fügen Sie also nur die Quelle ein. app.py Schema von sampledb.db index.html form.html Fügen Sie jede der Quellen ein.
Wir verwenden auch Bootstrap, um die Anzeige cool aussehen zu lassen. form.html unterstützt die Anzeige / Nichtanzeige mit einer Schaltfläche, damit sie später mit index.html kombiniert werden kann.
sampledb.db
CREATE TABLE `contacts` (
`id` INTEGER PRIMARY KEY AUTOINCREMENT,
`name` TEXT UNIQUE,
`phone_num` TEXT UNIQUE,
`Commentary` TEXT,
`yomigana` TEXT
);
app.py
app.py
# -*- coding:utf-8 -*_
from flask import Flask,request,render_template,redirect,url_for
import sqlite3
from flask_httpauth import HTTPBasicAuth
app = Flask(__name__)
auth = HTTPBasicAuth()
users = {"john":"hello","susan":"bye"}
@auth.get_password
def get_pw(username):
if username in users:
return users.get(username)
return None
@app.route("/")
@auth.login_required
def basicview():
conn = sqlite3.connect("sampledb.db")
cursor = conn.cursor()
cursor.execute("select name,phone_num,Commentary from contacts order by yomigana")
result = cursor.fetchall()
cursor.close()
conn.close()
return render_template("index.html",contacts = result)
@app.route("/register")
def hello():
return render_template("form.html")
@app.route("/add_entry" ,methods = ["POST"])
def add_ent():
conn = sqlite3.connect("sampledb.db")
cursor = conn.cursor()
cursor.execute("insert into contacts (name,yomigana,phone_num,Commentary) values (?,?,?,?)",
(request.form["Name"],request.form["Kana"],request.form["Num"],request.form["Comm"]))
conn.commit()
cursor.close()
conn.close()
try:
print(request.form["Name"])
finally:
return redirect(url_for("basicview"))
if __name__ == '__main__':
app.run(debug = True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">Telefonbuch</h3>
<div class = "table-responsive">
<table class = "table table-bordered table-hover">
<tr>
<th>Name</th>
<th>Number</th>
<th>Comment</th>
</tr>
{% for num in contacts %}
<tr>
{% for name in num %}
<td>{{name}}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</body>
</html>
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<button type = "button" class = "btn btn-default" data-toggle ="collapse" data-target="#collapseSamp">
Anmeldung
</button>
<div class = "collapse" id = "collapseSamp"
<div class ="well">
<form action = "{{url_for("add_ent")}}" method = "POST" class="form-inline">
<input name = "Name" placeholder="Name">
<input name = "Kana" placeholder="Kana">
<input name = "Num" placeholder="Telefonnummer">
<input name = "Comm" placeholder="Kommentar">
<input type ="submit" value = "Senden">
</form>
</div>
</div>
</body>
</html>
――Ist es in Ordnung, jedes Mal Google Bootstrap zu googeln? Es ist zu viel, um sich daran zu erinnern, und es ist gefährlich
Das nächste Mal möchte ich form.html und index.html kombinieren, damit ich suchen kann.
Recommended Posts