Pythonのwebアプリでローディングページを表示させたい
Pythonで検索エンジンの仕組みを勉強する一環で検索エンジン制作していて、クローリングするページをクライアントが任意のURLを入力してクロールできるようにしました。
フレームワークはFlaskを使用しています。
システム構成
■検索エンジン
|---■config.py
|---■manage.py
|---■web_crawler
|---■\__init__.py
|---■crawler.py
|---■drop_collection.py
|---■search_engine
|---■\__init__.py
|---■template
|---■index.html
|---■crawler.html
|---■layout.html
manage.pyでsearch_engine内の_init_.py(サーバー)を起動し、クライアントでURLを入力してPOSTでサーバーに送信し、URLを引数にサーバー側でcrawler.pyを実行し完了したら完了ページを返すようにしているのですが、クローリングが終わるまで時間がかかるのでロードページを表示させたいです。しかしクローリングが終わるまでサーバーからロードページを送ったりはする事は出来ません。
なのでクライアント側でURLを送信した後にロードページを表示させるのがいいと思うのですが、どのようにやったら良いのかわかりません。
またWebアプリ自体これが初めての制作なのでサーバーからプログラム実行中でもページを送る方法やおすすめの方法があるのでしたら教えて頂けると幸いです。
_init_.py
from urllib.parse import urlparse
from flask import Flask, render_template, request, redirect, url_for
from pymongo import MongoClient
from web_crawler.crawler import crawl_web
app = Flask(__name__)
app.config.from_object('config') #flaskのconfigを読み込んでる
# DB settings
MONGO_URL = app.config['MONGO_URL']
client = MongoClient(MONGO_URL)
db = client[urlparse(MONGO_URL).path[1:]]
col = db["Index"]
@app.route('/', methods=['GET', 'POST'])
def index():
"""Return index.html
"""
if request.method == 'POST':
keyword = request.form['keyword'] #フォームで入力された文字がkeyword変数に入っているのでそれを持ってくるそこからkeywordに代入
if keyword:
if keyword == 'wataru':
return redirect(url_for('crawler'))
return render_template(
'result.html',
query=col.find_one({'keyword': keyword}),
keyword=keyword)
return render_template('index.html')
@app.route('/crawler', methods=['GET', 'POST'])
def crawler():
"""Return index.html
"""
if request.method == 'POST':
url = request.form['url']
if 'http' in url:
crawl_web(url, 1)#ここでクローラー実行する
# return render_template('done.html')
return 'done'
return render_template('crawler.html')
crawler.html
{% extends "layout.html" %}
{% block content %}
<body>
<input type="checkbox" id="menu-toggle"/>
<label id="trigger" for="menu-toggle"></label>
<label id="burger" for="menu-toggle"></label>
<ul id="menu">
<p id="howto">使い方</p>
<p>この検索エンジンはPythonで書かれています。キーワードを検索ボックスに入力しEnterまたは検索ボタンをクリックするとDBからキーワードとマッチしたURLを探して来て表示してくれます。</p>
</ul>
<div class="jumbotron">
<div class="container">
<img src="/static/img/rush.png" width="auto" height="auto" alt="rush" title="rush">
<form method="post" action="{{url_for('crawler')}}"><!-- ここでもう一度サーバーにアクセスしている -->
<div class="row">
<div class="col-xs-10">
<input type="text" class="form-control" name="url" placeholder="urlを入力して下さい.">
</div>
<div class="col-xs-2">
<input type="submit" class="btn btn-md btn-block btn-primary" value="クロール">
</div>
</div>
</form>
<br>
</div><!-- container -->
</div>
<div class="gif">
<img src="/static/img/coffee.gif" width="auto" height="auto" alt="coffee" >
</div>
{% endblock %}