FastDFS的上传图片以及和商品录入(笔记)

yinzhuoe_shen。 2018-12-16 AM 625℃ 0条

u=2703915976,3722517054&fm=26&gp=0.jpg

品优购:

我们需要做一个功能就是完成商品的分类,需要操作的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可以这样写:

面包屑:

<li>顶级分类列表</li>
<li>{{entity_1.name}}</li>
<li>{{entity_2.name}}</li>

我们的列表的按钮:

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到里面去),我们这样就可以做好商品录入了,我们的前端进行对应的绑定即可,主要的是我们用到了一个富文本的编辑器:

<script type="text/javascript">

 
     var editor;
     KindEditor.ready(function(K) {
          editor = K.create('textarea[name="content"]', {
              allowFileManager : true
          });
     });
 </script>

初始化,拿到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);
 }
标签: none

非特殊说明,本博所有文章均为博主原创。

评论啦~