編集履歴

質問編集履歴

ご回答を受けての追記

2019/10/25 03:42

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -436,6 +436,100 @@
 ```
+###ご回答を受けての追記
+不明瞭な点があったため明白にします。
+* 実現したいこと
+検索フォームに入力されたら、大文字小文字問わず部分一致で該当するcityを持つデータのnameを取得し、画面遷移で(POSTして)表示を変えたいです。
+Tokyoの場合、画面遷移をして
+```
+  Hanako
+  Taro
+```
+です。
+* search_venuesの戻り値がrender_template
+に関して、javascriptとpythonのjinja2で表示処理のちがいがよくわかっていないのですが
+検索しても該当するページを見つけられていない状況です。
+def create_todo():に倣って以下のように変更しましたが依然として、
+1. 部分一致検索が機能しているのか
+2. javascriptとpythonのjinja2のちがいによる表示処理
+がうまく理解できていないので、最新版のコードでもエラーが出ています。
+```python
+@app.route('/todos/search', methods=['GET'])
+def search_venues():
+  #HTMLのフォームから検索に用いられた単語を取得
+  search_term = db.session.query(Todo).get(request.form["search_term"].strip())
+  #search_term = request.form.get('search_term');
+  results = []
+  if search_term == "":
+    print("enter a keyword")
+  users = session.query(Todo).filter(Todo.city.like('%'+ search_term + '%')).all()
+  for user in users:
+    print(user)
+    results.append(user)
+    return jsonify(results)
+```
 ### 補足情報（FW/ツールのバージョンなど）
 Python 3.6.0

コードを最新版に修正

2019/10/25 03:42

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -100,153 +100,151 @@
 ```python
-from flask import Flask, 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/simplewr'
-db = SQLAlchemy(app)
-class Todo(db.Model):
-   __tablename__ = 'todos'
-   id = db.Column(db.Integer, primary_key=True)
-   name = db.Column(db.String)
-   city = db.Column(db.String(120))
-   # TODO: implement any missing fields, as a database migration using Flask-Migrate
-   def __repr__(self):
-     return f'<Todo {self.id} {self.name} {self.city}>'
-db.create_all()
-@app.route('/todos/create', methods=['POST'])
-def create_todo():
- error = False
- body = {}
- try:
-   name = request.form['name']
-   city = request.form['city']
-   todo = Todo(name=name, city=city)
-   db.session.add(todo)
-   db.session.commit()
-   body['name'] = todo.name
-   body['city'] = todo.city
- except:
-   error = True
-   db.session.rollback()
-   print(sys.exc_info())
- finally:
-   db.session.close()
- if error:
-   abort (400)
- else:
-   return jsonify(body)
-@app.route('/todos/search', methods=['POST'])
-def search_venues():
- #HTMLのフォームから検索に用いられた単語を取得
- search_term = request.form.get('search_term');
- results = []
- # 部分一致 LIKE
- # WHERE LIKE '%...%'
- if search_term == "":
-   print("enter a keyword")
- for student in session.query(Todo).filter(todo.city.like('%search_term%')):
-   print(todo.name)
-   results.append(todo.name)
- """
- Tokyoで検索された時
- Todo.cityがTokyo and Yokohamaでも、Tokyoでも部分一致で該当するデータのnameを出力
- Hanako
- Taro
- みたいな感じで出力
- """
- return render_template('index.html', results=results, search_term=search_term)
- #htmlのrenderにはjinja2というものが使われており、中でPythonのコードを実行することができる
-@app.route('/')
-def index():
-   return render_template('index.html', data=Todo.query.all())
+from flask import Flask, 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/simplewr'
+db = SQLAlchemy(app)
+class Todo(db.Model):
+    __tablename__ = 'todos'
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String)
+    city = db.Column(db.String(120))
+    def __repr__(self):
+      return f'<Todo {self.id} {self.name} {self.city}>'
+db.create_all()
+@app.route('/todos/create', methods=['POST'])
+def create_todo():
+  error = False
+  body = {}
+  try:
+    name = request.form['name']
+    city = request.form['city']
+    todo = Todo(name=name, city=city)
+    db.session.add(todo)
+    db.session.commit()
+    body['name'] = todo.name
+    body['city'] = todo.city
+  except:
+    error = True
+    db.session.rollback()
+    print(sys.exc_info())
+  finally:
+    db.session.close()
+  if error:
+    abort (400)
+  else:
+    return jsonify(body)
+@app.route('/todos/search', methods=['POST'])
+def search_venues():
+  #HTMLのフォームから検索に用いられた単語を取得
+  search_term = request.form.get('search_term');
+  results = []
+  # 部分一致 LIKE
+  # WHERE LIKE '%...%'
+  if search_term == "":
+    print("enter a keyword")
+  for student in session.query(Todo).filter(todo.city.like('%search_term%')):
+    print(todo.name)
+    results.append(todo.name)
+  """
+  Tokyoで検索された時
+  Todo.cityがTokyo and Yokohamaでも、Tokyoでも部分一致で該当するデータのnameを出力
+　出力
+  Hanako
+  Taro
+  """
+  return render_template('index.html', results=results, search_term=search_term)
+  #htmlのrenderにはjinja2というものが使われており、中でPythonのコードを実行することができる
+@app.route('/')
+def index():
+    return render_template('index.html', data=Todo.query.all())
 ```
@@ -262,15 +260,15 @@
 <head>
-   <title>Todo App</title>
+	<title>Todo App</title>
 <style>
-   .hidden{
+	.hidden{
-       display: none;
+		display:  none;
-   }
+	}
 </style>
@@ -278,123 +276,129 @@
 <body>
-   <form method="post" action="/todos/create">
-   <h4>name</h4>
-       <input type= "text" name="name" />
-   <h4>city</h4>
-   <input type= "text" name="city" />
-   <input type= "submit" value="Create" />
-   <h4>search box</h4>
-   <input type="text" name="search_term" />
-   </form>
-   <div id= "error" class="hidden">Something went wrong!</div>
-   <ul>
-       {% for d in data %}
-   <li>{{d.name}}</li>
-       <li>{{d.city}}</li>
-   <li>{{d.search_term}}</li>
-       {% endfor %}
-   {% for name in results %}
-   <li>
-       <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
-   </li>
-   {% endfor %}
-   </ul>
-   <script>
-     const nameInput = document.getElementById('name');
-     const cityInput = document.getElementById('city');
-     const sechInput = document.getElementById('search_term');
-     document.getElementById('form').onsubmit = function(e) {
-       e.preventDefault();
-       const name = nameInput.value;
-       const city = cityInput.value;
-       const search_term = sechInput.value;
-       descInput.value = '';
-       fetch('/todos/create', {
-         method: 'POST',
-         body: JSON.stringify({
-           'name': name,
-           'city': city,
-         }),
-         headers: {
-           'Content-Type': 'application/json',
-         }
-       })
-       //return the serched data
-       SQL
-       SELECT city from table where LIKE search_term;
-       .then(response => response.json())
-       .then(jsonResponse => {
-         console.log('response', jsonResponse);
-         li = document.createElement('li');
-         li.innerText = name;
-         li.innerText = city;
-         document.getElementById('todos').appendChild(li);
-         document.getElementById('error').className = 'hidden';
-       })
-       .catch(function() {
-         document.getElementById('error').className = '';
-       })
-     }
-   </script>
+	<form method="post" action="/todos/create">
+    <h4>name</h4>
+		<input type= "text" name="name" />
+    <h4>city</h4>
+    <input type= "text" name="city" />
+    <input type= "submit" value="Create" />
+    <h4>search box</h4>
+    <input type="text" name="search_term" />
+    <input type= "submit" value="Search" />
+	</form>
+	<div id= "error" class="hidden">Something went wrong!</div>
+	<ul>
+		{% for d in data %}
+    <li>{{d.name}}</li>
+		<li>{{d.city}}</li>
+    <li>{{d.search_term}}</li>
+		{% endfor %}
+    {% for name in results %}
+    <li>
+        <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
+    </li>
+    {% endfor %}
+	</ul>
+    <script>
+      const nameInput = document.getElementById('name');
+      const cityInput = document.getElementById('city');
+      const sechInput = document.getElementById('search_term');
+      document.getElementById('form').onsubmit = function(e) {
+        e.preventDefault();
+        const name = nameInput.value;
+        const city = cityInput.value;
+        const search_term = sechInput.value;
+        descInput.value = '';
+        fetch('/todos/create', {
+          method: 'POST',
+          body: JSON.stringify({
+            'name': name,
+            'city': city,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        })
+        //return the serched data
+        SQL
+        SELECT city from table where LIKE search_term;
+        .then(response => response.json())
+        .then(jsonResponse => {
+          console.log('response', jsonResponse);
+          li = document.createElement('li');
+          li.innerText = name;
+          li.innerText = city;
+          document.getElementById('todos').appendChild(li);
+          document.getElementById('error').className = 'hidden';
+        })
+        .catch(function() {
+          document.getElementById('error').className = '';
+        })
+      }
+    </script>
 </body>

投稿が一部消えていたため

2019/10/24 09:05

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- Webアプリで検索がうまくできない
1	+ WebアプリでLIKE句を用いた検索がうまくできない

test CHANGED Viewed

@@ -1,14 +1,14 @@
 ### 前提・実現したいこと
 FlaskとPostgres, SQLAlchemnyで作ったWebアプリで
 データの入力と検索を行い、検索は部分一致で結果を出してページに表示しようとしています。
+SQLAlchemyのLIKE句を使った記述は以下の記事を参考にしました。
+[参考記事](https://it-engineer-lab.com/archives/1183)
 ### 発生している問題・エラーメッセージ
@@ -16,7 +16,241 @@
 検索で結果をWebアプリで取得できない状態です。
+エラーメッセージは出ていないので、以下の状況を
+Postgresデータベース内でLIKE句を使ってSELECTで求めた結果と同じ出力にするにはどうすればいいでしょうか。
+htmlファイルの
+```
+   {% for name in results %}
+   <li>
+       <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
+   </li>
+   {% endfor %}
+```
+が機能しておらず、`Search`をクリックすると以下が表示されます。
+```
+{
+ "city": "",
+ "name": ""
+}
+```
+### 該当のソースコード
+Postgres　データベース内
+```
+# \dt
+      List of relations
+Schema | Name | Type | Owner
+--------+-------+-------+-------
+public | todos | table | username
+# select * from todos;
+id | name | city
+----+--------+-------
+ 1 | Hina  | Tokyo
+ 2 | Shun  | Tokyo
+ 3 | Taro  | Fukuoka
+ 4 | Rika  | Nagano
+ 5 | Hanako | Tokyo and Yokohama
+ 6 | Haruka | Kyoto
+```
+app.py
+```python
+from flask import Flask, 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/simplewr'
+db = SQLAlchemy(app)
+class Todo(db.Model):
+   __tablename__ = 'todos'
+   id = db.Column(db.Integer, primary_key=True)
+   name = db.Column(db.String)
+   city = db.Column(db.String(120))
+   # TODO: implement any missing fields, as a database migration using Flask-Migrate
+   def __repr__(self):
+     return f'<Todo {self.id} {self.name} {self.city}>'
+db.create_all()
+@app.route('/todos/create', methods=['POST'])
+def create_todo():
+ error = False
+ body = {}
+ try:
+   name = request.form['name']
+   city = request.form['city']
+   todo = Todo(name=name, city=city)
+   db.session.add(todo)
+   db.session.commit()
+   body['name'] = todo.name
+   body['city'] = todo.city
+ except:
+   error = True
+   db.session.rollback()
+   print(sys.exc_info())
+ finally:
+   db.session.close()
+ if error:
+   abort (400)
+ else:
+   return jsonify(body)
+@app.route('/todos/search', methods=['POST'])
+def search_venues():
+ #HTMLのフォームから検索に用いられた単語を取得
+ search_term = request.form.get('search_term');
+ results = []
+ # 部分一致 LIKE
+ # WHERE LIKE '%...%'
+ if search_term == "":
+   print("enter a keyword")
+ for student in session.query(Todo).filter(todo.city.like('%search_term%')):
+   print(todo.name)
+   results.append(todo.name)
+ """
+ Tokyoで検索された時
+ Todo.cityがTokyo and Yokohamaでも、Tokyoでも部分一致で該当するデータのnameを出力
+ Hanako
+ Taro
+ みたいな感じで出力
+ """
+ return render_template('index.html', results=results, search_term=search_term)
+ #htmlのrenderにはjinja2というものが使われており、中でPythonのコードを実行することができる
+@app.route('/')
+def index():
+   return render_template('index.html', data=Todo.query.all())
+```
 index.html
@@ -28,15 +262,15 @@
 <head>
-	<title>Todo App</title>
+   <title>Todo App</title>
 <style>
-	.hidden{
+   .hidden{
-		display:  none;
+       display: none;
-	}
+   }
 </style>
@@ -44,127 +278,123 @@
 <body>
-	<form method="post" action="/todos/create">
-    <h4>name</h4>
-		<input type= "text" name="name" />
-    <h4>city</h4>
-    <input type= "text" name="city" />
-    <input type= "submit" value="Create" />
-    <h4>search box</h4>
-    <input type="text" name="search_term" />
-	</form>
-	<div id= "error" class="hidden">Something went wrong!</div>
-	<ul>
-		{% for d in data %}
-    <li>{{d.name}}</li>
-		<li>{{d.city}}</li>
-    <li>{{d.search_term}}</li>
-		{% endfor %}
-    {% for name in results %}
-    <li>
-        <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
-    </li>
-    {% endfor %}
-	</ul>
-    <script>
-      const nameInput = document.getElementById('name');
-      const cityInput = document.getElementById('city');
-      const sechInput = document.getElementById('search_term');
-      document.getElementById('form').onsubmit = function(e) {
-        e.preventDefault();
-        const name = nameInput.value;
-        const city = cityInput.value;
-        const search_term = sechInput.value;
-        descInput.value = '';
-        fetch('/todos/create', {
-          method: 'POST',
-          body: JSON.stringify({
-            'name': name,
-            'city': city,
-          }),
-          headers: {
-            'Content-Type': 'application/json',
-          }
-        })
-        //return the serched data
-        SQL
-        SELECT city from table where LIKE search_term;
-        .then(response => response.json())
-        .then(jsonResponse => {
-          console.log('response', jsonResponse);
-          li = document.createElement('li');
-          li.innerText = name;
-          li.innerText = city;
-          document.getElementById('todos').appendChild(li);
-          document.getElementById('error').className = 'hidden';
-        })
-        .catch(function() {
-          document.getElementById('error').className = '';
-        })
-      }
-    </script>
+   <form method="post" action="/todos/create">
+   <h4>name</h4>
+       <input type= "text" name="name" />
+   <h4>city</h4>
+   <input type= "text" name="city" />
+   <input type= "submit" value="Create" />
+   <h4>search box</h4>
+   <input type="text" name="search_term" />
+   </form>
+   <div id= "error" class="hidden">Something went wrong!</div>
+   <ul>
+       {% for d in data %}
+   <li>{{d.name}}</li>
+       <li>{{d.city}}</li>
+   <li>{{d.search_term}}</li>
+       {% endfor %}
+   {% for name in results %}
+   <li>
+       <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
+   </li>
+   {% endfor %}
+   </ul>
+   <script>
+     const nameInput = document.getElementById('name');
+     const cityInput = document.getElementById('city');
+     const sechInput = document.getElementById('search_term');
+     document.getElementById('form').onsubmit = function(e) {
+       e.preventDefault();
+       const name = nameInput.value;
+       const city = cityInput.value;
+       const search_term = sechInput.value;
+       descInput.value = '';
+       fetch('/todos/create', {
+         method: 'POST',
+         body: JSON.stringify({
+           'name': name,
+           'city': city,
+         }),
+         headers: {
+           'Content-Type': 'application/json',
+         }
+       })
+       //return the serched data
+       SQL
+       SELECT city from table where LIKE search_term;
+       .then(response => response.json())
+       .then(jsonResponse => {
+         console.log('response', jsonResponse);
+         li = document.createElement('li');
+         li.innerText = name;
+         li.innerText = city;
+         document.getElementById('todos').appendChild(li);
+         document.getElementById('error').className = 'hidden';
+       })
+       .catch(function() {
+         document.getElementById('error').className = '';
+       })
+     }
+   </script>
 </body>
@@ -181,3 +411,35 @@
 ```
 で実行します。
+### 試したこと
+SQL文で取得できることは確認しました。
+```
+# select name from todos where city LIKE 'Tokyo';
+name
+-------
+Hina
+Shun
+Hanako
+```
+### 補足情報（FW/ツールのバージョンなど）
+Python 3.6.0
+Flask 1.1.1
+Sqlalchemy　1.3.10
+psql (PostgreSQL) 11.5
+ブラウザ Google Chrome

誤字

2019/10/24 04:34

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- Webアプリで検索~~された単語からLIKE句を使って出力を求める時に~~うまく~~求められ~~ない
1	+ Webアプリで検索がうまくできない

test CHANGED Viewed

@@ -10,253 +10,11 @@
-SQLAlchemyのLIKE句を使った記述は以下の記事を参考にしました。
-[参考記事](https://it-engineer-lab.com/archives/1183)
 ### 発生している問題・エラーメッセージ
 データの入力はフォームに入力したものがデータベースに正しく格納されていますが、
 検索で結果をWebアプリで取得できない状態です。
-エラーメッセージは出ていないので、以下の状況を
-Postgresデータベース内でLIKE句を使ってSELECTで求めた結果と同じ出力にするにはどうすればいいでしょうか。
-htmlファイルの
-```
-    {% for name in results %}
-    <li>
-        <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
-    </li>
-    {% endfor %}
-```
-が機能しておらず、`Search`をクリックすると以下が表示されます。
-```
-{
-  "city": "",
-  "name": ""
-}
-```
-### 該当のソースコード
-Postgres　データベース内
-```
-# \dt
-       List of relations
- Schema | Name  | Type  | Owner
---------+-------+-------+-------
- public | todos | table | username
-# select * from todos;
- id |  name  | city
-----+--------+-------
-  1 | Hina   | Tokyo
-  2 | Shun   | Tokyo
-  3 | Taro   | Fukuoka
-  4 | Rika   | Nagano
-  5 | Hanako | Tokyo and Yokohama
-  6 | Haruka | Kyoto
-```
-app.py
-```python
-from flask import Flask, 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/simplewr'
-db = SQLAlchemy(app)
-class Todo(db.Model):
-    __tablename__ = 'todos'
-    id = db.Column(db.Integer, primary_key=True)
-    name = db.Column(db.String)
-    city = db.Column(db.String(120))
-    # TODO: implement any missing fields, as a database migration using Flask-Migrate
-    def __repr__(self):
-      return f'<Todo {self.id} {self.name} {self.city}>'
-db.create_all()
-@app.route('/todos/create', methods=['POST'])
-def create_todo():
-  error = False
-  body = {}
-  try:
-    name = request.form['name']
-    city = request.form['city']
-    todo = Todo(name=name, city=city)
-    db.session.add(todo)
-    db.session.commit()
-    body['name'] = todo.name
-    body['city'] = todo.city
-  except:
-    error = True
-    db.session.rollback()
-    print(sys.exc_info())
-  finally:
-    db.session.close()
-  if error:
-    abort (400)
-  else:
-    return jsonify(body)
-@app.route('/todos/search', methods=['POST'])
-def search_venues():
-  #HTMLのフォームから検索に用いられた単語を取得
-  search_term = request.form.get('search_term');
-  results = []
-  # 部分一致 LIKE
-  # WHERE LIKE '%...%'
-  if search_term == "":
-    print("enter a keyword")
-  for student in session.query(Todo).filter(todo.city.like('%search_term%')):
-    print(todo.name)
-    results.append(todo.name)
-  """
-  Tokyoで検索された時
-  Todo.cityがTokyo and Yokohamaでも、Tokyoでも部分一致で該当するデータのnameを出力
-  Hanako
-  Taro
-  みたいな感じで出力
-  """
-  return render_template('index.html', results=results, search_term=search_term)
-  #htmlのrenderにはjinja2というものが使われており、中でPythonのコードを実行することができる
-@app.route('/')
-def index():
-    return render_template('index.html', data=Todo.query.all())
-```
@@ -423,47 +181,3 @@
 ```
 で実行します。
-### 試したこと
-SQL文で取得できることは確認しました。
-```
-# select name from todos where city LIKE 'Tokyo';
- name
--------
-Hina
-Shun
-Hanako
-```
-### 補足情報（FW/ツールのバージョンなど）
-Python 3.6.0
-Flask 1.1.1
-Sqlalchemy　1.3.10
-psql (PostgreSQL) 11.5
-ブラウザ Google Chrome