Springboot+Thymeleaf模板引擎实现数据CURD

关于thymeleaf模板引擎：https://mp-new.csdn.net/mp_blog/creation/editor/116558450
模板引擎导入和介绍就不说了。直接进入主题。
查：用的是layui数据表格渲染的就不多说。

表的po层、dao层、service层：使用插件生成，就不需要去写单表的操作了，主要看控制层，新增页面form表单：使用th:action和th:method与控制器进行数据交互，
注意点就是：form表单内的input标签name属性必须与实体类的字段对应，还有提交按钮类型必须是提交类型。

控制器（新增）：获取新增的数据进行新增，因为是多表的新增，返回外键id并新增到主表

新增中涉及到下拉框三级联动：从控制器中将查询出的数据传到页面
控制器方法：①将城市所有数据查询出来；②通过城市id查询该城市下的城镇；③通过城镇id查询该城镇下的小区

下拉框页面：

Js:

//为下来框绑定地市
$(function(){ $.ajax({ 
		type:"POST", 
		url:"/findAllCity",
		dataType: "json",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        async: false, cache: false,
        success: function (data) {
        var d2=JSON.stringify(data); var d3=eval(d2);
            for (var i in d3) {
 $("#cityid:last").append("<option value=" + d3[i].cityId + ">" + d3[i].cityName + "</option>") }
            layui.form.render('select');  //这里就是我们要渲染的地方了
        }
    })
});
//地市change事件→→→区域
form.on('select(citynames)', function(data){
$("#countyid").html(""); 
	var val1 = $("#cityid option:selected").val();
	var data = {"data":val1};
    $.ajax({ 
    	type:"POST", 
   		url:"/findAllCounty",
    	dataType: "json",
        data:JSON.stringify(data),
        contentType: "application/json",
        async: false,
        cache: false,
        success: function (data) {
            $('#countyid').append(new Option("",""));
            var d3=eval(data);
            for (var i in d3) {
 $("#countyid:last").append("<option value=" + d3[i].countyId + ">" + d3[i].countyName + "</option>" }
            layui.form.render('select');  //这里就是我们要渲染的地方了
        }
    })
});
//区域change事件→→→小区
form.on('select(countynames)', function(data){
    $("#communityid").html("");
    var val1 = $("#countyid option:selected").val();
    var data = {"data":val1};
    $.ajax({ 
    	type:"POST", 
    	url:"/findAllCommunity",
    	dataType: "json",
        data:JSON.stringify(data),
        contentType: "application/json",
        async: false,cache: false,
        success: function (data) {
            $('#communityid').append(new Option("",""));
            var d3=eval(data);
            for (var i in d3) {
$("#communityid:last").append("<option value=" + d3[i].communityId + ">" + d3[i].communityName + "</option>") }//这里就是我们要渲染的地方了
       layui.form.render('select');   
       }
     })
});

修改页面form表单：同样使用th:action和th:method与控制器进行数据交互，
注意：修改回填通过控制器查询的数据使用th：value取值；
form表单内的input标签name属性必须与实体类的字段对应，
还有提交按钮类型也必须是提交类型。
th:value，用法：th:value="${User.name}"，(用对象对name值替换value属性)

控制器（修改回填）：

//查询(ID)合同数据回填
@RequestMapping("/toGetContractId")
@ResponseBody
public ModelAndView getContractId(Integer contractid,String cityid, String countyid){
    ModelAndView mv = new ModelAndView();
    //合同信息
    ContractInfo Con = contractService.getContractId(contractid);
    //城市
    List<City> cityList=contractService.findCity();
    mv.addObject("cityList",cityList);
   //城镇
   List<County> countyList=contractService.findCounty();
   mv.addObject("countyList",countyList);
    //小区
    List<Community> communityList=contractService.findCommunity();
    mv.addObject("communityList",communityList);
   if (Con!=null){
       mv.setViewName("admin/page/ContractV/contractEdit");//模板路径
       mv.addObject("Con",Con);
   }else {
       mv.setViewName("admin/page/ContractV/contractEdit");//模板路径
       mv.addObject("Con",new ContractInfo());
   }
    return mv;
}

修改下拉框的回填：通过主表对应外键id==城市表的主键来取得显示的内容th:selected

控制器修改保存(暂时没有做判断并直接新增返回表格页面)：

//修改合同信息
@PostMapping("/UpdataCon")
public String updataCon(Contract contract, Account account, Electricity electricity){
    contractService.updateAccount(account);
    contractService.updateContract(contract);
    contractService.updateElectricity(electricity);
    return  "/admin/page/ContractV/contract-management";
}

时间的处理：#dates.format(Con.payeddate,‘yyyy-MM-dd’)

<input th:value="${#dates.format(Con.payeddate,'yyyy-MM-dd')}"  type="text" id="payeddate" name="payeddate" >

最后就是删除了：将所有表信息做一个实体类在合同表中，通过id删除

<a th:attr="delectContrat=@{/delectContrat/}+${Con.contractid}" id="deleteForm“” class="layui-btn layui-btn-xs layui-btn layui-bg-red">删除</a>

//删除合同信息@RequestMapping("/delectAccount{contractid}")
@ResponseBody
public ResultBean delectAccount(@RequestBody int[] contractid){
    contractService.deleteContract(contractid);
    return new ResultBean(200,"删除成功",0,null);
}