contract-java-example/front/README.md

contract-java-example 前端开发说明

前端与后端支持分离开发。注意，启动好docker与后端之后，可单独对前端进行调试和开发。 注意在单独开发前端时，需将后端地址设置为可配置的选项。 当前端代码与后端代码打包到一起之后，前端中的./index.html文件会映射为http://host:port/DOIP/ContractExample/assets/index.html。 因此，后端的地址可通过以下代码计算得出：

var url = document.location.href.replaceAll(/\/DOIP.*$/g,'/SCIDE')
// 对应后端地址为：url = 'http://host:port/SCIDE';

前端代码成功打包之后，可通过以下路径分访问前端页面。

http://127.0.0.1:21030/DOIP/ContractExample/assets/vite/dist/index.html
http://127.0.0.1:21030/DOIP/ContractExample/assets/html/index.html

使用html/js

见html/index.html。 引用sdk及其依赖的js文件。

    <script src="./cryptico.iife.js"></script>
    <script src="./sm2.js"></script>
    <script src="./axios-fetch.iife.js"></script>
    <script src="./axios.min.js"></script>
    <script src="./bdcontract-sdk.iife.js"></script>

调试与开发

可在本地安装npm，利用npm install -g http-server来安装一个简单的httpserver。 在命令行中可启动该服务器，托管前端代码。

cd ./front/html
http-server

后续仅需修改front/html下的前端文件即可。

使用ts+vite等框架开发前端

前端sdk 在npm仓库中。 调用示例参考：front/vite/src/main.ts。

const url = 'http://127.0.0.1:21030/SCIDE';
var sm2Key = {"publicKey": "04180354fdb6507f8ab98ccfbe165ce11da74ba733f81af86ad6d32216b32cf4f797c559d50ceeefbf4c760c3483840471c67471b90acdffb388cd7d496d9a1610",
               "privateKey": "1d4196947f59532db6f8f4055e58474a48db8f30b476ae3edc66406464521b3b"};
const client = new HttpClient(url, sm2Key);
const data = await client.executeContract(
    'ContractExample',
    'callHello',
    'abc');
alert(data.data);

调试与开发

打开命令行，在front/vite目录下，使用npm run dev，开启调试， 打开按命令行中的提示地下，打开浏览器页面，如http://localhost:3000/即可。