EverydayOneCat
洗!🛀
一、前端分层开发
我们看前端代码,JS和html都放在一起,并不利于我们后期的维护。我们可以在前端代码中也运用MVC的设计模式,将代码进行分离,提高程序的可维护性。
1.自定义服务
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。我们在上次课中使用了内置服务$http .其实我们也可以自己来定义服务,而服务会封装一些操作。我们在不同的控制器中可以调用同一个服务,这样服务的代码将会被重用。
在js文件夹下创建service文件夹。创建brandService.js前端服务层
//品牌服务
app.service("brandService",function($http){
this.findAll=function(){
return $http.get("../brand/findAll.do");
}
this.findPage = function(page,rows){
return $http.get("../brand/findPage.do?page="+page+"&rows="+rows);
}
this.findOne = function(id){
return $http.get("../brand/findOne.do?id"+id);
}
this.add = function(entity){
return $http.post("../brand/add.do",entity);
}
this.update = function(entity){
return $http.post("../brand/update.do",entity);
}
this.dele = function(ids){
return $http.get("../brand/delete.do?ids="+ids);
}
this.search = function(page,rows,searchEntity){
return $http.post("../brand/search.do?page="+page+"&rows="+rows,searchEntity);
}
});
2.代码分离
我们刚才已经将与后端交互的部分放入自定义服务,目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来,以便调用。
2.1前端基础层
创建base.js
var app=angular.module('pinyougou',[]);
创建base_pagination.js
var app=angular.module('pinyougou',['pagination']);
一个用于不需要分页功能的页面,一个用于需要分页功能的页面.
2.2前端控制层
app.controller("brandController",function($scope,$http){
//读取列表数据绑定到表单中
$scope.findAll = function(){
brandService.findAll().success(function(response){
$scope.list = response;
});
}
//重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: 1,//当前页
totalItems: 10,//总记录数
itemsPerPage: 10,//每页记录数
perPageOptions: [10, 20, 30, 40, 50],//分页选项
onChange: function(){
//当页码变更后自动触发的事件
$scope.reloadList();//重新加载
}
};
//分页
$scope.findPage = function(page,rows){
brandService.findPage(page,rows).success(function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
});
}
//保存
$scope.save = function(){
/* var methodName = "add";//方法名
if(%scope.entity.id!=null){//如果有ID
methodName = "update";
} */
var object = null;
if(%scope.entity.id!=null){
//如果有ID
object = brandService.update($scope.entity);
}else{
object = brandService.add($scope.entity);
}
//$http.post("../brand/"+methodName+".do",$scope.entity).success(function(response){
object.success(function(response){
if(response.success){
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
});
}
//查询实体
$scope.findOne = function(id){
brandService.findOne(id).success(function(response){
$scope.entity = response;
})
}
$scope.selectIds=[];//选中的ID集合
//更新复选
$scope.updateSelection = function($event,id){
//$event是源,$event.target是特指那个标签
if($event.target.checked){
//如果是被选中,则增加到数组
$scope.selectIds.push(id);
}else{
var idx = $scope.selectIds.indexOf(id);//查找值的位置
$scope.selectIds.splice(idx,1);//参数1:移除的位置 参数2:移除的个数
}
}
//批量删除
$scope.dele = function(){
//获取选中的复选框
brandService.dele($scope