【区块链】外部应用程序与区块链进行交互

【区块链】外部应用程序与区块链进行交互

码农世界 2024-05-27 前端 82 次浏览 0个评论

一，外部应用程序与区块链进行交互案例目标与流程

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调用后端代码，在

        Top