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

前提・実現したいこと

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.

該当のソースコード

Python
1#app.py
2from datetime import datetime
3from flask import  Flask, render_template, request, redirect
4from flask_sqlalchemy import SQLAlchemy
5
6app = Flask(__name__)
7app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
8db = SQLAlchemy(app)
9
10class Post(db.Model):
11    id = db.Column(db.Integer, primary_key = True)
12    title = db.Column(db.String(30) ,nullable = False)
13    detail = db.Column(db.String(100))
14    due = db.Column(db.DateTime, nullable = False)
15
16@app.route('/', methods=['GET','POST'])
17def index():
18    if request.method == 'GET':
19        posts = Post.query.all()
20        return render_template('index.html', posts=posts)
21    else:
22        title = request.form.get('title')
23        detail = request.form.get('detail')
24        due = request.form.get('due')
25
26        due = datetime.strptime(due, '%Y-%m-%d')
27        new_post = Post(title=title, detail=detail, due=due)
28
29        db.session.add(new_post)
30        db.session.commit()
31
32        return redirect('/')
33
34@app.route('/create')
35def create():
36    return render_template('create.html')
37
38@app.route('/detail/<int:id>')
39def read(id):
40    post = Post.query.get(id)
41    return render_template('detail.html', post=post)
42
43
44
45
46if __name__ == '__main__':
47    app.run(debug=True)

html
1<!-- detail.html -->
2{% extends 'base.html' %}
3
4{% block body %}
5<h2>{( post.title )}</h2>
6<p>{( post.detail )}</p>
7<p>{( post.due.date() )}</p>
8{% endblock %}
9

html
1<!-- index.html -->
2 {% extends 'base.html' %}
3
4 {% block body %}
5 <h1>トップページ</h1>
6 {% for post in posts%}
7 <h2>タイトル：　{{post.title}}</h2>
8 <p>期限：　{{post.due.date()}}</p>
9 <a href="detail/{(post.id)}" role="button">Detail</a>
10 {% endfor %}
11 {% endblock %}

html
1<!-- create.html -->
2 {% extends 'base.html' %}
3
4 {% block body %}
5<form action="/" method="post">
6    <label for="title">Title</label>
7    <input type="text" name="title">
8    <label for="detail">Detail</label>
9    <input type="text" name="detail">
10    <label for="due">Due</label>
11    <input type="date" name="due" required>
12    <input type="submit" value="Create">
13</form>
14 {% endblock %}

html
1<!-- base.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    {% block head %}{% endblock %}
10</head>
11<body>
12    {% block body %}{% endblock %}
13</body>
14</html>

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

退会済みユーザー

2021/07/19 13:24 編集

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

detail.html

diff
1-<h2>{( post.title )}</h2>
2-<p>{( post.detail )}</p>
3-<p>{( post.due.date() )}</p>
4+<h2>{{ post.title }}</h2>
5+<p>{{ post.detail }}</p>
6+<p>{{ post.due.date() }}</p>

index.html

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

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

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

投稿2021/07/19 12:40

編集2021/07/19 14:39

attakei

総合スコア2740

退会済みユーザー

2021/07/19 13:06 編集

横から入ってごめんなさい。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>