10.6.4 管理物品
用户只有在登录后才可以操作管理物品模块,如果未登录用户单击页面上方的”管理物品”链接,则Spring的AOP机制将负责提示用户登录。
权限检查的执行过程是、客户端调用前端处理方法,如果前端处理方法符合Spring AOP中指定的方法名,权限检查拦截器将检查目标方法的参数,如果调用方法时HttpSession中没有userId属性,则拦截器将返回一个Map对象,在该Map对象中封装了”您还没有登录,请先登录系统再执行操作”的错误提示信息。
当未登录用户单击”管理物品”链接(假如用户绕过了前端JS的权限检查)时,将看到如图10.13所示的提示框。
如果能通过权限检查,则用户单击”管理物品”链接时,主页面将会加载viewOwnerItem.html页面,该页面的代码如下。
程序清单：codes\10\auction\WebContent\viewOwnerItem.html
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
| <script src="js/viewOwnerItem.js"></script>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">您当前的拍卖物品：</h3>
<a id="addItem" ui-sref="addItem" style="margin-top: -24px"
role="button" class="btn btn-default btn-sm pull-right"
aria-label="添加"> <i class="glyphicon glyphicon-plus"></i>
</a>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr align="center">
<th style="text-align: center;">物品名</th>
<th style="text-align: center;">物品种类</th>
<th style="text-align: center;">初始/最高价格</th>
<th style="text-align: center;">物品描述</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
|
该HTML页面代码只是定义了一个简单的.panel容器,该.panel容器内包含一个表格,用于装载jQuery从服务器端返回的数据。下面是该页面配套的viewOwnerItem.js文件代码。
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
| $(function () {
$("#addItem").click(function () {
goPage("addItem.html");
});
$.get("auction/getItemsByOwner",
{},
function (data) {
if (data.error) {
$("#tip").html("<span style='color:red;'>" + data.error + "</span>");
$('#myModal').modal('show');
return;
}
$.each(data, function () {
var tr = document.createElement("tr");
tr.align = "center";
$("<td/>").html(this.name).appendTo(tr);
$("<td/>").html(this.kind).appendTo(tr);
$("<td/>").html(this.maxPrice).appendTo(tr);
$("<td/>").html(this.remark).appendTo(tr);
$("tbody").append(tr);
})
});
$("#sure").unbind("click");
$("#cancelBn").unbind("click");
})
|
上面的代码先为页面上ID为addItem的元素绑定事件处理函数,当用户单击该按钮时系统将会跳转到addItem.html页面。
接下来的粗体字代码使用jQuery的get()方法向/auction/getItemByOwner发送请求,获取当前用户所拥有的拍卖物品。处于路径上的Spring MVC控制器方法将会返回当前用户的所有物品,这些物品被封装在JSON数据中。
如果用户成功登录,单击”管理物品”链接,将会看到如图10.14所示的界面。
从图10.14 可看到表格的左上角有一个"+"链接,单击该链接将会触发goPager()函数,该函数负责在页面上装载addItem.html页面。该静态页面的代码如下。
程序清单：codes\10\auction\WebContent\addItem.html
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
| <script src="js/addItem.js"></script>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">添加物品</h4>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">物品名：</label>
<div class="col-sm-4">
<input type="text" class="form-control"
id="name" name="name" minlength="2"
maxlength="10" required>
</div>
<label for="price" class="col-sm-2 control-label">起拍价格：</label>
<div class="col-sm-4">
<input type="number" min="0"
class="form-control" id="initPrice"
name="initPrice" min="0">
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">有效时间：</label>
<div class="col-sm-4">
<select class="form-control" name="avail"
id="avail">
<option value="1" selected="selected">一天</option>
<option value="2">二天</option>
<option value="3">三天</option>
<option value="4">四天</option>
<option value="5">五天</option>
<option value="7">一个星期</option>
<option value="30">一个月</option>
<option value="365">一年</option>
</select>
</div>
<label for="categoryId"
class="col-sm-2 control-label">物品种类：</label>
<div class="col-sm-4">
<select class="form-control" name="kind"
id="kind">
</select>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-2 control-label">物品描述：</label>
<div class="col-sm-4">
<textarea type="text" class="form-control"
id="desc" name="desc" minlength="20"
required rows="4"></textarea>
</div>
<label for="categoryId"
class="col-sm-2 control-label">物品备注：</label>
<div class="col-sm-4">
<textarea type="text" class="form-control"
id="remark" name="remark" minlength="20"
required rows="4"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="addItem"
class="btn btn-success">添加</button>
<button id="cancel" role="button"
class="btn btn-danger">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
|
该页面只是一个简单的表单页面,表单中包含了用户需要输入的物品信息。当用户提交该表单时将会触发对应的JS处理函数。该JS脚本如下所示。
程序清单：codes\10\auction\WebContent\js\addItem.js
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
|
$(function () {
$.get("auction/getAllKind",
{},
function (data) {
$.each(data, function () {
$("<option/>").html(this.kindName).val(this.id).appendTo("#kind");
})
});
$(".form-horizontal").submit(function () {
$.post("auction/addItem",
$(".form-horizontal").serializeArray(),
function (data) {
if (data == "success") {
$('#myModal').modal('show');
$("#tip").html("<span style='color:red;'>您添加物品成功了,请问要继续吗?</span>");
} else {
$('#myModal').modal('show');
$("#tip").html("<span style='color:red;'>添加物品失败了</span>");
}
});
return false;
});
$("#sure").unbind("click");
$("#cancelBn").unbind("click");
$("#sure").click(function () {
$('.form-horizontal').get(0).reset();
})
$("#cancelBn").click(function () {
goPage("viewOwnerItem.html");
})
$("#cancel").click(function () {
goPage("viewOwnerItem.html");
});
});
|
在添加物品时,应该先加载物品种类,因为添加物品时应指定物品种类。因此,JS 脚本先向auction/getAllKind 发送请求,该控制器方法将会返回系统所有的种类信息,系统通过jQuery 将这些种类信息加载并显示在页面的下拉列表中,表单页面允许用户通过下拉列表选择所添加物品的种类。用户进入添加物品的表单页面时可看到如图10.15所示的界面。
当提交表单时,粗体字代码调用jQuery的post方法向服务器发送异步请求,该请求将表单数据提交到服务器的auction/addItem,该URL负责处理添加物品的请求。
用户添加物品成功后即可看到如图10.16所示的提示信息。
如果用户单击提示框中的”确定”按钮,系统将停留在添加物品的表单页面,让用户可以继续添加物品;如果用户单击”取消”按钮,系统将返回物品列表页面,这样可以在添加物品成功后,立即在页面上看到新增的物品。
原文链接: 10.6.4 管理物品