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ボタンを押してリストに追加

  • 機能説明
    「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」サービスは昨日まで触れていませんでしたが、今日のレッスンで何なのか確かに理解できました.明日の授業でフラスコアプリとデータベースの接続を勉強するそうですが、どうすればいいか楽しみです.