一，外部應用程序與區塊鏈進行交互案例目標與流程

1.1案例目標

• 掌握FISCO BCOS應用環境的搭建 與使用（FISCO BCOS+WeBASE）
• 掌握基于Java + SpringBoot的應 用程序后端項目搭建與開發。
• 掌握應用程序后端與FISCO BCOS 鏈的交互。
• 掌握應用程序前端項目搭建與開發

1.2開發流程

開發流程

• 構建區塊鏈應用環境。搭建FISCO BCOS環境，搭建WeBASE-Front平臺實現， 部署示例智能合約。
• 構建應用程序后端。通過WeBASE- Front導出后端項目，基于WeBASE Front API開發示例智能合約使用接口。
• 構建應用程序前端。下載示例前端 代碼模板，區塊鏈功能應用開發。

?

二，FISCO BCOS區塊鏈應用環境搭建與配置

2.1 搭建FISCO BCOS區塊

搭建FISCO BCOS區塊鏈的實現步驟如下

命令如下

mkdir -p ~/fisco
cd ~/fisco
curl -#LO https://github.com/FISCO-BCOS/FISCO- BCOS/releases/download/v2.7.2/build_chain.sh && chmod u+xbuild_chain.shchmod u+x build_chain.sh
bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,8545
bash nodes/127.0.0.1/start_all.sh

2.2 搭建WeBASE-Front平臺

搭建WeBASE-Front平臺的步驟流程：

命令

wget https://osp-1257653870.cos.ap-
guangzhou.myqcloud.com/WeBASE/releases/download/v1.5.2/webas
e-front.zip
unzip webase-front.zip
cd webase-front
cp -r ~/fisco/nodes/127.0.0.1/sdk/* ./conf/
bash start.sh

注意：WeBASE-Front啟動需要提前配置JAVA_HOME環境變量。

搭建成功如下

?2.3 示例區塊鏈智能合約部署

智能合約部署流程

2.3.1智能合約文件創建

• 使用瀏覽器登錄 http://localhost:5002/WeBA SE-Front網站
• 點擊“合約管理”->“合約 IDE” ，新建智能合約，如第一張圖所示
• 在彈出對話框中輸入合約名為 “StringGetSet” ，文件目錄 為“/” ，點擊“確認“ ，查看 文件導航欄是否有 StringGetSet文件，如第二張圖所示
• 添加合約內容

2.3.2創建用戶、部署合約

點擊導航欄的”合約管理 “->"測試用戶"->”新增用 戶 “ ， 輸 入 用 戶 名”test_user_1“?

重新在”合約IDE“中選中 StringGetSet合約，點擊右 上角”部署“ ，在彈出框中 選擇”test_user_1“用戶， 然后點擊確認

三，搭建應用程序后端基本框架并配置

3.1搭建與配置

大致步驟如下：

3.2項目導入

3.2.1通過WeBASE-Front-> 合約IDE導出“StringGetSet”項目

3.2.2使用IDEA等開發軟件導入StringGetSet項目

3.2.3，在開發軟件中對項目進行相關配置

3.3 配置Swagger UI

3.3.1配置build.gradle添加相關配置

3.3.2在Config包中添加Swagger配置代碼SwaggerConfig.java

代碼 如鏈接：https://gitee.com/zhiguxingtu/demo8- back/blob/master/src/main/java/org/example/StringGetSet/config/Swagg erConfig.java

3.4開發基于Java SDK的API

創建controller包，并在 controller包中添加 StringGetSetController.java文件。

編寫StringGetSetController.java 對應代碼。

啟動項目，訪問 http://localhost:8080/swagger- ui.html查看并使用接口。

四，開發基于WeBASE-Front API的應用程序接口

4.1 應用接口開發

應用接口開發的大致流程

4.2 添加hutools依賴

在build.gradle引入hutools依賴包，代碼如下：

implementation 'cn.hutool:hutool-all:5.7.9'

4.3 編寫WeBASE API服務

1、在service包中添加 WeBASEService.java文件，以及在 controller包中添加 WeBASEController.java文件。

2、編寫WeBASEService.java對應代碼。

3、編寫WeBASEController.java對應代碼

4.4 驗證接口開發結果

http://localhost:8080/swagger-ui.html

1、使用newSet調用智能合約： 在WeBASE管理平臺，復制一個測試用戶的地址。在newSet調用接口中復制該用 戶地址，并填寫對應的值，點擊”Try it out！“

2、使用newGet方法驗證： 用同樣的方法打開newGet接口界面，并輸入用戶地址，點擊”Try it out！“

4.5 開發并驗證智能合約查詢接口

基于Get和Set開發模式 編寫Controlle r與Service

?1. 在service包中的WeBASEService添 加listDeployedContract函數，函數調用WeBASE API的合約查看接口 （）

2. 在controller中的WeBASEControlle r中添加list接口

3. 訪問http://localhost:8080/swagg er-ui.html驗證

4. 打開接口直接點擊“Try it out！” ， 查看返回會有所有合約對應地址內容

五，開發應用程序前端頁面

5.1 應用程序前端開發流程

應用程序前端的開發流程

5.2 下載模板并安裝依賴

mkdir -p ~/fisco/front-project
cd ~/fisco/front-project
git clone https://gitee.com/zhiguxingtu/init-front.git
cp -r init-front demo8
cd demo8
npm install

開發項目為demo8

5.3 開發應用程序前端頁面

1. 添加導航功能，創建components文件夾，在文件夾中創建Navigator.vue，編寫相關代碼。

2. 修改主頁功能的views/Home.vue相關代碼。

3. 添加其他應用功能在views目錄下創建SDK.vue和WeBASE.vue文件，并編寫頁面顯示代碼

4. 修改路由跳轉文件router.js代碼。 代碼地址：https://gitee.com/zhiguxingtu/demo8-front

?5.4 驗證應用程序前端開發

1、使用命令啟動：

cd ~/fisco/front-project/demo8
npm run serve

2、訪問：http://localhost:8020/#/home：

?3訪問導航欄的“Java SDK”和“WeBASE”功能

六，開發應用程序前端對應交互功能

6.1 編寫智能合約交互功能

1、修改SDK.vue代碼，添加Javascript調用后端代碼，在<script>標簽中添加methods，修改<template>標簽中的內容。

2、修改WeBASE.vue代碼，添加Javascript調用后端代碼，在<script>標簽中添加methods，修改<template>標簽中的內容。

6.2 驗證開發情況

6.2.1驗證Java SDK智能合約調用

（1）進入Java SDK導航，在“Set方法”的輸入框輸入“你好！” ，有如下返回

（2）進入Java SDK導航，在“Get方法”調用“調用” ，有如下返回

?

6.2.2、驗證WeBASE-Front API智能合約調用情況

（1）進入WeBASE導航，在“賬戶地址”輸入“test_user_1”的地址，模擬Java SDK的Get方法調用方法。

（2）進入WeBASE導航，在“賬戶地址”輸入“test_user_1”的地址，模擬Java SDK的Set方法調用方法，設置輸入內容為“這是一個測試” 。

（3）進入WeBASE導航，在“賬戶地址”輸入“test_user_1”的地址，模擬Java SDK的Get方法調用方法，查看結果值。

6.3 開發功能：獲取所有智能合約并測試

1. 修改Home.vue，添加獲取列出所有智能合約的方法。

2. 通過頁面驗證。