PHP前端开发

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

百变鹏仔 3天前 #Python
文章标签 区块

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

概述

设置环境

pip install flask
  1. 创建一个基本的区块链类:
# blockchain.pyimport hashlibimport jsonfrom time import timefrom flask import flask, jsonify, requestclass 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), 200if __name__ == '__main__':    app.run(debug=true)

第 2 步:设置前端

  1. 创建 vue.js 应用程序:如果您尚未创建 vue.js 项目,您可以使用 vue cli 来创建:
vue create my-blockchain-app
  1. 安装 axios 进行 api 调用:
npm install axios
  1. 创建一个简单的组件:
// 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

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

# blockchain.pyimport hashlibimport jsonfrom time import timefrom flask import flask, jsonify, requestfrom urllib.parse import urlparseimport requestsclass 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 trueapp = 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), 200if __name__ == '__main__':    app.run(debug=true)

第 2 步:增强前端

  1. 在 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免费学习笔记(深入)”;