项目笔记Learn05（面包屑和录入功能）

1.导航栏面包屑实现

Controller.js 中

$scope.grade=1;		//默认为1级	
	//设置级别
	$scope.setGrade=function(value){
		$scope.grade=value;
	}		
	//读取列表
	$scope.selectList=function(p_entity){
		if($scope.grade==1){		//如果为1级
			$scope.entity_1=null;	
			$scope.entity_2=null;
		}		
		if($scope.grade==2){		//如果为2级
			$scope.entity_1=p_entity;	
			$scope.entity_2=null;
		}		
		if($scope.grade==3){		//如果为3级
			$scope.entity_2=p_entity;		
		}	
		$scope.findByParentId(p_entity.id);	//查询此级下级列表
	}

html页面中：
1.查询下级按钮，设定级别值后 显示列表，使用ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮

	<span ng-if="entity. isDown>0">                                     
		<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button> 		                                     
	</span>       

2.使用ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮

<ol class="breadcrumb">	                        	
  <li><a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a></li>
  <li><a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a></li>
  <li><a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>
</ol>

2.录入多个实体

1.需创建组合实体类
2.添加数据后可以得到自增的ID

 	<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
		SELECT LAST_INSERT_ID() AS id
	</selectKey>

如：插入操作后

goods.getGoods().getId()	// 通过这种方法得到返回的Id值

kindeditor编辑器录入

在Controller.js中的add()方法中添加和清空

$scope.entity.goodsDesc.introduction=editor.html();
editor.html('');//清空富文本编辑器

分布式文件服务器FastDFS进行图片上传

客户端上传文件后存储服务器将文件 ID 返回给客户端，此文件 ID 用于以后访问该文件的索引信息。文件索引信息包括：组名，虚拟磁盘路径，数据两级目录，文件名。
代码调用示例如下，可将其封装为工具类直接调用：

 	    // 1、加载配置文件，配置文件中的内容就是 tracker 服务的地址。
		ClientGlobal.init("D:/maven_work/fastDFS-demo/src/fdfs_client.conf");
		// 2、创建一个 TrackerClient 对象。直接 new 一个。
		TrackerClient trackerClient = new TrackerClient();
		// 3、使用 TrackerClient 对象创建连接，获得一个 TrackerServer 对象。
		TrackerServer trackerServer = trackerClient.getConnection();
		// 4、创建一个 StorageServer 的引用，值为 null
		StorageServer storageServer = null;
		// 5、创建一个 StorageClient 对象，需要两个参数 TrackerServer 对象、StorageServer 的引用
		StorageClient storageClient = new StorageClient(trackerServer, storageServer);
		// 6、使用 StorageClient 对象上传图片。
		//扩展名不带“.”
		String[] strings = storageClient.upload_file("D:/pic/benchi.jpg", "jpg",
				null);
		// 7、返回数组。包含组名和图片的路径。
		for (String string : strings) {
			System.out.println(string);
		}

1.pom.xml引入依赖

		<!-- 文件上传组件 -->
		<dependency>
		    <groupId>org.csource.fastdfs</groupId>
		    <artifactId>fastdfs</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
		</dependency>	

2.application.properties添加配置

FILE_SERVER_URL=http://192.168.25.133/

3springmvc.xml添加配置：

<!-- 配置多媒体解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="UTF-8"></property>
		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
		<property name="maxUploadSize" value="5242880"></property>
</bean> 

4.后端调用工具类返回路径地址给前端：

@RestController
public class UploadController {
	
	@Value("${FILE_SERVER_URL}")
	private String FILE_SERVER_URL;//文件服务器地址

	@RequestMapping("/upload")
	public Result upload( MultipartFile file){				
		//1、取文件的扩展名
		String originalFilename = file.getOriginalFilename();
		String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
		try {
			//2、创建一个 FastDFS 的客户端
			FastDFSClient fastDFSClient  = new FastDFSClient("classpath:config/fdfs_client.conf");
			//3、执行上传处理
			String path = fastDFSClient.uploadFile(file.getBytes(), extName);
			//4、拼接返回的 url 和 ip 地址，拼装成完整的 url
			String url = FILE_SERVER_URL + path;			
			return new Result(true,url);			
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "上传失败");
		}		
	}	
}

5.前端uploadService.js中，相当于固定写法：

//文件上传服务层
app.service("uploadService",function($http){
	this.uploadFile=function(){
		var formData=new FormData();
	    formData.append("file",file.files[0]);   //页面file框的id需和file一致
		return $http({
            method:'POST',
            url:"../upload.do",
            data: formData,
            headers: {'Content-Type':undefined},
            transformRequest: angular.identity
        });	
	}	
});

6.Controller.js中

$scope.uploadFile=function(){	  
		uploadService.uploadFile().success(function(response) {        	
        	if(response.success){//如果上传成功，取出url
        		$scope.image_entity.url=response.message;//设置文件地址
        	}else{
        		alert(response.message);
        	}
        }).error(function() {           
        	     alert("上传发生错误");
        });        
    };    

7.html页面

<input type="file" id="file" />				                
		 <button class="btn btn-primary" type="button" ng-click="uploadFile()">
				                   		上传
		 </button>	

<img  src="{{image_entity.url}}" width="200px" height="200px">

8.图片列表展示
1.Controller.js中添加图片

 $scope.entity={goodsDesc:{itemImages:[]}};//定义页面实体结构
    //添加图片列表
    $scope.add_image_entity=function(){    	
        $scope.entity.goodsDesc.itemImages.push($scope.image_entity);
    }

保存按钮

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

遍历图片列表

<tr ng-repeat="pojo in entity.goodsDesc.itemImages">
	 <td>{{pojo.color}}</td>
	 <td><img alt="" src="{{pojo.url}}" width="100px" height="100px"></td>
	<td><button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
</tr>

Controller.js中删除图片

//列表中移除图片
    $scope.remove_image_entity=function(index){
    	    $scope.entity.goodsDesc.itemImages.splice(index,1);
  }

列表中的删除按钮

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