下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
Angularjs+SSM+json1目标用angularjs+SSM+json查询展示所有商品,和之前的差别:1、没有jsp页面,只有html页面,因此页面中不会再有任何Java代码或者jstl代码,只有前端代码。2、页面加载时主动从向控制器要数据,控制器和页面之间只传递json数据3、页面拿到json数据后,由angularjs框架将数据展示到页面中,数据嵌入页面的过程完全在客户端浏览器完成。2服务端环境和配置下面过程只详细介绍和老版本SSM网站不同的地方,未介绍的配置,表示和老版本没有差别。2.1添加jackson包为工程添加三个jacksonjar包,如下:1、启动annotation-driven,这是一个主要差别!2.21、启动annotation-driven,这是一个主要差别!3、视图前缀以实际为准,后缀改为.html2、3、视图前缀以实际为准,后缀改为.html2、控制层组件扫描,包名以实际为准3控制器代码4、向map中放两对数据<“total”,查出的商品数量><“products“,商品列表>这个map对象将会以json数组的形式传到浏览器3、4、向map中放两对数据<“total”,查出的商品数量><“products“,商品列表>这个map对象将会以json数组的形式传到浏览器3、调用service层,查询所有商品,返回商品列表。Dao和service层缺的方法,自行补充2、加responsebody注解,方法直接返回对象----主要差别!1、和之前的没有差别,只是现在依据配置会跳转到index.html4客户端环境配置在js文件夹中添加angular.min.js。5index.html页面创建一个index.html文档,下面的js代码写在index.html文档中body的最后,因为流程的原因,先解释下面的js。Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。Scope是一个对象,有可用的方法和属性。当在控制器中为
$scope
对象添加属性和方法时,视图(HTML)可以获取了这些属性Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。Scope是一个对象,有可用的方法和属性。当在控制器中为
$scope
对象添加属性和方法时,视图(HTML)可以获取了这些属性和方法。2、如果成功,将商品总条数赋值给scope对象的total属性,将商品列表赋值给scope对象的productList属性。1、页面画完后,执行js代码,请求selectAllProducts.do,拿回商品数据控制器使用下面两句,向map中存入数据:map.put("total",pruductList.size());map.put("products",pruductList);这个map传到浏览器是什么样子?response.data又是什么?在浏览器调试下可以清楚看到,response.data.total就是存入的商品总数。展开products可以看到,它就是一个对象数组,数组的每个元素都是一个商品对象。下面两句话,将商品条目存储到作用域的total属性中,将所有商品组成的对象数组存储到作用域的productList属性中。这两个属性可以直接绑定到html中并展示。$scope.total=response.data.total;//总条数 $ductList=ducts;//所有商品下面来看index.html的页面部分,页面只有一个简单的表格,对$ductList进行循环,每个商品对象画一行。这个过程有点像JSTL,但是JSTL是JSP标签库,是在服务端执行的,而下面的代码都是在客户端浏览器执行的。1、引入jquery和angularjs,路径以实际为准1、引入jquery和angularjs,路径以实际为准3、ng-repeat指令表示循环,对productList进行循环,每次循环画一行,productList就是$scope.productList,视图里直接写属性名就可以2、为body添加ng-app指令,和ng-controller指令6、scope的total属性值,在视图里,不用写$scope4、AngularJS表达式写在双大括号内:{{expression}}。{{p.picture}},picture是商品对象的属性名,和实体类中的属性名一致。3、ng-repeat指令表示循环,对productList进行循环,每次循环画一行,productList就是$scope.productList,视图里直接写属性名就可以2、为body添加ng-app指令,和ng-controller指令6、scope的total属性值,在视图里,不用写$scope4、AngularJS表达式写在双大括号内:{{expression}}。{{p.picture
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 市政工程促进城市环保企业
- 市政改善城市环保库里
- 市政服务改建工程
- 2024年火电电力职业技能鉴定考试-电工制造安全工作规程笔试参考题库含答案
- 2024年湖北住院医师-湖北住院医师超声医学科笔试参考题库含答案
- 2024春江苏开放大学幼儿园环境创设过程性考核作业1-3
- 2024年法律知识法治建设知识竞赛-旅游法知识竞赛笔试参考题库含答案
- 近红外光谱仪项目商业计划书及实施方案|瑞克咨询|2024年编制|
- 2024年水利工程行业技能考试-水井钻井技术员知应会笔试参考题库含答案
- 高品质研磨碳酸钙浆料项目可行性研究报告及运营方案|瑞克咨询|2024年编|
- 标准作文稿纸模板(A4纸)
- 四川省成都市2023-2024学年五年级下学期期中综合测试数学试卷(北师大版)
- 2024年泰安高新区聚智人力资源开发有限公司招聘笔试参考题库含答案解析
- 2024年浙江省温州市中考一模语文试题
- 2024年山东省农业发展信贷担保有限责任公司招聘笔试参考题库含答案解析
- 小学语文学科核心素养的培养探究
- 进农村开展交通安全宣传工作
- 办案审讯员培训课件模板
- 小学生飞机科普小知识
- 国土资源管理中测绘的应用
- 戒烟健康指导计划
评论
0/150
提交评论