mirror of
https://gitee.com/BDWare/contract-java-example.git
synced 2025-01-10 09:54:08 +00:00
58 lines
2.2 KiB
Markdown
58 lines
2.2 KiB
Markdown
# contract-java-example 前端开发说明
|
||
|
||
前端与后端支持分离开发。注意，启动好docker与后端之后，可单独对前端进行调试和开发。
|
||
注意在单独开发前端时，需将后端地址设置为可配置的选项。
|
||
当前端代码与后端代码打包到一起之后，前端中的`./index.html`文件会映射为`http://host:port/DOIP/ContractExample/assets/index.html`。
|
||
因此，后端的地址可通过以下代码计算得出：
|
||
```javascript
|
||
var url = document.location.href.replaceAll(/\/DOIP.*$/g,'/SCIDE')
|
||
// 对应后端地址为：url = 'http://host:port/SCIDE';
|
||
```
|
||
前端代码成功打包之后，可通过以下路径分访问前端页面。
|
||
```json
|
||
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](https://www.npmjs.com/package/@bdware/bdcontract-sdk) 在npm仓库中。
|
||
调用示例参考：`front/vite/src/main.ts`。
|
||
|
||
```javascript
|
||
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/`即可。
|
||
|