如何使用Node-js在智能契约和HTML文件之间创建交互？

Question

我的信托项目是一份合同，上面显示了Yerevan is love：

pragma solidity ^0.5.12;

contract TEST{
string public note="Yerevan is love";
function rep() public view returns(string memory){
return note;
}
}

通过下面的代码，我可以在Node-js中看到Yerevan is love：

var Web3=require('web3');
var web3=new Web3('ws://localhost:8545');
var test_json='C:/Users/lenovo/node_modules/Yerevan/build/contracts/TEST.json';
var test_js=JSON.parse(fs.readFileSync(test_json));
var test_abi=test_js.abi;
var test_sol=new web3.eth.Contract(test_abi, '0xb198a5509138b265234BbD357F77cF44350e10D1');   
    test_sol.methods.rep().call().then(function(o){console.log(o);});

我想在浏览器中看到结果。如何通过Node-js在智能契约和HTML文件之间创建交互以在浏览器中查看结果？如果是，请为初学者提供适当的代码和指南。

Answer 1

要在浏览器中查看智能契约的结果，您应该有一个包含一些代码的.html文件。我们叫它index.html。我们假设其目的是在浏览器中用Yerevan is love表示alert();。此外，我们假设1408是您在其上工作的端口，每当html请求是message-representation时，就表示给定的数据。用户可以根据自己的意愿更改这些值。这里提供的代码将JavaScript命令放在Node-js中，我们认为TEST是预先部署的。

我们需要使用一个.jade文件。为此，你需要知道什么是引擎帕格和它的应用。为了做一个介绍，我们提供了一个概述的链接：https://www.sitepoint.com/a-beginners-guide-to-pug/

在下面的文章中，我们将看到如何创建一个.jade文件。

现在，我们经历了以下步骤：

0-使用以下命令安装项目目录所需的模块：

`npm install jade`

`npm install pug`

`npm install express`

`npm install body-parser`

`npm install fs`

1-打开通常称为app.js的Node-js文件，并通过在文件中编写以下代码应用一些模块：

    var Web3=require("web3");
    var web3=new Web3("ws://localhost:8545");//if your port is other than 8545 put it instead.
    var express=require("express");
    var fs=require("fs");
    var bodyParser=require("body-parser");
    var app=express();
        app.use(bodyParser.json());
        app.use(bodyParser.urlencoded({extended:false}));
      app.use(express.static("C:/Users/lenovo/node_modules/Yerevan/src/js"));

2-编写下面的代码，以便与Engine PUG一起工作：

app.set("view engine","pug");
app.set("views","./view");//shows the directory that index.jade is there.

3-添加以下代码来定义已部署的智能契约：

    var test_json="C:/Users/lenovo/node_modules/Yerevan/build/contracts/TEST.json";
    var test_js=JSON.parse(fs.readFileSync(test_json));
    var test_abi=test_js.abi;

4-使用以下代码连接已定义的智能契约：

app.get("/message-representation", async function(request, response){//This line is to respond against the html request with .../message-representation.
        var test=new web3.eth.Contract(test_abi," 0xb198a5509138b265234BbD357F77cF44350e10D1");
        var result=await test.methods.fname().call()//Using .call() this transaction won't be recorded in the ledger.
        //var result=await test.methods.fname().send({from: "0x1FE41Da4Df440D72dC598a430AF783d51De4d92C", gas: 100000, gasPrice:10000});//Using .send() this transaction will be recorded in the ledger but you will see an object not its value.
        //Just one of two above commands must be applied.
            response.render('index.jade', {data:result});//This line returns contract's data to the browser.
        });

通过下面的代码，我们告诉Node-js侦听给定的端口：

app.listen(1408, err=>{console.log("Processing ...")});

6-在适当的行中用index.html编写以下命令：

alert("#{data}");

通常，"#{X}"在index.html文件中是节点js中相同的变量X，智能契约的数据值被分配给该变量。在本例中，我们称之为data。

7-转到html2jade.org，复制和粘贴整个index.html代码。将生成一个html文件的玉版本。将玉石文本复制并粘贴到文件中，并将其保存为index.jade和步骤2(“./view”)中确定的路径。

8-激活节点js。打开浏览器并输入以下html请求：

localhost:1408/message-representation

9-见结果。

解决方案的完整代码：

var Web3=require("web3");
var web3=new Web3("ws://localhost:8545");//if your port is other than 8545 put it instead.
var express=require("express");
var fs=require("fs");
var bodyParser=require("body-parser");
var app=express();
       app.use(bodyParser.json());
       app.use(bodyParser.urlencoded({extended:false}));
       app.use(express.static("E:/Emrooz/src/js"));
       app.set("view engine","pug");
       app.set("views","./view");//shows the directory that index.jade is there.
    var test_json="E:/Emrooz/build/contracts/TEST.json";
    var test_js=JSON.parse(fs.readFileSync(test_json));
    var test_abi=test_js.abi;
       app.get("/message-representation", async function(request, response){//This line is to respond against the html request with .../message-representation.
        var test=new web3.eth.Contract(test_abi,"0x955e2139A28111203C0a648d0513b302F7Af079C");
        var result=await test.methods.fname().call()//Using .call() this transaction won't be recorded in the ledger.
        //var result=await test.methods.fname().send({from: "0x1FE41Da4Df440D72dC598a430AF783d51De4d92C", gas: 100000, gasPrice:10000});//Using .send() this transaction will be recorded in the ledger but you will see an object not its value.
        //Just one of two above commands must be applied.
            response.render('index.jade', {data:result});//This line returns contract's data to the browser.
        });
       app.listen(1408, err=>{console.log("Processing ...")});