質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

[Flask]TODOリストで詳細内容の表示ができない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 320

score 1

前提・実現したいこと

Pythonの勉強に、(Youtubeの解説を見ながら)TODOリストを作っています。
途中で「Detail」を押すとタスクの詳細を表示できるようにする、といった解説があるのですが、動画の通り書いてもDetailのリンク先がNot foundになってしまいます。
初歩的な質問で申し訳ないですが、よろしくお願いします。

発生している問題・エラーメッセージ

Not Found
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

該当のソースコード

#app.py
from datetime import datetime
from flask import  Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key = True)
    title = db.Column(db.String(30) ,nullable = False)
    detail = db.Column(db.String(100))
    due = db.Column(db.DateTime, nullable = False)

@app.route('/', methods=['GET','POST'])
def index():
    if request.method == 'GET':
        posts = Post.query.all()
        return render_template('index.html', posts=posts)
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        due = request.form.get('due')

        due = datetime.strptime(due, '%Y-%m-%d')
        new_post = Post(title=title, detail=detail, due=due)

        db.session.add(new_post)
        db.session.commit()

        return redirect('/')

@app.route('/create')
def create():
    return render_template('create.html')

@app.route('/detail/<int:id>')
def read(id):
    post = Post.query.get(id)
    return render_template('detail.html', post=post)




if __name__ == '__main__':
    app.run(debug=True)
<!-- detail.html -->
{% extends 'base.html' %}

{% block body %}
<h2>{( post.title )}</h2>
<p>{( post.detail )}</p>
<p>{( post.due.date() )}</p>
{% endblock %}
<!-- index.html -->
 {% extends 'base.html' %}

 {% block body %}
 <h1>トップページ</h1>
 {% for post in posts%}
 <h2>タイトル: {{post.title}}</h2>
 <p>期限: {{post.due.date()}}</p>
 <a href="detail/{(post.id)}" role="button">Detail</a>
 {% endfor %}
 {% endblock %}
<!-- create.html -->
 {% extends 'base.html' %}

 {% block body %}
<form action="/" method="post">
    <label for="title">Title</label>
    <input type="text" name="title">
    <label for="detail">Detail</label>
    <input type="text" name="detail">
    <label for="due">Due</label>
    <input type="date" name="due" required>
    <input type="submit" value="Create">
</form>
 {% endblock %}
<!-- base.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.0">
    <title>Document</title>
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • baitokun

    2021/07/19 22:03 編集

    広告とまぎらわしい為動画リンクは削除して下さい。

    キャンセル

回答 1

checkベストアンサー

+2

いくつかのテンプレートで書き方が間違っています。
特に、index.htmlでは詳細リンクのURLの記述が間違っているため、正しいリンクになっていません。

detail.html

-<h2>{( post.title )}</h2>
-<p>{( post.detail )}</p>
-<p>{( post.due.date() )}</p>
+<h2>{{ post.title }}</h2>
+<p>{{ post.detail }}</p>
+<p>{{ post.due.date() }}</p>

index.html

-    <a href="detail/{(post.id)}" role="button">Detail</a>
+    <a href="detail/{{post.id}}" role="button">Detail</a>

次のことを心がけると良いです。

  • 「間違って生成されているリンクがどうなっているか」「本来どうなっているべきか」をコードからちゃんと認識する
  • Jinja2がどういうルールでテンプレートからHTMLを生成するかをちゃんと知る
  • 写経的なプログラミングをするなら、一字一句間違えないレベルで書く。(この手の間違いは99%写経ミス)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/07/19 22:02 編集

    横から入ってごめんなさい。detail.html も同じですかね。
    <h2>{( post.title )}</h2>
    <p>{( post.detail )}</p>
    <p>{( post.due.date() )}</p>

    <h2>{{ post.title }}</h2>
    <p>{{ post.detail }}</p>
    <p>{{ post.due.date() }}</p>

    キャンセル

  • 2021/07/19 23:40

    > detail.html も同じですかね。

    ありがとうございます、確かにそうですね。
    回答も編集しました。

    キャンセル

  • 2021/07/20 13:00

    御二方とも、ご丁寧にありがとうございます🙇‍♂️
    気をつけて勉強してみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る