Vue.js+Flask crée une application mobile

Cette fois, je vais vous proposer Vue.js+Flask pour créer une application mobile. Quelles sont les précautions à prendre pour créer une application mobile avec Vue.js+Flask. Ce qui suit est un cas pratique, jetons un coup d'oeil.

De manière générale, si vous souhaitez simplement utiliser la bibliothèque vue.js via les modèles Flask, il n'y a pas de problème. Cependant, il existe en fait un problème évident : Jinja (moteur de modèles) utilise également des doubles accolades pour le rendu comme Vue.js, mais ce n'est qu'une solution passable.

Je voudrais un exemple différent. Si j'ai besoin de créer une application d'une seule page (l'application est composée d'une seule page, vue-router en mode Historique de HTML5 et de fonctionnalités plus utiles) en utilisant vue.js, fourni par Flask Web Serve ? En bref, cela devrait ressembler à ceci, comme ceci :

Flask sert index.html qui contient mon application vue.js. Pour le développement front-end, j'utilise Webpack, qui fournit toutes les fonctionnalités intéressantes.

Flask a un côté API auquel je peux accéder depuis mon SPA.

J'ai accès au côté API, même lorsque j'utilise Node.js pour le développement front-end.

Cela ne semble pas intéressant ? Alors faisons comme ça.

Code source complet, vous pouvez le trouver ici : https://github.com/oleg-agapov/flask-vue-spa

J'utiliserai Vue CLI pour générer une application vue.js de base. Si vous ne l'avez pas encore installé, exécutez :

$ npm install -g vue-cli

$ mkdir flaskvue
$ cd flaskvue
$ vue init webpack frontend

Vue ne se construit qu'au moment de l'exécution.

Installez Vue-router.

Utilisez ESLint pour inspecter votre code.

Sélectionnez un préréglage standard ESLint.

Ne pas essayer Karma + Mocha pour les tests unitaires.

Créez des tests de bout en bout sans utiliser Nightwatch.

ok, ensuite :

$ cd frontend
$ npm install
# after installation
$ npm run dev

. Commençons par ajouter quelques pages. Ajoutez

et about.vue au dossier frontend/src/components. Ils sont très simples, comme ceci :

// Home.vue
<template>
<p>
<p>Home page</p>
</p>
</template>

// About.vue
<template>
<p>
<p>About</p>
</p>
</template>

pour utiliser notre nouveau composant :

import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' }
]
const routes = routerOptions.map(route => {
return {
...route,
component: () => import(`@/components/${route.component}.vue`)
}
})
Vue.use(Router)
export default new Router({
routes,
mode: 'history'
})

et localhost:8080/about et vous devriez voir la page correspondante.

Nous sommes presque prêts à construire un projet et sommes en mesure de créer un ensemble de fichiers de ressources statiques. Avant cela, redéfinissons les répertoires de sortie correspondants. Trouvez les paramètres suivants dans

 :

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),

pour créer un package.

Pour le serveur Flask, j'utiliserai Python version 3.6. Créez un nouveau sous-dossier dans

pour stocker le code backend et initialiser l'environnement virtuel :

$ mkdir backend
$ cd backend
$ virtualenv -p python3 venv

$ source venv/bin/activate

Installer dans un environnement virtuel :

(venv) pip install Flask

(venv) cd ..
(venv) touch run.py

from flask import Flask, render_template
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/')
def index():
return render_template("index.html")

pour les distinguer de notre dossier frontal. Exécutez le serveur Flask dans le dossier racine :

(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' },
{ path: '*', component: 'NotFound' }
]

// NotFound.vue
<template>
<p>
<p>404 - Not Found</p>
</p>
</template>

from flask import Flask, render_template, jsonify
from random import *
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/api/random')
def random_number():
response = {
'randomNumber': randint(1, 100)
}
return jsonify(response)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

{
"randomNumber": 36
}

<template>
<p>
<p>Home page</p>
<p>Random number from backend: {{ randomNumber }}</p>
<button @click="getRandom">New random number</button>
</p>
</template>
<script>
export default {
data () {
return {
randomNumber: 0
}
},
methods: {
getRandomInt (min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min + 1)) + min
},
getRandom () {
this.randomNumber = this.getRandomInt(1, 100)
}
},
created () {
this.getRandom()
}
}
</script>

(venv) cd frontend
(venv) npm install --save axios