目次
なぜフロントエンドフレームワークと統合するのか
Flaskは軽量で柔軟性のあるバックエンドフレームワークですが、大規模なプロジェクトや高度なインタラクティビティが必要な場合、フロントエンドフレームワークと統合することが多いです。これにより、ビューとロジックが分離され、開発が効率的に進行します。統合のメリット
Vue.jsとの統合方法
Vue.jsは非常に人気のあるフレームワークで、状態管理やコンポーネントベースのアーキテクチャが魅力です。基本的な統合手法
以下は、FlaskとVue.jsを基本的なレベルで統合する方法です。from flask import Flask, render_template
app = Flask(__name__)
# Vue.jsのインデックスページを表示
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
Vue.jsのプロジェクト構造
通常、Vue.jsのプロジェクト構造は以下のようになります。Reactとの統合方法
Reactもまた、コンポーネントベースのアーキテクチャと状態管理が魅力の一つです。基本的な統合手法
ReactをFlaskと統合する基本的な方法は以下の通りです。from flask import Flask, render_template
app = Flask(__name__)
# Reactのインデックスページを表示
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
応用例1：Vue.jsでの動的データ処理
Vue.jsとFlaskを統合した場合の応用例として、動的データ処理を考えます。# Flask側
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/data')
def get_data():
return jsonify({"key": "value"})
# Vue.js側
axios.get('/data').then(response => {
this.key = response.data.key;
});
応用例2：Reactでの認証処理
ReactとFlaskを統合する際のもう一つの応用例として、認証処理を行います。# Flask側
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/login', methods=['POST'])
def login():
username = request.json['username']
password = request.json['password']
if username == 'admin' and password == 'password':
return jsonify({"status": "success"})
else:
return jsonify({"status": "failure"})
# React側
fetch('/login', {
method: 'POST',
body: JSON.stringify({username: 'admin', password: 'password'})
}).then(response => response.json())
.then(data => console.log(data));
コメント