recherche

Maison  >  Article  >  développement back-end  >  Flask + Vue.js : implémentez rapidement des applications d'une seule page

Flask + Vue.js : implémentez rapidement des applications d'une seule page

王林
王林original
2023-06-17 09:06:401767parcourir

Avec le développement rapide de l'Internet mobile et de la technologie Web, de plus en plus d'applications doivent offrir une expérience utilisateur fluide et rapide. Les applications multipages traditionnelles ne peuvent plus répondre à ces besoins, et les applications monopages (SPA) sont devenues l'une des solutions.

Alors, comment mettre en place rapidement une application monopage ? Cet article explique comment utiliser Flask et Vue.js pour créer un SPA.

Flask est un framework d'application Web léger écrit en langage Python. Ses avantages sont la flexibilité, une expansion facile et un apprentissage facile. Vue.js est un framework JavaScript populaire qui facilite la création d'interfaces utilisateur interactives.

Étape 1 : Créer une application Flask

Tout d'abord, vous devez créer une application Flask. Vous pouvez utiliser le code suivant : 

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world'

if __name__ == '__main__':
    app.run(debug=True)

Le code ci-dessus crée une application Flask simple. Lorsque l'utilisateur accède au répertoire racine, une chaîne. "Bonjour" s'affichera.

Étape 2 : Ajouter des fichiers statiques

Ensuite, vous devez ajouter un dossier statique, qui est utilisé pour stocker Vue.js et d'autres fichiers statiques. Dans l'application Flask, vous pouvez utiliser le code suivant pour ajouter le dossier statique : 

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)

Dans le code ci-dessus, la fonction send_from_directory trouvera l'index du <code>static dossier .html et restitué à l'utilisateur. send_from_directory 函数会从 static 文件夹中找到 index.html 文件并返回给用户。

步骤三：编写 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，定义了三个路由：/ 对应 Home 组件、/about 对应 About 组件，* 对应 NotFound 组件。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>
    `
};

步骤四：将 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

Étape 3 : Écrivez le code Vue.js

Vous pouvez maintenant commencer à écrire du code Vue.js. Vue.js doit généralement être empaqueté à l'aide de Webpack, mais dans cet article, seuls les fichiers vue.js et vue-router.js fournis avec Vue.js sont utilisés pour simplifier le processus.

Tout d'abord, vous devez créer un dossier js sous le dossier static et ajouter vue.js et vue- router. js fichier. Ensuite, créez un fichier app.js sous le dossier static et ajoutez le code suivant :

rrreee

Le code ci-dessus configure principalement Vue Router et définit trois routes : / correspond au composant Home, /about correspond au composant About et * correspond au composant NotFound. Les composants Home et About peuvent être définis dans le fichier app.js :

rrreee

Étape 4 : Connectez les applications Vue.js et Flask🎜 🎜Maintenant que les applications Vue.js et Flask sont prêtes, nous devons les connecter. Dans index.html, ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e sera basé sur le configuration de Vue Router Afficher dynamiquement les composants correspondants. La fonction url_for transmet le chemin du fichier statique généré par l'application Flask à Vue.js. 🎜🎜Enfin, ajoutez le code suivant à l'application Flask : 🎜rrreee🎜Dans le code ci-dessus, la fonction any_path redirigera toutes les routes vers index.html pour empêcher Vue Router accéder à la page d'erreur. 🎜🎜Maintenant, la candidature d'une seule page est terminée ! Vous pouvez démarrer l'application via Flask, accéder au routage dans le navigateur et tester chaque page et effet d'interaction de l'application. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser Flask et Vue.js pour implémenter une application d'une seule page. En utilisant Flask pour fournir l'interface et Vue.js pour afficher la page, vous pouvez rapidement créer une application Web moderne. 🎜🎜Il est recommandé aux lecteurs d'en apprendre davantage sur l'utilisation de Vue.js et de Flask par eux-mêmes et d'essayer d'implémenter un SPA similaire avec d'autres outils et frameworks. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Python JavaScript flask vue.js html webpack Static 字符串 接口 JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Flask-Testing : meilleures pratiques pour les tests unitaires dans les applications Web PythonArticle suivant：Flask-Testing : meilleures pratiques pour les tests unitaires dans les applications Web Python

Articles Liés

Voir plus