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

品优购：

我们需要做一个功能就是完成商品的分类，需要操作的pojo是itemcat，我们的根分类的id是0，所以我们现在的需求是当我们点击哪一个的时候就要查询当前id的下级

所以我们的第一个service产生了，就是根据父类id查询子类：我们这样写：

/*** 根据父id查询对象

*/

public List getItemByParentId(Long parentId) {

TbItemCatExample example = new TbItemCatExample();

Criteria createCriteria = example.createCriteria();

// 匹配父ID

createCriteria.andParentIdEqualTo(parentId);

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

KindEditor.ready(function(K) {

editor = K.create('textarea[name="content"]', {

allowFileManager : true

});

});

初始化，拿到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);

}