JavaEE學習日誌(一百一十五): AngularJS分層開發，獲取自增的主鍵

AngularJS複選框

如何將id和複選框的勾選綁定起來？

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

// 定義一個數組:
	$scope.selectIds = [];
	// 更新複選框：
	$scope.updateSelection = function($event,id){
		// 複選框選中
		if($event.target.checked){
			// 向數組中添加元素
			$scope.selectIds.push(id);
		}else{
			// 從數組中移除
			var idx = $scope.selectIds.indexOf(id);
			$scope.selectIds.splice(idx,1);
		}
		
	}

AngularJS分層開發

作用：

1. 使js的代碼部分不會出現在html中，使得代碼臃腫（代碼分離）
2. 代碼複用

分層：

• service：發送ajax請求，到後臺取數據
• baseController（父控制器）：寫公共業務
• xxxController（子控制器）：寫具體模塊的業務，調用service

示例：使用引入js文件的方式

<script type="text/javascript" src="../js/base_pagination.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/brandController.js"></script>
<script type="text/javascript" src="../js/service/brandService.js"></script>

$controller: 這個是angularjs中的內置對象, 用來做控制器繼承使用 這裏是僞繼承, 繼承後, 子controller就可以調用父級controller裏面的方法, 繼承後, 子controller和父controller裏面的$scope域中的數據共享.

$controller('baseController',{$scope:$scope});是繼承父控制器語法
{$scope:$scope}作用是讓當前控制器中$scope域中的數據和父級$scope域中的數據共享, 可以隨便使用

示例：brandController繼承baseController（僞繼承）
baseController.js

app.controller("baseController",function($scope){
	// 分頁的配置的信息
	$scope.paginationConf = {
		 currentPage: 1, // 當前頁數
		 totalItems: 10, // 總記錄數
		 itemsPerPage: 10, // 每頁顯示多少條記錄
		 perPageOptions: [10, 20, 30, 40, 50],// 顯示多少條下拉列表
		 onChange: function(){ // 當頁碼、每頁顯示多少條下拉列表發生變化的時候，自動觸發了
			$scope.reloadList();// 重新加載列表
		 }
	}; 
	
	$scope.reloadList = function(){
		// $scope.findByPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
		$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
	}
	
	// 定義一個數組:
	$scope.selectIds = [];
	// 更新複選框：
	$scope.updateSelection = function($event,id){
		// 複選框選中
		if($event.target.checked){
			// 向數組中添加元素
			$scope.selectIds.push(id);
		}else{
			// 從數組中移除
			var idx = $scope.selectIds.indexOf(id);
			$scope.selectIds.splice(idx,1);
		}
		
	}
	
	// 定義方法：獲取JSON字符串中的某個key對應值的集合
	$scope.jsonToString = function(jsonStr,key){
		// 將字符串轉成JSOn:
		var jsonObj = JSON.parse(jsonStr);
		
		var value = "";
		for(var i=0;i<jsonObj.length;i++){
			
			if(i>0){
				value += ",";
			}
			
			value += jsonObj[i][key];
		}
		return value;
	}
	
});

brandController.js

// 定義控制器:
app.controller("brandController",function($scope,$controller,$http,brandService){
	// AngularJS中的繼承:僞繼承
	$controller('baseController',{$scope:$scope});
	
	// 查詢所有的品牌列表的方法:
	$scope.findAll = function(){
		// 向後臺發送請求:
		brandService.findAll().success(function(response){
			$scope.list = response;
		});
	}

	// 分頁查詢
	$scope.findByPage = function(page,rows){
		// 向後臺發送請求獲取數據:
		brandService.findByPage(page,rows).success(function(response){
			$scope.paginationConf.totalItems = response.total;
			$scope.list = response.rows;
		});
	}
	
	// 保存品牌的方法:
	$scope.save = function(){
		// 區分是保存還是修改
		var object;
		if($scope.entity.id != null){
			// 更新
			object = brandService.update($scope.entity);
		}else{
			// 保存
			object = brandService.save($scope.entity);
		}
		object.success(function(response){
			// {success:true,message:xxx}
			// 判斷保存是否成功:
			if(response.success==true){
				// 保存成功
				alert(response.message);
				$scope.reloadList();
			}else{
				// 保存失敗
				alert(response.message);
			}
		});
	}
	
	// 查詢一個:
	$scope.findById = function(id){
		brandService.findById(id).success(function(response){
			// {id:xx,name:yy,firstChar:zz}
			$scope.entity = response;
		});
	}
	
	// 刪除品牌:
	$scope.dele = function(){
		brandService.dele($scope.selectIds).success(function(response){
			// 判斷保存是否成功:
			if(response.success==true){
				// 保存成功
				// alert(response.message);
				$scope.reloadList();
				$scope.selectIds = [];
			}else{
				// 保存失敗
				alert(response.message);
			}
		});
	}
	
	$scope.searchEntity={};
	
	// 假設定義一個查詢的實體：searchEntity
	$scope.search = function(page,rows){
		// 向後臺發送請求獲取數據:
		brandService.search(page,rows,$scope.searchEntity).success(function(response){
			$scope.paginationConf.totalItems = response.total;
			$scope.list = response.rows;
		});
	}
	
});

brandService

// 定義服務層:
app.service("brandService",function($http){
	this.findAll = function(){
		return $http.get("../brand/findAll.do");
	}
	
	this.findByPage = function(page,rows){
		return $http.get("../brand/findByPage.do?page="+page+"&rows="+rows);
	}
	
	this.save = function(entity){
		return $http.post("../brand/save.do",entity);
	}
	
	this.update=function(entity){
		return $http.post("../brand/update.do",entity);
	}
	
	this.findById=function(id){
		return $http.get("../brand/findById.do?id="+id);
	}
	
	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);
	}
	
	this.selectOptionList = function(){
		return $http.get("../brand/selectOptionList.do");
	}
});

獲取自增的主鍵

在執行完成添加操作之後，如何獲取執行完成的那行數據的主鍵？
在配置文件中添加屬性

• useGeneratedKeys="true" ，主鍵是否爲自增？true爲是
• keyProperty="id"， 獲取自增後的主鍵，把他賦給參數Specification的id屬性中

<insert id="insertSelective" parameterType="cn.itcast.core.pojo.specification.Specification" 
useGeneratedKeys="true" keyProperty="id">

如以下，添加完成規格之後，可以在原先的對象中獲取到id值，然後設置外鍵

@Override
    public void add(SpecEntity specEntity) {
        //1.添加規格
        specificationDao.insertSelective(specEntity.getSpecification());
        //2.添加規格選項
        if(specEntity.getSpecificationOptionList()!=null){
            for (SpecificationOption option : specEntity.getSpecificationOptionList()) {
                option.setSpecId(specEntity.getSpecification().getId());
                specificationOptionDao.insertSelective(option);
            }
        }
    }

模板表的設計

此時的品牌表與規格表爲多對多的關係

如何來設計模板表？
直接存儲json數據，而不是外鍵（此方法適用於經常用於查詢操作的表）

• 優點：查詢快
• 缺點：添加和修改操作速度減慢

在前端頁面，將json轉換成需要的數據

定義方法

// 定義方法：獲取JSON字符串中的某個key對應值的集合
	$scope.jsonToString = function(jsonStr,key){
		// 將字符串轉成JSOn:
		var jsonObj = JSON.parse(jsonStr);
		
		var value = "";
		for(var i=0;i<jsonObj.length;i++){
			
			if(i>0){
				value += ",";
			}
			
			value += jsonObj[i][key];
		}
		return value;
	}

獲取數據

<tr ng-repeat="entity in list">
      <td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></td>			                              
          <td>{{entity.id}}</td>
	      <td>{{entity.name}}</td>
	      <td>{{jsonToString(entity.brandIds,'text')}}</td>
	      <td>{{jsonToString(entity.specIds,'text')}}</td>									 
	      <td>{{jsonToString(entity.customAttributeItems,'text')}}</td>		                                                                  
	      <td class="text-center">                                           
	     	  <button type="button" class="btn bg-olive btn-xs" ng-click="findOne(entity.id)" data-toggle="modal" data-target="#editModal" >修改</button>                                           
	      </td>
</tr>