“基于以太坊的去中心化电商DApp”程序说明文档

项目下载地址：基于以太坊的去中心化电商DApp
项目调研报告：去中心化电商平台调研报告

文章目录

五、代码实现

一、项目概述

1.1 项目名称

基于以太坊的去中心化电商DApp

1.2 项目用途

使用区块链、星际文件系统（IPFS）、Node.js和MongoDB来构建电商平台类似淘宝的在线电商应用，卖家可以自由地出售商品，买家可以自由地购物。

二、需求分析

eBay或淘宝这样的C2C电商平台已经获得了巨大成功，因为它使得买卖双方都相当便利。

在互联网成为主流之前，人们只能在小范围内、或者在邻里之间买卖商品。当越来越多的人使用互联网，出现了像eBay这样的平台，无论来自世界的任何一个地方，你都可以在网上买卖商品。无论是商家还是消费者，这样的平台都有其价值。

尽管eBay这样的平台方便了大家，也改善了贸易和经济，但它也存在一些缺点：

被平台束缚。参与的商家受制于拥有平台的企业。在任何时候，平台拥有者可以自行决定在是否对某个商家进行封号处理，而如果商家严重依赖于平台，那么账号被封就是一个巨大的打击。
商家费用高。商家上架商品要交费，售出商品也要交佣金。收费本身并没有错，毕竟eBay这样的平台提供了服务。但是，上架费有时太高了，这导致商家最后盈利很少，或是将成本转嫁到消费者身上。
数据失控。商家或消费者都无法拥有本应属于自己的数据。评论、购买历史等等所有数据都为平台拥有者所有。比如，如果一个商家想要换一个提供商，或者想要导出商品评论或是其他数据都非常不容易，甚至不可能。

在以太坊上构建的去中心化电商平台就解决了这些问题：商家的账户不会被封；数据也是公开的，所以很容易导出数据；相对于中心化的平台，交易佣金也会低得多。

三、系统功能模型

在这个项目中将要实现的主要功能特性：

商品上架：应用应该支持卖家上架商品进行销售。我们将实现让任何人自由上架商品的功能。

商品浏览与搜索：应用应该支持买家方便地浏览商品列表。我们会实现浏览商品的功能，以及基于商品类别、拍卖时间等条件进行查询的功能。

商品拍卖：跟eBay一样，我们会实现维科瑞拍卖方式的商品竞价销售。由于以太坊上的一切交易都是公开的，因此我们的实现将会与中心化环境下有所不同。

资金托管：一旦出价结束，商品拍卖有了赢家以后，我们会创建由胜出的买方、卖方和任意第三方参与的托管合约，由托管合约来管理交易资金。

托管资金保护：为了保护托管资金，我们将采用多重签名（2/3）来实现防欺诈保护，即三个参与者有两个同意时，才会将托管资金释放给卖方，或是将托管资金返还给买方。

为了便于查询，我们会将商品数据同时存在链上和链下（数据库）；同时，为了避免图片等数据占用昂贵的链上存储，我们将把图片和商品描述信息上传到同样去中心化的IPFS网络。

四、系统设计

4.1 总体设计

我们将用区块链、星际文件系统（IPFS）、Node.js和MongoDB来构建电商平台类似淘宝的在线电商应用，卖家可以自由地出售商品，买家可以自由地购物：

去中心化：和淘宝或eBay不同，我们把所有的商业逻辑和核心数据都放在以太坊区块链上，这使得它成为一个完全去中心化的应用。和淘宝这样中心化的电商平台相比，一个去中心化的P2P电商应用显然有其独特的价值——至少你不用担心被平台封账户了。

IPFS：在以太坊上存储用于商品展示的图片和描述超文本十分昂贵，由于以太坊虚拟机的限制，有时甚至是不可行的。为了解决这个问题，我们将会把商品图片和商品描述信息存储在同样去中心化的星际文件系统（IPFS)中，而仅仅在链上保存这些数据的ID。

商品拍卖：对于卖家而言，拍卖显然是一种非常好的提升商品利润空间的销售手段。因此我们在课程项目中将实现去中心化环境下的维科瑞（Vickery）拍卖 —— 这非常类似于eBay的自动竞价系统，而不是简单地对商品进行固定标价。

资金托管：中心化的平台有一个优点在于它天然提供了买卖双方之间的信任中介。在去中心化的环境中，我们将使用一个多方托管合约来应对买卖双方可能的风险，托管合约采用投票机制来决定买家货款的最终流向。

链下数据存储：不要被去中心化限制我们的思维，传统的技术依然有其强大之处。我们将使用MongoDB在链下做一个同步的数据备份，以便实现单纯用区块链很难实现的功能：灵活的商品查询。

4.2 架构设计

我们将要构建的去中心化电商DApp的架构：

Web前端：web前端使用HTML/CSS/JavaScript开发，其中大量使用了web3js来访问区块链。用户将会通过这个前端应用来访问以太坊、IPFS和NodeJS服务器。

以太坊区块链：这是去中心化应用的核心，所有的代码（电商合约、资金托管合约）和交易都存储在链上，这包括所有的商品信息、买家的出价信息、商品竞价结果、资金流向投票结果等。

MongoDB：尽管核心数据存储在区块链上，但是为了方便买家对商品的检索和查询，例如只显示某一类的商品，或者显示即将过期的商品等等，我们会用MongoDB数据库来同步地存储和检索商品信息。

NodeJS服务器：这是后端服务器，我们会利用它给前端提供REST风格的API来查询商品，同时，也利用它来响应对前端静态页面的请求。

IPFS: 当卖家上架一个商品时，前端会商品图片文件和介绍文本上传到IPFS，并将所上传文件的哈希值存到链上。

五、代码实现

5.1 合约部分代码

pragma solidity ^0.4.17;

contract Adoption {

  address[16] public adopters;  // 保存领养者的地址
  uint[16] public volume = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

  // 领养宠物
  function adopt(uint petId) public returns (uint) {
    require(petId >= 0 && petId <= 15);  // 确保id在数组长度内

    adopters[petId] = msg.sender;        // 保存调用者地址 
    volume[petId]++;
    return petId;
  }

  // 返回领养者
  function getAdopters() public view returns (address[16]) {
    return adopters;
  }

  function getVolume() public view returns (uint[16]) {
    return volume;
  }

}

5.2 HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Super Market</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-push-2">
            <h1 class="text-center">Super Market</h1>
            <hr/>
            <br/>
        </div>
    </div>

    <div id="petsRow" class="row">
        <!-- PETS LOAD HERE -->
    </div>
</div>

<div id="petTemplate" style="display: none;">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default panel-pet">
            <!-- <div class="panel-heading">
              <h3 class="panel-title">Scrappy</h3>
            </div> -->
            <div class="panel-body">
                <img alt="140x140" data-src="holder.js/140x140" class="img-rounded img-center" style="width: 100%;"
                     src="https://animalso.com/wp-content/uploads/2017/01/Golden-Retriever_6.jpg"
                     data-holder-rendered="true">
                <br/><br/>
                <span class="pet-breed">Golden Retriever</span><br/>
                <strong>$</strong> <span class="pet-age">3</span><br/>
                <span class="pet-location">Warren, MI</span><br/>
                <strong>Repertory</strong>: <span class="repertory">0</span><br/><br/>
                <button class="btn btn-default btn-adopt" type="button" data-id="0">Buy</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
</body>
</html>

5.3 JavaScript代码

App = {
    web3Provider: null,
    contracts: {},

    init: async function () {
        // Load pets.
        $.getJSON('../pets.json', function (data) {
            var petsRow = $('#petsRow');
            var petTemplate = $('#petTemplate');

            for (i = 0; i < data.length; i++) {
                petTemplate.find('.panel-title').text(data[i].name);
                petTemplate.find('img').attr('src', data[i].picture);
                petTemplate.find('.pet-breed').text(data[i].breed);
                petTemplate.find('.pet-age').text(data[i].age);
                petTemplate.find('.pet-location').text(data[i].location);
                petTemplate.find('.repertory').text(data[i].repertory);
                petTemplate.find('.btn-adopt').attr('data-id', data[i].id);

                petsRow.append(petTemplate.html());
            }
        });

        return await App.initWeb3();
    },

    initWeb3: async function () {

        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
            App.web3Provider = web3.currentProvider;
        } else {
            // If no injected web3 instance is detected, fall back to Ganache
            App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
        }
        web3 = new Web3(App.web3Provider);

        return App.initContract();
    },

    initContract: function () {

        // 加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息
        $.getJSON('Adoption.json', function (data) {
            // Get the necessary contract artifact file and instantiate it with truffle-contract
            // 用Adoption.json数据创建一个可交互的TruffleContract合约实例。
            var AdoptionArtifact = data;
            App.contracts.Adoption = TruffleContract(AdoptionArtifact);

            // Set the provider for our contract
            App.contracts.Adoption.setProvider(App.web3Provider);

            // Use our contract to retrieve and mark the adopted pets
            return App.markAdopted();
        });

        return App.bindEvents();
    },

    bindEvents: function () {
        $(document).on('click', '.btn-adopt', App.handleAdopt);
    },

    markAdopted: function (adopters, account) {

        var adoptionInstance;

        App.contracts.Adoption.deployed().then(function (instance) {
            adoptionInstance = instance;

            // 调用合约的getAdopters(), 用call读取信息不用消耗gas
            return adoptionInstance.getVolume.call();
        }).then(function (volume) {
            for (i = 0; i < volume.length; i++) {
                $('.panel-pet').eq(i).find('.repertory').text(1000 - volume[i]);
            }
        }).catch(function (err) {
            console.log(err.message);
        });
    },

    handleAdopt: function (event) {
        event.preventDefault();

        var petId = parseInt($(event.target).data('id'));

        var adoptionInstance;

        // 获取用户账号
        web3.eth.getAccounts(function (error, accounts) {
            if (error) {
                console.log(error);
            }

            var account = accounts[0];

            App.contracts.Adoption.deployed().then(function (instance) {
                adoptionInstance = instance;

                // 发送交易领养宠物
                return adoptionInstance.adopt(petId, {from: account});
            }).then(function (result) {
                return App.markAdopted();
            }).catch(function (err) {
                console.log(err.message);
            });
        });
    }

};

$(function () {
    $(window).load(function () {
        App.init();
    });
});

“基于以太坊的去中心化电商DApp”程序说明文档

目录

文章目录

一、项目概述

1.1 项目名称

1.2 项目用途

二、需求分析

三、系统功能模型

四、系统设计

4.1 总体设计

4.2 架构设计

五、代码实现

5.1 合约部分代码

5.2 HTML代码

5.3 JavaScript代码

如何使用 JS 判断用户是否处于活跃状态

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

❤️‍🔥 Solon Cloud Event 新的事务特性与应用

《Java程序設計教程》複習

PAT 1153 Decode Registration Card of PAT

“基於以太坊的去中心化電商DApp”程序說明文檔

c++筆記

Java解題常用方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結