SSM之增删改查【开发版本二】

it2023-09-29 66

1 复制工程

将ssm01复制，命名为ssm02_crud. 修改 id name 增加模块标签在ss01的基础上，我们本次主要是在以下问价增加和修改代码。

2 Controller方法返回值类型Object

（1）Controller方法返回类型可以有几种？ ModelAndView void String Object（2）@ResponseBody 调jackson库将Object转成json字符串返回如果没有依赖jackson库则，抛出异常 HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList（3）依赖配置jackson库 pom.xml依赖配置jackson库 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.11.3</version> </dependency>

Controller方法返回Result

（1）返回结果Result Result.java private int code;//编码 private String msg;//提示信息 private Object data; //数据（2）将数据放到Result对象中 Result.java public class Result { private int code;//编码 404 200 private String msg;//提示信息 private Object data; //数据 public static Result init(int code, String msg, Object data){ Result result =new Result(code,msg,data); return result; } private Result() { } private Result(int code, String msg, Object data) { this.code = code; this.msg = msg; this.data = data; }

Controller方法返回Result

@Controller @RequestMapping("/deptv2") //写在类上面指定当前模块路径 public class DepartmentV2Controller { @Autowired private IDepartmentService departmentService;//controller调用 service层 /*@RequestMapping(path="/xx") public 返回值类型方法名(参数){ //页面提交过来的请求参数 //.. 返回值类型决定返回给浏览器的内容 } */ @RequestMapping(path="/listUI",method = RequestMethod.GET) public String listUI(){ return "list_depts"; } //地址上带UI表示打开页面，不带的表示返回数据 @RequestMapping(path="/list",method = RequestMethod.GET) public @ResponseBody //将list调jackson转成json字符串 Object list(){ //业务逻辑调用查找所有的部门的方法 List<Department> list = departmentService.findAllDepartments(); return Result.init(200,"",list);//返回对象需要被转成json字符串 } }

3 Ajax回顾

（1）ajax是什么 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）（2）ajax有什么特点通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新上一个版本使用重定向或者请求转发的，叫整体刷新今天使用ajax不需要重定向或者请求转发（3）具体编程内容 js 发送请求 js 接收结果 js 更新页面

Jquery实现Ajax

（1）导入jquery库将库文件复到项目中在页面中引入库 <% pageContext.setAttribute("path",request.getContextPath()); %> <head> <title>Title</title>  <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script> </head> （2）代码编写 js 发送请求 $.get $.post serialize() js 接收结果 function(data){…} js 更新页面 $(id值) html()

Jquery实现部门列表页面

list_depts.jsp

<script type="text/javascript"> $(function () { //页面加载成功 //1:js发送请求 $.get('${path}/deptv2/list', function (result) { //2:js接收结果 console.info("result=" + result) //{"code":200,"msg":"","data":[{"did":1,"dname":"JAVA"},{"did":2,"dname":"测试"},{"did":3,"dname":"最牛部门33"}]} //定义表格的内容 var trs = '' //拼接表头 trs += ' <tr>\n' + ' <td>编号</td>\n' + ' <td>部门名称</td>\n' + ' <td>管理</td>\n' + '\n' + ' </tr>' if (200 == result.code) { var items = result.data; //3:js更新页面 for (var i = 0; i < items.length; i++) { var dept = items[i] console.info(dept) trs += ' <tr>\n' + ' <td>' + dept.did + '</td>\n' + ' <td>' + dept.dname + '</td>\n' + ' <td><a>删除</a><a>修改</a></td>\n' + '\n' + ' </tr>' }//end for $('#table').html(trs) } }, 'json') //参1 地址参2 处理函数参3 数据类型 }) </script>

4 删除功能

删除指定id的部门

DepartmentV2Controller

删除指定id的部门

DepartmentV2Controller

@RequestMapping(path="/delete",method = RequestMethod.GET) public @ResponseBody Object delete(Integer did){ //获取did，执行对该条记录的删除 l.info("delete did="+did); try { departmentService.deleteDepartmentById(did); return Result.init(200,"删除成功",null); } catch (Exception e) { e.printStackTrace(); } return Result.init(-200,"删除失败",null); }

list_depts.jsp

function deleteById(did) { $.get('${path}/deptv2/delete?did='+did,function (result) { console.info(result) if(200==result.code){ alert(result.msg) refreshTable()//调用列表更新 }else{ alert(result.msg) } },'json') } <a href="javascript:deleteById('+dept.did+')">删除</a> 默认情况下点击超链接是跳转页面-整体刷新Ajax是局部刷新，点击链接调用函数，函数内部发起请求，处理返回结果，更新页面

属性display:none

Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置为none不可见，不占高度。如果需要显示出来，设置display的值为block list_depts.jsp function switchDiv(part) { //隐藏内容 $('#addDiv').css("display","none") $('#listDiv').css("display","none") $('#editDiv').css("display","none") if(1 == part){//添加页面 $('#addDiv').css("display","block") $('#add_dname').val('') }else if(2 == part){//列表页面 $('#listDiv').css("display","block") }else if(3 == part){//编辑页面 $('#editDiv').css("display","block") } }

5 添加功能

后台代码

DepartmentV2Controller

//保存一般是使用post提交 @RequestMapping(path="/add",method = RequestMethod.POST) public @ResponseBody Object add(Department dept){ l.info("add department="+dept); try { departmentService.saveDepartment(dept); return Result.init(200,"添加成功",null); } catch (Exception e) { e.printStackTrace(); } return Result.init(-200,"添加失败",null); }

前台代码

添加的表单

添加的ajax请求

$('#btn_add').click(function () { //alert('btn_add') 普通的表单提交 did=1&dname=测试组 var data = $('#add_form').serialize() //方法会将表单数据拼接成k1=v1&k2=v2 $.post('${path}/deptv2/add',data,function (result) { console.info(result) //页面切换 switchDiv(2) //重新加载列表 refreshTable() alert(result.msg) },'json') })

6 修改功能

修改代码》》修改要有回显，回显就是先查，再赋值，再修改。回显代码 function updateUI(did) { //alert(did) //显示修改页面 switchDiv(3) //获取被修改的数据作回显 $.get('${path}/deptv2/find?did='+did,function (result) { if(200==result.code){ var dept = result.data; //{"code":200,"msg":null,"data":{"did":9,"dname":"测试部门3"}} $('#u_did1').val(dept.did) $('#u_did2').val(dept.did) $('#u_dname').val(dept.dname) }else{ alert(result.msg)//提示没有查询结果 } },'json') }

调用查询

@RequestMapping(path = "/find", method = RequestMethod.GET) public @ResponseBody Object find(Integer did) { l.info("find did=" + did);//打数据 if (did != null) { Department dept = departmentService.findDepartmentById(did);//查询回显需要的数据 if (dept != null) { return Result.init(200, null, dept);//转成json返回页面 } } return Result.init(-200, "没有查询结果", null); }

后台代码

@RequestMapping(path = "/update", method = RequestMethod.POST) @ResponseBody Object update(Department dept){ l.info("update dept="+dept); try { departmentService.updateDepartmentById(dept); return Result.init(200, "更新成功", null); } catch (Exception e) { e.printStackTrace(); } return Result.init(-200, "更新失败", null); }

前台代码

function update() { var data=$('#update_form').serialize();// k1=v1&k2=v2 $.post('${path}/deptv2/update',data,function (result) { alert(result.msg) //切换页面 switchDiv(2) //刷新列表 refreshTable() },'json') }

最新回复(0)