【免费】JavaScript实现区块链功能_TypeScript实现区块链共识算法资源-CSDN下载

共21个文件

js：6个

ts：5个

map：5个

javascript

typescript

需积分: 0 68 浏览量更新于2023-05-09 收藏 103KB ZIP 举报

笔记部分的实现功能，包括： - 实现区块链 - 实现去中心化网络 - 实现同步和共识 - 实现获取对应的block、transaction和地址 - 添加UI便于查询具体的笔记部分可以查看：https://blog.csdn.net/weixin_42938619/category_12308208.html 虽然使用TypeScript实现的，不过除了类型之外并没有用其他的语法，所以还是可以当JS读的。

收起资源包目录

blokchain.zip （21个子文件）

blokchain

yarn.lock 130KB

yarn-error.log 44KB

dist

user.js 532B

api.js 485B

user.js.map 282B

block-explorer

index.html 7KB

testIsValid.js.map 1KB

blockchain.js.map 4KB

index.js 8KB

test.js.map 720B

index.js.map 7KB

testIsValid.js 2KB

blockchain.js 5KB

test.js 990B

package.json 1KB

tsconfig.json 12KB

dev

testIsValid.ts 2KB

blockchain.ts 5KB

user.ts 490B

test.ts 709B

index.ts 7KB

身份认证购VIP最低享 7 折!

30元优惠券

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <title>Block Explorer</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" ></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> </head> <body ng-app="BlockExplorer"> <div class="container" ng-controller="MainController"> <div class="row"> <div class="col-md-8 offset-md-2"> <h1 id="page-title">Block Explorer</h1> </div> </div> <div class="row"> <div class="col-md-6 offset-md-3"> <form ng-submit="search(searchValue)"> <div class="form-group"> <input type="text" class="form-control" ng-model="searchValue" /> </div> <div class="form-group"> <select class="form-control" ng-model="searchType"> <option value="block">Block Hash</option> <option value="transaction">Transaction ID</option> <option value="address">Address</option> </select> </div> <button type="submit" class="btn btn-primary margin-auto btn-search" > Search </button> <p ng-if="!block && !transaction && !addressData && initialSearchMade" class="no-data-text" > No data found for search. </p> </form> </div> </div> <div class="row"> <div class="col-md-10 offset-md-1">  <h3 class="table-title" ng-if="block">Block</h3> <table class="table table-striped" ng-if="block"> <tbody> <tr> <td class="bold">Block Hash</td> <td>{{ block.hash }}</td> </tr> <tr> <td class="bold">Index</td> <td>{{ block.index }}</td> </tr> <tr> <td class="bold">Time Stamp</td> <td>{{ block.timestamp }}</td> </tr> <tr> <td class="bold">Nonce</td> <td>{{ block.nonce }}</td> </tr> <tr> <td class="bold">Previous Hash</td> <td>{{ block.previousBlockHash }}</td> </tr> <tr> <td class="bold">Number Transactions</td> <td>{{ block.transactions.length }}</td> </tr> </tbody> </table>   <h3 class="table-title" ng-if="transaction">Transaction</h3> <table class="table table-striped" ng-if="transaction"> <tbody> <tr> <td class="bold">Sender</td> <td>{{ transaction.sender }}</td> </tr> <tr> <td class="bold">Recipient</td> <td>{{ transaction.recipient }}</td> </tr> <tr> <td class="bold">Amount</td> <td>{{ transaction.amount }}</td> </tr> </tbody> </table>   <h3 class="table-title" ng-if="addressData">Address</h3> <p id="balance-text" ng-if="addressData"> (Balance: {{ addressData.addressBalance }}) </p> <table class="table table-striped" ng-if="addressData"> <thead> <tr> <th scope="col">Sender</th> <th scope="col">Recipient</th> <th scope="col">Amount</th> </tr> </thead> <tbody> <tr ng-repeat="transaction in addressData.addressTransactions"> <td>{{ transaction.sender }}</td> <td>{{ transaction.recipient }}</td> <td>{{ transaction.amount }}</td> </tr> </tbody> </table>  </div> </div> </div> <script> window.app = angular.module('BlockExplorer', []); app.controller('MainController', function ($scope, $http) { $scope.block = null; $scope.transaction = null; $scope.addressData = null; $scope.initialSearchMade = false; $scope.fetchBlock = function (blockHash) { $http.get(`/block/${blockHash}`).then((response) => { $scope.block = response.data.block; $scope.transaction = null; $scope.addressData = null; }); }; $scope.fetchTransaction = function (transactionId) { $http.get(`/transaction/${transactionId}`).then((response) => { $scope.transaction = response.data.transaction; $scope.block = null; $scope.addressData = null; }); }; $scope.fetchAddressData = function (address) { $http.get(`/address/${address}`).then((response) => { $scope.addressData = response.data.addressData; if (!$scope.addressData.addressTransactions.length) $scope.addressData = null; $scope.block = null; $scope.transaction = null; }); }; $scope.search = function (searchValue) { $scope.initialSearchMade = true; if ($scope.searchType === 'block') { $scope.fetchBlock(searchValue); } else if ($scope.searchType === 'transaction') { $scope.fetchTransaction(searchValue); } else if ($scope.searchType === 'address') { $scope.fetchAddressData(searchValue); } }; }); </script> <style type="text/css"> html, body { min-height: 100vh; background-color: #e8e8e8; } .container { padding-top: 50px; padding-bottom: 50px; } #page-title { text-align: center; margin-bottom: 40px; } .table-title { margin-bottom: 20px; text-align: center; } .table { background-color: #ffffff; box-shadow: 2px 2px 15px -3px rgba(0, 0, 0, 0.75); } #balance-text { text-align: center; margin-top: -20px; margin-bottom: 30px; } .margin-auto { margin: auto; display: block; } .btn-search { margin-bottom: 50px; } .bold { font-weight: 700; } .no-data-text { color: red; text-align: center; } </style> </body> </html>