前言
这个示例是《区块链技术进阶与实践》提供的例子，书不错。
前提：在学习这个例子前要安装好ganache、truffle等区块链开发环境，对智能合约基本语法和DAPP如何开发有基本概念。
运行环境： ganache-cli v6.1.6 truffle v4.1.13 solidity ^0.4.24
本积分系统最原始的源代码在：https://github.com/Blockchain-book/Ethereum-Score-Hella
建议下载本人注释后的源代码：https://download.csdn.net/download/u011680118/10649989
因为原始的源代码可能过时，编译会报错，我自己进行过修改。
注意：下载之后如果直接truffle migrate会报错
把build文件夹删掉，再在本地重新进行编译部署即可。
附注：这个项目基于truffle的例子webpack，可以新建一个文件夹，cd到文件夹内，在命令行中输入 truffle unbox webpack，下载并学习这个例子，与本积分例子对比。例子中的前台JavaScript代码很值得学习。
一、背景及基础知识（只需了解即可，也可不看）
1. ES6
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准。
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等
来自 <http://es6.ruanyifeng.com/#docs/intro>
2. babel转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
3. ESLint
二、项目需求及项目结构图
这个系统有客户、银行、商户组成，进行积分的交易，具体需求如下图：
三、源码分析
1. 文件简要解释（弄懂每个文件大概做什么的即可）
用sublime text打开文件夹，可以看到组织目录
app是前端html代码和一些脚本程序
stylesheets里面是app.css，设定网页各个部件的样式
html是前台代码，index.html里面有客户注册、登陆、商户注册、登陆、银行登陆和测试功能。
客户登陆后页面跳转到customer.html，页面链接中有当前登陆账户的地址，可以实现查询信息、购买商品、转让积分等功能
商户登陆后页面跳转到merchant.html，页面链接中有当前登陆账户的地址，可以实现查询信息、添加商品、转让积分、积分清算等功能
银行登陆后页面跳转到bank.html，页面链接中有当前登陆账户的地址，可以实现发行积分、查看信息等功能
JavaScript代码的解释见代码注释，主要用到web3来与节点通信，获取节点的账户列表等信息，用到truffle-constract 来生成合约实例，调用合约的方法。这两个js库都可以在项目目录下 npm install 进行下载，会根据package.json确定版本
build 是在compile之后生成的文件夹
contracts、migrations、test 是truffle自动生成的文件夹
node_modules是前端需要的一些依赖文件，在下载web3.js之后有的
以点号开头的文件都是用于JavaScript的转码，可以暂时不管
package.json 前端开发，测试需要依赖的一些库的配置信息，这个文件是 npm init 时创建的一个文件，会记录当前整个项目中的一些基础信息。package.json里面定义的是版本范围（比如^1.0.0），具体跑npm install的时候安的什么版本，要解析后才能决定，这里面定义的依赖关系树，可以称之为逻辑树（logical tree）。
package-lock.json 这个文件却是 node_modules 文件夹或者 package.json 文件发生变化时自动生成的。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
来自 <http://www.cnblogs.com/tianzun-blog/p/9275931.html>
node_modules文件夹下才是npm实际安装的确定版本的东西，这里面的文件夹结构我们可以称之为物理树（physical tree）。
安装过程中有一些去重算法，所以你会发现逻辑树结构和物理树结构不完全一样。
package-lock.json可以理解成对结合了逻辑树和物理树的一个快照（snapshot），里面有明确的各依赖版本号，实际安装的结构，也有逻辑树的结构。
其最大的好处就是能获得可重复的构建（repeatable build），当你在CI（持续集成）上重复build的时候，得到的artifact是一样的，因为依赖的版本都被锁住了。
链接：https://www.zhihu.com/question/62331583/answer/257972185
truffle.js如下：
-
// Allows us to
use ES6
in our migrations
and tests.
-
require(
'babel-register')
-
-
module.exports = {
-
networks: {
-
truffle: {
-
host:
'127.0.0.1',
-
port:
9545,
-
network_id:
'*' //
Match
any network
id
-
},
-
develop: {
-
host:
'127.0.0.1',
-
port:
8545,
-
network_id:
'*' //
Match
any network
id
-
}
-
}
-
}
- require: 用于加载babel模块，实现JavaScript的转码，以兼容。
- networks: 指定在移植(Migration)时使用哪个网络。当在某个特定的网络上编译或运行移植时，合约会缓存起来方便后续使用。这里开发使用的是本地的ganache-cli客户端。
webpack.config.js
webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
来自 <https://www.cnblogs.com/zuozuo-blog/p/6560485.html>
2. app.js文件注释（重点）
-
// Import the page's CSS. Webpack will know what to do with it.
-
import
'../stylesheets/app.css'
-
-
//在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require
-
-
/*引入customer.js等模块，以使用其中的方法
-
require相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么
-
customer.js等模块中exports的都是方法，可以在这里被调用，如 customer.newCustomer(ScoreInstance, account) */
-
const customer =
require(
'./customer')
-
const bank =
require(
'./bank')
-
const merchant =
require(
'./merchant')
-
-
// Import libraries we need.
-
/* import是编译时的（require是运行时的），它必须放在文件开头，而且使用格式也是确定的。
-
它不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。*/
-
import {
default
as Web3 }
from
'web3'
//等同于 import Web3 from 'web3';
-
import {
default
as contract }
from
'truffle-contract'
//等同于 import contract from 'truffle-contract';
-
-
// Import our contract artifacts and turn them into usable abstractions.
-
//导入智能合约编译之后生成的abi的json文件 Score.json
-
import ScoreArtifacts
from
'../../build/contracts/Score'
-
-
// ScoreContract is our usable abstraction, which we'll use through the code below.
-
//初始化智能合约，实际上就是为你的智能合约创建一个对应的js对象ScoreContract，方便后续调用
-
//The input to the contract function is a JSON blob defined by truffle-contract-schema.
-
let ScoreContract = contract(ScoreArtifacts)
-
let ScoreInstance
-
// The following code is simple to show off interacting with your contracts.
-
// As your needs grow you will likely need to change its form and structure.
-
// For application bootstrapping, check out window.addEventListener below.
-
let accounts
-
let account
-
-
window.App = {
-
// 进行初始化
-
init:
function () {
-
// 设置智能合约的web3连接，使其能与以太坊节点通信,truffle-contract中的方法
-
ScoreContract.setProvider(
window.web3.currentProvider)
-
// 类似于geth客户端查询以太坊账户信息，Get the initial account balance so it can be displayed.
-
// web3.eth.getAccounts(callback(error, result){ ... })
-
window.web3.eth.getAccounts(
function (err, accs) {
-
if (err !=
null) {
//查询有问题
-
window.App.setStatus(
'There was an error fetching your accounts.')
-
return
-
}
-
-
if (accs.length ===
0) {
//没有以太坊账户
-
window.App.setStatus(
'Couldn\'t get any accounts! Make sure your Ethereum client is configured correctly.')
-
return
-
}
-
accounts = accs
//把获取的以太坊账户全部存在变量accounts中，连的是ganache-cli的rpc模拟服务，预制了几个有eth的帐号
-
//如果安装了MetaMask插件，应该获得的就是MetaMask里的帐号
-
account = accounts[
0]
//第一个以太坊账户存在account中
-
})
-
-
//Create an instance of ScoreContract that represents the default address managed by ScoreContract.
-
//Creates an instance of the contract abstraction representing the contract at its deployed address.
-
// truffle-contract中的方法
-
ScoreContract.deployed().then(
function (instance) {
-
ScoreInstance = instance
//获取合约的实例，不用重复deploy，都用这一个
-
}).catch(
function (e) {
-
console.log(e,
null)
-
})
-
},
-
//===================================== 客户方法 ==========================================
-
// 新建客户
-
newCustomer:
function () {
-
customer.newCustomer(ScoreInstance, account)
-
},
-
// 客户登录
-
customerLogin:
function () {
-
customer.customerLogin(ScoreInstance, account)
-
},
-
// 当前客户信息，currentAccount在url中截取，在status框显示当前登陆账户
-
getCurrentCustomer:
function (currentAccount) {
-
customer.showCurrentAccount(currentAccount)
-
},
-
// 当前客户余额
-
getScoreWithCustomerAddr:
function (currentAccount) {
-
customer.getScoreWithCustomerAddr(currentAccount, ScoreInstance, account)
-
},
-
// 客户购买商品
-
buyGood:
function (currentAccount) {
-
customer.buyGood(currentAccount, ScoreInstance, account)
-
},
-
// 查看已经购买的物品
-
getGoodsByCustomer:
function (currentAccount) {
-
customer.getGoodsByCustomer(currentAccount, ScoreInstance, account)
-
},
-
// 客户转让积分
-
transferScoreToAnotherFromCustomer:
function (currentAccount) {
-
customer.transferScoreToAnotherFromCustomer(currentAccount, ScoreInstance, account)
-
},
-
//===================================== 商家方法 ==========================================
-
// 商家注册
-
newMerchant:
function () {
-
merchant.newMerchant(ScoreInstance, account)
-
},
-
// 商家登录
-
merchantLogin:
function () {
-
merchant.merchantLogin(ScoreInstance, account)
-
},
-
// 当前商家账户
-
getCurrentMerchant:
function (currentAccount) {
-
merchant.getCurrentMerchant(currentAccount)
-
},
-
// 当前商家余额
-
getScoreWithMerchantAddr:
function (currentAccount) {
-
merchant.getScoreWithMerchantAddr(currentAccount, ScoreInstance, account)
-
},
-
// 商家积分转让
-
transferScoreToAnotherFromMerchant:
function (currentAccount) {
-
merchant.transferScoreToAnotherFromMerchant(currentAccount, ScoreInstance, account)
-
},
-
// 商家添加商品
-
addGood:
function (currentAccount) {
-
merchant.addGood(currentAccount, ScoreInstance, account)
-
},
-
// 显示商家的所有商品
-
getGoodsByMerchant:
function (currentAccount) {
-
merchant.getGoodsByMerchant(currentAccount, ScoreInstance, account)
-
},
-
// 商家清算积分
-
settleScoreWithBank:
function (currentAccount) {
-
merchant.settleScoreWithBank(currentAccount, ScoreInstance, account)
-
},
-
//===================================== 银行方法 ==========================================
-
// 发行积分
-
sendScoreToCustomer:
function () {
-
bank.sendScoreToCustomer(ScoreInstance, account)
-
},
-
// 银行登录
-
bankLogin:
function () {
-
bank.bankLogin(ScoreInstance, account)
-
},
-
// 查看已经发行的积分
-
getIssuedScoreAmount:
function () {
-
bank.getIssuedScoreAmount(ScoreInstance, account)
-
},
-
// 已经清算积分总数目
-
getSettledScoreAmount:
function () {
-
bank.getSettledScoreAmount(ScoreInstance, account)
-
},
-
//===================================== 调试方法 ==========================================
-
// 查询所有的区块链账户
-
allAccounts:
function () {
-
let allAccount =
''
-
window.web3.eth.accounts.forEach(
e => {
-
allAccount += e +
'\n'
-
})
-
window.App.setConsole(allAccount)
-
},
-
// 状态栏显示
-
setStatus:
function (message) {
-
const status =
document.getElementById(
'status')
-
status.innerHTML = message
-
},
-
// 显示console
-
setConsole:
function (message) {
-
const status =
document.getElementById(
'console')
-
status.innerHTML = message
-
}
-
}
-
-
//在页面载入后，初始化web3，创建一个基于Http的provider，可以与以太坊节点进行通信
-
//这里用到的就是用ganache-cli启动所提供的对外的rpc服务，因为ganache-cli启动的时候绑定的是localhost，所以测试所使用的浏览器也要在本机。
-
window.addEventListener(
'load',
function () {
-
// 设置web3连接 http://127.0.0.1:8545 即以太坊节点
-
window.web3 =
new Web3(
new Web3.providers.HttpProvider(
'http://127.0.0.1:8545'))
-
window.App.init()
//调用初始化函数
-
})
四、试运行项目
在命令行中打开ganache-cli客户端，命令为：ganache-cli 运行端口是 8545
另外开一个命令行，cd到contracts目录下，输入truffle compile 和 truffle migrate --network develop 命令，把合约部署到区块链上，并使用truffle.js中配置的开发网络
可以看到Score合约地址是0x0e2789开头的。。 查看ganache-cli的命令行，其中打印出调试信息，生成的第三个区块中包含了Score合约地址，也是0x0e2789...
部署成功后，输入 npm run dev 命令，会执行 package.json里面的 dev 后面的脚本，即 "webpack-dev-server" 在本地开启服务器，现在可以访问客户端web页面。如果这里报错，说明要安装 webpack-dev-server ，可自行百度如何安装。
在浏览器中输入网址： http://localhost:8000
五、测试合约功能
注意：不同电脑账户不同，每次重启ganache-cli生成的账户也不同
注册客户和商户：我们就用第二个和第三个分别注册为客户和商户
商户账户 0x14d4409c0e31a983ee831e04d5d72f635076b8b5
密码 123
登录后跳转，页面链接末尾是商户地址
客户账户 0x93cbed31e02568a1ef3a2bc2591f74a8920c14ee
密码 空
注册成功后，登录之后页面跳转，客户账户在链接末尾
银行账户默认是第一个账户
输入银行地址后，密码不用管，后台没有比对密码，点登陆即可跳转到银行界面
0x6abc6d15fbb1f8d83d73912ab33f042d2e4d73a0
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
