入力された文字列をデータベースに格納する手続きができないがエラーが表示されない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
PythonのライブラリFlaskを使ってWebアプリケーションを作成しています。
掲示板のようなもので入力されたデータをページに加えていきたいです。
フォームが空欄の時はフラッシュメッセージを使って警告をしてデータベースには格納せず、フォームが空欄でない場合はSQLAlchemyを使ってデータベースに入力されたデータを格納しています。

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

現在以下のコマンドでPythonプログラムを実行すると、HTML画面は問題なく表示されるのですが、入力ボタンを押してもデータがデータベースに格納されず、ウェブブラウザにも表示されない状況です。

$ FLASK_APP=app.py FLASK_DEBUG=true flask run

しかし、更新などを行ってもエラーメッセージは出ず何を修正すれば良いのか全く見当がつかない状態です。

* Serving Flask app "app.py" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
/Users/username/.pyenv/versions/3.6.0/lib/python3.6/site-packages/flask_sqlalchemy/__init__.py:835: FSADeprecationWarning: SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and will be disabled by default in the future.  Set it to True or False to suppress this warning.
  'SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and '
 * Debugger is active!
 * Debugger PIN: 232-439-885
/Users/username/.pyenv/versions/3.6.0/lib/python3.6/site-packages/flask_sqlalchemy/__init__.py:835: FSADeprecationWarning: SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and will be disabled by default in the future.  Set it to True or False to suppress this warning.
  'SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and '
127.0.0.1 - - [18/Oct/2019 21:27:04] "GET / HTTP/1.1" 200 -

該当のソースコード

app.py

python
1from flask import Flask, flash, render_template, request, redirect, url_for, abort, jsonify
2from flask_sqlalchemy import SQLAlchemy
3import sys
4
5app = Flask(__name__)
6app.config['SQLALCHEMY_DATABASE_URI'] = 'postgres://username@localhost:5432/sample'
7db = SQLAlchemy(app)
8
9class Todo(db.Model):
10    __tablename__ = 'todos'
11
12    id = db.Column(db.Integer, primary_key=True)
13    username = db.Column(db.String(), nullable=False)
14    texts = db.Column(db.String(120))
15
16
17    def __repr__(self):
18      return f'<Todo {self.id} {self.username} {self.texts}>'
19
20db.create_all()
21
22#ユーザ名・テキストが入力されていたら、データベースに格納し、HTMLページに表示
23@app.route('/todos/create', methods=['POST'])
24def create_todo():
25  error = False
26  body = {}
27  
28  try:
29    username = request.form['username']
30    texts = request.form['texts']
31    todo = Todo(username=username, texts=texts)
32
33    if username and texts:
34      db.session.add(todo)
35      db.session.commit()
36      body['username'] = todo.username
37      body['texts'] = todo.texts
38      flash("成功", "success")
39
40    #ユーザー名、テキストが入力されていなかった時
41    elif username == "":
42      flash("名前を入力してください", "failed")
43      b.session.rollback()
44
45    elif texts == "":
46      flash("テキストを入力してくfださい", "failed")
47      db.session.rollback()
48
49  except:
50    error = True
51    db.session.rollback()
52    print(sys.exc_info())
53  finally:
54    db.session.close()
55  if error:
56    abort (400)
57  else:
58    return jsonify(body)
59
60@app.route('/')
61def index():
62    return render_template('index.html', data=Todo.query.all())

templates(フォルダ)/index.html

html
1<html>
2<head>
3	<title>Todo App</title>
4<style>
5	.hidden{
6		display:  none;
7	}
8</style>
9</head>
10<body>
11	<form method="post" action="/todos/create">
12    <h4>username</h4>
13		<input type= "text" name="username" />
14    <h4>texts</h4>
15    <input type= "text" name="texts" />
16    <input type= "submit" value="Create" />
17	</form>
18	<div id= "error" class="hidden">Something went wrong!</div>
19	<ul>
20		{% for d in data %}
21    <li>{{d.username}}</li>
22		<li>{{d.texts}}</li>
23		{% endfor %}
24	</ul>
25    <script>
26      const unameInput = document.getElementById('username');
27      const txInput = document.getElementById('texts');
28      document.getElementById('form').onsubmit = function(e) {
29        e.preventDefault();
30        const name = unameInput.value;
31        const texts = txInput.value;
32        descInput.value = '';
33        fetch('/todos/create', {
34          method: 'POST',
35          body: JSON.stringify({
36            'username': username,
37            'texts': texts,
38          }),
39          headers: {
40            'Content-Type': 'application/json',
41          }
42        })
43        .then(response => response.json())
44        .then(jsonResponse => {
45          console.log('response', jsonResponse);
46          li = document.createElement('li');
47          li.innerText = name;
48          li.innerText = city;
49          document.getElementById('todos').appendChild(li);
50          document.getElementById('error').className = 'hidden';
51        })
52        .catch(function() {
53          document.getElementById('error').className = '';
54        })
55      }
56    </script>
57</body>
58</html>

試したこと

フラッシュメッセージによる警告は
Qiita Flaskでフラッシュメッセージを表示する方法
を参考にして実装しました。

また、Flashingに関するFlask公式ドキュメントのプログラムは
ローカル環境で実行し、ブラウザで動作を確認しました。

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

Python 3.6.0
Flask 1.1.1
Sqlalchemy　1.3.10
psql (PostgreSQL) 11.5
ブラウザ Google Chrome

FiroProchainezo

2019/10/24 02:04

このプログラムって実行できませんよね？ importが足りなかったりするのですが、これが最新版ですか？

退会済みユーザー

2019/10/24 04:56

プログラムを最新版に修正しました。

退会済みユーザー

2019/10/24 04:58

入力された文字列をデータベースに格納するのは解決できましたが、依然としてFlashメッセージは表示されず、検索などの仕組みもここから実装で止まっている段階です。（https://teratail.com/questions/218966）

FiroProchainezo

2019/10/24 05:05

ということは、この質問は解決済みということですか？でしたら、自己回答で良いので解決済みにしていただけませんか？

退会済みユーザー

2019/10/24 05:12

かしこまりました。他の質問で、もし可能でしたらお力添えいただけますと幸いです。

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

回答1件

ベストアンサー

from flask import Flask, flash, render_template, request, redirect, url_for, abort, jsonify
from flask_sqlalchemy import SQLAlchemy
import sys

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgres://username@localhost:5432/sample'
db = SQLAlchemy(app)

class Todo(db.Model):
    __tablename__ = 'todos'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(), nullable=False)
    texts = db.Column(db.String(120))


    def __repr__(self):
      return f'<Todo {self.id} {self.username} {self.texts}>'

db.create_all()

#ユーザ名・テキストが入力されていたら、データベースに格納し、HTMLページに表示
@app.route('/todos/create', methods=['POST'])
def create_todo():
  error = False
  body = {}
  
  try:
    username = request.form['username']
    texts = request.form['texts']
    todo = Todo(username=username, texts=texts)

    if username and texts:
      db.session.add(todo)
      db.session.commit()
      body['username'] = todo.username
      body['texts'] = todo.texts
      flash("成功", "success")

    #ユーザー名、テキストが入力されていなかった時
    elif username == "":
      flash("名前を入力してください", "failed")
      b.session.rollback()

    elif texts == "":
      flash("テキストを入力してくfださい", "failed")
      db.session.rollback()

  except:
    error = True
    db.session.rollback()
    print(sys.exc_info())
  finally:
    db.session.close()
  if error:
    abort (400)
  else:
    return jsonify(body)

@app.route('/')
def index():
    return render_template('index.html', data=Todo.query.all())

投稿2019/10/24 05:14

退会済みユーザー

総合スコア0