Este pequeno tutorial descreve como criar um aplicativo Web reativo usando a renderização do lado do servidor (SSR). A parte do cliente é um aplicativo Vue completo, no meu caso, usando o modelo MVVM. O aplicativo do servidor é executado no microframework Flask, que pode fornecer pontos de extremidade e renderizar páginas HTML prontas. As páginas HTML (localizadas no subdiretório myapp / templates) são renderizadas pelo mecanismo de modelo Jinja (instalado como uma dependência do Flask).
Nota: rapidamente não significa que o artigo seja destinado a iniciantes.
Tecnologias e estruturas usadas:
Para a API, usamos o protocolo JSON-RPC
www.jsonrpc.org/specification . O protocolo é simples, fácil de ler e, sem muletas desnecessárias, funciona no servidor e no cliente.
Preparação
Instale os pacotes necessários
pip install flask flask-jsonrpc
Criamos o catálogo do projeto e preparamos a estrutura para dentro. A estrutura de aplicativos recomendada pode ser encontrada aqui
https://habr.com/en/post/421887/ mkdir -p myapp/{myapp/{static/{js,css},ns_api,templates},config,data} cd myapp
Faça o download dos arquivos de estrutura JS e CSS necessários
wget -O myapp/static/css/bootstrap.min.css https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css wget -O myapp/static/js/vue.min.js https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js wget -O myapp/static/js/axios.min.js https://unpkg.com/axios/dist/axios.min.js
Há uma dependência de jquery aqui, mas apenas para o Bootstrap funcionar
Aplicação mínima do frasco
Arquivo Run.py para início e teste manuais
Arquivo Config / default.py para configurar o aplicativo
import os import sys
Arquivo Config / __ init__.py
CONFIG = 'config.default'
Arquivo myapp / __ init__.py
import config import logging from flask import Flask from logging.handlers import RotatingFileHandler app = Flask(__name__) app.config.from_object(config.CONFIG) app.config.from_envvar('FLASKR_SETTINGS', silent=True)
Arquivo myapp / ns_api / __ init__.py
from flask_jsonrpc import JSONRPC from .. import app jsonrpc = JSONRPC(app, '/api') from . import logic
Arquivo myapp / views.py
from myapp import app from flask import render_template @app.route('/') def index(): pagedata = {} pagedata['title'] = app.config['TITLE'] pagedata['data'] = { "A": True, "B": False, "result": False } body = render_template('index.html', pagedata=pagedata) return body
Arquivo myapp / ns_api / logic.py
import operator from . import jsonrpc @jsonrpc.method('logic.and(A=bool, B=bool)') def logic_and(A, B): """ """ return operator.and_(A, B) @jsonrpc.method('logic.not(A=bool)') def logic_not(A): """ """ return operator.not_(A) @jsonrpc.method('logic.or(A=bool, B=bool)') def logic_or(A, B): """ """ return operator.or_(A, B) @jsonrpc.method('logic.xor(A=bool, B=bool)') def logic_xor(A, B): """ """ return operator.xor(A, B)
Definir direitos de inicialização
chmod +x run.py
Lado do cliente da interface do usuário (front-end, front-end)
Arquivo myapp / templates / header.html
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" /> <script src="/static/js/vue.min.js"></script> <script src="/static/js/axios.min.js"></script> <title>{{ pagedata['title'] }}</title> </head>
Arquivo myapp / templates / skeleton.html
<!DOCTYPE html> <html lang="ru"> {% include 'header.html' %} <body> <section id="app"> <div class="container-fluid"> {% block content %} {% endblock %} </div> </section> {% block script %} <script type="text/javascript"> var app = new Vue({ el: '#app', data: { }, methods: { } }) </script> {% endblock %} </body> </html>
Arquivo myapp / templates / index.html
{% extends "skeleton.html" %} {% block content %} <h1> </h1> <a href="http://127.0.0.1:8000/api/browse">http://127.0.0.1:8000/api/browse</a> <h2>API</h2> <pre>curl -i -X POST \ -H "Content-Type: application/json; indent=4" \ -d '{ "jsonrpc": "2.0", "method": "logic.and", "params": { "A": true, "B": true }, "id": "1" }' http://127.0.0.1:8000/api </pre> <h3></h3> <ul> <li>logic.and(A, B)</li> <li>logic.not(A)</li> <li>logic.or(A, B)</li> <li>logic.xor(A, B)</li> </ul> <h3>API</h3> <div class="btn-group"> <div class="btn btn-outline-success" v-if="A" v-on:click="changeA"></div> <div class="btn btn-outline-danger" v-else v-on:click="changeA"></div> <div class="btn btn-outline-secondary disabled"></div> <div class="btn btn-outline-success" v-if="B" v-on:click="changeB"></div> <div class="btn btn-outline-danger" v-else v-on:click="changeB"></div> <div class="btn btn-outline-secondary disabled">=</div> <div class="btn btn-success disabled" v-if="result"></div> <div class="btn btn-danger disabled" v-else></div> </div> {% endblock %} {% block script %} <script type="text/javascript"> var app = new Vue({ el: '#app', data: {{ pagedata['data']|tojson|safe }}, methods: { changeA: function() { var vm = this; vm.A = !vm.A; vm.update(); }, changeB: function() { var vm = this; vm.B = !vm.B; vm.update(); }, update: function() { var vm = this; axios.post( '/api', { "jsonrpc": "2.0", "method": 'logic.and', "params": { "A": vm.A, "B": vm.B }, "id": 1 } ).then( function(response) { if ('result' in response.data) { vm.result = response.data['result']; } } ); } } }) </script> {% endblock %}