HTML：

Question

我是Blockchain的新手。我只是在观看YouTube视频后尝试构建区块链。

app.js：

const SHA256 = require('crypto-js/sha256');

class Block {
    constructor(data, previousHash = ''){
        this.previousHash = previousHash;
        this.data = data;
        this.hash = this.calculateHash();
    }

    calculateHash(){
        return SHA256(this.previousHash + JSON.stringify(this.data)).toString();
    }
}

class Blockchain{
    constructor(){
        this.chain = [this.createGenesisBlock()];
    }

    createGenesisBlock(){
        return new Block("Genesis Block", "0");
    }

    getLatestBlock(){
        return this.chain[this.chain.length - 1];
    }

    addBlock(newBlock){
        newBlock.previousHash = this.getLatestBlock().hash;
        newBlock.hash = newBlock.calculateHash();
        this.chain.push(newBlock);
    }

    isChainValid(){
        for(let i = 1; i < this.chain.length; i++){
            const currentBlock = this.chain[i];
            const previousBlock = this.chain[i - 1];

            if(currentBlock.hash !== currentBlock.calculateHash()){
                return false;
            }

            if(currentBlock.previousHash !== previousBlock.hash){
                return false;
            }
        }
        return true;
    }
}

let xyzcOin = new Blockchain();

xyzcOin.addBlock(new Block({amount: 8}));
xyzcOin.addBlock(new Block({amount: 80}));

// console.log("Is blockchain is valid? " + xyzcOin.isChainValid());

// xyzcOin.chain[1].data = {amout: 100};

// console.log("Is blockchain is valid? " + xyzcOin.isChainValid());

console.log(JSON.stringify(xyzcOin, null, 4));

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xyzcOin Blockchain</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div class="container">
        <div class="input">
            <form method="post">
                <label for="data">Please enter data:</label>
                <input type="text" name="data" id="data">
                <button type="submit" onclick="addData()">Add Data</button>
            </form>
        </div>
        <div class="result">
            <h4>Blocks Added</h4>
            <ul onload="appendData()">
                <li>Block 1:</li>
                <li>Block 2:</li>
                <li>Block 3:</li>
            </ul>
        </div>
        <div class="validate">
            <button type="submit">Validate Chain</button>
            <p>Chain validated? true or false</p>
        </div>
    </div>
</body>
</html>

查询：

1）用户输入的数据应作为块的数据（在提交添加数据按钮时），并且应在上面的文本框中输入数据后动态附加到listitem。

2）为了验证区块链是否存在任何篡改，我创建了一个按钮来验证链，并显示结果。

我通过console.log()传递数据时获得了预期的结果，但我需要从html页面动态完成此操作。

提前致谢！

Answer 1

我希望这会有所帮助。我编辑了html，因为你不想从表单标签做帖子。您只想获取用户输入并将其发送到您的js，以便它可以获取数据。然后，您可以使用fetch的响应更新html。

用户将文本输入表单并按Enter或单击按钮
触发执行帖子的js函数
成功之后你现在在.then中有了响应对象，你可以更新dom

这里是使用fetch api https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

// select the form
const formData = document.querySelector('.form-data');

// attach an event listener
formData.addEventListener('submit', (evt) => {
  evt.preventDefault(); 

  const inputVal =  evt.target[0].value;

  // enter url as first arg and data as second arg
  postData('http://example.com/answer', { data: inputVal })
  .then(data => {
     // JSON from `response.json()` call
    // do something with the data
    console.log(data)
  })
  .catch(error => console.error(error))
})

// helper function for making posts with fetch api 
function postData(url, data) {
  return fetch(url, {
    body: JSON.stringify(data), 
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST', 
  })
  .then(response => response.json()) // parses response to JSON
}

<form class="form-data">
    <label for="data">Please enter data:</label>
    <input type="text" name="data" id="data">
    <button type="submit">Add Data</button>
</form>

如何将用户表单数据传递到已定义的类中

HTML：

查询：

1 个答案: