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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

SQLAlchemy

SQLAlchemyとはPython 用のORMライブラリです。MIT Licenceのオープンソースとして提供されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

971閲覧

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

bakushiba

総合スコア1

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

SQLAlchemy

SQLAlchemyとはPython 用のORMライブラリです。MIT Licenceのオープンソースとして提供されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2021/07/19 12:28

編集2021/07/23 04:57

前提・実現したいこと

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>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/07/19 13:24 編集

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

回答1

0

ベストアンサー

いくつかのテンプレートで書き方が間違っています。
特に、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

総合スコア2738

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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>
attakei

2021/07/19 14:40

> detail.html も同じですかね。 ありがとうございます、確かにそうですね。 回答も編集しました。
bakushiba

2021/07/20 04:00

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問