ssm把后端数据传到前端_SpringMVC映射的前端后台数据交互总结

tags:springmvc

categories:笔记

date: 2016-08-14 22:19:31

由于最近在开发项目模块时候,总会涉及到前端后台数据交互过程。其实我们在处理程序时候,无论是框架,实现和逻辑都是以数据为基础的。并且,开发的又是web项目,那当然会涉及到前端和后台的交互了。总而言之,弄清楚数据的流动过程至关重要。我们需要处理的也是数据,所以,若是把数据流的产生,到中间处理,到最后的展示,也可以联系MVC来理解,这个过程都掌控好的时候,开发效率和思路也会清晰很多。所以,来总结总结springmvc中requestmapping参数的时候,和一些前端后端表单交互方式的总结。

springmvc中requestmapping如何使用?

由于最近在使用springmvc,所以将一些基础内容总结总结,特别是requestmapping这个注解参数。它是我们映射参数的处理器,将处理和路由不同的http请求和参数映射。spring这个轮子使用起来还是挺方便的,也很强大,拓展伸缩力也挺灵活,对我们日常开发有事半功倍效果。并且,现在的项目开发为了规范代码风格和"约定大于配置"的理念也在不断影响我们,很多公司的后台接口都是按照RESTFUL风格来设计与实现。

因为我们的web项目都是基于HTTP协议的,在应用程上数据的点对点的传输和请求,无外乎就是HTTP的那几种请求类型,如GET,POST,PUT等等。所以,springmvc也对REST风格开发中这几种HTTP请求方法有定义与实现。因为在B/S架构上的软件大多都是离不开http协议的。所以,在细化到一个java中的一个controller类,该类就相当于一个很大的停车场吧(是在想不到什么好的场景了),将轿车,卡车,赛车等几种不同类型的车分别映射成http的GET,POST,PUT请求。若是将汽车停车这个过程比喻成一个http请求的话:

我们车主就是发送请求端,停车场就是服务端。

车的类型式属于轿车还是卡车,还是赛车就相当于是什么类型的请求了:假设我们是开着轿车去XX停车场停车(这就是一个http请求)。轿车对应GET请求,然后将车开到轿车停车区域,在结合轿车牌子,汽车车型(请求参数),找到了停车位(相当于找到了某个controller类的处理方法method)。

将车子停在具体车位后,停车位管理员给予停车卡,车主拿到卡就可以走了(就相当于请求处理完成,返回数据了)。

我们就可以将requestMapping这个注解参数比喻成停车场管理员,他职责就是结合你的车子种类(Htpp请求类型),车型,大小,牌子(请求参数)等等,决定停车在那一个停车区位置(处理方法),最后停车完成,也就相当于处理完成了。所以,requestMapping的作用是很大的。下面来看看该注解参数的具体用法:

@RequestMapping: 是用来处理一个请求地址映射的注解,可用于类或者方法上。用于类上:表示类中的所有方法请求都是以该参数value值中内容作为父路径;用于方法上则是映射到具体的URI参数了。

我就把RequestMapping的主要六个注解来分别看看,并大致将它们分成了3类说明:

Value,method:

value: 指定请求的实际地址,也就是想http uri中的请求参数是什么内容,才能跳入调用这个方法。

method: 指定HTTP请求的method类型:GET,POST,PUT,DELETE等。

eg: 我若是想让以GET方式请求的http请求,并且它uri中包含test/getValue.do结尾,调用getValue方法,那么可以这样定义:

@RequestMapping(value="/test/getValue.do",method=RequestMethod.GET)

public String getValue(){...}

consumes,produces:

consumes: 指定处理http请求的提交内容类型(也就是HTTP头中的Content-Type参数),eg:application/json,text/html;也就是说,若是希望方法method处理的是json类型数据,那么就要求客户端提交过来到这个方法的请求参数是json类型。

produces: 指定该方法处理后返回的内容类型,仅当request请求头中的(Accept)类型中包含该指定类型才返回。这句话意思就是,若是客户端可以接收text/html;application/json等类型的数据类型,那么我服务器端才在该函数处理完数据后,以这些格式将数据封装返回浏览器。

params,headers:

params: 指定request请求中必须包含某些参数值,才让该方法处理。

headers: 指定request中必须包含某些指定的header值,才让该方法处理。

下面来个具体点的例子:

1.value,method:就拿一个用户类的增删改查就行了,也就对应了http的POST,DELETE,PUT,GET方法了。

@Controller

@RequestMapping("/user") //下面方法若是想调用,uri中都必须在/user/...后

public class UserController {

@Autowired

private UserService userService;

/*

* 添加用户。

* POST类型的../user/add.do请求uri调用该方法。

*/

@RequestMapping(value = "/add.do",method=RequestMethod.POST)

public String addUser(HttpServletRequest request,HttpServletResponse response){

int iRetVal = 0;

String nickname = request.getParameter("nickname");

String state = request.getParameter("state");

User user = new User();

user.setNickname(nickname);

user.setState(Integer.valueOf(state));

iRetVal = userService.insertUser(user);

return ResponseUtil.ajax(String.valueOf(iRetVal).toLowerCase(),response,"text/html");

}

/*

* 根据id查询用户

* GET类型的 ../user/sid/10 请求调用该方法。

* 类似这种 /{param1}/{param2}..的uri请求,那么就可以使用@PathVariables参数对路径参数进行映射封装。

*/

@RequestMapping(value = "/sid/{sid}",method=RequestMethod.GET)

public ModelAndView getUserById(@PathVariable String sid){ //sid参数对应方法上的路径参数{sid}

ModelAndView mv = new ModelAndView("stulist"); //跳转到stulist.jsp

User user = userService.getUserById(sid);

mv.addObject("user",user);

return mv;

}

/*

* 根据id删除用户

* GET类型的 ../user/sid/10 请求调用该方法。

* 类似这种 /{param1}/{param2}..的uri请求,那么就可以使用@PathVariables参数对路径参数进行映射封装。

*/

@RequestMapping(value = "/sid/{sid}",method=RequestMethod.DELETE)

public ModelAndView DeleteUserById(@PathVariable String sid){ //sid参数对应方法上的路径参数{sid}

ModelAndView mv = new ModelAndView("stulist"); //跳转到stulist.jsp

int ret = userService.DeleteUserById(sid);

mv.addObject("ret",ret);

return mv;

}

//可以看见上述的getUserById和DeleteUserById对应的请求URI都一样,但是是如何区别调用那个方法呢?那就是根据HTTP的method类型。

//修改方法省略,大致相同,就是method=RequestMethod.PUT而已。

}

2.consumes、produces:就写两个方法分别对应两个参数即可。

consumes:服务器端要求,在uri和http的method都匹配的情况下,只是处理request请求头中Content-Type="application/json"类型的请求。

//下面这个方法只是会处理POST的http类型,并且提交的数据是json类型:{"name":"","age":"",...}

@RequestMapping(value="/addUser",method=RequestMethod.POST,consumes="application/json")

public String addUser(@RequestBody User user){

//add User

}

produces: 服务器端该方法仅处理request请求中Accept头中包含了"application/json"的请求,同时暗示了返回的内容类型为application/json;可以结合@ResponseBody参数一起使用。

@RequestMapping(value="/getAllUsers",method=RequestMethod.GET,produces="application/json")

public String getAllUsers(){

//...

}

3.params、headers: 也是列举对应的方法来说明。

params: 若是我们有这样一个需求,某个方法只是处理uri中包含某个指定关键字参数的请求。若是只是想处理uri请求中参数包含kparam=arden的请求。

//eg: http:.../getUser?kparam=arden

@RequestMapping(value="/getUser",method=RequestMethod.GET,params="kparam=arden")

public String getUser(){

//...

}

headers: 若是我们有需求,该方法仅仅处理request的请求头中指定"refer"为"www.whoshell.com"的请求。

@RequestMapping(value="/getWebInfo",method=RequestMethod.GET,headers="Refer=http://www.whoshell.com")

public String getWebInfo(){

//...

}

requestMapping如何绑定request和response参数数据?

在常规的http协议的request请求格式如下:

GET /2017/03/09/classLoader-how HTTP/1.1 [请求行:请求类型 请求资源uri http协议版本]

Accept: */* [请求头: key = value]

Accept-Language: zh-cn

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;3.5.21022)....

Host: www.whoshell.com

Connection: Keep-Alive

[空行]

xxxxxx [主体Body]

那么,springmvc中就可以针对request请求的不同部分内容,进行参数绑定。可以大致分为四类:

处理request的uri部分(不包含queryString部分(?key=value) eg:http:{uri}/foo/bar)注解: @PathVariable

处理requeset header部分(request请求头参数)的注解: @RequestHeader @CookieValue

处理request body部分注解: @RequestParam @RequestBody

处理attribute类型的注解:@SessionAttributes @ModelAttribute

然后就来分别说说针对request请求的不同部分的注解是如何使用的,如何绑定数据的:

1.@PathVariable:

当使用@RequestMapping URI的template样式映射参数时候,如http:{uri}/user/{uid},这时候可以通过@PathVariable注解将uri中的uid参数绑定到方法的参数上。

(方法上的uri中的{sid}参数将会映射传递到方法的sid参数上。若是方法参数名称和uri中传递的{param}名称不一致,需要在方法参数旁显式指定名称。)

@RequestMapping(value = "/sid/{sid}",method=RequestMethod.DELETE)

public ModelAndView DeleteUserById(@PathVariable String sid){ //sid参数对应方法上的路径参数{sid}

ModelAndView mv = new ModelAndView("stulist"); //跳转到stulist.jsp

int ret = userService.DeleteUserById(sid);

mv.addObject("ret",ret);

return mv;

}

//uri/{param}中param名称与方法变量名字不同,需要@PathVariable()显示指定

@RequestMapping(value="/sid/{userId}",method=RequesetMethod.DELETE)

public ModelAndView DeleteUserById(@PathVariable("userId") String sid){...}

2.@RequestHeader,@CookieValue:

@RequestHeader注解,可以把Request请求header部分的值绑定到方法的参数上。

例如假设我们的一个request请求头为以下内容:

Host: www.cnblogs.com

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

Referer: https://www.baidu.com/link?url=vMwqr_1CInBYSsvCXnoPrwOFxPvxdChHmN9XWPp7C1Do5MjbnJN8e8WP6VCPjsW5w-edqnKJaCNJPN2sR20eNOb6d73O0ZaFM9Kwe-GRVtK&wd=&eqid=8a738c1d00002ce20000000658c8c3ca

Accept-Encoding: gzip, deflate, sdch

Accept-Language: zh-CN,zh;q=0.8

Cookie: CNZZDATA1260386081=1660805767-1486222861-https%253A%252F%252Fwww.baidu.com%252F%7C1486222861; __utma=226521935.140421385.1488358381.1488899945.1488899945.1; __utmz=226521935.1488899945.1.1.utmcsr=baidu|utmccn=(organic)|utmcmd=organic; CNZZDATA1259029673=860036098-1489063915-%7C1489063915;

那如果服务器端代码要使用request请求头中某些内容,那么我们就可以使用@RequestHeader参数来映射参数:

下面的方法参数,分别获取请求头中,客户端接收的编码(Accept-Encoding)绑定到encoding参数上,和接收的内容格式(Accept)绑定到accept参数上。

@RequesetMapping(value="..")

public void getRequestHeaderInfo(@RequestHeader("Accept-Encoding") String encoding,

@RequestHeader("Accept") String accept){

//...

}

@CookieValue注解,顾名思义,就是将客户端发送的request请求中cookie拿到,绑定到方法参数上。

我们还是根据上面那个request请求头,我们可以看到最后一行请求头中有:Cookie:..的内容,若是想直接拿到该字段内容,那么可以使用@CookieValue注解来实现数据绑定。

@RequesetMapping(value="..")

public void getRequestCookieInfo(@CookieValue("Cookie") String cookie){ //绑定cookie内容到cookie参数

//...

}

3.@RequestParam,@RequestBody:

上面我们在获取request请求资源uri路径,请求头内容后,还有一个重要的request格式中区域就是请求体body了。那么这两个参数就是用于处理这部分内容的。

@RequestParam注解,通过以下几点来说明:

(1) 常常用来处理简单类型的数据绑定。什么是简单类型,简单的说,就是在服务器端可以通过request.getParameter("key")方法获取的参数的类型。通常这类的参数在Get请求中是以uri?key=value样式体现的,也就是queryString的值。也能获取POST请求中请求体body data中的值。也就是将一些key=value参数放置在request请求体中。

(2) 用来处理Content-Type: 为application/x-www-form-urlencoded表单提交的编码内容。

(3) 该注解有两个属性:value,required。value用来指定传入值的名称,required用于指示参数是否必须存在并绑定。

//url: http://.../getUser?uid=1

@RequestMapping(method = RequestMethod.GET)

public String doSomething(@RequestParam("uid") int uid, ModelMap model) {//url中queryString参数uid绑定到方法参数uid中。

//...

}

@RequestBody注解:通常用来处理非表单提交(Content-Type={application/json;application/xml})中的post data body内容。

4.@SessionAttributes,@ModelAttribute:

@SessionAttributes注解是用来绑定httpSession的attribute对象的值,方便在方法中参数映射并使用。该注解有value,types两个属性,可以通过名字和类型来指定要使用的attribute对象。

那么为什么要使用这个注解呢?能解决什么问题?这个与spring中的ModelMap有关。因为modelMap中的属性作用域是request级别,也就是说,当本次request结束后,modelMap中的所有属性都会被销毁,那么就造成一个问题?若想在多个request中共享该对象,如何实现?那就可以把对象放置到session域级别中。就是通过@SessionAttributes来完成这个需求的。

eg:通过@SessionAttributes注解将该request请求域中的ModelMap中的user对象属性放置到session中。在后面jsp视图中我们可以使用常规session操作得到user属性(session.getAttriute("user")):

@Controller

@RequestMapping("/editUser.do")

@SessionAttributes(value="user",types={user.class})

public class EditUserForm {

// ...

}

关于该属性的使用形式还有以下几种:

(1)字符串数组指定多个属性。@SessionAttributes({"attr1","attr2"})

(2)也能通过types指定每个value的属性:

@SessionAttributes(types={User.class})

@SessionAttributes(types={User.class,Deptment.class},value={"atrr1","attr2"})

@ModelAttribute注解有两个用法,一个是用于方法上,一个是用于参数上:

方法上: 通常是用来处理@RequestMapping之前,为请求绑定需要从后台查询的model。

参数上: 用来通过名称对应,把相应的名称的值绑定到注解的参数bean上,该bean的来源有:

A. @SessionAttributes配置中的attribute对象。

B. @ModelAttribute用于方法上时候指定的model对象。

C. 若是上述情况都没有,new一个需要绑定的bean对象,然后把request中按照同名方式把值绑定到bean。

在参数上使用该注解的例子:可以看到@ModelAttribute("user")中有user参数与@SessionAttribute("user")中的对象名称一致,那么就会自动将user属性对象注入到ModelMap对象,就可以直接使用该user对象了。

@RequestMapping(value="/users/{uid}/edit", method = RequestMethod.POST)

public String processSubmit(@ModelAttribute("user") User user) {

//...

}

关于@ModelAttribute属性中对象如何查找,按照如下顺序:先查询@SessionAttribute上有无绑定的同名对象,若是没有则在查询定义在方法上的@ModelAttribute是否绑定有同名对象,最后则是在uri按照属性名称映射查找。

前端表单提交形式有那些?

在讲述完spring对request请求数据封装和绑定了,就再看看前端是如何将数据传递到后台的?有那种形式,如何将数据传递到后台?(以后有好方式更新收集.)

通过type=submit提交:

一般通常的表单提交通过type=subimt来实现,结合input type="submit"或者想SUI这种UI组件中button type="submit"实现按钮提交。通过点击该标签按钮提交表单数据调到action指定uri。

eg:

//sui form提交

method="post" action="test/form1.do">

名称

id="name" name="name" placeholder="请输入名称">

这里是块级帮助文本的实例。

请打勾

提交

//常规form input提交

通过js提交form表单:

还可以使用js来触发表单提交,通过button,超链接等的点击触发事件,在事件中调用js方法,在方法中调用submit提交表单数据。通过js的方法,那挺多前端js框架都能如extjs,jquery,还有原生js等都能实现啦,下面看看这方式如何写:

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

back_front

function bsubmit(){

var form = document.forms[0];

form.action = "test/form1.do";

form.method = "post";

form.submit();

}

//若是form表单的基础信息都填写完成,想直接提交,那么可以使用:

// js: document.getElementById("myform").submit();

//jquery: $("#myform").submit();

名称

id="name" name="name" placeholder="请输入名称">

这里是块级帮助文本的实例。

请打勾

//通过调用bsubmit()js方法提交表单。

ajax异步提交表单:

其实,ajax提交与js提交使用方式大致相同,只是ajax是异步的,用于处理一些对前端交互不阻塞的操作,异步调用后台接口进行服务器端交互,得到信息,返回前端。ajax提交,也是可以通过原生js或者jquery来实现,这里看看在点击提交按钮后,使用jquery简单实现ajax提交:

$(function() {

//使用jquery得到id="submit"的按钮组件,绑定点击事件,发ajax异步请求。

$("#submit").click(function() {

$.ajax({

type: "POST",

url: "/url.do",

data: params,

dataType : "json",

success: function(respMsg){

}

});

});

});

当前总结,就是这几种,不同的前端框架与UI其实对于表单提交都差不多这几种方式,日后还有不同在更新啦。

前端后端如何连接传递数据?

在了解完springmvc的注解参数获取封装数据,和前端的数据提交后,接下来结合上述的前端表单提交数据,后台如何获取。

springmvc中封装前端数据大致有以下几种:

直接将表单的name参数写在Controller类的方法参数中。:(注意要同名才能映射成功)

userName:

password:

//后台controller,addUser方法的userName,password参数名称与表单的name同名才能映射得到数据

@RequestMapping(value = "/url.do",method=RequestMethod.POST)

public String addUser(String userName,String password){

//..add user

return "userlist";

}

后台通过request来获取数据。同样使用上面的表单。:

通过request.getParameter("name")就可以得到前端数据。

@RequestMapping(value = "/url.do",method=RequestMethod.POST)

public String addUser(HttpServletRequest request){

String userName = request.getParameter("userName");

String password = request.getParameter("password");

//...

return "userlist";

}

封装前端数据到bean中。:

通过这种方式,在controller的方法中,参数为form表单属性对应的bean。表单的每个提交属性name都要与bean的字段相同,这样在提交的时候,后台会自动调用bean的setXX方法将表单值设置到bean中,这样我们就可以直接对bean操作了。

public class User{

private String userName;

private String password;

//getter

public void setUserName(String userName){

this.userName = userName;

}

public void setPassword(String password){

this.password = password;

}

}

//controller中,就可以通过User user对象封装form表单数据

@RequestMapping(value = "/url.do",method=RequestMethod.POST)

public String addUser(User user){

String userName = user.getUserName();

String password = user.getPassword();

//...

return "userlist";

}

另外,除了(1)中的那种常规形式表单提交外,在前端还可以将数据封装成json格式数据提交,也可以通过jquery中的表单序列化($("#myForm").serializeArray())的方法形式提交数据,但是后台获取表单数据也就是这几种形式了。

上述仅仅是将本人使用过的场景模式中的流程总计出来,当然必然还有其他方式的前后端交互,这里仅供参考啦嘿嘿....

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值