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);
}
都已经知道我的经历了，高三辍学，学习编程，那个时候不到17岁，16岁可以说是，15岁左右就开始
