136孤荷凌寒自学第0222天_区块链第136天NFT033

笔记合集在github上:

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

 

【主要内容】

今天继续自己开始写一个前端html页来与合约进行交互,共耗时40分钟。

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

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

【交易界面的Html页面】

```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>非同质化资产</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="nftexchange_abi.js"></script>

    <script language="javascript" type="text/javascript" src="nftexchange_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 />

 

        <!--============================================-->

        <hr />

        <span>出售资产:</span>

        <br />

        <span>要出售的资产ID:</span>

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

        <br />

        <span>出售价格:</span>  

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

        <br />             

        <input type="button" value="确定出售" id="cmdsale" name="cmdsale" onclick="cmdsale_click();" />

        <br />

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

        <br /><br />       

 

       <!--============================================-->

        <hr />

        <span>购买资产:</span>

        <br />

        <span>要购买的资产ID:</span>

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

        <br />

        <span>出价:</span>   

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

        <br />             

        <input type="button" value="确认购买" id="cmdbuy" name="cmdbuy" onclick="cmdbuy_click();" />

        <br />

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

        <br /><br />       

 

 

 

      

    </div>

   

</body>

</html>

```

 

【交易界面的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;

        }

    }

 

//获取指定id的select标签选中value或text

function getAselectValueOrText(strid,isvalue){

    try {

        var obj=document.getElementById(strid);

        var intindex=obj.selectedIndex;

        if(isvalue==true){

            return obj.options[intindex].value;

        }else{

            return obj.options[intindex].text;

        }

    } catch (error) {

        return "";

    }

}

//得到bool类型的值   https://blog.csdn.net/asdfgh0077/article/details/103365856 第七楼

function parseBool(value) {

    if (typeof value === "boolean") return value;

 

    if (typeof value === "number") {

        return value === 1 ? true : value === 0 ? false : undefined;

    }

 

    if (typeof value != "string") return undefined;

 

    return value.toLowerCase() === 'true' ? true : 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;

            //----下面是exchange.sol的合约地址

            var heyueAddress='0xD743566eab537F268759DF6723280D866764F1b8';

 

            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);

        }

        });

 

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

   

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

 

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

           //9--查询指定节点的NFT资产列表-----

           function cmdnine_click(){

            try{

                tokensOf();

            }catch(err){

                alert(err);

            }

        }

        //--查询指定节点的资产列表---

            function tokensOf(){

                try{

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

                    if(a!=""){

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

                        if(!error)

                        {

                            if(result.length>0){

                                var strls="此节点拥有以下ID的资产:\n";

                                for(var i=0;i<result.length;i++){

                                    strls=strls + result[i] + "\n";

                                    document.getElementById("spanfornine").innerText=strls;

                                }

 

                            }else{

                                document.getElementById("spanfornine").innerText="此节点没有任何资产";

                            }

 

                        }

                        else{

                            //alert(error);

                            document.getElementById("spanfornine").innerText=error;

                        }});

                        //return "ok"

                        document.getElementById("spanfornine").innerText="正在查询...";

                    }else{

                        document.getElementById("spanfornine").innerText="请先输入合约地址。";

                    }

 

                }catch(err){

                    document.getElementById("spanfornine").innerText='出错 :' + err;

                }

            }

 

 

 

//=------------------------------------------------------------------------------

//----挂单出售资产----------------------

            function cmdsale_click(){

                var id=""; //资产的id

                var strvalue="";

                try {

 

                    id=document.getElementById("idforsale").value;

                    strvalue=document.getElementById("value").value;

           

                    if(isNumber(id)==false){

                        alert("资产ID必须是一个数字");

                        return false;

                    }

                    if(isNumber(strvalue)==false){

                        alert("金额必须是一个数字");

                        return false;

                    }

 

                } catch (error) {

                    alert("在准备挂单出售资产时出错:" + error);

                    return false;

                }

 

                try{

                    web3.eth.getTransactionCount(web3.eth.defaultAccount,function(err,res){

                        if(!err){

                            //alert(res);web3.toWei(intvalue,'ether')

                            var message = {to:heyueAddress,value:0,'chainId': 3,'gas': 300000,'gasPrice': web3.toWei('40', 'gwei'),'nonce': res};

                           

                            var flvalue=parseFloat(strvalue);

                            var intvalue=flvalue * (10 ** 18);

 

                            cc.sell(id,intvalue,message,function(err, res){

                                var output = "";

                                if (!err) {

                                    output += res;

                                } else {

                                    output = err;

                                }

                                //----listendonate();

                                document.getElementById('spanforsale').innerHTML = "返回信息:Transaction response= " + output + "<br />";

                            });

                            return true;

                        }else{

                            alert(err);

                        }

                    });

                    document.getElementById('spanforsale').innerHTML = "操作执行中...";

                }catch(err){

                    alert('执行单个资产挂单出售时出错:' + err);

                    document.getElementById('spanforsale').innerHTML = "执行失败:Transaction response= " + output + "<br />";

                    return false;

                } 

 

            }

 

 

//=------------------------------------------------------------------------------

//----购买资产----------------------

function cmdbuy_click(){

    var id=""; //资产的id

    var strvalue="";

    try {

 

        id=document.getElementById("idforbuy").value;

        strvalue=document.getElementById("buyvalue").value;

 

        if(isNumber(id)==false){

            alert("资产ID必须是一个数字");

            return false;

        }

        if(isNumber(strvalue)==false){

            alert("出价金额必须是一个数字");

            return false;

        }

 

    } catch (error) {

        alert("在准备购买资产时出错:" + error);

        return false;

    }

 

    try{

        web3.eth.getTransactionCount(web3.eth.defaultAccount,function(err,res){

            if(!err){

                //alert(res);web3.toWei(intvalue,'ether')

                var flvalue=parseFloat(strvalue);

                var intvalue=flvalue * (10 ** 18);

 

                var message = {'to':heyueAddress,'value':intvalue,'chainId': 3,'gas': 300000,'gasPrice': web3.toWei('40', 'gwei'),'nonce': res};

               

                cc.buy(id,message,function(err, res){

                    var output = "";

                    if (!err) {

                        output += res;

                    } else {

                        output = err;

                    }

                    //----listendonate();

                    document.getElementById('spanforbuy').innerHTML = "返回信息:Transaction response= " + output + "<br />";

                });

                return true;

            }else{

                alert(err);

            }

        });

        document.getElementById('spanforbuy').innerHTML = "操作执行中...";

    }catch(err){

        alert('执行单个资产购买时出错:' + err);

        document.getElementById('spanforbuy').innerHTML = "执行失败:Transaction response= " + output + "<br />";

        return false;

    } 

 

}

 

 

        

```

今天并没有成功完成测试。

 

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

 

 

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

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

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

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

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

【请注意】

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

【请注意】

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

【请注意】

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

期待与你并肩奔赴未来!

 

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

 

 

 

【原文地址】

https://www.941xue.com/content.aspx?k=941XUEPCYRWH01167031755179838603

【同步语音笔记】

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

 

【学习过程屏幕录屏】

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

上一篇:前端周刊第六期


下一篇:食品膨化剂的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告