🛳️ 🕦 👌🏿 कैसे जल्दी से एक वेबसाइट या वेब अनुप्रयोग लिखने के लिए और कलेक्टरों में नहीं पकड़ा 🧙 💷 🧑🏼‍🤝‍🧑🏼

यह छोटा ट्यूटोरियल बताता है कि सर्वर-साइड रेंडरिंग (एसएसआर) का उपयोग करके एक प्रतिक्रियाशील वेब एप्लिकेशन कैसे बनाया जाए। क्लाइंट भाग एक पूर्ण-विकसित Vue अनुप्रयोग है, मेरे मामले में MVVM टेम्पलेट का उपयोग करते हुए। सर्वर एप्लिकेशन फ्लास्क माइक्रोफ़्रामवर्क पर चलता है, जो एंडपॉइंट प्रदान कर सकता है और तैयार HTML पृष्ठों को प्रस्तुत कर सकता है। HTML पृष्ठ (myapp / टेम्प्लेट उपनिर्देशिका में स्थित) को जिन्जा टेम्पलेट इंजन (एक फ्लास्क निर्भरता के रूप में स्थापित) द्वारा प्रदान किया गया है।

नोट: जल्दी से इसका मतलब यह नहीं है कि लेख शुरुआती के लिए है।

प्रयुक्त प्रौद्योगिकियाँ और रूपरेखाएँ:

एपीआई के लिए, हम 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

आवश्यक जेएस और सीएसएस फ्रेमवर्क फाइलें डाउनलोड करें

 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 निर्भरता है, लेकिन केवल बूटस्ट्रैप के लिए काम करना है

न्यूनतम फ्लास्क अनुप्रयोग

मैन्युअल प्रारंभ और परीक्षण के लिए 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 #

विन्यास / __ 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 / टेम्पलेट्स / शीर्ष लेख

 <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 %}

कैसे जल्दी से एक वेबसाइट या वेब अनुप्रयोग लिखने के लिए और कलेक्टरों में नहीं पकड़ा

ट्रेनिंग

न्यूनतम फ्लास्क अनुप्रयोग

उपयोगकर्ता इंटरफ़ेस का क्लाइंट पक्ष (फ्रंट-एंड, फ्रंट-एंड)

More articles: