我有一个系统是根据Java代码写的通过扫描箱号外面的包装条码,扫描用钉钉的接口调用扫码组件,查询出对应的退仓单号。同时,我也能够手动添加多个退仓单号和箱号,并且将它们绑定起来。绑定完成后,能够查询出所有绑定了哪些退仓单号。public class WarehouseController { private WarehouseService warehouseService; public WarehouseController(){ this.warehouseService = new WarehouseService(); } public String getWarehouseNoByBarcode(String barcode){ return warehouseService.getWarehouseNoByBarcode(barcode); } public void addWarehouse(String barcode, String warehouseNo){ warehouseService.addWarehouse(barcode,warehouseNo); } public Map<String, List<String>> getAllWarehouse(){ return warehouseService.getAllWarehouse(); } }根据这些帮我对应写出前端的页面js和html代码
时间: 2023-12-06 11:45:33 浏览: 121
以下是参考代码,仅供参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Warehouse Management</title>
</head>
<body>
<h1>Warehouse Management</h1>
<p>Scan the barcode to get the warehouse number:</p>
<input type="text" id="barcode">
<button onclick="getWarehouseNo()">Get Warehouse Number</button>
<p id="warehouseNo"></p>
<br>
<hr>
<p>Add warehouse number manually:</p>
<input type="text" id="manualBarcode">
<input type="text" id="manualWarehouseNo">
<button onclick="addWarehouse()">Add Warehouse</button>
<br>
<hr>
<p>View all warehouses:</p>
<ul id="warehouseList"></ul>
</body>
<script src="warehouse.js"></script>
</html>
```
JavaScript代码:
```
function getWarehouseNo() {
let barcode = document.getElementById("barcode").value;
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/warehouse/" + barcode, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("warehouseNo").innerHTML = "Warehouse Number: " + this.responseText;
}
};
xhr.send();
}
function addWarehouse() {
let barcode = document.getElementById("manualBarcode").value;
let warehouseNo = document.getElementById("manualWarehouseNo").value;
let xhr = new XMLHttpRequest();
xhr.open("POST", "/api/warehouse/" + barcode + "/" + warehouseNo, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
alert("Warehouse added successfully");
}
};
xhr.send();
}
function getAllWarehouse() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/warehouse", true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
let data = JSON.parse(this.responseText);
let warehouseList = document.getElementById("warehouseList");
for (let warehouse in data) {
let list = document.createElement("li");
list.innerHTML = warehouse + ": " + data[warehouse].join(", ");
warehouseList.appendChild(list);
}
}
};
xhr.send();
}
getAllWarehouse();
```
注意:需要将上述代码中的接口路径 `/api/warehouse` 修改为实际的接口路径。另外,需要在后端实现对应的接口。
阅读全文