π ΠΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ Python ΠΈ HTML: ΠΏΡΠΎΡΡΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° π₯οΈ
ΠΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ Python ΠΈ HTML?
ΠΠ»Ρ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Python ΠΈ HTML Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Flask. Flask ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Python ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ HTML Π² Π½ΠΈΡ . ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ HTML-ΡΠ°Π±Π»ΠΎΠ½ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ index.html:
<!DOCTYPE html>
<html>
<head>
<title>ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Flask</title>
</head>
<body>
<h1>ΠΡΠΈΠ²Π΅Ρ, ΠΌΠΈΡ!</h1>
</body>
</html>
ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π΅Π³ΠΎ Π²Π΅Π±-Π°Π΄ΡΠ΅Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ "ΠΡΠΈΠ²Π΅Ρ, ΠΌΠΈΡ!" Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Python ΠΈ HTML ΡΡΠΏΠ΅ΡΠ½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Ρ.
ΠΠ΅ΡΠ°Π»ΡΠ½ΡΠΉ ΠΎΡΠ²Π΅Ρ
ΠΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ Python ΠΈ HTML
Python ΠΈ HTML - Π΄Π²Π° ΠΌΠΎΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ Python ΠΈ HTML ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Python Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΅Π³ΠΎ Π² HTML ΡΠΎΡΠΌΠ°ΡΠ΅. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Python ΠΈ HTML ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ .
1. CGI (Common Gateway Interface)
CGI - ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΎΠΊΠΎΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΈ ΡΠ΅ΡΠ²Π΅ΡΠΎΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CGI Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Python ΠΈ HTML. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Python-ΡΠΊΡΠΈΠΏΡΠΎΠ² Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½Π° Python, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CGI Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ "Hello, World!" Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅:
#!/usr/bin/python
print("Content-type: text/html\n")
print("")
print("")
print("Python CGI ΠΏΡΠΈΠΌΠ΅Ρ ")
print("")
print("")
print("Hello, World!
")
print("")
print("")
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² ΡΠ°ΠΉΠ»Π΅ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .py ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ΅. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΡΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅ΠΊΡΡ "Hello, World!" ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
2. Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Flask ΠΈ Django, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Python ΠΈ HTML. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΌΠΎΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Flask Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ "Hello, World!" Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html', message='Hello, World!')
if __name__ == '__main__':
app.run()
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡ Flask Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ message ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ "Hello, World!" Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ index.html. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
3. JavaScript ΠΈ AJAX
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Python ΠΈ HTML - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ JavaScript ΠΈ AJAX. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Python Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ API, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π°ΡΠΈΠΌ HTML-ΠΊΠΎΠ΄ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½Π° Python, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Flask Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ API:
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api')
def api():
data = {'message': 'Hello, World!'}
return jsonify(data)
if __name__ == '__main__':
app.run()
ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript ΠΈ AJAX, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΡΠΎΠ³ΠΎ API ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½Π° JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅Π»Π°Π΅Ρ Π·Π°ΠΏΡΠΎΡ ΠΊ API ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅:
<script>
fetch('/api')
.then(response => response.json())
.then(data => {
document.getElementById('message').innerHTML = data.message;
});
</script>
<div id="message"></div>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ fetch Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ ΠΈΠ· API ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ Python ΠΈ HTML Π΄Π°Π΅Ρ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Python Π΄Π»Ρ ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Python ΠΈ HTML, Π²ΠΊΠ»ΡΡΠ°Ρ CGI, ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ JavaScript Ρ AJAX. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π±ΡΠ» ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ Π²Π°Ρ ΠΈ ΠΏΠΎΠΌΠΎΠ³ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ Python ΠΈ HTML.