SSM架构下的增删改操作

1.首先前端需使用ajax传递参数,使之序列化传递到后台

<script>
	$(function () {
		//提交按钮的单击事件
		$("#btnAdd").click(function () {
			$.ajax({
				type: "POST",
				url: "/team/add.do",
				data: $("#myForm").serialize(),
				dataType:"json",
				success: function(vo){
					if(vo.code==200) {
						window.location.href = "/pages/team/list.html";
					}else{
						alert("添加失败!"+vo.msg);
					}
				}
			});
		});
	});
</script>

2.后台使用控制器接收数据,注意传参方式,入参方式,以及string-Date可能的类型转换

@RequestMapping(value = "add.do",method = RequestMethod.POST)
    public ResultVo<Team> teamAdd(Team team){
        System.out.println(team.toString());
        Integer integer = teamService.addTeam(team);
        if (integer > 0) {
            return new ResultVo<Team>();
        }
        return new ResultVo<Team>("500","服务器内部错误,请稍后再试");
    }

这里使用封装对象类,入参

3.service层事务插入

	@Override
    @Transactional(propagation = Propagation.REQUIRED,rollbackFor = {Exception.class})
    public Integer addTeam(Team team){
        return teamMapper.insertSelective(team);
    }

二,更新
1.原始数据加载,这里使用js脚本

queryById(teamId);
function queryById(teamId) {
		$.ajax({
			type: "GET",
			url: "/team/"+teamId+".do", //RESTful风格的API定义
			data: "",
			success: function (vo) {
				console.log(vo);
				let obj=vo.object;
				let teamId=obj.teamId;
				let teamLogo=obj.teamLogo;
				let teamName=obj.teamName;
				let chineseName=obj.chineseName;
				let coach=obj.coach;
				let stadium=obj.stadium;
				let location=obj.location;
				let time=obj.createTime;
				let area=obj.area;
				$("input[name='teamId']").val(teamId);
				$("input[name='teamName']").val(teamName);
				$("input[name='chineseName']").val(chineseName);
				$("input[name='coach']").val(coach);
				$("input[name='stadium']").val(stadium);
				$("input[name='location']").val(location);
				$("input[name='createTime']").val(time);
				$("select[name='area']").val(area);
				if(teamLogo!=null){
					$("img[name='teamLogo']").attr("src","/img/uploadFile/"+teamLogo);
				}else{
					$("img[name='teamLogo']").addClass("hidden");
					$("img[name='teamLogo']").parent().html("还没有上传logo图片");
				}
			}
		});
	}

2.控制器入参

	@RequestMapping(value = "{id}.do",method = RequestMethod.GET)
    public ResultVo<Team> teamQueryById(@PathVariable("id") Integer teamId){
        Team team = teamService.queryById(teamId);
        System.out.println(team.toString());
        if (team != null && !team.getTeamName().equals("")) {
            return new ResultVo<Team>(team);
        }
        return new ResultVo<Team>("500","服务器内部错误,请稍后再试");
    }

3.service实现

	@Override
    @Transactional(propagation = Propagation.REQUIRED,readOnly = true)
    public Team queryById(Integer integer){
        return teamMapper.selectByPrimaryKey(integer);
    }

4.修改数据的put请求 在mvc中,如果使用Restful风格,用put来修改数据,那么,在Ajax添加请求时,应当注意:

$(function () {
		//根据地址获取teamId,如果null则执行增加,否则执行更新
		let url = document.location.toString();//获取URL
		let teamId=url.GetValue("teamId");
		let pageNum=url.GetValue("pageNum");
		let pageSize=url.GetValue("pageSize");
		//alert(teamId);
		//根据id查询要更新的球队信息并回显到页面
		queryById(teamId);
		//提交按钮的单击事件--实现真正的更新
		$("#btnUpdate").click(function () {
			$.ajax({
				type: "POST",//这里必须写POST
				url: "/team/"+teamId+".do",
				data: $("#myForm").serialize()+"&_method=PUT",
				dataType:"json",
				success: function(vo){
					if(vo.code==200) {
						window.location.href = "/pages/team/list.html?pageNum="+pageNum+"&pageSize="+pageSize;
					}else{
						alert("更新失败!"+vo.msg);
					}
				}
			});
		});
	});

ajax请求必须使用post

在这里插入图片描述

data: $("#myForm").serialize()+"&_method=PUT",只有添加了&_method=PUT,才会被spring识别为put请求。

在这里插入图片描述

成功不要忘记添加页数,实现定位

在这里插入图片描述

控制层标识方法为put访问

	@RequestMapping(value = "{id}.do",method = RequestMethod.PUT)
    public ResultVo<Team> teamUpdate(@PathVariable("id") Integer teamId,Team team){
        team.setTeamId(teamId);
        System.out.println(team.toString());
        Integer integer = teamService.updateTeam(team);
        if (integer == 1) {
            return new ResultVo<Team>(team);
        }
        return new ResultVo<Team>("500","服务器内部错误,请稍后再试");
    }

注意前端页面如果teamId设置为disabled,那么值是取不到的,需要从url路径传递参数过来,再复制到封装对象中去。

team.setTeamId(teamId);

5.service层根据对象动态更新变化

在这里插入图片描述

teamMapper.updateByPrimaryKeySelective(team);

三,软删除

service层使用动态更新软删除方式,删除数据

	@Override
    @Transactional(propagation = Propagation.REQUIRED,rollbackFor = {Exception.class})
    public Integer deleteTeam(Integer teamId){
        Team team = teamMapper.selectByPrimaryKey(teamId);
        team.setIsDel(1);
        return teamMapper.updateByPrimaryKeySelective(team);
    }

控制层使用delete请求方式

	@RequestMapping(value = "{id}.do",method = RequestMethod.DELETE)
    public ResultVo<Team> teamDelete(@PathVariable("id") Integer teamId){
        Integer integer = teamService.deleteTeam(teamId);
        if (integer == 1) {
            return new ResultVo<>();
        }
        return new ResultVo<>("500","服务器内部错误,请稍后再试");
    }

3.前端ajax请求的数据注意标识

//删除按钮
	function deleteTeam(id) {
		if(confirm("确定要删除吗?")) {
			//发起异步请求
			$.ajax({
				type: "POST",
				url: "/team/" + id+".do",//RESTful风格的API定义
				data: "_method=DELETE",
				success: function (vo) {
					if(vo.code==200){
						loadData();
					}else{
						alert("删除失败!"+vo.msg);
					}
				}
			});
		}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值