1703877443
1703877444
让我们从应用的HTML开始创建前端。把下面的代码放入index.html文件：
1703877445
1703877446
1703877447
1703877448
1703877449
1703877450
1703877451
1703877452
上述代码的执行过程如下：
1703877453
1703877454
1）显示Bootstrap的文件输入框，这样用户可以选择一个文件。
1703877455
1703877456
2）显示一个文本框，用户可以输入所有者的细节。
1703877457
1703877458
3）得到两个按钮。一个用于存储文件哈希和合约中的所有者细节，另一个用于从合约中获取文件信息。单击Submit按钮触发submit（）方法，单击Get Info按钮触发getInfo（）方法。
1703877459
1703877460
4）得到一个显示信息的报警框。
1703877461
1703877462
5）显示一个有序列表，以显示用户在该页面上时被挖出的合约交易。
1703877463
1703877464
接下来为getInfo（）和submit（）方法编写实现，与服务端建立socket.io连接，并从服务端监听socket.io信息。
1703877465
1703877466
相关代码如下。把该代码放入main.js文件：
1703877467
1703877468
1703877469
1703877470
1703877471
1703877472
1703877473
1703877474
上述代码的执行过程如下：
1703877475
1703877476
1）定义submit（）方法。在submit方法中，确保选择一个文件，且文本框不为空，然后读取文件内容作为数组缓存，并传送数组缓存给sha1.js显示的sha1（）方法，以获取数组缓存中的内容哈希。得到哈希之后，使用jQuery发出一个AJAX请求给“/submit”路径，然后在报警框中显示交易哈希。
1703877477
1703877478
2）定义getInfo（）方法。该方法首先确定选中一个文件，然后就像之前一样生成哈希，并发出请求到“/getInfo”端点，以得到关于那个文件的信息。
1703877479
1703877480
3）使用socket.io库显示的io（）方法建立socket.io连接，然后等待事件连接到触发器——这表示连接已经建立。在连接建立之后，监听来自服务端的信息，并向用户显示交易细节。
1703877481
1703877482
1703877483
之所以不在以太坊区块链中存储文件，是因为存储文件很昂贵——它需要大量gas。对于本节的示例子，其实不需要存储文件，因为网络中的节点将可以看见文件。因此，如果用户希望文件内容是秘密的，其实是做不到的。这里的应用是想证明一个文件的所有权，而不是像云服务那样存储和服务文件。
1703877484
1703877485
1703877486
1703877487
1703877488
区块链项目开发指南 [:1703875340]
1703877489
区块链项目开发指南 4.2.4 测试客户端
1703877490
1703877491
运行app.js节点，以运行应用服务端。打开浏览器，访问http://localhost：8080/，可以看到图4-1所示的界面。
1703877492