背景:刚转到新公司,带我的大哥就说这里没有strusts2,没有MVC,开发方式是前后端分离,用restful进行前后端数据交互。这些所有东西对刚入行还是个小白的我都是陌生的,所以就很马不停蹄的去看了好多介绍这些的文章,但对rest的理解还不是很透彻,感觉也是抽象难懂,我仅列出自己能理解的部分已经实现的程序。
概念:REST 是一种WEB交互方案,有自己的设计风格,是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。其比较容易理解的是体现在URI的设计,它的核心理念是利用HTTP协议的内容与状态让人URI表达含义的方式更加规范。如:对一个用户管理的URI设计可以如下:1.增加用户:
http://###/user 2.删除id为2的用户:http://###/user/2 3.修改用户: http://###user 4.查询id为3的用户: http://###/user/3
其中在前端请求时,要用http协议中的:POST、DELETE、PUT、GET方式分别去请求上面的增、删、改、查操作;在后端的restful的接口中,即使URI是相同的,如增加用户和修改用户、删除用户和查询用户,但因为请求方式不同,可以在接口的方法中限制请求的方式即可完成对URI的绑定。另一个规范是利用HTTP协议的状态(200,是OK,404是找不到,403是禁止等状态)向前端返回结果,而不仅仅是返回对象实体数据,但我下面的例子中并没有这样做,前后交互还是按照传统的json数据传输完成。
程序:这里用的是springMVC实现的后端restful接口;前端用的是jQuery中的ajax请求方式。当增加用户、修改用户时,前端发送给后端的参数是封装好的对象;而后端在任何情况下返回给前端的都是json对象。
由于时间原因,代码不会全部列出,仅列出核心代码:
后端的Controller层及前端的请求ajax:
1.增加用户:
@RequestMapping(value = "/user",method=RequestMethod.POST)
public @ResponseBody
User createUser(User user) {
/*这里利用Service层的方法,将user对象存到数据库中*/
return user;
}
$('#btn').click(function(){
var mydata = '{"name":"'+ $('input[name=username]').val() + '","id":"' +
$('input[name=userId]').val() + '","age":"' + $('input[name=age]').val() + '"}';
$.ajax({
type:'post',
url:'springmvctest/user',
contentType : 'application/json',
// data:JSON.stringify({"name":"张三","id":"12","age":"20"}), 这个也可以
// data:'{"name":"张三","id":"12","age":"20"}', 这个也可以
data : mydata, // 一共3个将数据表示为json字符串的方法
beforeSend:loadFunction,//加载执行方法
error:errFunction,//错误执行方法
success:function(res,status,xhr){
$('#list').html(res.name + '---++---' + res.id + '---++---' + res.age);
} //成功执行方法
});
代码
说明:后端:@RequestMapping是springmvc绑定URI用的,其中method属性还可以是其他delete、put等HTTP方法;@ResponseBody是让这个方法返回的对象以json 的格式返回;@RequestBody是接受json形式的数据对象参数;这里的User user参数列表,只要将其属性和前端请求过来的参数变量名称相同的对应,它会自动绑定匹配,直接会将值传过来。前端:$.ajax是最底层的方法,type属性代表请求的方法,contentType代表请求时发送数据的格式,这里是以json字符串的格式发送数据;data是要发送的数据,这里一共给出3种将表单数据表示为可传输的json字符串形式,这些都是爬坑爬出来的;success就是请求成功的回调函数了。这样就简单的实现了一个增加用户的代码实现。修改用户除了请求方法是PUT不一致外,其他与这个基本一致,不在列出。
2.查询姓名为admin的用户:
@RequestMapping(value = "/user/{username}",method=RequestMethod.GET)
public @ResponseBody
User getUserById(@PathVariable username) {
/*这里利用Service层的方法,将username为给定值的user查询出来*/
return user;
}
$('input[type=button]').click(function(){
$.ajax({
type:'get',
url:'springmvctest/user/admin'
datatype:'json',
success:function(res){
$('#box').html(JSON.stringify(res));
}
});
});
代码说明:后端:@PathVariable是绑定URI后跟的参数,将URI后跟的参数值直接传递到形参中。前端:datatype是后端返回给前端的数据类型,这里为json,那么前端拿到的就是json对象了。这里将参数值放在URI之后了,删除某个用户的代码实现除了请求方法是DELETE之外,其它基本相同,不再列出。
总结:这里最大的坑莫过于前端的参数传递不到后端。个人经历了好多这种情况,但基本的问题原因是自己某些细节疏忽了,并没有按照标准来写。如@RequestBody未写,如contentType:application/json未写等等。其中在解决这些问题时,发现其他人会让在web.xml增加一些配置,比如解决springmvc无法获得PUT请求过来的参数,本人依照着去做,并没有解决,最后是因为@RequestBody疏忽的原因,并不是配置文件少什么东西。(当然也许他们的springmvc版本低导致的)。
因为时间仓促,自己并没有完全对其进行一个比较好的系统的总结,只给出了核心的东西,请多多包涵。拿的代码也是自己以前学习时做的demo代码,至于项目上的代码结果和这个基本无异。来新公司一整个月了,这里用到的springmvc、mybatis、reactJS对自己来说全是新东西,一直在马不停蹄的加班学习总结,到现在基本能够稳住阵脚,知道从哪儿入手来解决问题了,以后决定一周写1至2篇博客分享总结出来,给新人增加前进的动力,加油!