Spring MVC实习总结

在公司实习已经有一周了，都在学Spring MVC。师傅让我在离线项目上自己做个按钮，跳转到一个新的页面，再创个新表，把基础的增删改查都做一遍。一个星期的学习，成了！

下面开始正题：

这是我写的demo页面，主要就是玩玩增删改查。

一、流程

1. Dao层负责数据库语句相关。这里我就新建了一个demoDao.java，这是个接口类，数据库语句是在一个demo-mapper.xml的映射文件里配置的。因此这个接口类前要加上@Repository注解用于标注数据访问组件。在映射文件里，通过这样子和demoDao.java绑定。具体在后面后详细介绍。
2. Service层有两个：DemoService.java和DemoServiceImpl.java。前者是接口类，后者实现前者。实现类里返回的是Dao层的对应方法，并且在类前要加上@Service注解用于自动注册到Spring容器。对了，在DemoServiceImpl初始化Dao层要在前面加上@Resource，默认安照名称进行装配。这里可以对Dao层拿到的数据进行处理，通常是写个拦截器Interceptor，比如我这里用到的分页拦截器，把拿到的数据分页显示在前端。
3. Controller层我理解成处理前端数据并返回结果给前端。这层我新建了个DemoController.java，在类名前要加上@Controller注解也是用于自动注册到Spring容器，还有@RequestMapping("/demo")这个是相当于定义了这个项目下的路径，我这里是demo，那么这个控制器下的所有方法在访问前都是"项目名/demo"。这里的方法中，参数是前端传来的，返回的值也是给前端的，其中就用到Service层的方法（不说了，定义的时候也要用到@Resource）来实现访问数据库并得到想要的结果。
4. 最后来到Jsp页面，这里就是前端了。主要需要关心的是如何取值、传值并用什么方法请求数据，后端传来的数据如何显示。还是挺重要的，下面具体例子也会说一点。

二、增

  	

	    
Hi! ${name}
    	姓名：
    	年龄：
    	性别： 男女 
    	手机：
   		增加记录
   	

现在有这么个东西在这边，是不是好想做点什么？
好吧，here we go！

1.首先得想着我在哪边把数据库语句写了，来喽，就是它：demo-mapper.xml

	
		insert into demo_wb (id, name, age, sex, tel) 
		values ((s_country.nextval), #{name}, #{age}, #{sex}, #{tel})
	

这里的id="add"中的add，就对应着demoDao里对应的add方法：public int add(Map params);这个parameterType="map"也不难理解，就是说入参是map类型的嘛，上面的接口也可以看出来，都是对应的。那么到此，Dao层的就写好了。
这里还顺带提一句，#{}一般比${}更常用。解释：${}会直接注入，即变量是什么就注入什么，适用于模糊查询等情况；#{}表示的变量无论有没有双引号都会给加上。

2.接下来就是Service层了，我这个功能简单就没必要多说啥了，写好接口，实现类再自动生成，返回个Dao层对应的方法，ok下一位。

3.接下来Controller层，需要考虑入参是什么，要返回啥。稍加思索发现，入参就那四个框里的值嘛，先不考虑前端怎么获取，反正到这里它必须出现在入参里。那么你会怎么写？
(String name, String age, String sex, String tel)这样？
对，我一开始就是这么写的，被师傅看到后教我一招：(HttpServletRequest request)，想要啥就request.getParameter("啥")。emmm，好用好用！但是问题来了，要是前端传过来几十几百个参数，你咋办？
这时候就建个Model类吧，写好具体变量，get()、set()后就可以用了，比如什么demoModel.getName().toString()，虽说好像长度没啥变化，但是方便管理啊…
方法里做的事情就是收集前端数据再通过Service层通过Dao层操作数据库。哇，好绕，反正最后通过数据库返回结果就完事了。贴个代码：

	@RequestMapping("/add")
	public @ResponseBody int add(HttpServletRequest request) throws Exception{
		Map params = new HashMap();
		params.put("name", new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8"));
		params.put("age", request.getParameter("age"));
		params.put("sex", new String(request.getParameter("sex").getBytes("iso-8859-1"),"utf-8"));
		params.put("tel", request.getParameter("tel"));
		return demoService.add(params);
	}

这里也看到了，因为name字段和sex字段都会有汉字，所以要转个码。
（3月13日更新：昨天写完后对比了一下增和改，突然发现都是要从前端取值，为啥我写的改没有转码呢？查了资料才知道：因为ajax请求时我这里传值是通过地址传的，而地址栏的编码格式是iso-8859-1，因此在处理时就要转码；而下面的改，是放在json里传过来的，所以就不用转码。）

4.终于来到了最后一个环节：

    	/* 增加数据  */
    	function add(){
    		var name = $('#name').textbox('getValue');
    		var age = $('#age').textbox('getValue');
    		var sex = $('#sex').textbox('getValue');
    		var tel = $('#tel').textbox('getValue');
    		$.ajax({
    			type:'post',
    		   	url:'/ImmovableProperty/demo/add.do?name='+name+'&age='+age+'&sex='+sex+'&tel='+tel,
    		   	sync:false,
    		   	dataType:'json',
    		   	success:function(data){
    		      	if (data > 0) {
    		      		alert("添加成功！");
    		      		showTable();
    		      	} else {
    		      		alert("添加失败！");
    		      	}
    		   	},
    		   	error:function(){
					alert("检查网络再试!");
				}
    		});
    	}

用的是ajax，还可以用form表单的方式提交，适合参数较多的时候，举个栗子：

$('#updateUserRoleInfoForm').form('submit', {    
		    url:'/ImmovableProperty/systemManage/updateUserRoleInfo.do',    
		    onSubmit: function(param){    
		         param.staffId=staffId;
		         param.roleId=roleId;
		         var isValid = $(this).form('validate');
		         return isValid;
		    },    
		    success:function(data){
		    	$.messager.confirm('确认','您确认保存吗？',function(r){    
					 if (r){ 
			   if(data>0){
			      jQuery("#saveInfo").html('保存成功!');
				   $('#updateUserRoleInfo').dialog('close');
			      createTable();
			    }else{
			      jQuery("#saveInfo").html('修改失败!');   
			    }
					 }   //噫...不知道谁写的代码，迷之缩进
				 }); 
		    }    
		});

三、删

• demo-mapper.xml

	
		delete from demo_wb where ID in (${id})
	

• DemoDao.java

	public int delete(Map params);

• DemoService.java

	public int delete(Map params);
	//写到这里才发现和上面是一模一样啊...

• DemoServiceImpl.java

	public int delete(Map params) {
		return demoDao.delete(params);
	}

• DemoController.java

	@RequestMapping("/delete")
	public @ResponseBody int delete(String id) {
		int effect = 0;
		Map params  = new HashMap();
			params.put("id", id);
			effect = demoService.delete(params);
		return effect;
	}

• demo.jsp

	//获取数据
	var arr = new Array();
	for ( var i = 0; i < row.length; i++) {
		var value = row[i].ID;
		arr[arr.length] = value;										
	}

	//关键代码
	$.post("/ImmovableProperty/demo/delete.do?id="+arr, ......

四、改

• demo-mapper.xml

	
		update demo_wb set
			name = #{name},
			age = #{age},
			sex = #{sex},
			tel = #{tel}
		where id = #{id}
	

• DemoDao.java

	public int update(Map params);

• DemoService.java

	public int update(Map params);

• DemoServiceImpl.java

	public int update(Map params) {
		return demoDao.update(params);
	}

• DemoController.java

	@RequestMapping("/update")
	public @ResponseBody int update(HttpServletRequest request) throws Exception{
		Map params = new HashMap();
		params.put("id", request.getParameter("id"));
		params.put("name", request.getParameter("nameUpdate"));
		params.put("age", request.getParameter("ageUpdate"));
		params.put("sex", request.getParameter("sexUpdate"));
		params.put("tel", request.getParameter("telUpdate"));
		return demoService.update(params);
	}

• demo.jsp

	//获取数据
	var row = $('#table').datagrid('getSelected');
	var id = row.ID;
	var nameUpdate = $('#nameUpdate').textbox('getValue');
	var ageUpdate = $('#ageUpdate').combobox('getValue');
	var sexUpdate = $('#sexUpdate').combobox('getValue');
	var telUpdate = $('#telUpdate').textbox('getValue');
	var params = {
		"id":id, 
		"nameUpdate":nameUpdate, 
		"ageUpdate":ageUpdate, 
		"sexUpdate":sexUpdate, 
		"telUpdate":telUpdate
	};

	//ajax请求
	url:'/ImmovableProperty/demo/update.do',
	data: params,

五、查

• demo-mapper.xml

	
		select * from demo_wb where name like '%${name}%'
	

• DemoDao.java

	public List> searchName(Map params);

• DemoService.java

	public Page searchName(Map params, Integer pageNum, Integer pageSize);
	//这里就不一样了，因为这里的Service层是写了分页拦截器，所以参数不一样

• DemoServiceImpl.java

	public Page searchName(Map params, Integer pageNum, Integer pageSize) {
		PageInterceptor.startPage(pageNum, pageSize);
		List> list = demoDao.searchName(params);
		Page page = PageInterceptor.endPage();
		page.setRows(list);
		return page;
	}

• DemoController.java

	@RequestMapping("searchName")
	public @ResponseBody Page searchName(HttpServletRequest request, int page, int rows){
		Map params = new HashMap();
		params.put("name", request.getParameter("name"));
		return demoService.searchName(params, page, rows);
	}

• demo.jsp

	function searchName() {
		var name = $('#name').textbox('getValue');
		$('#table').datagrid({
			url:'/ImmovableProperty/demo/searchName.do',
			pagination:true,
			rownumbers:true,
			pageList:[20,30,40,50],
			fit:true,
			queryParams:{'name':name},
			toolbar:"#tb",
			columns:[[
				{field:'ID',title:'id',checkbox:true},
				{field:'NAME',title:'姓名',width:150,align:'center'},
				{field:'AGE',title:'年龄',width:150,align:'center'},
				{field:'SEX',title:'性别',width:150,align:'center'},
				{field:'TEL',title:'电话',width:300,align:'center'},
			]],
			onLoadSuccess:function(data){
				$('#table').datagrid('fixRowHeight');
			}
		});
	}

全文完。