2019年11月6日

 

       隔了那么久，再次写日记，不，还是叫随笔比较好。暑期自学了SSM框架，大三新学期想找个项目练手。现实呢，你懂的，确实挺扎心的，做得稀稀拉拉的。知识点多，之前的总结还有笔记（不是自己敲的，老师发的，改了些）没怎么复习，以至于开始着手项目一脸懵逼。啊!果然是个半桶水，好，进入主题。
       让我想想今天做了什么？好吧，SSM整合项目，名为人力资源管理信息系统（hrms），项目不是原创，是网上大佬的作品。由于第一次做该项目只求效果，没有起到巩固知识点的效果。这次重做，只为更好的了解别人的作品，虚心取经。
       首先前台虐我千百遍。
       前端系列：
       1.向后台传数据需要引入json相关jar包
        忘记了最基本的操作，导入json的jar包(三个包) ，这一点让我意识到MAVEN管理自动引入jar包的优越性，至少你不需要去记导入的jar包（常用的还是要了解熟知）

      项目所需要的jar包（手工添加，maven不敢用）

      
       2.向后台传参
       参数的类型有基本、对象等类型。这次项目中本想传个对象类型到后台，没成功。最后改成传送多个参数，后台接收到数据后，再将这些数据封装成一个对象，跟原来方式好像差不多的样子，应该是吧...
      

<script type="text/javascript">

	$(function(){
	var edit_deptId=0;
	$(".dept_edit_btn").click(function(){
		edit_deptId=$(this).parent().parent().find("td:eq(0)").text();
		alert("id"+edit_deptId);
		
		//查询对应deptId的部门信息
		$.ajax({
			url:"/SSM_HRMS/dept/queryDeptById/"+edit_deptId,
			type:"GET",
			success:function(result){
				if(result.code==100){
					var deptData=result.extendInfo.department;//?
					//回显
					$("update_deptName").val(deptData.deptName);
					$("update_deptLeader").val(deptData.deptLeader);
					
				}else{
					alert(result.extendInfo.get_dept_error);
				}
			}
		
		});
	});  
	$(".dept_update_btn").click(function(){
		var deptName = $("#update_deptName").val();
        var deptLeader = $("#update_deptLeader").val();
        alert(deptName+deptLeader);
		$.ajax({
			url:"/SSM_HRMS/dept/updateDept/"+edit_deptId,
			type:"POST",
			data:{"deptName":deptName,"deptLeader":deptLeader},
			traditional:true,
			success:function(result){
				if(result.code==100){
					alert("更新成功！");
					window.location.href="/SSM_HRMS/dept/queryAllDepts";
				}else{
					alert(result.extendInfo.update_dept_error);
				}
				
			}
		});
	});
	});
</script>

     注意事项：

•  $(function{}); 该Jquery工厂一定要加上，不然进入模态框后  点击确定会出现无响应的窘境，如下图

•  通过Ajax函数如何向后台传对象过去？ data:$(".update_dept_form").serialize()；数据无法传到后台。

 

$(".dept_update_btn").click(function () {
        $.ajax({
            url:"/hrms/dept/updateDept/"+edit_deptId,
            type:"PUT",
            data:$(".update_dept_form").serialize(),
            success:function (result) {
                if(result.code == 100){
                    alert("更新成功！");
                    window.location.href = "/hrms/dept/getDeptList?pageNo="+curPageNo;
                } else {
                    alert(result.extendInfo.update_dept_error);
                }
            }

        });

 

 

       3.JSP引入js、bootstrap脚本等静态资源时，路径总出错。
解决如下：

 

JSP文件：

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

applicationContext-Controller.xml解决访问资源路径问题 （虚拟路径跟绝对路径的映射问题）

<mvc:resources location="/WEB-INF/js/"  mapping="/dept/js/**"></mvc:resources>
    <mvc:resources location="/WEB-INF/bootstrap-3.3.7-dist/" mapping="/dept/bootstrap-3.3.7-dist/**"></mvc:resources>

 

      
       4.说到这个bootstrap，他的特色之一模态框(modal（）函数)，方式有静态、动态打开两种方式，我选择了动态（源码用的是动态，即通过js代码实现）

        5.好，模态框确实打开了，天煞地马上又闪退。各种百度，各种排查。最后....把对应控件（type="button"一定要写，不然默认为submit，我确实是写了。）两个属性全删了，虽然删一个，模态框不会闪退，但不要就觉得完事了，F12轻轻按一下，错误消息早在那儿恭候您，老老实实删了那两个属性吧。这对兄弟一个叫  data-toggle 另一个叫data-target，别收下留情，删了，全删了。不然就卡在闪退这关卡上。（以具体情况为准）

   如下：

1. 不用这两个属性，无法转到模态框

2. 而这种情况下，添加这两个属性后就进入模态框闪退  ，懵逼。。。  

 

       后台系列：
       后台还行，确实还行，整了一个下午的SQL，虽然说dos命令操作mysql好牛X，但这效率...着实令人着急。

      1.编码问题
       老话题，utf  gbk...数据库默认的latin1,啊，真心烦，索性把数据库的编码全改成utf-8(相对lalin，改成utf8的中文内容更占内存)

      1.1 dos窗口的内容显示编码默认为gbk,了解到了叫活动代码页码，我用chcp 65001改成了utf8窗口，看似解决了问题，输入执SQL语句，执行select语句还行（显示没问题，其实这语句内容没有中文），输入insert语句插入数据，试试中文内容，毕竟显示不会出现中文乱码的情况，对吧。结果呢...末尾确实输入分号，回车居然没执行，出现'>的图标，一直回车一直不结束。类似于SQL语句中单引号匹配不对称的问题，我确信是输入SQL语句中的中文部分后，把单引号吃了，还不让我看见，这有点过分了....估摸着此utf8活动页面下，输入中文时，引号要单个输入，单个输入，不然会被吃了，就是不让你见到另一个引号。不对，不是让你看不到，确实被吃了，还是不对。。。。纯英文语句没出什么毛病。
       好吧，不折腾了，回头是岸吧 。默认gbk页面下，进入MySQL ，set names gbk;
回车直接完事，意思是把数据库的内容在DOS窗口下，编码暂时性的改成gbk，实际上依旧是按照gbk编码方式存储。这条命令熟知，可我。。。还折腾把DOS窗口显示的编码改成utf8，其实还好吧，就是输入中文千万要小心，不然整死你。

      1.2SQL语句语法不熟练，老是问度娘不是个办法，还是练得少啊。

      2.后台接收前台传来的数据，@PathVariable  和@RequestParam的区别

        ·两者区别的引用文章

今日完成的内容 ：departmentUpdate功能实现，代码如下

前端：

$(function(){
	var edit_deptId=0;
	$(".dept_edit_btn").click(function(){
		edit_deptId=$(this).parent().parent().find("td:eq(0)").text();
		alert("id"+edit_deptId);
		
		//查询对应deptId的部门信息
		$.ajax({
			url:"/SSM_HRMS/dept/queryDeptById/"+edit_deptId,
			type:"GET",
			success:function(result){
				if(result.code==100){
					var deptData=result.extendInfo.department;//?
					//回显
					$("update_deptName").val(deptData.deptName);
					$("update_deptLeader").val(deptData.deptLeader);
					
				}else{
					alert(result.extendInfo.get_dept_error);
				}
			}
		
		});
	});  
	$(".dept_update_btn").click(function(){
		var deptName = $("#update_deptName").val();
        var deptLeader = $("#update_deptLeader").val();
        alert(deptName+deptLeader);
		$.ajax({
			url:"/SSM_HRMS/dept/updateDept/"+edit_deptId,
			type:"POST",
			data:{"deptName":deptName,"deptLeader":deptLeader},
			traditional:true,
			success:function(result){
				if(result.code==100){
					alert("更新成功！");
					window.location.href="/SSM_HRMS/dept/queryAllDepts";
				}else{
					alert(result.extendInfo.update_dept_error);
				}
				
			}
		});
	});
	});

后台控制器部分：

@RequestMapping(value="/queryDeptById/{deptId}",method=RequestMethod.GET)
	@ResponseBody
	public JsonMsg queryDeptById(@PathVariable("deptId")Integer deptId) {
		System.out.println(deptId);
		Department department=null;
		if(deptId>0) {
			department=departmentService.queryDeptById(deptId);
			System.out.println(department);
		}
		if(department!=null) {
			return JsonMsg.success().addInfo("department", department);
		}
		return JsonMsg.fail().addInfo("get_dept_error", "无部门信息！");
		
	}
	
	/**
	 * 修改
	 * @param deptId
	 * @param department
	 * @return
	 */
	@RequestMapping(value="/updateDept/{deptId}",method=RequestMethod.POST)
	@ResponseBody
	public JsonMsg updateDept(@PathVariable("deptId") Integer deptId,@RequestParam("deptName")String deptName,@RequestParam("deptLeader")String deptLeader) {
		Department department=new Department(deptName, deptLeader);
		int res=0;
		System.out.println(deptId+"   "+department);
		if(deptId>0) {
			res=departmentService.updateDeptById(deptId,department);
		}
		if(res!=1) {
			return JsonMsg.fail().addInfo("update_dept_error", "部门信息更新失败！");
		}
		return JsonMsg.success();
	}

      
    
        哔哔一下，科三过了，嘿嘿。