129孤荷凌寒自学第0215天_区块链第129天NFT026

 

【主要内容】

今天继续自己开始写一个前端html页来与合约进行交互,效率比昨天还低下,完成了第三个和第四个合约调用项的成功测试。共耗时41分钟。

(此外整理作笔记花费了约26分钟)

详细学习过程见文末学习过程屏幕录像。

【新的Html前端页面】

```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>DU da xiao</title>

    <script language="javascript" type="text/javascript" src="jquery.min.js"></script>

    <script language="javascript" type="text/javascript" src="web3.min.js"></script>

    <!-- 1. Include cryptozombies_abi.js here -->

    <script language="javascript" type="text/javascript" src="nft_abi.js"></script>

    <script language="javascript" type="text/javascript" src="nft_main.js"></script>

 

       

</head>

<body>

    <div>

        <p>

            nft资产合约地址:

        </p>

        <p id="contractaddress" name="contractaddress">

 

        </p>

        <p id="goal" name="goal">

 

        </p>

 

        <p id="firstinfo" name="firstinfo">

 

        </p>

 

        <p id="accountsinfo" name="accountsinfo">

 

        </p>

        <p id="curinfo" name="curinfo">

 

        </p>

   

    </div>

    <div>

        <input type="text" value="" id="txtaddressforone" name="txtaddressforone" />

        <input type="button" value="查询指定节点资产总量" id="cmdone" name="cmdone" onclick="cmdone_click();" />

       

        <span id="total" name="total"></span>

        <br /><br />

 

        <input type="text" value="" id="txtnftidfortwo" name="txtnftidfortwo" />

        <input type="button" value="查询指定id的NFT是否存在" id="cmdone2" name="cmdone2" onclick="cmdone2_click();" />

        <span id="total2" name="total2"></span>

        <br /><br />

 

        <input type="text" value="" id="txtnftidfortwo2" name="txtnftidfortwo2" />

        <input type="button" value="查询指定id的NFT已授权给哪个节点地址" id="cmdtwo" name="cmdtwo" onclick="cmdtwo_click();" />

        <span id="spanapprove" name="spanapprove"></span>

        <br /><br />

 

        <span>查询所有资产的授权关系是否存在</span>

        <br />

        <span>授权方节点地址:</span>

        <input type="text" value="" id="txtaddressforthreeholder" name="txtaddressforthreeholder" />

        <br />

        <span>受托方节点地址:</span>

        <input type="text" value="" id="txtaddressforthreeoperator" name="txtaddressforthreeoperator" />

        <br />      

        <input type="button" value="查询所有资产完全授权状态是否存在" id="cmdthree" name="cmdthree" onclick="cmdthree_click();" />

        <br /> 

        <span id="allapproveaddress" name="allapproveaddress"></span>

        <br /><br />

```

nftmain.js的内容:

```

function isNumber(val) { //https://www.cnblogs.com/wangyunhui/p/8981813.html

    var regPos = /^\d+(\.\d+)?$/; //非负浮点数

    var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数

    if(regPos.test(val) || regNeg.test(val)) {

        return true;

        } else {

        return false;

        }

    }

 

// 格式化日期,如月、日、时、分、秒保证为2位数

function formatNumber (n) {

    n = n.toString()

    return n[1] ? n : '0' + n;

}

// 参数number为毫秒时间戳,format为需要转换成的日期格式

function formatTime (number, format) {

    let time = new Date(number)

    let newArr = []

    let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']

    newArr.push(time.getFullYear())

    newArr.push(formatNumber(time.getMonth() + 1))

    newArr.push(formatNumber(time.getDate()))

 

    newArr.push(formatNumber(time.getHours()))

    newArr.push(formatNumber(time.getMinutes()))

    newArr.push(formatNumber(time.getSeconds()))

 

    for (let i in newArr) {

        format = format.replace(formatArr[i], newArr[i])

    }

    return format;

}

 

 

            //声明一些钱包地址:

            //下面一行定义的是部署合约的节点(创世节点)的信息,公钥

            var wallet_address="0x5227C3EF48B5A1bcF784593e46D9579D26a3b592"; //狐狸钱包的公钥,就是钱包地址,是eth网络上的一个节点。

            //下面一行定义的是节点2的信息

            var w2add="0xe2d6c2f289c53B5aEA44C47293Ba179a3bfa21f0"; //公钥

   

            //下面一行定义的是节点3 的信息

            var w3add="0xb40599fB0366DCf0ffe86677b005b3f20Dfa29aE"; //公钥

   

            //下面一行定义的是节点4 的信息

            var w4add="0x70c8461366d5368B1E79CBFc2Acf4ba56C745977"; //公钥

   

   

  

            // 2. Start code here

            var cc;

            var web3;

            //----下面是StandardAssetRegistryTest的合约地址

            var heyueAddress='0xeD4202E35c63EDfDC38Fff34100Ac86217960DD3';

 

            function startApp() {

                try {

                    $("#contractaddress").html(heyueAddress);

                    var ccc=web3.eth.contract(nftABI);

                    cc=ccc.at(heyueAddress); //https://www.cnblogs.com/tinyxiong/p/9046626.html

                    //cc =new web3.eth.contract(cryptozombiesABI, cryptoZombiesAddress); //如果是另一个版本可能还得加上new关键字。

                    $("#firstinfo").html("连接上合约!")

                    //alert(typeof cc);

                    web3.eth.getAccounts(function (err, accounts) {

                            if (accounts.length == 0) {

                                $("#firstinfo").html("请检查钱包是否解锁");

                            }else{

                                $("#accountsinfo").html("获取的默认钱包地址:" + web3.eth.defaultAccount);

                                //getCurGift();

                            }

                        });

   

                } catch (err) {

                    alert(err);

                }

                $("#firstinfo").html("加载成功");

               

            }

   

            //async () =>

 

        //现在这种通过we3.min.js来加载钱包连接的方法,在metamask钱包和麦子钱包中都测试通过。

        window.addEventListener('load',function() {

        try{

            if (typeof web3 !== 'undefined') {

                web3 = new Web3(web3.currentProvider);

                startApp();

            } else {

                //$('#app_loading').hide();

                //alert(jQuery.i18n.prop('lrn_error_alert'));

                //mathWallet.closePage();

                alert("这儿没有钱包环境。");

            }

 

 

        }catch(err){

            alert(err);

        }

        });

 

        //===========================================================================================

   

            //----------------下面是自定义的与合约交互的函数-------------------------

           //--查询指定节点的NFT资产数量-----

        function cmdone_click(){

            try{

                querryaddressbalance();

            }catch(err){

                alert(err);

            }

        }

        //--查询指定节点的资产余额---

            function querryaddressbalance(){

                try{

                    var a=document.getElementById("txtaddressforone").value;

                    if(a!=""){

                        cc.balanceOf(a,function(error, result){

                        if(!error)

                        {

                            //var da=result[0];

                            //var xi=result[1];

                            //var intda=da / (10**18);

                            //var intxi=xi / (10**18);

                            $("#total").html("当前地址拥有:" + result + "个资产");

                            //alert(result);

                        }

                        else{

                            //alert(error);

                            $("#total").html('获取出错:' + error);

                        }});

                        //return "ok"

                        $("#total").html('正在获取。。。');

                    }else{

                        alert("请先填写正确的节点地址。");

                    }

 

                }catch(err){

                    $("#total").html('出错 :' + err);

                }

            }

            //---------------------------------------------------------

            //--查询指定ID的NFT资产是否存在---

                    function cmdone2_click(){

                        try{

                            var strid=document.getElementById("txtnftidfortwo").value;

                            if(isNumber(strid)==true){

                                var nid=parseInt(strid);

                                isnftexist(nid);                               

                            }

 

                        }catch(err){

                            alert(err);

                        }

                    }

           

            function isnftexist(intid){

                try{

                    cc.exists(intid,function(error, result){

                   

                    //alert(result);

                    //alert(result.toString + "---"); //如果这样写toString那么就返回一个函数对象而不是字符串,要加括号!

 

                    if(!error)

                    {

                        var strls=result.toString();

                        //alert(strls);

                        if(strls.search("true")>=0){

                            $("#total2").html("id为" + intid + "的nft资产存在。");

                        }else{

                            $("#total2").html("id为" + intid + "的nft资产不存在。");

                        }

 

                    }

                    else{

                        //alert(error);

                        $("#total2").html('获取出错:' + error);

                    }});

                    //return "ok"

                    $("#total2").html('正在获取。。。');

                }catch(err){

                    $("#total2").html('出错 :' + err);

                }

            }

//------------------------------------------------------------------------------------   

        //查询指定ID的NFT资产已授权给哪个节点地址

        function cmdtwo_click(){

            try{

                var strid=document.getElementById("txtnftidfortwo2").value;

                if(isNumber(strid)==true){

                    var nid=parseInt(strid);

                    getApproved(nid);                               

                }               

            }catch(err){

                alert(err);

            }

        }

 

            //查询指定ID的NFT资产已授权给哪个节点地址

            function getApproved(intid){

                try{

                    cc.getApproved(intid,function(error, result){

                    //alert(result);

                    if(!error)

                    {

                        var strls=result.toString();

                        if(strls.search("0x0000000000000000000000000000000000000000")>=0){

                            document.getElementById("spanapprove").innerText="此资产并没有授权给任何节点";

                        }else{

                            document.getElementById("spanapprove").innerText="此资产已授权给:" + result;

                        }

                    }

                    else{

                        //alert(error);

                        document.getElementById("spanapprove").innerText='获取出错:' + error;

                    }});

                    //return "ok"

                    document.getElementById("spanapprove").innerText='正在获取。。。';

                }catch(err){

                    alert("使用授权代币转移时出错 :" + err)

                    return err;

                }

            }

 

//----------------------------------------------------------------------------------------

            //--查询一个节点是不是向另一个节点授权了所有资产的操作权-----------------

            function cmdthree_click(){

                try{

                    var strholder=document.getElementById("txtaddressforthreeholder").value;

                    var stroperator=document.getElementById("txtaddressforthreeoperator").value;

                    //alert(strholder);

                    //alert(stroperator);

                    if(strholder!="" && stroperator!=""){

                        isApprovedForAll(strholder,stroperator);

                    }else{

                        alert("请先输入两个节点的地址。");

                    }

                }catch(err){

                    alert(err);

                }

            }

 

 

            function isApprovedForAll(strholder,stroperator){

                try{

                    alert(strholder);

                    alert(stroperator);

                    cc.isApprovedForAll(strholder,stroperator,function(error, result){

                    if(!error)

                    {

                        var strls=result.toString();

                        //alert(strls);

                        if(strls.search("true")>=0){

                            document.getElementById("allapproveaddress").innerText='授权关系存在。';

                        }else{

                            document.getElementById("allapproveaddress").innerText='授权关系不存在。';

                        }

 

                    }

                    else{

                        //alert(error);

                        document.getElementById("allapproveaddress").innerText='获取出错:' + error;

                    }});

                    //return "ok"

                    document.getElementById("allapproveaddress").innerText='获取中.....';

                }catch(err){

                    alert("查询出错:" + err)

                    return err;

                }

            }

```

【整理的js的相关内容】

1.js中居然没有原生的trim()这样的字符串方法 。

2.js中的subString()方法是获取指定起始字符之间的子字符串的方法

JavaScript substring() 方法

(来自于:https://www.w3school.com.cn/js/jsref_substring.asp

stringObject.substring(start,stop)

参数描述

start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。

stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。

说明

substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。

如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。

3.js中判断一个字符串是否包含另一个字符串,使用

(1)search()方法

(2)indexOf方法

这两个方法都是字符串对象的方法。返回起始字符位置的index值(从0开始计数)

4.关于toString()方法

最开始使用在判断表达式中出错。后面单独写成一行语句又正确。

使用时一定要加方法后面的括号。

5.常见错误

今天又犯了一次最低级的常见错误

正确的写法:

```

var strholder=document.getElementById("txtaddressforthreeholder").value;

var stroperator=document.getElementById("txtaddressforthreeoperator").value;

```

错误写法:

```

var strholder=document.getElementById("txtaddressforthreeholder");

var stroperator=document.getElementById("txtaddressforthreeoperator");

```

就算按错误的写法,在下面的代码执行字符串是否为空的检查时,不会出现异常,还会把值传递出去。

```

                    if(strholder!="" && stroperator!=""){

                        isApprovedForAll(strholder,stroperator);

                    }else{

                        alert("请先输入两个节点的地址。");

                    }

```

会把获取到的两个element对象直接传递给函数:isApprovedForAll

直到与智能合约交互时,合约会因为收到了两个element对象而报错。

 

 

github: https://github.com/lhghroom/Self-learning-blockchain-from-scratch

原文地址:

 

 

【欢迎大家加入[就是要学]社群】

如今,这个世界的变化与科技的发展就像一个机器猛兽,它跑得越来越快,跑得越来越快,在我们身后追赶着我们。

很多人很早就放弃了成长,也就放弃了继续奔跑,多数人保持终身不变的样子,原地不动,成为那猛兽的肚中餐——当然那也不错,在猛兽的逼迫下,机械的重复着自我感觉还良好地稳定工作与生活——而且多半感觉不到这有什么不正常的地方,因为在猛兽肚子里的是大多数人,就好像大多数人都在一个大坑里,也就感觉不出来这是一个大坑了,反而坑外的世界显得有些不大正常。

为什么我们不要做坑里的大多数人?

因为真正的人生,应当有百万种可能 ;因为真正的一生可以有好多辈子组成,每一辈子都可以做自己喜欢的事情;因为真正的人生,应当有无数种可以选择的权利,而不是总觉得自己别无选择。因为我们要成为一九法则中为数不多的那个一;因为我们要成为自己人生的导演而不是*成为别人安排的戏目中的演员。

【请注意】

就是要学社群并不会告诉你怎样一夜暴富!也不会告诉你怎样不经努力就实现梦想!

【请注意】

就是要学社群并没有任何可以应付未来一切变化的独门绝技,也没有值得吹嘘的所谓价值连城的成功学方法论!

【请注意】

社群只会互相帮助,让每个人都看清自己在哪儿,自己是怎样的,重新看见心中的梦想,唤醒各自内心中的那个英雄,然后勇往直前,成为自己想要成为的样子!

期待与你并肩奔赴未来!

 

QQ群:646854445 (【就是要学】终身成长)

 

 

 

【原文地址】

https://www.941xue.com/content.aspx?id=1749

【同步语音笔记】

https://www.ximalaya.com/keji/19103006/361330893

 

【学习过程屏幕录屏】

https://www.bilibili.com/video/BV1YD4y1R7US

上一篇:129. Sum Root to Leaf Numbers


下一篇:7-129 最佳情侣身高差 (10分)