127.0.0.1とlocalhostの違いに関して

###127.0.0.1に繋ぐと404 Not Foundが発生してしまう
python初学者の者です。
以下のサイトを参考に、ToDoタスクのwebアプリケーションを作成しました。
https://www.atmarkit.co.jp/ait/articles/1807/31/news042_3.html

pyファイル・htmlファイル・csvファイルを配置(※)
vscodeのターミナル(WSL)から、pyファイルを配置したディレクトリまでcdする
flask run を実行
__http://127.0.0.1:5000__に接続
テキストボックス欄に任意の文字を入力
submitを押下する → リストが表示される。
delete all done items ボタンを押下
404 が吐かれてしまう。

404 Errorが起きている原因と、解決策をご教示頂きたいです。(localhost:5000の場合は正常に動きました。)

※...ディレクトリ構造は以下の通りです
app実行場所
/mnt/c/Users/user/Desktop/work/python/SQL_Alchemy

【SQL_Alchemy配下に存在するディレクトリ】
・db
・static
・templates

【各ディレクトリ配下のファイル構成】
---SQL_Alchemy
┗app.py
┗todo.py

---static
┗styles.css

---templates
┗showtodo.html

---db
空の状態(todoitems.dbファイルが出力される)

（わかりづらくてすいません...。インデントの使い方がわからず稚拙な表記となってしまいました）

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

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

python
1from flask import Flask, render_template, redirect, request
2from todo import ToDoList, init_db
3
4app = Flask(__name__)
5
6db = init_db(app)
7
8todolist = ToDoList()
9
10@app.route("/")
11def show_todolist():
12  return render_template("showtodo.html", todolist=todolist.get_all())
13
14@app.route("/additem", methods=["POST"])
15def add_item():
16  title = request.form["title"]
17  if not title:
18    return redirect("/")
19
20  todolist.add(title)
21  return redirect("/")
22
23@app.route("/deleteitem/<int:item_id>")
24def delete_todoitem(item_id):
25  todolist.delete(item_id)
26  return redirect("/")
27
28@app.route("/deletealldoneitems")
29def delete_alldoneitems():
30  todolist.delete_doneitem()
31  return redirect("/")
32
33@app.route("/updatedone", methods=["POST"])
34def update_done():
35  keys = request.form.keys()
36  items = [int(x) for x in keys]
37  todolist.update_done(items)
38  return redirect("/")
39

todo.py

python
1from flask_sqlalchemy import SQLAlchemy
2
3db = SQLAlchemy()
4
5def init_db(app):
6  app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///db/todoitems.db"
7  db.init_app(app)
8
9class ToDoItem(db.Model):
10  __tablename__ = "todoitems"
11  item_id = db.Column(db.Integer, primary_key=True)
12  title = db.Column(db.String(100), nullable=False, default=False)
13  done = db.Column(db.Boolean, nullable=False)
14
15class ToDoList:
16  def add(self, title):
17    item = ToDoItem(title=title, done=False)
18    db.session.add(item)
19    db.session.commit()
20
21  def delete(self, item_id):
22    item = ToDoItem.query.filter_by(item_id=item_id).first()
23    db.session.delete(item)
24    db.session.commit()
25
26  def get_all(self):
27    items = ToDoItem.query.all()
28    return items
29
30  def delete_doneitem(self):
31    ToDoItem.query.filter_by(done=True).delete()
32    db.session.commit()
33
34  def update_done(self, items):
35    for item in self.get_all():
36      if item.item_id in items:
37        item.done = True
38      else:
39        item.done = False
40    db.session.commit()

todoshow.html

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>To Do List sample app</title>
7  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}" />
8</head>
9
10<body>
11  <h1>ToDo List</h1>
12
13  <form action="/additem" method="post" name="registerform">
14    <p>
15      something to do:
16      <input type="text" name="title">
17      <a href="javascript:document.registerform.submit()" class="button">submit</a>
18    </p>
19  </form>
20
21  {% if todolist %}
22  <p>here your todos</p>
23  <form action="/updatedone" method="post" name="updatedoneform">
24    <ul style="list-style-type: none; padding-left: 10px">
25      {% for item in todolist %}
26      <li {% if item.done %} style="color: lightgray" {% endif %}>
27        <input type="checkbox" {% if item.done %} checked="checked" {% endif %}
28          name="{{ item.item_id }}" value="{{ item.title }}"
29          onchange="javascript:document.updatedoneform.submit()">
30        {{ item.title }}
31        <a href="/deleteitem/{{ item.item_id }}">[delete]</a>
32      </li>
33      {% endfor %}
34    </ul>
35    <a href="/deletealldoneitems" class="button">delete all done items</a>
36  </form>
37  {% else %}
38  <p>you can register something to do.</p>
39  {% endif %}
40</body>
41
42</html>
43

試したこと

dbファイルを削除して再実施
edgeで再実施
綴りの見直し

◆http://localhost:5000に接続して実行
→404 Errorは発生せず、正常に動作確認ができた。（原因不明）

補足情報（FW/ツールのバージョンなど）

Python 3.7.3
flask　1.0.2

退会済みユーザー

2020/10/10 07:04

404 エラーというのは要求は web サーバーまで届いていて、web サーバーで要求 url のリソースを探したが見つからないということです。なので、要求したときの url が間違っているのが原因に違いないと疑って、ソースを丸投げして他人にデバッグを頼む前にそのあたりを確認してみましょう。

enix3

2020/10/10 09:18

ご指摘いただきありがとうございます。 flask run実行後、http://127.0.0.1:5000に接続すると、質問の通り404 Errorが起きてしまいますが http://localhost:5000に接続して動作確認を行うと、404 Errorにはならずリストが削除されていることが確認できました。解決はしたのですが、いまだ原因が不明瞭な状態です。