🤛🏿 👨🏽‍⚖️ ⛸️ 如何快速编写网站或Web应用程序而不会陷入收藏家的困境 ⏏️ 🔷 🔮

这个小教程描述了如何使用服务器端渲染（SSR）创建反应式Web应用程序。客户端部分是成熟的Vue应用程序，在我的情况下，使用的是MVVM模板。服务器应用程序在Flask微框架上运行，该框架可以提供端点并呈现现成的HTML页面。 HTML页面（位于myapp / templates子目录中）由Jinja模板引擎（作为Flask依赖项安装）呈现。

注意：快速表示本文不适合初学者使用。

二手技术和框架：

对于API，我们使用JSON-RPC协议www.jsonrpc.org/specification 。该协议简单，易于阅读，并且没有不必要的限制，它可以在服务器端和客户端上使用。

准备工作

安装所需的软件包

pip install flask flask-jsonrpc

我们创建项目目录并准备其中的结构。推荐的应用程序结构可以在这里找到https://habr.com/en/post/421887/

 mkdir -p myapp/{myapp/{static/{js,css},ns_api,templates},config,data} cd myapp

下载必要的JS和CSS框架文件

 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

这里有一个jquery依赖项，但仅适用于Bootstrap

最小的烧瓶应用

用于手动启动和测试的Run.py文件

 #!/usr/bin/env python3 from myapp import app as application application.run(host='0.0.0.0', port=8000)

Config / default.py文件配置应用程序

 import os import sys #  DEBUG = True SQLDEBUG = False SESSION_COOKIE_NAME = 'myapp' SESSION_TYPE = 'filesystem' TITLE = '' DIR_BASE = '/'.join(os.path.dirname(os.path.abspath(__file__)).split('/')[:-1]) DIR_DATA = DIR_BASE + '/data' #    pwgen # : # pwgen -sy 64 SECRET_KEY = '''0123456789''' #  LOG_FILE = DIR_DATA + '/myapp.log' LONG_LOG_FORMAT = '%(asctime)s - [%(name)s.%(levelname)s] [%(threadName)s, %(module)s.%(funcName)s@%(lineno)d] %(message)s' LOG_FILE_SIZE = 128 #

Config / __ init__.py文件

 CONFIG = 'config.default'

档案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) #  handler = RotatingFileHandler(app.config['LOG_FILE'], maxBytes=app.config['LOG_FILE_SIZE']*1024*1024, backupCount=1) handler.setLevel(logging.INFO) formatter = logging.Formatter(app.config['LONG_LOG_FORMAT']) handler.setFormatter(formatter) app.logger.addHandler(handler) # API from . import ns_api from . import views

文件myapp / ns_api / __ init__.py

 from flask_jsonrpc import JSONRPC from .. import app jsonrpc = JSONRPC(app, '/api') from . import logic

档案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

文件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)

设置启动权

 chmod +x run.py

用户界面的客户端（前端，前端）

文件myapp /模板/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>

文件myapp /模板/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>

文件myapp /模板/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 %}

如何快速编写网站或Web应用程序而不会陷入收藏家的困境

准备工作

最小的烧瓶应用

用户界面的客户端（前端，前端）

More articles: