JavaWeb开发：历史变更记录（基于SSM框架）

原创

已于 2022-03-21 20:24:25 修改 · 4.9k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#java #sql #javascript #后端

于 2022-03-21 17:39:06 首次发布

本文详细介绍了如何使用SSM框架配合Layui前端实现表单数据的修改记录，包括提交表单、Controller与Service层交互，以及ServiceImplement层如何保存原始数据、比较变更内容并存储历史变更信息。

一、效果展示

后端为SSM框架，前端采用Layui，相关简介可参考之前的博客：JavaWeb后端开发框架SSM+前端框架Layui简介

1、初始数据表格

在这里插入图片描述

2、修改内容：

将“现在地址”一栏中的“南京”修改为“北京”：

在这里插入图片描述

3、修改后：

在这里插入图片描述
历史变更记录的表格中包含的字段为：（护理机构）名称、修改时间、变更字段名称、变更前内容、变更后内容，以及一些其它自己设定的内容

在这里插入图片描述

二、实现

本次博客仅专注于后端开发，前端内容使用框架（如：数据表格的显示、两个Tab的显示与切换等等）。

1、表单提交

在上一节中，采用的“修改信息”页面是使用Layui表单进行设计的，当触发“submit”事件后，使用AJAX传递方式将表单内容传递至后端。

layui表单的设计及提交可参考博客：用layui实现表单提交（包含图片）

<script>
        layui.use('form', function(){
   
   
            var form = layui.form;
            //submit是button的type；handin是自定义的按键id
            form.on('submit(handin)', function(data){
   
   	
                console.log("开始提交");
                console.log(data.field);	//前端调试，查看传递的数据
                $.ajax({
   
   
                    url:'/department/updateDepartment',	//连接到后端的controller层
                    method:'POST',	//传递方式
                    data:data.field,	//传递的数据
                    dataType:'JSON',	//数据采用Json类型
                    //事件触发成功后返回res值，并进入以下自定义函数
                    success:function(res){
   
   		
                        console.log("res.msg："+res.msg);
                        if(res.msg=="ok"){
   
   		//controller层的返回值
                            console.log("成功提交"+data.field);
                            //提交成功后刷新页面
                            layer.msg("提交成功",{
   
   icon: 1, time: 1500},function()	{
   
   location.reload();}); 
                        }else{
   
   
                            console.log("请确保“结算代码”输入正确"+data.field);
                            layer.msg("请确保“结算代码”输入正确",{
   
    icon: 5,anim: 6,offset: "auto"});
                        }
                    },
                    error:function (data) {
   
   
                        console.log("提交失败",data);
                    }
                })