前两篇文章已经介绍了Maven基本结构、功能和命令，并且搭建了最基本的SSM整合框架并调通。
简单的查：
初学者用烂的User实体类:Integer id;String username;String password;String address;(写得很啰嗦，且缺乏典型)。
controller：
1
2
3
4
5
6
| @RequestMapping("users.action")
public String findAllUser(Model model){
List<User> users = userService.findAllUser();
model.addAttribute("users",users);
return "usersList";
}
|
jsp页面：
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
| <%-- 用户信息表格--%>
<form method="post" action="${pageContext.request.contextPath}/deleteByIds.action">
<table width="400px" class="table table-hover table-striped text-center">
<thead><h1 class="text-center">userList</h1></thead>
<tbody>
<tr>
<td><input type="checkbox" id="changeAll" onclick="change(this)">全选</td>
<td>username</td>
<td>password</td>
<td>address</td>
<td>operate</td>
</tr>
<c:forEach items="${users}" var="user">
<tr>
<td><input type="checkbox" value="${user.id}" name="ids"></td>
<td>${user.username}</td>
<td>${user.password}</td>
<td>${user.address}</td>
<td>
<input onclick="find_user_byId(${user.id})" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modifyModal" value="modify">
<a onclick="delete_user(${user.id})" class="btn-danger btn">delete</a>
</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<td colspan="5">
<input type="submit" value="删除所选项" class="btn btn-danger">
<input type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal" value="添加新用户">
</td>
</tfoot>
</table>
</form>
|
简单的删：
VoUser中 Integer id；List<Integer> ids；在mapper文件中进行空值的判断即可，分开处理。
controller：
1
2
3
4
5
6
7
8
9
10
| @RequestMapping("deleteByIds.action")
public @ResponseBody String deleteByIds(VoUser user){
Integer result = userService.deleteByIds(user);
if (result!=0){
return "OK";
}else {
return "FAIL";
}
}
|
@ResponseBody标签可以使方法的返回值通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML。
注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果类似于通过response对象输出指定格式的数据。
jsp：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function change(changeAll) {
var checkIds = document.getElementsByName("ids");
for (var i=0;i<checkIds.length;i++){
checkIds[i].checked=changeAll.checked;
}
}
function delete_user(id) {
if(confirm("确定删除此用户么？","确定","取消")){
$.post("${pageContext.request.contextPath}/deleteByIds.action",{"id":id},function (data) {
if(data=="OK"){
alert("删除成功！");
window.location.reload();
}else{
alert("删除失败！");
window.location.reload();
}
})；
}
}
|
- confirm函数:用于提供确认功能，它首先显示给定的message参数所包含的信息，并提供两个可选择的回答“ok”和“cancel”，然后等待用户选择其中的一个。如果用户选择“ok”则返回true；否则，如若选择“cancel”则返回false。该函数的语法格式如下：
window.confirm (message, ok, cancel)
它有3个参数，其中参数message是欲显示的字符串形式的提示信息；参数ok也是用于显示的一个字符串信息，它可以是“OK”，也可以是其他表示OK意义的文本信息，如“I Agree”、“I Like”等等；同样，参数cancel也是用于显示的字符串信息，可以是“Cancel”文本，也可以是其他表示Cancel意义的文本信息。
$.post()函数：通过 HTTP POST 请求从服务器载入数据。
函数基本语法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
- url：必需。规定把请求发送到哪个 URL。
- data：可选。映射或字符串值(一般习惯用字符串和JSON对象)。规定连同请求发送到服务器的数据。
- success(data, textStatus, jqXHR)：可选。请求成功时执行的回调函数。
- dataType：可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
window.location.reload()函数：
刷新页面。。。其他页面更新功能的函数：
windows.location.href=”/url” 当前页面打开URL页面
window.close(); 关闭窗口，不弹出系统提示，直接关闭
window.parent.close(); 是parent属性是当前窗口或框架的框架组
简单的增：
这么拽的Maven居然不能自动管理BootStrap等优秀的前端框架！！
手动在webapp下创建static目录(在WEB-INF外，因为WEB-INF的东西只对服务端开放)，将BootStrap和Jquery下载后加入目录。
controller：
1
2
3
4
5
6
7
8
9
| @RequestMapping("addUser.action")
public @ResponseBody String addUser(User user){
int row = userService.addUser(user);
if (row>0){
return "OK";
}else {
return "FAIL";
}
}
|
jsp：
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
| <%-- 添加用户模态框--%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
<div class="modal-content">
<%-- 模态框头--%>
<div class="modal-header">
<%-- 右上角关闭模态框--%>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">添加用户信息</h4>
</div>
<%-- 模态框体--%>
<div class="modal-body">
<form class="form-horizontal" id="add_user_form">
<div class="form-group">
<label for="add_username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add_username" placeholder="用户名" name="username" />
</div>
</div>
<div class="form-group">
<label for="add_password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add_password" placeholder="密码" name="password" />
</div>
</div>
<div class="form-group">
<label for="add_address" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add_address" placeholder="地址" name="address" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="addUser()">添加</button>
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function addUser() {
$.post("${pageContext.request.contextPath}/addUser.action",$("#add_user_form").serialize(),function(data){
if(data =="OK"){
alert("用户添加成功！");
window.location.reload();
}else{
alert("用户添加失败！");
window.location.reload();
}
});
}
|
查的部分input标签通过data-toggle=“modal”和data-target=“模态框id”属性切换出模态框。
serialize() 函数：通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
基本语法：$(“input或者form”).serialize()
U jsp_$.post()函数_$.ajax()函数 controller接受和返回数据
$.ajax()是简化的$.post()函数
$.ajax()函数基本语法：
简单的改：
controller：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| @RequestMapping("findUserById.action")
public @ResponseBody User findUserById(Integer id){
User user = userService.findUserById(id);
return user;
}
@RequestMapping("modifyUser.action")
public @ResponseBody String modifyUser(User user){
Integer result = userService.modifyUser(user);
if (result!=0){
return "OK";
}else {
return "FAIL";
}
}
|
注意：User findUserById(Integer id)方法使用了@ResponseBody标签，因为返回值是POJO对象，所以需要转换为JSON对象后放到response的body数据区中，需要额外jar包支持(json.jar、jackson-core.jar、jackson-annotations.jar、jackson-databind.jar 四个jar包)。
jsp：
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
|
function find_user_byId(id) {
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/findUserById.action",
data:{"id":id},
success:function (data) {
$("#modify_id").val(data.id);
$("#modify_username").val(data.username);
$("#modify_password").val(data.password);
$("#modify_address").val(data.address);
}
});
}
function modify_user() {
$.post("${pageContext.request.contextPath}/modifyUser.action",
$("#modify_user_form").serialize(),function (data) {
if (data=="OK"){
alert("修改成功！");
window.location.reload();
} else {
alert("修改失败！");
window.location.reload();
}
});
}
|
修改的模态框和增加的模态框大同小异，只是一些标签的id和name不同罢了。
切换模态框按钮的同时，事件触发find_user_byId(id)方法查询目标属性并放到模态框的对应元素中。
$.ajax()函数：简化后就是$.post()函数，上面的ajax()函数等价于下面的post()函数：
1
2
3
4
5
6
7
8
9
| function find_user_byId(id) {
$.post("${pageContext.request.contextPath}/findUserById.action",{"id":id},
function (data) {
$("#modify_id").val(data.id);
$("#modify_username").val(data.username);
$("#modify_password").val(data.password);
$("#modify_address").val(data.address);
});
}
|
当然了，天天写最简单的CRUD是远远不够的，但是这些基础还是要牢牢抓死。写这些只是为了熟悉IDEA和Maven，顺便温故而知新，虽然都是些简单的操作，但是依然遇到了不少新问题，通过解决新问题多多少少还是有所提升的。废话不多说了，继续完善多条件查询、分页、拦截器等等。。。