2日目
31032 ワード
学習内容
完全なソースコード
from flask import Flask, request, redirect
app = Flask(__name__)
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."},
{"id":3, "title":"js", "body":"js is ...."}
]
nextId = 4
def template(content, id=None):
liTags = ''
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
{content}
<ul>
<li><a href="/create/">create</a></li>
<li>
<form action="/delete/{id}/" method="POST">
<input type="submit" value="delete">
</form>
</li>
</ul>
</body>
</html>
'''
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello, WEB!')
@app.route("/read/<int:id>/")
def read(id):
title = ''
body = ''
for topic in topics :
if topic['id'] == id:
title = topic['title']
body = topic['body']
break;
return template(f'<h2>{title}</h2>{body}', id)
@app.route('/create/')
def create():
content = '''
<form action="/create_process/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
'''
return template(content)
@app.route('/create_process/', methods=['POST'])
def create_process():
global nextId
title = request.form['title']
body = request.form['body']
newTopic = {"id":nextId, "title": title, "body": body}
topics.append(newTopic)
nextId = nextId + 1
return redirect(f'/read/{nextId-1}/')
@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
for topic in topics:
if topic['id'] == id:
topics.remove(topic)
break;
return redirect('/')
# @app.route('/update/')
# def update():
# return 'Update'
app.run()
新しい機能
Createボタンを押してリストに追加
from flask import Flask, request, redirect
app = Flask(__name__)
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."},
{"id":3, "title":"js", "body":"js is ...."}
]
nextId = 4
def template(content, id=None):
liTags = ''
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
{content}
<ul>
<li><a href="/create/">create</a></li>
<li>
<form action="/delete/{id}/" method="POST">
<input type="submit" value="delete">
</form>
</li>
</ul>
</body>
</html>
'''
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello, WEB!')
@app.route("/read/<int:id>/")
def read(id):
title = ''
body = ''
for topic in topics :
if topic['id'] == id:
title = topic['title']
body = topic['body']
break;
return template(f'<h2>{title}</h2>{body}', id)
@app.route('/create/')
def create():
content = '''
<form action="/create_process/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
'''
return template(content)
@app.route('/create_process/', methods=['POST'])
def create_process():
global nextId
title = request.form['title']
body = request.form['body']
newTopic = {"id":nextId, "title": title, "body": body}
topics.append(newTopic)
nextId = nextId + 1
return redirect(f'/read/{nextId-1}/')
@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
for topic in topics:
if topic['id'] == id:
topics.remove(topic)
break;
return redirect('/')
# @app.route('/update/')
# def update():
# return 'Update'
app.run()
「create」ページで「create sumit」をクリックし、create processにデータを送信する操作を実行します.
create processページにcreateページから送信されたデータを書き込むには
まずimport requestを行う必要があります.
create processページではrequestです.form["title"]で送信されたデータを取得します.
@app.route('/create/')
def create():
content = '''
<form action="/create_process/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
'''
return template(content)
@app.route('/create_process/', methods=['POST'])
def create_process():
global nextId #전역에서 지정한 변수를 global이라고 지정하면 내부에서 수정할 수 있다
#topics는 값을 바꾸는게 아니라 추가하는 거라서 global 지정하지 않아도 되는 것이다
title = request.form['title']
body = request.form['body']
newTopic = {'id': nextId, 'title': title, "body": body}
topics.append(newTopic) #끝에 추가하기
nextId = nextId + 1
# return f'success!! go:/read/{nextId-1}'
return redirect(f'/read/{nextId-1}') #redirect 사용
テキストを入力し、「Create」ボタンをクリックします.create process/ページに移動します.
create process/ページは、受信したデータをトピックに追加します.
最後のページの値nextIdの値1を増やします.
画面成功!go:/read/(登録ページ番号)を出力します.
コピーしてアドレスウィンドウに入力し、入力したテキストに移動します.
deleteボタンの作成
テンプレート関数に遅延ボタンを追加し、deleteページ
def template(content, id=None):
liTags = ''
liTags = ''
for topic in topics:
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
return f'''
<html>
<html>
<body>
<body>
<h1><a href="/">WEB</a></h1>
<h1><a href="/">WEB</a></h1>
<ol>
<ol>
{liTags}
{liTags}
</ol>
</ol>
{content}
{content}
<ul>
<ul>
<li><a href="/create/">create</a></li>
<li><a href="/create/">create</a></li>
<li>
<form action="/delete/{id}/" method="POST">
<input type="submit" value="delete">
</form>
</li>
</ul>
</ul>
</body>
</body>
</html>
</html>
'''
'''
deleteボタンを押してリストを削除する
deleteページから受信値に対応するリストを削除し、ホームページ
@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
for topic in topics:
if topic['id'] == id:
topics.remove(topic)
break;
return redirect('/')
# @app.route('/update/')
# def update():
# return 'Update'
学習後期
困難と解決
@app.route('/create/')
def create():
content = '''
<form action="/create_process/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
return template(content)
@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
for topic in topics:
if topic['id'] == id:
topics.remove(topic)
break;
return redirect('/')
私はその全体的な動作原理を知っていますが、データをどのように交換するかなどの詳細について理解していません.
授業が終わってから関連書類を調べて、直接コードして、今はもっと知っているようです.復習が大切です.
感想
今日の授業は全体的によく理解されていて、満足度が高いです.前回のレッスンで初めて触れたWebフレーム「フラスコとglitch」サービスは昨日まで触れていませんでしたが、今日のレッスンで何なのか確かに理解できました.明日の授業でフラスコアプリとデータベースの接続を勉強するそうですが、どうすればいいか楽しみです.
Reference
この問題について(2日目), 我々は、より多くの情報をここで見つけました
https://velog.io/@hanss1122/파이썬기초-flask-2일차-database
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
@app.route('/create/')
def create():
content = '''
<form action="/create_process/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
return template(content)
@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
for topic in topics:
if topic['id'] == id:
topics.remove(topic)
break;
return redirect('/')
Reference
この問題について(2日目), 我々は、より多くの情報をここで見つけました https://velog.io/@hanss1122/파이썬기초-flask-2일차-databaseテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol