使用 Vue、Python 和 Flask 进行区块链

酷静同学_1428

发布时间：2024-10-26 08:18:02

441人浏览过

来源于dev.to

转载

使用 vue、python 和 flask 进行区块链

使用 vue.js 前端和 python 后端创建完整的区块链应用程序。
让我们概述基本组件并提供一些示例代码片段来帮助您入门。

概述

1.后端（python 与 flask）创建一个简单的区块链结构。设置 flask api 与区块链交互。
2.前端 (vue.js)
创建一个与 flask api 通信的 vue.js 应用程序。
显示区块链数据并允许用户交互（例如添加新块）。第 1 步：设置后端
安装 flask：确保已安装 flask。您可以使用 pip 来执行此操作：

设置环境

pip install flask

创建一个基本的区块链类：

# 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)

第 2 步：设置前端

创建 vue.js 应用程序：如果您尚未创建 vue.js 项目，您可以使用 vue cli 来创建：

vue create my-blockchain-app

安装 axios 进行 api 调用：

npm install axios

创建一个简单的组件：

// 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>

第三步：将它们放在一起

运行 flask 后端：确保您的 python 服务器正在运行：

python blockchain.py

运行 vue.js 前端：现在，运行您的 vue.js 应用程序：

npm run serve

让我们通过添加更多高级功能来增强区块链应用程序，例如：

工作量证明机制：实现基本的工作量证明算法。
交易池：允许用户创建交易并在挖矿之前在池中查看它们。 -节点发现：允许多个节点连接并共享区块链。 -改进的前端：创建更具交互性的用户界面来显示区块链和交易。第 1 步：增强后端
更新区块链类我们将实现基本的工作量证明算法和交易池。

# 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)

第 2 步：增强前端

Auth0 Vue

在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

在 vue.js 中创建交易表单我们现在将创建一个表单供用户提交交易。

// 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>

第三步：节点发现和共识

您可以通过在不同端口上运行 flask 应用程序的多个实例来测试具有多个节点的区块链。例如，您可以运行：

flask_run_port=5001 python blockchain.py

然后，您可以使用 post 请求注册节点：

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

这个更先进的区块链应用程序包括：
-工作量证明：挖掘新区块的基本机制。
-交易池：用户可以在交易被开采之前创建交易。
-节点发现：支持多个节点和共识机制。
-交互式前端：用于提交交易和查看区块链的 vue.js ui。

编码愉快！

立即学习“Python免费学习笔记（深入）”；

JS 中事件委托在现代前端框架虚拟 DOM 中怎么映射理解

Vue 组件递归更新超限：Vite HMR 触发无限响应循环的根因与解决方案

Vue 组件递归更新超限：Vite HMR 触发无限响应循环的成因与修复

在Vue CLI老项目中如何配置PostCSS引入autoprefixer？

Vue 3 事件绑定怎么使用修饰符阻止冒泡