Node.html

最新推荐文章于 2024-04-29 11:06:38 发布
最新推荐文章于 2024-04-29 11:06:38 发布
阅读量737 收藏 13
点赞数 25
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35500719/article/details/137677254
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blockchain Management</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
    <style>
        .lds-ring {
            display: inline-block;
            position: relative;
            width: 64px;
            height: 64px;
        }

        .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 51px;
            height: 51px;
            margin: 6px;
            border: 6px solid #fa923f;
            border-radius: 50%;
            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            border-color: #fa923f transparent transparent transparent;
        }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

        @keyframes lds-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="row mb-3">
                <div class="col">
                    <h1>Manage your Blockchain</h1>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="/">Wallet &amp; Node</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/network">Network</a>
                        </li>
                    </ul>
                </div>
            </div>
            <hr>
            <div v-if="error" class="alert alert-danger" role="alert">
                {{ error }}
            </div>
            <div v-if="success" class="alert alert-success" role="alert">
                {{ success }}
            </div>

            <div class="row">
                <div class="col">
                    <div v-if="!walletLoading">
                        <button class="btn btn-primary" @click="onCreateWallet">
                            Create new Wallet
                        </button>
                        <button class="btn btn-primary" @click="onLoadWallet">
                            Load Wallet
                        </button>
                    </div>

                    <div v-if="walletLoading" class="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="col text-right">
                    <h2>Funds: {{ funds.toFixed(2) }}</h2>
                </div>
            </div>
            <hr>
            <div v-if="!wallet" class="row">
                <div class="col">
                    <div class="alert alert-warning">Create a Wallet to start sending coins or to mine coins!</div>
                </div>
            </div>
            <div v-if="wallet" class="row">
                <div class="col">
                    <form @submit.prevent="onSendTx">
                        <div class="form-group">
                            <label for="recipient">Recipient Key</label>
                            <input v-model="outgoingTx.recipient" type="text" class="form-control" id="recipient" placeholder="Enter key">
                        </div>
                        <div class="form-group">
                            <label for="amount">Amount of Coins</label>
                            <input v-model.number="outgoingTx.amount" type="number" step="0.001" class="form-control" id="amount">
                            <small class="form-text text-muted">Fractions are possible (e.g. 5.67)</small>
                        </div>
                        <div v-if="txLoading" class="lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <button :disabled="txLoading || outgoingTx.recipient.trim() === '' || outgoingTx.amount <= 0" type="submit" class="btn btn-primary">Send</button>
                    </form>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link" :class="{active: view === 'chain'}" href="#" @click="view = 'chain'">Blockchain</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="{active: view === 'tx'}" href="#" @click="view = 'tx'">Open Transactions</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row my-3">
                <div class="col">
                    <button class="btn btn-primary" @click="onLoadData">{{ view === 'chain' ? 'Load Blockchain' : 'Load Transactions' }}</button>
                    <button v-if="view === 'chain' && wallet" class="btn btn-success" @click="onMine">Mine Coins</button>
                    <button class="btn btn-warning" @click="onResolve">Resolve Conflicts</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div v-if="dataLoading" class="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div v-if="!dataLoading" class="accordion">
                        <div class="card" v-for="(data, index) in loadedData">
                            <div v-if="view === 'chain'" class="card-header">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" @click="showElement === index ? showElement = null : showElement = index">
                                        Block #{{ data.index }}
                                    </button>
                                </h5>
                            </div>
                            <div v-if="view === 'chain'" class="collapse" :class="{show: showElement === index}">
                                <div class="card-body">
                                    <p>Previous Hash: {{ data.previous_hash }}</p>
                                    <div class="list-group">
                                        <div v-for="tx in data.transactions" class="list-group-item flex-column align-items-start">
                                            <div>Sender: {{ tx.sender }}</div>
                                            <div>Recipient: {{ tx.recipient }}</div>
                                            <div>Amount: {{ tx.amount }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-if="view === 'tx'" class="card-header">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" type="button" @click="showElement === index ? showElement = null : showElement = index">
                                        Transaction #{{ index }}
                                    </button>
                                </h5>
                            </div>
                            <div v-if="view === 'tx'" class="collapse" :class="{show: showElement === index}">
                                <div class="card-body">
                                    <div class="list-group">
                                        <div class="list-group-item flex-column align-items-start">
                                            <div>Sender: {{ data.sender }}</div>
                                            <div>Recipient: {{ data.recipient }}</div>
                                            <div>Amount: {{ data.amount }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                blockchain: [

                ],
                openTransactions: [

                ],
                wallet: null,
                view: 'chain',
                walletLoading: false,
                txLoading: false,
                dataLoading: false,
                showElement: null,
                error: null,
                success: null,
                funds: 0,
                outgoingTx: {
                    recipient: '',
                    amount: 0
                }
            },
            computed: {
                loadedData: function () {
                    if (this.view === 'chain') {
                        return this.blockchain;
                    } else {
                        return this.openTransactions
                    }
                }
            },
            methods: {
                onCreateWallet: function () {
                    // Send Http request to create a new wallet (and return keys)
                    var vm = this
                    this.walletLoading = true
                    axios.post('/wallet')
                        .then(function(response){
                           vm.error = null;
                           vm.success = 'Created Wallet! Public Key: ' + response.data.public_key + ', Private Key: ' + response.data.private_key;
                           vm.wallet = {
                               public_key: response.data.public_key,
                               private_key: response.data.private_key
                           }
                           vm.funds = response.data.funds
                           vm.walletLoading = false
                        })
                        .catch(function(error) {
                            vm.success = null;
                            vm.error = error.response.data.message
                            vm.wallet = null;
                            vm.walletLoading = false
                        });
                },
                onLoadWallet: function () {
                    // Send Http request to load an existing wallet (from a file on the server)
                    var vm = this
                    this.walletLoading = true;
                    axios.get('/wallet')
                        .then(function(response){
                           vm.error = null;
                           vm.success = 'Loaded Wallet! Public Key: ' + response.data.public_key + ', Private Key: ' + response.data.private_key;
                           vm.wallet = {
                               public_key: response.data.public_key,
                               private_key: response.data.private_key
                           }
                           vm.funds = response.data.funds
                           vm.walletLoading = false;
                        })
                        .catch(function(error) {
                            vm.success = null;
                            vm.error = error.response.data.message
                            vm.wallet = null;
                            vm.walletLoading = false;
                        });
                },
                onSendTx: function () {
                    // Send Transaction to backend
                    var vm = this
                    this.txLoading = true
                    axios.post('/transaction', {
                        recipient: this.outgoingTx.recipient,
                        amount: this.outgoingTx.amount
                    })
                        .then(function(response){
                           vm.error = null;
                           vm.success = response.data.message
                           vm.funds = response.data.funds
                           vm.txLoading = false
                        })
                        .catch(function(error) {
                            vm.success = null;
                            vm.error = error.response.data.message
                            vm.txLoading = false
                        });
                },
                onMine: function() {
                    var vm = this
                    axios.post('/mine')
                        .then(function(response){
                           vm.error = null;
                           vm.success = response.data.message
                           vm.funds = response.data.funds
                        })
                        .catch(function(error) {
                            vm.success = null;
                            vm.error = error.response.data.message
                        });
                },
                onResolve: function () {
                    var vm = this
                    axios.post('/resolve-conflicts')
                        .then(function(response){
                           vm.error = null;
                           vm.success = response.data.message
                        })
                        .catch(function(error) {
                            vm.success = null;
                            vm.error = error.response.data.message
                        });
                },
                onLoadData: function () {
                    if (this.view === 'chain') {
                        // Load blockchain data
                        var vm = this
                        this.dataLoading = true
                        axios.get('/chain')
                            .then(function (response){
                                vm.blockchain = response.data
                                vm.dataLoading = false
                            })
                            .catch(function(error){
                                vm.dataLoading = false
                                vm.error = 'Something went wrong.'
                            })
                    } else {
                        // Load transaction data
                        var vm = this
                        this.dataLoading = true
                        axios.get('/transactions')
                            .then(function (response){
                                vm.openTransactions = response.data
                                vm.dataLoading = false
                            })
                            .catch(function(error){
                                vm.dataLoading = false
                                vm.error = 'Something went wrong.'
                            })
                    }
                }
            }
        })
    </script>
</body>

</html>
亦是远方
关注
  • 25
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
api-request-node.html.ftl
03-31
对应博客 https://blog.csdn.net/zhangjikuan/article/details/115347051 使用
Node.js简介
mantou_riji的博客
05-27 3万+
文章目录Node.js简介基本含义和产生原因nodejs特点nodejs的用途node.js的基本使用 Node.js简介 基本含义和产生原因 Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平合JavaScript运行环境。 node.js把js的战场从浏览器转移到服务器，可以进行更多的操作。 用户请求和响应的过程： Node.js的产生原因要追溯到服务器的阻塞问题： 传统服务器每次产生一个请求，就对应着一个线程。 那么就有一个问题：请求的速度由用户决定，响应的速度也可以通过提
Node.js最新版黑马配套笔记
热门推荐
shenruiaaa的博客
03-17 3万+
1. 初识node.js与内置模块 1.1 回顾与思考 浏览器中的javaScript的组成部分 JS核心语法 webAPI 为什么JavaScript可以再浏览器中被执行？ 待执行的JS代码 JS解析引擎 不同的浏览器使用不同的JS解析引擎 为什么JS可以操作DOM还有BOM? 每个浏览器中内置了DOM，BOM这样的API函数，因此浏览器中的javaScript才可以调用它们 浏览器中JS的运行环境 运行环境是指代码正常运行所需要的必要环境 Chrome浏览器运行环境： V8引擎和内置API函数 v
node.js 常用命令
weixin_73510682的博客
03-29 3819
19. npm config set registry=https://registry.npm.taobao.org/ 把下包的地址切换为国内的淘宝服务器。20.npm config set registry https://registry.npmjs.org 把下包的地址切换为国外服务器。17. npm install/i -g #全局安装(-g代表全局安装，不会在package.json中看到)
html怎么调用node.js,javascript – 在HTML中使用Node.js模块
weixin_32281549的博客
06-04 3660
我有以下Node.js项目(这是我的问题的最小工作示例)：module1.js：module.exports = function() {return "this is module1!";};module2.js：var module1 = require('./module1');module.exports = function() {return module1()+" and this ...
Node.js简介——为什么要学习node.js
星河梦~的博客
08-31 5238
目录什么是node.js为什么要学习node.jsnode.js特点 什么是node.js Node.js简称Node，是一个可以使JavaScript运行在服务器端的开发平台。 （1）Node.js本是一种Web前端语言，Node.js让JavaScript成为服务器端脚本语言。 （2）Node.js将V8引擎封装起来，作为服务器运行平台，以执行JavaScript编写的后端脚本程序。 （3）Node.js是跨平台的，能运行在Windows、macOS和Linux平台上。 （4）Node.js除了自己
node.js时钟案例
04-13
定义处理CSS方法：resolveCSS(htmlStr) 定义处理JS方法：resolveJS(htmlStr) 定义处理HTML方法：resolveHTML(htmlStr)
直接从DOM / WebWorker调用所有Node.js模块，并启用一种使用所有Web技术编写应用程序的新方式。-Node.js开发
05-27
node-webkit重命名为NW.js官方网站：https://nwjs.io简介NW.js是基于Chromium和node.js的应用程序运行时。 您可以使用NW.js用HTML和JavaScript编写本机应用程序。 它还可以让您调用Node。 node-webkit重命名为NW.js...
node.js登录注册界面.zip
09-20
后台首页登录注册修改密码修改信息修改头像
node.js 使用ejs模板引擎时后缀换成.html
01-01
这是一个小技巧，看着.ejs的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。 1.在app.js的头上定义ejs: 代码如下: var ejs = require(‘ejs’); 2.注册html模板引擎： 代码如下: app....
用html写一个旋转菜单
liulang68的博客
04-24 907
【代码】用html写一个旋转菜单。
Web前端开发之HTML_3
zx1026409886的博客
04-23 997
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
基于java,SpringBoot和HTML实验室预约管理系统设计
程序猿大波的博客
04-23 621
本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统，以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计，后端使用Spring Boot框架进行开发，前端使用HTML进行页面设计，实现了用户登录、实验室预约、查看预约状态以及管理员对实验室的管理等功能。首先，系统通过Spring Boot实现了快速开发和部署，简化了项目的配置和管理。
用html画一个四叶草
liulang68的博客
04-20 1603
以上是部分代码，需要请看主页加联系方式。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1075
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
html笔记 ai问答
qq_50437196的博客
04-23 580
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
python爬虫 - 爬取html中的script数据（36kr.com新闻信息）
BullKing8185的博客
04-23 500
python爬虫 - 爬取html中的script数据（36kr.com新闻信息） 1. 分析页面内容数据格式 2. 使用re.findall方法，爬取新闻 3. 使用re.search 方法，爬取新闻
html如何实现按钮跳转，以及访问随机跳转
最新发布
weixin_42759398的博客
04-29 197
html如何实现按钮跳转，以及访问随机跳转。需求看似很冷门，实际上这个对应我上一篇文章。
前端入门：HTML（列表和边框案例）
yscy0801的博客
04-22 516
新手前端适合买什么笔记本？28岁转前端来得及吗？前端面试如何谈高薪？大厂前端招聘中的内幕在线解答问题
html node.js
08-25
HTML文件无法直接使用Node.js的模块和函数，因为浏览器不支持Node.js的require、module.exports等功能。如果直接在HTML文件中使用Node.js代码，例如在script标签中调用require函数，浏览器会抛出错误。 为了解决这个问题，可以使用Browserify来打包Node.js代码。首先，需要创建一个名为main.js的文件，并在其中使用require函数引入所需的模块，然后通过Browserify将该文件打包为可在浏览器中运行的脚本。 具体步骤如下： 1. 创建一个名为main.js的文件，使用require函数引入所需的模块，并在需要的地方调用相应的函数或方法。 2. 在终端中使用Browserify命令将main.js文件打包为浏览器可识别的脚本，例如执行命令：browserify main.js -o bundle.js。 3. 在HTML文件中引入打包后的脚本bundle.js，可以通过script标签的src属性引入。 通过以上步骤，就可以在HTML文件中使用Node.js的功能了。使用Browserify将Node.js代码打包后，浏览器能够正确地解析和执行包含Node.js模块的JavaScript代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在HTML运行nodeJS的练习](https://blog.csdn.net/qq_62957906/article/details/129438948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦是远方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值