练手项目1笔记 day02AnglaJS

目标

运用AngularJS前端框架的常用指令
完成品牌管理的列表功能
完成品牌管理的分页列表功能
完成品牌管理的增加功能
完成品牌管理的修改功能
完成品牌管理的删除功能
完成品牌管理的条件查询功能

1. 入门

1. 简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

2. 四大特征

1. mvc模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller: 操作数据，就是function，数据的增删改查

2. 双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

3. 依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI.

4. 模块化设计

高内聚低耦合法则

官方提供的模块 ng、ngRoute、ngAnimate
用户自定义的模块 angular.module(‘模块名’,[ ])

2. 入门小demo

1. 表达式

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo-表达式</title><script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>

2. 双向绑定

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo02-双向绑定</title><script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name}}
</body>
</html>

3. 初始化指令

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo03-初始化指令</title><script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='梁静茹'">
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name}}
</body>
</html>

也可以调用方法

4. 控制器

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo04-控制器</title><script src="angular.min.js"></script><script>// 建立模块var app = angular.module("myApp",[]);// 创建控制器 $scope就是控制层与视图层之间交换数据的桥梁app.controller("myController",function($scope){$scope.add=function(){return parseInt($scope.x)+parseInt($scope.y);}});</script>
</head>
<body ng-app="myApp" ng-controller="myController">第一个数：<input ng-model="x">
第二个数：<input ng-model="y">
{{add()}}
</body>
</html>

5. 事件指令

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo05-事件指令</title><script src="angular.min.js"></script><script>// 建立模块var app = angular.module("myApp",[]);// 创建控制器 $scope就是控制层与视图层之间交换数据的桥梁app.controller("myController",function($scope){$scope.add=function(){$scope.z = parseInt($scope.x)+parseInt($scope.y);}});</script>
</head>
<body ng-app="myApp" ng-controller="myController">第一个数：<input ng-model="x">
第二个数：<input ng-model="y">
<br/>
<button ng-click="add()">运算</button>
<br/>
运算结果：{{z}}
</body>
</html>

6. 循环数组

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo06-循环数组</title><script src="angular.min.js"></script><script>// 建立模块var app = angular.module("myApp",[]);// 创建控制器 $scope就是控制层与视图层之间交换数据的桥梁app.controller("myController",function($scope){$scope.list = [1,2,3,4,55];});</script>
</head>
<body ng-app="myApp" ng-controller="myController"><table><tr ng-repeat="x in list"><td>{{x}}</td></tr>
</table>
</body>
</html>

7.http请求

<!DOCTYPE html>
<html>
<head><title>angularJS入门小demo08-内置服务$http</title><script src="angular.min.js"></script><script>// 建立模块var app = angular.module("myApp",[]);// 创建控制器 $scope就是控制层与视图层之间交换数据的桥梁app.controller("myController",function($scope,$http){$scope.findList = function () {$http.get("data.json").success(function (response) {$scope.list = response;});}});</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()"><table><tr><td>姓名</td><td>数学</td><td>语文</td></tr><tr ng-repeat="entity in list"><td>{{entity.name}}</td><td>{{entity.shuxue}}</td><td>{{entity.yuwen}}</td></tr>
</table>
</body>
</html>

2. 代码

1. 未分页

brand.html

 <script src="../plugins/angularjs/angular.min.js"></script><script type="text/javascript">var app = angular.module('pinyougou',[]);app.controller('brandController',function ($scope, $http) {// 查询品牌列表$scope.findAll = function () {$http.get('../brand/findAll.do').success(function (response) {$scope.list = response;});}});</script>

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">...<tbody><tr ng-repeat="entity in list"><td><input  type="checkbox" ></td>                                       <td>{{entity.id}}</td><td>{{entity.name}}</td><td>{{entity.firstChar}}</td><td class="text-center">                                           <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>                                          </td></tr></tbody>

2. 分页

品牌分页：

前端给后端：当前页，每页记录数；

后端给前端：总记录数，当前页记录。

思路：

后端应该显示什么格式呢？

json，总记录数，当前页记录

{total:100,rows:[]}

方法1 ：

Map map = new HashMap();
map.put('total',100);
map.put('rows',list);
return map;

方法2：

创建类，包含total和rows属性

1. 实体类

和具体业务无关，entity

public class PageResult implements Serializable {private Long total;//总记录数private List rows;// 当前页结果public PageResult(Long total, List rows) {this.total = total;this.rows = rows;}
//get set方法

2. 品牌分页的接口

public interface BrandService {PageResult findPage(int pageNum,int pageSize);
}

3. 实现类

用到了pageHelper插件

@Service
public class BrandServiceImpl implements BrandService {@Overridepublic PageResult findPage(int pageNum, int pageSize) {PageHelper.startPage(pageNum,pageSize);Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);// 封装到PageResult中return new PageResult(page.getTotal(),page.getResult());}
}

4. 商家controller

@RestController
@RequestMapping("/brand")
public class BrandController {@RequestMapping("/findPage")public PageResult findPage(int page,int size){return brandService.findPage(page,size);}
}

5. 分页的前端实现

在body的table下边数据列表部分增加一行

<!--数据列表/-->
<tm-pagination conf="paginationConf"></tm-pagination>

head里引入分页的js和css

<!--分页组件开始-->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!--分页组件结束-->

在script里增加分页的功能

<script type="text/javascript">var app = angular.module('pinyougou',['pagination']);app.controller('brandController',function ($scope, $http) {// 查询品牌列表$scope.findAll = function () {$http.get('../brand/findAll.do').success(function (response) {$scope.list = response;});}// 分页控件配置 currentPage当前页 totalItems 总记录数 itemsPerPage 每页记录数// perPageOptions分页选项  onChange 当页码变更后自动触发的方法$scope.paginationConf = {currentPage:1,totalItems:10,itemsPerPage:10,perPageOptions:[10,20,30,40,50],onChange:function () {$scope.reloadList();}};// 刷新列表,之后会复用，提取为方法$scope.reloadList = function(){$scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);};$scope.findPage = function (page, size) {$http.get('../brand/findPage.do?page='+page+'&size='+size).success(function (response) {$scope.list = response.rows;//显示当前页数据$scope.paginationConf.totalItems = response.total;//更新总记录数})}});</script>

6. 品牌新增

1. 新建实体类

用于封装向前端返回的结果，成功与否。

public class Result implements Serializable {private boolean success; // 成功与否private String message; // 传输的具体信息public Result(boolean success, String message) {this.success = success;this.message = message;}
// ...

2. 接口

public interface BrandService {// 增加品牌void addBrand(TbBrand brand);
}

3. 实现类

@Service
public class BrandServiceImpl implements BrandService {@Overridepublic void addBrand(TbBrand brand) {brandMapper.insert(brand);}
}

4. 商家的controller

    @RequestMapping("/add")public Result addBrand(@RequestBody TbBrand brand){try {brandService.addBrand(brand);return new Result(true,"增加品牌成功");} catch (Exception e) {e.printStackTrace();return new Result(false,"增加品牌失败");}}

5. 前端

方法

// 新增品牌
$scope.add = function () {$http.post('../brand/add.do',$scope.entity).success(function (response) {if(response.success){$scope.reloadList();// 刷新}else{alert(response.message);}});
}

body的编辑窗口

<tr><td>品牌名称</td><td><input  class="form-control" placeholder="品牌名称" ng-model="entity.name">  </td>
</tr>
<tr><td>首字母</td><td><input  class="form-control" placeholder="首字母" ng-model="entity.firstChar">  </td>// 保存按钮<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="add()">保存</button>

小瑕疵：每次新建都能看到前一次，不爽，如何修改？

修改新建按钮

<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}"><i class="fa fa-file-o" ></i> 新建</button>

7. 品牌修改

其实分两步：根据id查找和更新

1. 接口

    // 根据id查询TbBrand findOne(Long id);// 更新品牌void updateBrand(TbBrand brand);

2. 实现类

     @Overridepublic TbBrand findOne(Long id) {return brandMapper.selectByPrimaryKey(id);}@Overridepublic void updateBrand(TbBrand brand) {brandMapper.updateByPrimaryKey(brand);}

3. 商家的controller

    @RequestMapping("/findOne")public TbBrand findOne(Long id){return brandService.findOne(id);}@RequestMapping("/update")public Result updateBrand(@RequestBody TbBrand brand){try {brandService.updateBrand(brand);return new Result(true,"品牌更新成功");} catch (Exception e) {e.printStackTrace();return new Result(false,"品牌更新失败");}}

4. 前端

点击修改按钮，弹出的框和增加的框一样，然后修改，然后保存

<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button>

方法

// 根据id查询品牌
$scope.findOne = function (id) {$http.get('../brand/findOne.do?id='+id).success(function (response) {$scope.entity = response;});
};

编辑窗口的保存

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

方法

借用add方法

$scope.save = function () {var methodName = 'add'; //方法名if($scope.entity.id!=null){methodName = 'update';}$http.post('../brand/'+methodName+'.do',$scope.entity).success(function (response) {if(response.success){$scope.reloadList();// 刷新}else{alert(response.message);}});}

8. 删除品牌

本项目采用复式删除，通过复选框删除

1. 接口

// 批量删除品牌void deleteBrands(Long[] ids);

2. 实现类

@Overridepublic void deleteBrands(Long[] ids) {for (Long id : ids) {brandMapper.deleteByPrimaryKey(id);}}

3. 商家的controller

 @RequestMapping("/delete")public Result deleteBrands(Long[] ids){try {brandService.deleteBrands(ids);return new Result(true,"品牌删除成功");} catch (Exception e) {e.printStackTrace();return new Result(false,"品牌删除失败");}}

4. 前端

需要定义一个集合存储勾选的复选框的id

方法

包含push添加，js原生的indexOf和splice

$scope.selectIds = [];// 用户勾选的ID集合$scope.updateSelection = function ($event,id) {if($event.target.checked){$scope.selectIds.push(id);//push向集合中添加元素}else{// 删除元素var index = $scope.selectIds.indexOf(id);//查找值的位置$scope.selectIds.splice(index,1);// 参数1：值的位置 参数2：移除的个数}
}

body

<td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>

最好在后边添加个{{selectIds}}

删除

// 删除$scope.deleteSelection = function () {$http.get('../brand/delete.do?ids='+$scope.selectIds).success(function (response) {if(response.success){$scope.reloadList();//刷新}else{alert(response.message);}});}

body

<button type="button" class="btn btn-default" title="删除" ng-click="deleteSelection()"><i class="fa fa-trash-o"></i> 删除</button>

9.条件查询

其实跟分页查询所有一样，只是

TODO 后端碰到问题，未解决！

后端问题为：invalid constant type，修改依赖的javassist版本即可。

1. 接口

    // 条件查询PageResult findPage(TbBrand brand, int pageNum,int pageSize);

2. 实现类

@Overridepublic PageResult findPage(TbBrand brand, int pageNum, int pageSize) {PageHelper.startPage(pageNum,pageSize);TbBrandExample example = new TbBrandExample();Criteria criteria = example.createCriteria();if(brand!=null){if(brand.getName()!=null && brand.getName().length()>0){criteria.andNameLike("%"+brand.getName()+"%");}if(brand.getFirstChar()!=null && brand.getFirstChar().length()>0){criteria.andFirstCharLike("%"+brand.getFirstChar()+"%");}}Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(example);// 封装到PageResult中return new PageResult(page.getTotal(),page.getResult());}

3. controller

@RequestMapping("/search")public PageResult search(@RequestBody TbBrand brand,int page,int size){return brandService.findPage(brand,page,size);}

4. 前端

需要增加搜索框

<div class="box-tools pull-right"><div class="has-feedback">品牌名称：<input ng-model="searchEntity.name"> 品牌首字母：<input ng-model="searchEntity.firstChar">  <button class="btn btn-default" ng-click="reloadList()">查询</button></div>

方法

$scope.searchEntity={};
// 条件查询
$scope.search = function (page,size) {// 混合提交$http.post('../brand/search.do?page='+page+'&size='+size,$scope.searchEntity).success(function (response) {$scope.list = response.rows;//显示当前页数据$scope.paginationConf.totalItems = response.total;//更新总记录数});
};

修改reload

// 刷新列表
$scope.reloadList = function(){$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
};