Flask + Vue.js: シングルページ アプリケーションを迅速に実装する
- 王林オリジナル
- 2023-06-17 09:06:401701ブラウズ
モバイル インターネットと Web テクノロジーの急速な発展に伴い、スムーズで高速なユーザー エクスペリエンスを提供する必要のあるアプリケーションがますます増えています。従来のマルチページ アプリケーションではこれらのニーズを満たすことができなくなり、シングルページ アプリケーション (SPA) が解決策の 1 つになりました。
それでは、単一ページのアプリケーションを迅速に実装するにはどうすればよいでしょうか?この記事では、Flask と Vue.js を使用して SPA を構築する方法を紹介します。
Flask は Python で書かれた軽量の Web アプリケーション フレームワークであり、その利点は柔軟性、拡張の容易さ、学習の容易さです。 Vue.js は、インタラクティブなユーザー インターフェイスを簡単に構築できる人気の JavaScript フレームワークです。
ステップ 1: Flask アプリケーションを作成する
まず、Flask アプリケーションを作成する必要があります。次のコードを使用できます:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return 'Hello world'
if __name__ == '__main__':
app.run(debug=True)上記のコードは、単純な Flask を作成しますユーザーがルートディレクトリにアクセスすると、「Hello world」という文字列が表示されます。
ステップ 2: 静的ファイルを追加する
次に、Vue.js およびその他の静的ファイルを保存するために使用される静的フォルダーを追加する必要があります。 Flask アプリケーションでは、次のコードを使用して静的フォルダーを追加できます。
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/')
def index():
return send_from_directory('static', 'index.html')
if __name__ == '__main__':
app.run(debug=True)上記のコードでは、send_from_directory 関数は static から見つかります。フォルダーindex.html ファイルが作成され、ユーザーに返されます。
ステップ 3: Vue.js コードを作成する
これで、Vue.js コードの作成を開始できます。通常、Vue.js は Webpack を使用してパッケージ化する必要がありますが、この記事では、Vue.js に付属の vue.js および vue-router.js ファイルのみを使用して、プロセス。
まず、static フォルダーの下に js フォルダーを作成し、そこに vue.js と vue を追加する必要があります -router .js ファイル。次に、static フォルダーの下に app.js ファイルを作成し、次のコードを追加します。
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '*', component: NotFound }
];
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
router,
el: '#app'
});上記のコードは主に Vue Router を構成するためのもので、3 つを定義します。ルーティング: / は Home コンポーネントに対応し、/about は About コンポーネントに対応し、* はに対応します見つかりません コンポーネント。 Home および About コンポーネントは、app.js ファイルで定義できます:
const Home = {
template: `
<div>
<h1>Home</h1>
<p>This is home page.</p>
</div>
`
};
const About = {
template: `
<div>
<h1>About</h1>
<p>This is about page.</p>
</div>
`
};
const NotFound = {
template: `
<div>
<h1>404 Not Found</h1>
<p>The page you're looking for is not found.</p>
</div>
`
};ステップ 4: Vue.js と Flask アプリケーションを接続する
Vue.js アプリケーションと Flask アプリケーションの準備ができたので、それらを接続する必要があります。 index.html に次のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask + Vue.js</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>上記のコードでは、975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e がベースになります。 Vue Router の設定では、対応するコンポーネントが動的に表示されます。 url_for 関数は、Flask アプリケーションによって生成された静的ファイル パスを Vue.js に渡します。
最後に、次のコードを Flask アプリケーションに追加します。
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/')
def index():
return send_from_directory('static', 'index.html')
@app.route('/<path:path>')
def any_path(path):
return send_from_directory('static', 'index.html')
if __name__ == '__main__':
app.run(debug=True)上記のコードでは、any_path 関数はすべてのルートを index.html# にリダイレクトします。 # #、Vue Router がエラー ページにアクセスできないようにします。
以上がFlask + Vue.js: シングルページ アプリケーションを迅速に実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。