合約量化系統開發技術詳細及原始碼

MrsFu123發表於2022-05-27
原始碼

　　建立智慧合約


　　目前以太坊官方全力支援的智慧合約開發環境是Remix IDE，我們在合約編輯頁面編寫如下程式碼：


　　pragma solidity^0.4.21;


　　contract InfoContract{


　　string fName;


　　uint age;


　　function setInfo(string _fName,uint _age)public{


　　fName=_fName;


　　age=_age;


　　}


　　function getInfo()public constant returns(string,uint){


　　return(fName,age);


　　}


　　}


建立 UI



在專案目錄下建立index.html，在這裡我們將建立基礎的 UI，功能包括name和age的輸入框，以及一個按鈕，這些將透過 jQuery 實現：




<!DOCTYPE html>

<html>

<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>Document</title>


    <link rel="stylesheet" type="text/css" href="main.css">


    <script src="./node_modules/web3/dist/web3.min.js"></script>


</head>

<body>

    <div>


        <h1>Info Contract</h1>


        <h2 id="info"></h2>


        <label for="name" class="col-lg-2 control-label">Name</label>

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


        <label for="name" class="col-lg-2 control-label">Age</label>

        <input id="age" type="text">


        <button id="button">Update Info</button>



    </div>


    <script src="


    <script>

       // Our future code here..

    </script>


</body>

</html>


接下來需要編寫main.css檔案設定基本的樣式：




body {

    background-color:#F0F0F0;

    padding: 2em;

    font-family: 'Raleway','Source Sans Pro', 'Arial';

}

.container {

    width: 50%;

    margin: 0 auto;

}

label {

    display:block;

    margin-bottom:10px;

}

input {

    padding:10px;

    width: 50%;

    margin-bottom: 1em;

}

button {

    margin: 2em 0;

    padding: 1em 4em;

    display:block;

}


#info {

    padding:1em;

    background-color:#fff;

    margin: 1em 0;

}


使用Web3與智慧合約互動



UI 建立好之後，在<script>標籤中間編寫web.js的程式碼與智慧合約互動。首先建立web3例項，並與我們的測試環境連線：




<script>

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

        web3 = new Web3(web3.currentProvider);

    } else {

        // set the provider you want from Web3.providers

        web3 = new Web3(new Web3.providers.HttpProvider("));

    }

</script>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69993319/viewspace-2897590/，如需轉載，請註明出處，否則將追究法律責任。

相關文章