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

使用 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>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 



<p>第 2 步：增强前端</p>

<ol>
<li>在 vue.js 中创建交易表单
我们现在将创建一个表单供用户提交交易。
</li>
</ol>// src/components/blockchain.vue
<template><div>
    <h1>blockchain</h1>
    <button>fetch blockchain</button>

    <h2>transactions</h2>
    <form>
      <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。

编码愉快！

以上就是使用 Vue、Python 和 Flask 进行区块链的详细内容，更多请关注其它相关文章！