电商后台规格及模板管理

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