Flask + Vue.js: シングルページアプリケーションを迅速に実装する-Python チュートリアル-php.cn

Flask + Vue.js: シングルページアプリケーションを迅速に実装する

王林

リリース： 2023-06-17 09:06:40

オリジナル

1791 人が閲覧しました

モバイルインターネットと 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>

ログイン後にコピー

上記のコードでは、<router-view></router-view> がベースになります。 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 を通じてアプリケーションを起動し、ブラウザでルーティングにアクセスし、各ページとアプリケーションのインタラクション効果をテストできます。

概要

この記事では、Flask と Vue.js を使用してシングルページアプリケーションを実装する方法を紹介します。 Flask を使用してインターフェイスを提供し、Vue.js を使用してページをレンダリングすることで、最新の Web アプリケーションを迅速に作成できます。

読者には、Vue.js と Flask の使用法を深く理解し、他のツールやフレームワークを使用して同様の SPA を実装してみることをお勧めします。

以上がFlask + Vue.js: シングルページアプリケーションを迅速に実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。