AngularJS到Spring Controller层请求流程

技术

后台框架:SSM

前端框架:AngularJS

功能模块:多条件分页查询


代码请求流程
  • 前端brand.html页面输入查询条件,点击查询按钮出发reload()
    html页面输入查询条件点击事件.png

  • reload()在前端baseController申明,传入当前页码和每页显示记录参数;
    baseController调用reload并传递参数.png

  • search()在前端brandController申明,brandController继承baseController;search方法调用baseServicefindByPage方法发送HTTP请求,后台Controller层接收请求;
    调用brandController层search方法.png

  • findByPage方法需要接收多条件参数,通过$scope.searchEntity获得,这是一个JSON对象,如:{"name":" ","firstChar":" "}
    查询条件格式.png

  • 一次完整的请求信息如下,请求头可以看到请求参数形式,左侧可以看到请求url;多条件分页查询请求参数.png

  • 后台Controller层方法如下,接收前端请求参数用Brand brand, Integer page, Integer rows,因为请求参数格式是key=value类型,所以不需要用RequestBody;
    controller接收参数进行处理返回json字符数据到response.png

  • Controller层方法执行完后,利用注解@ResponseBody把对象转换成响应报文返回
    请求成功后返回的Response对象.png

  • response.data.rows赋值给dataListresponse.data.total赋值给totalItems ,完成前端页面显示。
    回调函数返回response对象.png

  • 理解@RequestBody和@ResponseBody

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值