第二天做了的内容大纲如下
1.运用AngularJS前端框架的常用指令
2.完成品牌管理的列表功能
3.完成品牌管理的分页列表功能
4.完成品牌管理的增加功能
5.完成品牌管理的修改功能
6.完成品牌管理的删除功能
7.完成品牌管理的条件查询功能
1.前端框架AngularJS入门
1.1 AngularJS简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。
1.2 AngularJS四大特征
1.2.1 MVC 模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。
Model:数据,其实就是angular变量($scope.XX);
View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是function,数据的增删改查;
1.2.2双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
1.2.3依赖注入
依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI.
1.2.4模块化设计
高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate //ng常用,ngRoute用于路由,ngAnimate用于动画效果
2)用户自定义的模块 angular.module('模块名',[ ])
demo1:表达式 {{}}
demo2:双向绑定(改哪一个另一个都会变,也可以说是多向绑定)
3.初始化命令:ng-init,也可以调用方法 如 ng-init = "findAll()"
4.控制器:ng-controller, 下面module初始化的第二个参数为引用的模块,这里没引用所以为[]
5.点击事件 :ng-click
6.数组遍历:ng-repeat
7.遍历对象数组显示其属性
品牌管理之增删改查
1.实现显示全部品牌
//在body里添加ng-init="findAllBrand(),但是后面添加分页控件后,页面加载时会自动查询,所以ng-init去掉了
2.实现页面加载时分页显示所有品牌信息
(1)在要显示分页控件的位置加上如下代码
(2)在引用分页模块:在[] 添加 '[pagination]'
(3)分页的属性设置,默认第一页,默认每页十条,可修改每页条数
(4)页面重新加载时调用方法
(5)定义分页用的类:total为总页数,rows为当前页信息
(6)后台controller层代码
(7)后台service层代码(接口代码略)
2.品牌新增
先将弹出窗体绑定实体 entity
(1) js代码
(2)保存按钮绑定事件
(3)因为新建与修改这里用的同一实体,所以点击新建按钮时,将entity置空
(4)定义一个result类,增删改时返回对象为此类型,result为结果成功与否,msg为提示信息
(5)后台controller层代码
(6)后台service层代码(接口代码略)
3.品牌修改
后端代码与新增一样,前端传过来id为空则为新增,否则为修改
只需要将修改按钮绑定事件 参数传id即可
4.将选中项删除
(1) 勾选框绑定方法以及删除按钮绑定方法
(2)方法定义,selectIds定义为空数组,不然会报错
(3)后台controller层代码
(4)后台service层代码(接口代码略)
5.条件查询
(1)添加查询条件输入框与查询按钮,绑定实体searchEntity
(2)查询方法与前面分页查询一样,只是查询条件多了品牌信息,后台代码也一样