如何使用 Node-js 在智能合約和 HTML 文件之間創建互動？

我的 Truffle 項目就是這份契約，它只顯示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;
}
}

通過以下程式碼，我可以Yerevan is love在 Node-js 中看到：

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 文件之間創建互動，以在瀏覽器中查看結果？如果是，請提供適當的程式碼和初學者指南。

要在瀏覽器中查看智能合約的結果，您應該有一個.html包含一些程式碼的文件。我們稱之為index.html。我們假設目的是Yerevan is love在瀏覽器中使用alert();. 此外，我們假設1408是您在其上工作的埠，並且每當 html 請求是message-representation給定數據時都會被表示。使用者可以根據需要更改這些值。此處提供的程式碼將 JavaScript 命令放入 Node-js 中，我們假設已TEST預先部署。

我們需要使用一個.jade文件。為此，您需要了解什麼是 Engine PUG 及其應用程序。為了進行介紹，我們提供此連結到概述：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`

app.js1-通過在文件中編寫以下程式碼，打開通常呼叫並應用一些模組的 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.
       });

5- 通過下面的程式碼，我們告訴 Node-js 監聽給定的埠：

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

index.html6-在適當的行中寫入以下命令：

alert("#{data}");

通常， "#{X}"in file 是Node-js 中分配智能合約數據值的index.html同一個變數。X在這個例子中，我們稱之為data。

7- 轉到html2jade.org並複制並粘貼那裡的整個程式碼index.html。將生成 html 文件的翡翠版本。將玉文本複制並粘貼到文件中，並將其另存為index.jade步驟 2 中確定的路徑（“./view”）。

8-啟動Node-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 ...")});

引用自：https://ethereum.stackexchange.com/questions/79840