FastDFS的上传图片以及和商品录入（笔记）

品优购：

我们需要做一个功能就是完成商品的分类，需要操作的pojo是itemcat，我们的根分类的id是0，所以我们现在的需求是当我们点击哪一个的时候就要查询当前id的下级
所以我们的第一个service产生了，就是根据父类id查询子类：我们这样写：

/**

  * 根据父id查询对象
  */
 public List<TbItemCat> getItemByParentId(Long parentId) {
     TbItemCatExample example = new TbItemCatExample();
     Criteria createCriteria = example.createCriteria();
     // 匹配父ID
     createCriteria.andParentIdEqualTo(parentId);
     List<TbItemCat> selectByExample = itemCatMapper.selectByExample(example);
     return selectByExample;
 }

这样就我们能查询出来，action省略，我们来看看主要的前端代码：

初始化：ng-init="selectByParentId(0)"
传参为0，我们循环的是父级；

ng-click="findOne(entity.id)"

这样就可以在列表中点击哪个就出现哪个的分类了，我们这一部分完成了，现在的需求就是我们要完成面包屑的操作；

我们面包屑的层级是这样的，默认是父级是1，二级是2，三级是3；

然后我们定义一些方法：

1.首先是初始化层级和设置层级

//设置面包屑初始为0根目录

 $scope.grade = 1;
 //设置级别
 $scope.setGrade = function(value) {
     $scope.grade = value;
 }

2.判断当前的层级，如果层级是2，就把对应的参数传递层级2的对象中，然后通过这个对象中的id再查询

//读取列表

 $scope.selectGrade = function(p_entity) {
     //如果为一级
     if ($scope.grade === 1) {
          $scope.entity_1 = null;
          $scope.entity_2 = null;
     }
     if ($scope.grade === 2) {
          $scope.entity_1 = p_entity;
          $scope.entity_2 = null;
     }
     if($scope.grade === 3){
          $scope.entity_2 = p_entity;
     }
     
     $scope.selectByParentId(p_entity.id)
 }

然后我们的html可以这样写：

面包屑：

我们的列表的按钮：

ng-click="setGrade(grade+1);selectGrade(entity)

面包屑思路：当我们点击查询下一级的时候，会把层级关系加1，然后进行查询，查询的条件碰到了层级2，就会把它的对象变成entity_1，然后我们的面包屑上写的就是entity_1.name ； 所以我们就可以通过这样的方式来达到面包屑的效果。

----实现商品录入，在进行商品录入之前，我们需要知道2个概念：

我们在写电商系统的时候，必须得要理解spu和sku是什么概念，具体就不阐述了，sku就是具体的商品列表，spu是商品的一些主干。
这个商品的录入我们要结合2张表，一个是goods一个是goodsDesc，所以我们需要写一个组合表

// 电商spu
 private TbGoods goods;
 // 商品拓展介绍
 private TbGoodsDesc goodsDesc;
 // 电商sku列表
 private List<TbItem> itemList;

组合写好之后，我们需要更改mapper中，添加一个selectkey查询一下主键，这个主键的意图很简单，在添加商品成功之后，需要拿这个id做商品的拓展增加；

所以我们的service层是这样写的：

public void add(Goods goods) {

     // 增加商品记录
     // 设置未申请状态
     goods.getGoods().setAuditStatus("0");
     goodsMapper.insert(goods.getGoods());
     // 插入拓展信息，获取添加后的id
      goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());
     // 添加
     goodsDescMapper.insert(goods.getGoodsDesc());
 }

action同样省略（需要获取登陆名词并且set到里面去），我们这样就可以做好商品录入了，我们的前端进行对应的绑定即可，主要的是我们用到了一个富文本的编辑器：

初始化，拿到editor对象，可以通过.html拿到里面的值进行添加到goodsDesc对象即可；

FastDFS分布式文件管理服务器：

我们开发过程中，可以只用一台服务器，这个服务器准备好了，运行开启即可，然后我们需要准备几个配置文件，一个是conf文件一个是简单封装了上传的文件
具体的步骤我们可以看写的demo，不要忘记在springmvc中加入媒体解析器，上传后端代码：

 @RequestMapping("upload")
 public Result upload(MultipartFile file) {
     // 获取文件名
     String OriginalFilename = file.getOriginalFilename();
     // 截取文件的后缀
     String name = OriginalFilename.substring(OriginalFilename.lastIndexOf(".") + 1);
     try {
          util.FastDFSClient client = new FastDFSClient("classpath:config/fdfs_client.conf");
          String fileName = client.uploadFile(file.getBytes(), name);
          // 拼接图片url
          String url = images_server_url + fileName;
          return new Result(true, url);
     } catch (Exception e) {
          return new Result(false, "上传失败");
          // TODO: handle exception
     }
 }

工具类在common中，util包中，需要加maven依赖才能引入，可以通过value注解来给images_server_url注入值，通过application.properties

前端代码：

this.upload = function() {

     //上传二进制文件需要的form对象
     var formData = new FormData();
     //添加文件到对象
     formData.append("file", file.files[0]); //name为file的第0个文件
     //执行上传,设置相关配置
     return $http({
          url : '../upload.do',
          method : "POST",
          //携带数据：
          data : formData,
          //设置头信息，如果不写，默认是json格式
          headers : {
              'Content-Type' : undefined
          },
          //angular上传必须要写的：序列化
          transformRequest : angular.identity
     })
 }

控制层：

//上传图片

 $scope.upload = function() {
     $scope.imageEntity = {}
     uploadFile.upload().success(
          function(response) {
              if (response.success) {
                   $scope.imageEntity.url = response.message
              } else {
                   alert(response.message)
              }
          }
     )
 }
 
 
 //定义实体结构
 $scope.entity = {goods:{},goodsDesc:{itemImages:[]}}
 //添加图片列表
 $scope.addImgList = function() {
      $scope.entity.goodsDesc.itemImages.push($scope.imageEntity)
 }
 //移出出图片列表
 $scope.deleImgList = function(index) {
      $scope.entity.goodsDesc.itemImages.splice(index, 1);
 }