SSM整合---以学生信息管理为例实现前后端分离（前端）

个人比较喜欢前后端分离，这样有利于分工明确，各施其职。

前端发送请求给服务器，让服务器处理后响应数据给前端展现即可

后台就负责数据处理即可

前端

由于自己的前端知识没有系统的学习，所以前端写的不好，但能配合后端开发一个学生信息管理，能简单的进行CRUD。话不多话，下面是整个前端的 html文件

1.学生信息管理首页

SSM-index.html

	
		
		
	
	
		
			
SSM整合---学生信息管理
			

				查看学生信息
				

				添加学生信息
			
		
	

2.添加学生页面

add_page.html

	
		
		
		
		
	
	
	
		
			返回
			

				

					学号：

					姓名：

					  
					

				
			
		
	

3.查看学生页面

select_page.html

	
		
		
		
		
	
	
	
	
		
			返回
			

				

					

						
学号
						
姓名
						
操作
					
				
			
		
	

4.修改学生页面

修改操作是在查看页面通过URL地址的形式把数据传给修改页面，这样在进入修改学生页面时就可以加载该学生的数据显示在输入框了，所以在这个修改页面引入 js文件来获取URL地址上的数据。

	
		
		
		
		
		

	
	
		
			返回
			

				

					学号：

					姓名：

					  
					

				
			
		
	

getUrlParam.js文件，这个别人写的，我只是引用

UrlParam = function() { // url参数
  var data, index;    
  (function init() {    
    data = [];    //值，如[["1","2"],["zhangsan"],["lisi"]]
    index = {};   //键:索引，如{a:0,b:1,c:2}
    var u = window.location.search.substr(1);    
    if (u != '') {    
      var params = decodeURIComponent(u).split('&');
      for (var i = 0, len = params.length; i < len; i++) {
        if (params[i] != '') {
          var p = params[i].split("=");
          if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =
            data.push(['']);    
            index[p[0]] = data.length - 1;    
          } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃
            continue;
          } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa    
            data.push([p[1]]);    
            index[p[0]] = data.length - 1;    
          } else {// c=aaa    
            data[index[p[0]]].push(p[1]);    
          }    
        }    
      }    
    }    
  })();    
  return {    
    // 获得参数,类似request.getParameter()    
    param : function(o) { // o: 参数名或者参数次序
      try {    
        return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);    
      } catch (e) {    
      }    
    },    
    //获得参数组, 类似request.getParameterValues()    
    paramValues : function(o) { //  o: 参数名或者参数次序
      try {    
        return (typeof(o) == 'number' ? data[o] : data[index[o]]);    
      } catch (e) {}    
    },    
    //是否含有paramName参数
    hasParam : function(paramName) {
      return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;
    },    
    // 获得参数Map ,类似request.getParameterMap()    
    paramMap : function() {
      var map = {};    
      try {    
        for (var p in index) {  map[p] = data[index[p]];  }    
      } catch (e) {}    
      return map;    
    }    
  }    
}();    

好了，前端就是这样了，接下来就是SSM整合了

SSM整合---以学生信息管理为例实现前后端分离（后端）