一、プロジェクト概要#
プロジェクトのフロントエンドは Vue を使用し、バックエンドは Python の Web フレームワーク Flask を使用して、英語のワードクラウドを生成できるサイトを開発しました。プロジェクトはフロントエンドとバックエンドが分離されており、axios を通じて通信します。
開発環境：
- Windows 11（フロントエンドとバックエンドはローカルで実行）
- node.js v16.14.0
- vue-cli
- axios
- python 3.8.5
プロジェクトの最終ディレクトリ構造：
二、フロントエンド開発#
1、node.js 環境のインストール（略）#
npm: node.js のパッケージ管理ツール。
インストール後、echo % PATH% を使用して正しく PATH に追加されたか確認できます。
2、vue-cli のインストール#
vue-cli: ユーザーが Vue プロジェクトのテンプレートを生成するためのツールで、迅速に Vue プロジェクトを開始できます。基本的な依存ライブラリを含む Vue の構造を提供し、npm install を実行するだけでインストールできます。
3、プロジェクトの作成#
world-cloud という名前のプロジェクトディレクトリを作成します（ここで world のスペルミスがありますが、テーマに合うのは word ですが、開発には影響しません）。
webpack を使用して初期のフロントエンド構造を生成します。webpack の主な用途は、CommonJS の構文を使用して、ブラウザ側で公開する必要のある静的リソースを準備することです。リソースの結合やパッケージ化などを行います。
npm run dev を使用してフロントエンドページを起動し、検証できます。その前に npm install を実行してください。
もし npm install が失敗した場合、原因は速度が遅いためかもしれません。この場合、ミラーサイトを設定して速度を向上させることができます。npm config set registry=http://registry.npm.taobao.org を実行します。成功した場合は無視できます。
npm run dev を実行すると、「Your application is running here: http://localhost:8080」というメッセージが表示されます。
4、element-ui のインストール#
Element は、開発者、デザイナー、プロダクトマネージャーのために用意された、Vue 2.0 に基づくデスクトップコンポーネントライブラリです。
/src/main.js に ElementUI をインポートし、使用します。
5、axios のインストール#
Vue の境界は非常に明確で、DOM を処理するためのものであるため、通信機能は備わっていません。このため、サーバーと通信するために別の通信フレームワークが必要です。現在、推奨されているのは axios で、要するに axios はバックエンドサーバーと通信するために使用されます。
6、英語のワードクラウドページ#
まず、App.vue から不要なロゴを削除します。
src ディレクトリ内に pages/WordCloud.vue を作成します。
src/router/index.js でルートを少し変更し、注意して登録（import WordCloud）します。
最後にリソースをパッケージ化します。
上記の実行が完了すると、リソースは frontend/dist ディレクトリにパッケージ化されます。フロントエンド開発はこれで完了です。フロントエンドが完成した後のディレクトリ構造の具体的な効果は以下の通りです。
三、バックエンド開発#
1、Python のインストール（略）#
2、Python 仮想環境の作成#
Python の仮想環境は、Python プロジェクトに独立した実行環境を提供し、異なるアプリケーションが異なる Python バージョンを使用できるようにします。注意点として、Windows と Linux での cmd のアクティベーションは異なるため、混同しないようにしてください。
3、Flask のインストール#
4、ワードクラウド生成ライブラリ wordcloud のインストール#
5、Flask 開発#
まず、__init__.py で Python のデフォルトの HTML および静的リソースディレクトリを変更します。このリソースは、前述のフロントエンド開発で npm run build を使用して生成されたリソースディレクトリです。
app = Flask(__name__,
template_folder="../../frontend/dist",
static_folder="../../frontend/dist/static")
次に、routes.py のコードは、メインページとワードクラウドを生成するインターフェースです。
from flask import render_template
from flask import request
from app import app
from wordcloud import WordCloud
import io
import base64
ワードクラウドライブラリを使用して画像を生成する#
def get_word_cloud(text):
# font = "./SimHei.ttf"
# pil_img = WordCloud(width=500, height=500, font_path=font).generate(text=text).to_image()
pil\_img = WordCloud(width=800, height=300, background\_color="white").generate(text=text).to\_image()
img = io.BytesIO()
pil\_img.save(img, "PNG")
img.seek(0)
img\_base64 = base64.b64encode(img.getvalue()).decode()
return img\_base64
メインページ#
@app.route('/')
@app.route('/index')
def index():
#return "Hello, World!"
return render_template('index.html')
ワードクラウド画像生成インターフェース、base64 形式で返す#
@app.route('/word/cloud/generate', methods=["POST"])
def cloud():
text = request.json.get("word")
res = get_word_cloud(text)
return res
6、Flask の起動#
注意すべき点は、出力されたメッセージ Running on http://127.0.0.1:5000/ により、Flask サービスはローカルサーバーアドレス 127.0.0.1 でのみアクセス可能であることです。プロジェクトを開発してデバッグする際、プロジェクトにアクセスするのはローカルマシンであり、ローカルマシンは正常にアクセスできます。しかし、現在の状態では、サーバー自身しかアクセスできず、他のデバイスは外部ネットワークデバイスとしてサービスにアクセスできません。解決策は、対応する host パラメータを変更し、0.0.0.0 に指定することです。これにより、システムはローカルマシンだけでなく任意の IP アドレスをリッスンします。
7、成功の確認#
これで英語のワードクラウドサイトの開発が完了しました。小さな雀ですが、確かにフロントエンドとバックエンドの分離を実現しました。Flask は仮想環境内にインストールされているため、再度起動する前に仮想環境を起動する必要があります。
参考文献：#
A single page application with Flask and Vue.