Blockchain mit Vue, Python & Flask

Erstellen einer vollständigen Blockchain-Anwendung mit einem Vue.js-Frontend und einem Python-Backend.
Lassen Sie uns die grundlegenden Komponenten skizzieren und einige Beispielcode-Snippets bereitstellen, um Ihnen den Einstieg zu erleichtern.

Überblick

• 1. Backend (Python mit Flask) Erstellen Sie eine einfache Blockchain-Struktur. Richten Sie eine Flask-API ein, um mit der Blockchain zu interagieren.
• 2. Frontend (Vue.js)
• Erstellen Sie eine Vue.js-Anwendung, die mit der Flask-API kommuniziert.
• Zeigen Sie Blockchain-Daten an und erlauben Sie Benutzerinteraktionen (z. B. das Hinzufügen eines neuen Blocks). Schritt 1: Einrichten des Backends
• Flask installieren: Stellen Sie sicher, dass Flask installiert ist. Sie können dies mit pip:
tun

Einrichten der Umgebung

pip install Flask

1. Erstellen Sie eine einfache Blockchain-Klasse:

# blockchain.py
import hashlib
import json
from time import time
from flask import Flask, jsonify, request

class Blockchain:
    def __init__(self):
        self.chain = []
        self.current_transactions = []
        self.new_block(previous_hash='1', proof=100)

    def new_block(self, proof, previous_hash=None):
        block = {
            'index': len(self.chain) + 1,
            'timestamp': time(),
            'transactions': self.current_transactions,
            'proof': proof,
            'previous_hash': previous_hash or self.hash(self.chain[-1]),
        }
        self.current_transactions = []
        self.chain.append(block)
        return block

    def new_transaction(self, sender, recipient, amount):
        self.current_transactions.append({
            'sender': sender,
            'recipient': recipient,
            'amount': amount,
        })
        return self.last_block['index'] + 1

    @staticmethod
    def hash(block):
        block_string = json.dumps(block, sort_keys=True).encode()
        return hashlib.sha256(block_string).hexdigest()

    @property
    def last_block(self):
        return self.chain[-1]

app = Flask(__name__)
blockchain = Blockchain()

@app.route('/mine', methods=['POST'])
def mine():
    values = request.get_json()
    required = ['proof', 'sender', 'recipient']
    if not all(k in values for k in required):
        return 'Missing values', 400

    index = blockchain.new_transaction(values['sender'], values['recipient'], values['amount'])
    blockchain.new_block(values['proof'])
    response = {
        'message': f'New Block Forged',
        'index': index,
        'block': blockchain.last_block,
    }
    return jsonify(response), 200

@app.route('/chain', methods=['GET'])
def full_chain():
    response = {
        'chain': blockchain.chain,
        'length': len(blockchain.chain),
    }
    return jsonify(response), 200

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

Schritt 2: Einrichten des Frontends

1. Erstellen Sie eine Vue.js-App: Wenn Sie noch kein Vue.js-Projekt erstellt haben, können Sie dies mit der Vue-CLI tun:

vue create my-blockchain-app

1. Axios für API-Aufrufe installieren:

npm install axios

1. Erstellen Sie eine einfache Komponente:

// src/components/Blockchain.vue
<template>
  <div>
    <h1>Blockchain</h1>
    <button @click="fetchChain">Fetch Blockchain</button>
    <ul>
      <li v-for="block in blockchain" :key="block.index">
        Block #{{ block.index }} - {{ block.timestamp }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      blockchain: []
    };
  },
  methods: {
    fetchChain() {
      axios.get('http://localhost:5000/chain')
        .then(response => {
          this.blockchain = response.data.chain;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Schritt 3: Alles zusammenfügen

Führen Sie das Flask-Backend aus: Stellen Sie sicher, dass Ihr Python-Server läuft:

python blockchain.py

Führen Sie das Vue.js-Frontend aus: Führen Sie jetzt Ihre Vue.js-Anwendung aus:

npm run serve

Lassen Sie uns die Blockchain-Anwendung verbessern, indem wir erweiterte Funktionen hinzufügen, wie zum Beispiel:

• Proof-of-Work-Mechanismus: Implementieren Sie einen grundlegenden Proof-of-Work-Algorithmus.
• Transaktionspool: Ermöglichen Sie Benutzern, Transaktionen zu erstellen und diese vor dem Mining in einem Pool anzuzeigen. -Node Discovery: Erlauben Sie mehreren Knoten, sich zu verbinden und die Blockchain zu teilen. -Verbessertes Frontend: Erstellen Sie eine interaktivere Benutzeroberfläche zur Anzeige der Blockchain und Transaktionen. Schritt 1: Verbesserung des Backends
• Aktualisieren Sie die Blockchain-Klasse Wir werden einen grundlegenden Proof-of-Work-Algorithmus und einen Transaktionspool implementieren.

# blockchain.py
import hashlib
import json
from time import time
from flask import Flask, jsonify, request
from urllib.parse import urlparse
import requests

class Blockchain:
    def __init__(self):
        self.chain = []
        self.current_transactions = []
        self.nodes = set()
        self.new_block(previous_hash='1', proof=100)

    def new_block(self, proof, previous_hash=None):
        block = {
            'index': len(self.chain) + 1,
            'timestamp': time(),
            'transactions': self.current_transactions,
            'proof': proof,
            'previous_hash': previous_hash or self.hash(self.chain[-1]),
        }
        self.current_transactions = []
        self.chain.append(block)
        return block

    def new_transaction(self, sender, recipient, amount):
        self.current_transactions.append({
            'sender': sender,
            'recipient': recipient,
            'amount': amount,
        })
        return self.last_block['index'] + 1

    @staticmethod
    def hash(block):
        block_string = json.dumps(block, sort_keys=True).encode()
        return hashlib.sha256(block_string).hexdigest()

    @property
    def last_block(self):
        return self.chain[-1]

    def proof_of_work(self, last_proof):
        proof = 0
        while not self.valid_proof(last_proof, proof):
            proof += 1
        return proof

    @staticmethod
    def valid_proof(last_proof, proof):
        guess = f'{last_proof}{proof}'.encode()
        guess_hash = hashlib.sha256(guess).hexdigest()
        return guess_hash[:4] == "0000"  # Adjust difficulty here

    def register_node(self, address):
        parsed_url = urlparse(address)
        self.nodes.add(parsed_url.netloc)

    def resolve_conflicts(self):
        neighbours = self.nodes
        new_chain = None
        max_length = len(self.chain)

        for node in neighbours:
            response = requests.get(f'http://{node}/chain')
            if response.status_code == 200:
                length = response.json()['length']
                chain = response.json()['chain']
                if length > max_length and self.valid_chain(chain):
                    max_length = length
                    new_chain = chain

        if new_chain:
            self.chain = new_chain
            return True
        return False

    def valid_chain(self, chain):
        last_block = chain[0]
        current_index = 1

        while current_index < len(chain):
            block = chain[current_index]
            if block['previous_hash'] != self.hash(last_block):
                return False
            if not self.valid_proof(last_block['proof'], block['proof']):
                return False
            last_block = block
            current_index += 1
        return True

app = Flask(__name__)
blockchain = Blockchain()

@app.route('/mine', methods=['POST'])
def mine():
    values = request.get_json()
    required = ['sender', 'recipient']

    if not all(k in values for k in required):
        return 'Missing values', 400

    last_block = blockchain.last_block
    last_proof = last_block['proof']
    proof = blockchain.proof_of_work(last_proof)

    blockchain.new_transaction(sender=values['sender'], recipient=values['recipient'], amount=1)
    previous_hash = blockchain.hash(last_block)
    block = blockchain.new_block(proof, previous_hash)

    response = {
        'message': 'New Block Forged',
        'index': block['index'],
        'block': block,
    }
    return jsonify(response), 200

@app.route('/transactions/new', methods=['POST'])
def new_transaction():
    values = request.get_json()
    required = ['sender', 'recipient', 'amount']

    if not all(k in values for k in required):
        return 'Missing values', 400

    index = blockchain.new_transaction(values['sender'], values['recipient'], values['amount'])
    response = {'message': f'Transaction will be added to Block {index}'}
    return jsonify(response), 201

@app.route('/chain', methods=['GET'])
def full_chain():
    response = {
        'chain': blockchain.chain,
        'length': len(blockchain.chain),
    }
    return jsonify(response), 200

@app.route('/nodes/register', methods=['POST'])
def register_nodes():
    values = request.get_json()
    nodes = values.get('nodes')

    if nodes is None:
        return 'Error: Please supply a valid list of nodes', 400

    for node in nodes:
        blockchain.register_node(node)

    response = {
        'message': 'New nodes have been added',
        'total_nodes': list(blockchain.nodes),
    }
    return jsonify(response), 201

@app.route('/nodes/resolve', methods=['GET'])
def consensus():
    replaced = blockchain.resolve_conflicts()

    if replaced:
        response = {
            'message': 'Our chain was replaced',
            'new_chain': blockchain.chain,
        }
    else:
        response = {
            'message': 'Our chain is authoritative',
            'chain': blockchain.chain,
        }

    return jsonify(response), 200

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

Schritt 2: Erweiterung des Frontends

1. Erstellen Sie ein Transaktionsformular in Vue.js Wir werden nun ein Formular erstellen, mit dem Benutzer Transaktionen einreichen können.

// src/components/Blockchain.vue
<template>
  <div>
    <h1>Blockchain</h1>
    <button @click="fetchChain">Fetch Blockchain</button>

    <h2>Transactions</h2>
    <form @submit.prevent="submitTransaction">
      <input type="text" v-model="sender" placeholder="Sender" required />
      <input type="text" v-model="recipient" placeholder="Recipient" required />
      <input type="number" v-model="amount" placeholder="Amount" required />
      <button type="submit">Send Transaction</button>
    </form>

    <h2>Blockchain</h2>
    <ul>
      <li v-for="block in blockchain" :key="block.index">
        Block #{{ block.index }} - {{ block.timestamp }}
        <ul>
          <li v-for="transaction in block.transactions" :key="transaction.sender">
            {{ transaction.sender }} -> {{ transaction.recipient }}: {{ transaction.amount }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      blockchain: [],
      sender: '',
      recipient: '',
      amount: 0,
    };
  },
  methods: {
    fetchChain() {
      axios.get('http://localhost:5000/chain')
        .then(response => {
          this.blockchain = response.data.chain;
        })
        .catch(error => {
          console.error(error);
        });
    },
    submitTransaction() {
      const transaction = {
        sender: this.sender,
        recipient: this.recipient,
        amount: this.amount,
      };

      axios.post('http://localhost:5000/transactions/new', transaction)
        .then(response => {
          alert(response.data.message);
          this.fetchChain(); // Refresh the blockchain view
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Schritt 3: Knotenerkennung und Konsens

Sie können Ihre Blockchain mit mehreren Knoten testen, indem Sie mehrere Instanzen Ihrer Flask-App auf verschiedenen Ports ausführen. Sie können beispielsweise Folgendes ausführen:

FLASK_RUN_PORT=5001 python blockchain.py

Dann können Sie Knoten mithilfe einer POST-Anfrage registrieren:

curl -X POST -H "Content-Type: application/json" -d '{"nodes": ["localhost:5001"]}' http://localhost:5000/nodes/register

Diese erweiterte Blockchain-Anwendung umfasst:
-Proof of Work: Ein grundlegender Mechanismus zum Mining neuer Blöcke.
-Transaktionspool: Benutzer können Transaktionen erstellen, bevor sie abgebaut werden.
-Node Discovery: Unterstützung für mehrere Knoten und einen Konsensmechanismus.
-Interaktives Frontend: Eine Vue.js-Benutzeroberfläche zum Senden von Transaktionen und Anzeigen der Blockchain.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonBlockchain mit Vue, Python & Flask. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!