كيف أربط الباك إند مع صفحة HTML باستخدام البايثون

Ziyad Al Maghribi · 18 فبراير

لدي خبره في html , css , js لدي مشروع عباره عن Prisoner's Dilemma Game

اريد ربط الباك اند بأصفحه html

اكواد الباك اند ( بايثون )

vvvvvvvv

# -*- coding: utf-8 -*-
"""
Created on Sat Feb 17 20:56:38 2024

@author: ibra9
"""

# final in ibra laptop
from qiskit import QuantumCircuit, Aer, execute
import random

def encode_message(bits, bases):
    message = []
    for i in range(len(bits)):
        qc = QuantumCircuit(1, 1)
        if bases[i] == 0:  
            if bits[i] == 0:
                pass  
            else:
                qc.x(0) 
        else: 
            if bits[i] == 0:
                qc.h(0)  
            else:
                qc.x(0) 
                qc.h(0)  
        message.append(qc)
    return message


def measure_message(message, bases):
    backend = Aer.get_backend('qasm_simulator')
    measurements = []
    for i in range(len(message)):
        if bases[i] == 0: 
            message[i].measure(0, 0)
        else:  
            message[i].h(0)
            message[i].measure(0, 0)
        job = execute(message[i], backend, shots=1)
        result = job.result()
        measured_bit = int(list(result.get_counts(message[i]).keys())[0])
        measurements.append(measured_bit)
    return measurements


def compare_bases(alice_bases, bob_bases, s):
    indices = []
    if(s == 1):
        for i in range(len(alice_bases)):
            if alice_bases[i] == bob_bases[i]:
                indices.append(i)
        return indices
    else: 
        return 0


def bb84_protocol(num_bits, s):
    
    alice_bits = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    alice_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    
    
    alice_message = encode_message(alice_bits, alice_bases)
    
   
    bob_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    
  
    bob_measurements = measure_message(alice_message, bob_bases)
    
    
    matching_indices = compare_bases(alice_bases, bob_bases, s)
    if matching_indices:
        alice_key = [alice_bits[i] for i in matching_indices]
        bob_key = [bob_measurements[i] for i in matching_indices]
        
        return alice_key, bob_key
    return alice_bits, bob_bases




def run(  s, num_bits= 10):

    
    alice_key, bob_key = bb84_protocol(num_bits, s)
    

    if s == 1:
        
            
        return s
    else: 
        return s





def playerdecision(playername):
    while True:
        decision = input(f"{playername}, do you Cooperate (C) or Defect (D)? ").upper()
        if decision == 'C' :
            return run(1)
        elif decision == 'D':
            return run(0)
            print("Invalid input, please choose 'C' for Cooperate or 'D' for Defect.")

def gameoutcome(player1_decision, player2_decision):
    if player1_decision == 1 and player2_decision == 1:
        return (3, 3)  # Both cooperate
    elif player1_decision == 1 and player2_decision == 0:
        return (0, 5)  # Player 1 cooperates, Player 2 defects
    elif player1_decision == 0 and player2_decision == 1:
        return (5, 0)  # Player 1 defects, Player 2 cooperates
    else:
        return (1, 1)  # Both defect

def main():
    print("Prisoner's Dilemma Game")
    print("Two prisoners have a choice to Cooperate (C) or Defect (D) over three rounds.")
    print("If both cooperate, they each get 3 years off their sentence per round.")
    print("If one defects and the other cooperates, the defector goes free (0 years) and the cooperator gets 5 years per round.")
    print("If both defect, they each get 1 year off their sentence per round.")

    total_player1_score, total_player2_score = 0, 0

    for round_number in range(1, 4):
        print(f"\n--- Round {round_number} ---")
        player1_decision = playerdecision("Player 1")
        player2_decision = playerdecision("Player 2")

        player1_score, player2_score = gameoutcome(player1_decision, player2_decision)

        total_player1_score += player1_score
        total_player2_score += player2_score

        print(f"Player 1's decision this round: {'Cooperate' if player1_decision == 1 else 'Defect'}")
        print(f"Player 2's decision this round: {'Cooperate' if player2_decision == 1 else 'Defect'}")
        print(f"Player 1's score this round: {player1_score}")
        print(f"Player 2's score this round: {player2_score}")

    print("\nFinal Results after 3 rounds:")
    print(f"Player 1's total years sentence score:  {total_player1_score}")
    print(f"Player 2's total years sentence score: {total_player2_score}")

if __name__ == "__main__":
    main()

تم التعديل في 18 فبراير بواسطة El Sayed El Tohamy
تعديل عنوان السؤال ليكون مناسبًا

ياسر مسكين · 18 فبراير

بما أنك تستخدم JavaScript في الفرونتأند، فستحتاج إلى تكامل الباك إند (بايثون) مع الواجهة الأمامية باستخدام نقاط النهاية (API) و AJAX، بما أنك لم ترفق ملف الفرونت أند الخاص بك، سأشرح لك عبر مثال عملي لربط الباك إند بالواجهة الأمامية (HTML) باستخدام AJAX. هنا نستخدم أجاكس من أجل إرسال الطلبات واستلام البيانات.

فلنفترض أن لديك ملف بايثون اسمه `backend.py` يحتوي على الكود الخاص بالباك إند، وملف HTML اسمه `index.html` للواجهة الأمامية.

أولا، تقوم بإنشاء نقطة النهاية في الباك إند، مثلا باستخدام فلاسك تكون بهذا الشكل:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/play', methods=['POST'])
def play_game():
    decision = request.json.get('decision')  # Assuming JSON data is sent
    # Add your game logic here
    result = {"result": "Game result based on decision: " + decision}
    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

ثم نستخدم AJAX في ملف HTML (`index.html`)، بهذا الشكل:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prisoner's Dilemma Game</title>
</head>
<body>
    <h1>Prisoner's Dilemma Game</h1>
    <button id="cooperate-btn">Cooperate</button>
    <button id="defect-btn">Defect</button>
    <div id="result"></div>

    <script>
        document.getElementById('cooperate-btn').addEventListener('click', function() {
            playGame(1);
        });

        document.getElementById('defect-btn').addEventListener('click', function() {
            playGame(0);
        });

        function playGame(decision) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/api/play", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerText = response.result;
                }
            };

            var data = JSON.stringify({"decision": decision});
            xhr.send(data);
        }
    </script>
</body>
</html>

هنا قمت باستخدام XMLHttpRequest في JavaScript لإرسال طلب POST إلى نقطة نهاية /api/play في الباك إند، ثم قمت بتحديث عنصر div مع النتيجة المستلمة من السيرفر.

Ziyad Al Maghribi · 18 فبراير

بتاريخ 29 دقائق مضت قال ياسر مسكين:

بما أنك تستخدم JavaScript في الفرونتأند، فستحتاج إلى تكامل الباك إند (بايثون) مع الواجهة الأمامية باستخدام نقاط النهاية (API) و AJAX، بما أنك لم ترفق ملف الفرونت أند الخاص بك، سأشرح لك عبر مثال عملي لربط الباك إند بالواجهة الأمامية (HTML) باستخدام AJAX. هنا نستخدم أجاكس من أجل إرسال الطلبات واستلام البيانات.

فلنفترض أن لديك ملف بايثون اسمه `backend.py` يحتوي على الكود الخاص بالباك إند، وملف HTML اسمه `index.html` للواجهة الأمامية.

أولا، تقوم بإنشاء نقطة النهاية في الباك إند، مثلا باستخدام فلاسك تكون بهذا الشكل:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/play', methods=['POST'])
def play_game():
    decision = request.json.get('decision')  # Assuming JSON data is sent
    # Add your game logic here
    result = {"result": "Game result based on decision: " + decision}
    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

ثم نستخدم AJAX في ملف HTML (`index.html`)، بهذا الشكل:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prisoner's Dilemma Game</title>
</head>
<body>
    <h1>Prisoner's Dilemma Game</h1>
    <button id="cooperate-btn">Cooperate</button>
    <button id="defect-btn">Defect</button>
    <div id="result"></div>

    <script>
        document.getElementById('cooperate-btn').addEventListener('click', function() {
            playGame(1);
        });

        document.getElementById('defect-btn').addEventListener('click', function() {
            playGame(0);
        });

        function playGame(decision) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/api/play", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerText = response.result;
                }
            };

            var data = JSON.stringify({"decision": decision});
            xhr.send(data);
        }
    </script>
</body>
</html>

هنا قمت باستخدام XMLHttpRequest في JavaScript لإرسال طلب POST إلى نقطة نهاية /api/play في الباك إند، ثم قمت بتحديث عنصر div مع النتيجة المستلمة من السيرفر.

prisoners_dilemma.zip

للان لم اعرف كيف اربطهم و اشغل المشروع

ياسر مسكين · 18 فبراير

بتاريخ 2 ساعة قال Ziyad Al Maghribi:

prisoners_dilemma.zip 2.34 kB · 2 تنزيلات

للان لم اعرف كيف اربطهم و اشغل المشروع

لقد اطلعت على المشروع ووجدت أنه فيه بعض المشاكل البرمجية، بما أنك تستخدم فلاسك، استخدمت Pycharm كي أشغل المشروع لأنه يسهل العمل كثيرا وأنصح دائما باستخدامه.

أولا، يجب أن تنشئ مشروعا جديدا من نوع Flask ثم تضع الكود الخاص ب index.html في مجلد Templates.

لقد وضعت عليه تعديلات أيضا وهذا هو الكود الصحيح:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prisoner's Dilemma Game</title>
</head>
<body>
    <h1>Prisoner's Dilemma Game</h1>
    <button id="cooperate-btn">Cooperate</button>
    <button id="defect-btn">Defect</button>
    <div id="result"></div>

    <script>
        document.getElementById('cooperate-btn').addEventListener('click', function() {
            playGame(1);
        });

        document.getElementById('defect-btn').addEventListener('click', function() {
            playGame(0);
        });

        function playGame(decision) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/api/play", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerText = response.result;
                }
            };

            var data = JSON.stringify({"decision": decision});
            xhr.send(data);
        }
    </script>
</body>
</html>

ثم تضيف كود pp.py مكان الكود الموجود في ملف app.py، وهو الآخر عدلت عليه بهذا الشكل:

import random
from distutils.util import execute

from flask import Flask, jsonify, request, render_template
import qiskit

app = Flask(__name__)

def player_decision(playername):
    while True:
        decision = input(f"{playername}, do you Cooperate (C) or Defect (D)? ").upper()
        if decision == 'C':
            return run(1)
        elif decision == 'D':
            return run(0)
        else:
            print("Invalid input, please choose 'C' for Cooperate or 'D' for Defect.")

def game_outcome(player1_decision, player2_decision):
    if player1_decision[0] > player2_decision[0]:
        return (3, 3)  # Both cooperate
    elif player1_decision[0] < player2_decision[0]:
        return (0, 5)  # Player 1 cooperates, Player 2 defects
    elif player1_decision[0] == player2_decision[0]:
        return (5, 0)  # Player 1 defects, Player 2 cooperates
    else:
        return (1, 1)  # Both defect

def run(s, num_bits=10):
    alice_key, bob_key = bb84_protocol(num_bits, s)
    if s == 1:
        return sum(alice_key), sum(bob_key)
    else:
        return 0, 0

def bb84_protocol(num_bits, s):
    alice_bits = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    alice_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    alice_message = encode_message(alice_bits, alice_bases)
    bob_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    bob_measurements = measure_message(alice_message, bob_bases)
    matching_indices = compare_bases(alice_bases, bob_bases, s)
    if matching_indices:
        alice_key = [alice_bits[i] for i in matching_indices]
        bob_key = [bob_measurements[i] for i in matching_indices]
        return alice_key, bob_key
    return alice_bits, bob_bases

def encode_message(bits, bases):
    message = []
    for i in range(len(bits)):
        qc = qiskit.QuantumCircuit(1, 1)
        if bases[i] == 0:
            if bits[i] == 0:
                pass
            else:
                qc.x(0)
        else:
            if bits[i] == 0:
                qc.h(0)
            else:
                qc.x(0)
                qc.h(0)
        message.append(qc)
    return message

def measure_message(message, bases):
    backend = Aer.get_backend('qasm_simulator')
    measurements = []
    for i in range(len(message)):
        if bases[i] == 0:
            message[i].measure(0, 0)
        else:
            message[i].h(0)
            message[i].measure(0, 0)
        job = execute(message[i], backend, shots=1)
        result = job.result()
        measured_bit = int(list(result.get_counts(message[i]).keys())[0])
        measurements.append(measured_bit)
    return measurements

def compare_bases(alice_bases, bob_bases, s):
    indices = []
    if s == 1:
        for i in range(len(alice_bases)):
            if alice_bases[i] == bob_bases[i]:
                indices.append(i)
        return indices
    else:
        return 0

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/play', methods=['POST'])
def play_game():
    data = request.get_json()
    player_decision = data.get('decision')
    player1_decision = player_decision[0]
    player2_decision = player_decision[1]

    # Your game outcome logic here

    result = {
        "result": {
            "Player 1's decision": "Cooperate" if player1_decision == 1 else "Defect",
            "Player 2's decision": "Cooperate" if player2_decision == 1 else "Defect",
            "Player 1's score": 0,  # Replace with your calculated score
            "Player 2's score": 0   # Replace with your calculated score
        }
    }

    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

بحيث قمت بإضافة مسار كي يتعرف على الملف في الفرونت أند، وإضافة الدالة التي تقوم بتوليد الملف وعرضه على هذا الرابط:

اقتباس

http://127.0.0.1:5000

وهذه هي الدالة مع المسار:

@app.route('/api/play', methods=['POST'])
def play_game():
    data = request.get_json()
    player_decision = data.get('decision')
    player1_decision = player_decision[0]
    player2_decision = player_decision[1]

    # Your game outcome logic here

    result = {
        "result": {
            "Player 1's decision": "Cooperate" if player1_decision == 1 else "Defect",
            "Player 2's decision": "Cooperate" if player2_decision == 1 else "Defect",
            "Player 1's score": 0,  # Replace with your calculated score
            "Player 2's score": 0   # Replace with your calculated score
        }
    }

    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

ثم تعرض بهذا الشكل في الصورة:

Ziyad Al Maghribi · 19 فبراير

بتاريخ 19 ساعة قال ياسر مسكين:

لقد اطلعت على المشروع ووجدت أنه فيه بعض المشاكل البرمجية، بما أنك تستخدم فلاسك، استخدمت Pycharm كي أشغل المشروع لأنه يسهل العمل كثيرا وأنصح دائما باستخدامه.

أولا، يجب أن تنشئ مشروعا جديدا من نوع Flask ثم تضع الكود الخاص ب index.html في مجلد Templates.

لقد وضعت عليه تعديلات أيضا وهذا هو الكود الصحيح:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prisoner's Dilemma Game</title>
</head>
<body>
    <h1>Prisoner's Dilemma Game</h1>
    <button id="cooperate-btn">Cooperate</button>
    <button id="defect-btn">Defect</button>
    <div id="result"></div>

    <script>
        document.getElementById('cooperate-btn').addEventListener('click', function() {
            playGame(1);
        });

        document.getElementById('defect-btn').addEventListener('click', function() {
            playGame(0);
        });

        function playGame(decision) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/api/play", true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerText = response.result;
                }
            };

            var data = JSON.stringify({"decision": decision});
            xhr.send(data);
        }
    </script>
</body>
</html>

ثم تضيف كود pp.py مكان الكود الموجود في ملف app.py، وهو الآخر عدلت عليه بهذا الشكل:

import random
from distutils.util import execute

from flask import Flask, jsonify, request, render_template
import qiskit

app = Flask(__name__)

def player_decision(playername):
    while True:
        decision = input(f"{playername}, do you Cooperate (C) or Defect (D)? ").upper()
        if decision == 'C':
            return run(1)
        elif decision == 'D':
            return run(0)
        else:
            print("Invalid input, please choose 'C' for Cooperate or 'D' for Defect.")

def game_outcome(player1_decision, player2_decision):
    if player1_decision[0] > player2_decision[0]:
        return (3, 3)  # Both cooperate
    elif player1_decision[0] < player2_decision[0]:
        return (0, 5)  # Player 1 cooperates, Player 2 defects
    elif player1_decision[0] == player2_decision[0]:
        return (5, 0)  # Player 1 defects, Player 2 cooperates
    else:
        return (1, 1)  # Both defect

def run(s, num_bits=10):
    alice_key, bob_key = bb84_protocol(num_bits, s)
    if s == 1:
        return sum(alice_key), sum(bob_key)
    else:
        return 0, 0

def bb84_protocol(num_bits, s):
    alice_bits = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    alice_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    alice_message = encode_message(alice_bits, alice_bases)
    bob_bases = [int(bit) for bit in ''.join(random.choices(['0', '1'], k=num_bits))]
    bob_measurements = measure_message(alice_message, bob_bases)
    matching_indices = compare_bases(alice_bases, bob_bases, s)
    if matching_indices:
        alice_key = [alice_bits[i] for i in matching_indices]
        bob_key = [bob_measurements[i] for i in matching_indices]
        return alice_key, bob_key
    return alice_bits, bob_bases

def encode_message(bits, bases):
    message = []
    for i in range(len(bits)):
        qc = qiskit.QuantumCircuit(1, 1)
        if bases[i] == 0:
            if bits[i] == 0:
                pass
            else:
                qc.x(0)
        else:
            if bits[i] == 0:
                qc.h(0)
            else:
                qc.x(0)
                qc.h(0)
        message.append(qc)
    return message

def measure_message(message, bases):
    backend = Aer.get_backend('qasm_simulator')
    measurements = []
    for i in range(len(message)):
        if bases[i] == 0:
            message[i].measure(0, 0)
        else:
            message[i].h(0)
            message[i].measure(0, 0)
        job = execute(message[i], backend, shots=1)
        result = job.result()
        measured_bit = int(list(result.get_counts(message[i]).keys())[0])
        measurements.append(measured_bit)
    return measurements

def compare_bases(alice_bases, bob_bases, s):
    indices = []
    if s == 1:
        for i in range(len(alice_bases)):
            if alice_bases[i] == bob_bases[i]:
                indices.append(i)
        return indices
    else:
        return 0

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/play', methods=['POST'])
def play_game():
    data = request.get_json()
    player_decision = data.get('decision')
    player1_decision = player_decision[0]
    player2_decision = player_decision[1]

    # Your game outcome logic here

    result = {
        "result": {
            "Player 1's decision": "Cooperate" if player1_decision == 1 else "Defect",
            "Player 2's decision": "Cooperate" if player2_decision == 1 else "Defect",
            "Player 1's score": 0,  # Replace with your calculated score
            "Player 2's score": 0   # Replace with your calculated score
        }
    }

    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

بحيث قمت بإضافة مسار كي يتعرف على الملف في الفرونت أند، وإضافة الدالة التي تقوم بتوليد الملف وعرضه على هذا الرابط:

وهذه هي الدالة مع المسار:

@app.route('/api/play', methods=['POST'])
def play_game():
    data = request.get_json()
    player_decision = data.get('decision')
    player1_decision = player_decision[0]
    player2_decision = player_decision[1]

    # Your game outcome logic here

    result = {
        "result": {
            "Player 1's decision": "Cooperate" if player1_decision == 1 else "Defect",
            "Player 2's decision": "Cooperate" if player2_decision == 1 else "Defect",
            "Player 1's score": 0,  # Replace with your calculated score
            "Player 2's score": 0   # Replace with your calculated score
        }
    }

    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

ثم تعرض بهذا الشكل في الصورة:

توجد مشكله عندي

كود التشغيل

 python pp.py

prisoners_dilemma.zip

ياسر مسكين · 19 فبراير

بتاريخ 11 دقائق مضت قال Ziyad Al Maghribi:
توجد مشكله عندي

كود التشغيل
 python pp.py
prisoners_dilemma.zip 2.35 kB · 0 تنزيلات

لقد أعدت تشغيل المشروع والمشروع يعمل عندي بشكل عادي، قم بالتأكد من أن مشروعك له نفس هذه التركيبة والهيكلة، وتأكد من وجود مجلد باسم Template في جذر المشروع، كما هو مبين في الصورة المرفقة:

Ziyad Al Maghribi · 19 فبراير

بتاريخ 3 دقائق مضت قال ياسر مسكين:

لقد أعدت تشغيل المشروع والمشروع يعمل عندي بشكل عادي، قم بالتأكد من أن مشروعك له نفس هذه التركيبة والهيكلة، وتأكد من وجود مجلد باسم Template في جذر المشروع، كما هو مبين في الصورة المرفقة:

هل ممكن ارسال التركيبة لفهم الهيكل

ياسر مسكين · 19 فبراير

بتاريخ 4 دقائق مضت قال Ziyad Al Maghribi:

هل ممكن ارسال التركيبة لفهم الهيكل

هل تستخدم PyCharm؟

إن كان نعم، يمكنك إختيار "Create New Project" من القائمة الرئيسية.

ثم تبدء في تكوين بيئة العمل الخاصة بـ Flask:

تختار "Flask" من قائمة القوالب.
تحدد موقع المشروع واسمه.
تنقر على "Create".

إن كان لديك آخر تحديث فسيولّد لك التركيبة تلقائيا، سيكون لديك 3 مجلدات:

venv خاص بال Virtual Environment، ومجلد Static عادة يتم وضع فيه ملفات ال CSS وغيرها.

ومجلد Template أين نضع فيه ملفات ال Html.

بينما كود البايثون نضعه في ملف app.py أوأي ملف آخر لا يهم التسمية، بحيث يكون في جذر المشروع أي ال root.

وهذا تفصيل ومثال للهيكلة:

اقتباس

اسم_المشروع/
│
├── app/
│ ├── static/ # ملفات ثابتة (مثل CSS و JavaScript)
│ ├── templates/ # قوالب HTML
├── venv/ # البيئة الافتراضية (تم إنشاؤها تلقائيًا بواسطة PyCharm)
└── app.py # نقطة الدخول لتطبيق Flask

بحيث:

`app/`: يمثل الدليل ويحتوي على تطبيق Flask.
`static/`: نضع فيه الملفات الثابتة مثل CSS و JavaScript والصور، إلخ.
`templates/`: نضع فيه قوالب HTML.
`venv/`: هذا الدليل يحتوي على البيئة الافتراضية للمشروع. يتم إنشاؤها تلقائيا بواسطة PyCharm عند إنشاء بيئة افتراضية جديدة.
`app.py`: هذه عادةً نقطة الدخول لتطبيق Flask وفيها كود بايثون.

أتمنى أن يكون شرحي واضحا. يمكن استخدام أي تركيبة أو هيكلة لكن هذه تعمل في حالة لم تغير في الكود الأخير لأنه يعمل عندي بشكل عادي.

كيف أربط الباك إند مع صفحة HTML باستخدام البايثون

السؤال

Ziyad Al Maghribi

7 أجوبة على هذا السؤال

Recommended Posts

ياسر مسكين

Ziyad Al Maghribi

ياسر مسكين

Ziyad Al Maghribi

ياسر مسكين

Ziyad Al Maghribi

ياسر مسكين

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية