order.html
3.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body th:style="${'background-color:' + backgroundColor }">
<div style="margin: 30px auto 0 30px;">
<div id="orderSection">
<label>商品下单场景：</label>
<form id="orderForm">
<div>
<label>用户ID</label>
<input type="text" id="userId" name="userId" value="admin"/>
</div>
<div>
<label>商品编号</label>
<input type="text" id="commodityCode" name="commodityCode" value="1"/>
</div>
<div>
<label>商品个数</label>
<input type="number" name="count" value="1"/>
</div>
<button type="button" class="btnStart">提交</button>
</form>
</div>
<div id="orderResultSection" style="margin-top: 30px; border-top: 1px solid #eaeaea;">
</div>
</div>
<script charset="utf-8">
var urlPrefix = window.location.protocol + '//' + window.location.hostname;
$(".btnStart").click(function () {
$('#orderResultSection').empty();
var userId = $("#userId").val();
var commodityCode = $("#commodityCode").val();
$.ajax({
url: urlPrefix+":30010/storage/",
type: "get",
dataType: "json",
data: "commodityCode=" + commodityCode,
async:false,
success: function (res) {
$('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务前商品库存： ${res.data} </p>`);
}
});
$.ajax({
url: urlPrefix+":30010/account/",
type: "get",
dataType: "json",
data: "userId=" + userId,
async:false,
success: function (res) {
$('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务前账户余额： ${res.data}</p>`);
}
});
$.ajax({
type: "POST",
url: urlPrefix+":30010/order/create",
data: $('#orderForm').serialize(),
dataType: 'json',
async:false,
success: function (res) {
$('#orderResultSection').append(`<p> [${getDateTime()}] ${res.message} </p>`);
$.ajax({
url: urlPrefix+":30010/storage/",
type: "get",
dataType: "json",
data: "commodityCode=" + commodityCode,
async:false,
success: function (res) {
$('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务后商品库存： ${res.data}</p>`);
}
});
$.ajax({
url: urlPrefix+":30010/account/",
type: "get",
dataType: "json",
data: "userId=" + userId,
async:false,
success: function (res) {
$('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务后账户余额： ${res.data}</p>`);
}
});
}
});
});
const getDateTime = () => {
const myDate = new Date;
const year = myDate.getFullYear();
const month = myDate.getMonth() + 1;
const date = myDate.getDate();
const hours = myDate.getHours();
const minutes = myDate.getMinutes();
const seconds = myDate.getSeconds();
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
};
</script>
</body>
</html>