企业WEB项目商品管理&图片上传

最新推荐文章于 2021-03-13 00:33:56 发布

「已注销」

最新推荐文章于 2021-03-13 00:33:56 发布

阅读量881

点赞数

分类专栏：前端 java 文章标签： FastDFS 图片上传 java AngularJS

本文链接：https://blog.csdn.net/JYplute/article/details/107164017

版权

本文详细介绍了企业WEB项目中商品管理的全过程，包括商品基本信息录入（SPU与SKU、商品分类、商品介绍、品牌选择、扩展属性）、图片上传（使用FastDFS分布式文件系统）以及商品规格的设置。同时讲解了商品列表、商品修改、商品审核和删除的实现。文章深入浅出，提供了前端和后端的实现细节，如富文本编辑器KindEditor的使用、商品分类的三级联动、图片上传的后端代码示例以及商品规格的深克隆等。

摘要由CSDN通过智能技术生成

一、商品基本信息录入

1.电商概念SPU与SKU

SPU = Standard Product Unit （标准产品单位）
SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。

例如：iphone7就是一个SPU，与商家，与颜色、款式、套餐都无关。

SKU=stock keeping unit(库存量单位)
SKU即库存进出计量的单位，可以是以件、盒、托盘等为单位。
SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。在服装、鞋类商品中使用最多最普遍。

例如：纺织品中一个SKU通常表示：规格、颜色、款式。

2.商品分类

2.1需求分析

实现三级商品分类列表查询功能

进入页面首先显示所以一级分类，效果如下：

点击列表行的查询下级按钮，进入下级分类列表，同时更新面包屑导航

再次点击表行的查询下级按钮，进入三级分类列表，因为三级分类属于最后一级，所以在列表中不显示查询下级按钮，同时更新面包屑导航。

点击面包屑导航，可以进行返回操作。

这里后端和淘淘商城差不多，主要提供前端代码。

2.2前端

列表实现：

（1）修改itemCatService.js

//根据上级ID查询下级列表
this.findByParentId=function(parentId){
   
    return $http.get('../itemCat/findByParentId.do?parentId='+parentId);	
}

（2）修改itemCatController.js

//根据上级ID显示下级列表 
$scope.findByParentId=function(parentId){
   
    itemCatService.findByParentId(parentId).success(
        function(response){
   
            $scope.list=response;
        }			
    );
}

面包屑导航：

我们需要返回上级列表，需要通过点击面包屑来实现，修改itemCatController.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);	//查询此级下级列表
}

修改列表的查询下级按钮，设定级别值后显示列表

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

这里我们使用了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>

3.商品介绍

实现商品介绍的录入，要求使用富文本编辑器

3.1富文本编辑器介绍

富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器：

KindEditor http://kindeditor.net/

UEditor http://ueditor.baidu.com/website/

CKEditor http://ckeditor.com/

3.2使用kindeditor

在页面中添加JS代码，用于初始化kindeditor

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

allowFileManager 【是否允许浏览服务器已上传文件】默认值是：false

提取kindeditor编辑器的内容:

$scope.entity.goodsDesc.introduction=editor.html();

清空kindeditor编辑器的内容:

editor.html('');//清空富文本编辑器

4.选择商品分类

在商品录入界面实现商品分类的选择（三级分类）效果如下：

当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。三级分类选好后，模板Id要同时更新

4.1一级分类下拉选择框

在goodsController增加代码

//读取一级分类
$scope.selectItemCat1List=function(){
   
    itemCatService.findByParentId(0).success(
        function(response){
   
            $scope.itemCat1List=response; 
        }
    );
}

页面加载调用该方法

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController" ng-init="selectItemCat1List()">

修改goods_edit.html一级分类下拉选择框

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>

ng-options语法：作为表单传递的值 as 显示的内容 for 别名 in List

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

4.2二级分类下拉选择框

在goodsController增加代码：

//读取二级分类
$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {
             
    //根据选择的值，查询二级分类
    itemCatService.findByParentId(newValue).success(
        function(response){
   
            $scope.itemCat2List=response; 	    			
        }
    );    	
});

$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。

修改goods_edit.html中二级分类下拉框

<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>

4.3三级分类下拉选择框

在goodsController增加代码：

//读取三级分类
$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) {
             
    //根据选择的值，查询二级分类
    itemCatService.findByParentId(newValue).success(
        function(response){
   
            $scope.itemCat3List=response; 	    			
        }
    );    	
});

修改goods_edit.html中三级分类下拉框

<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>

4.4读取模板ID

在goodsController增加代码：

//三级分类选择后  读取模板ID
$scope.$watch('entity.goods.category3Id', function(newValue, oldValue) {
       
    itemCatService.findOne(newValue).success(
        function(response){
   
            $scope.entity.goods.typeTemplateId=response.typeId; //更新模板ID    
        }
    );    
});

在goods_edit.html显示模板ID

模板ID:{
  {entity.goods.typeTemplateId}}

5.品牌选择

在用户选择商品分类后，品牌列表要根据用户所选择的分类进行更新。具体的逻辑是根据用户选择的三级分类找到对应的商品类型模板，商品类型模板中存储了品牌的列表json数据。

在goodsController引入typeTemplateService 并新增代码

//模板ID选择后  更新品牌列表
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
       
    typeTemplateService.findOne(newValue).success(
        function(response){
   
            $scope.typeTemplate=response;//获取类型模板
            $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
        }
    );    
});

添加品牌选择框

<select class="form-control" ng-model="entity.goods.brandId" ng-options="item.id as item.text for item in typeTemplate.brandIds"></select>

成果：

6.扩展属性

修改goodsController.js ，在用户更新模板ID时，读取模板中的扩展属性赋给商品的扩展属性。

//模板ID选择后  更新模板对象
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
       
    typeTemplateService.findOne(newValue).success(
        function(response){
   
            $scope.typeTemplate=response;//获取类型模板
            $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
            $scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性
        }
    );    
});

修改goods_edit.html

<!--扩展属性-->
<div class="tab-pane" id="customAttribute">
    <div class="row data-type">                                
        <div ng-repeat="pojo in entity.goodsDesc.customAttributeItems">
            <div class="col-md-2 title">{
  {pojo.text}}</div>
            <div class="col-md-10 data">
                <input class="form-control" ng-model="pojo.value" placeholder="{
    {pojo.text}}">	            </div>
        </div>  				
    </div>
</div>

二、图片上传

1.分布式文件服务器FastDFS

1.1什么是FastDFS

FastDFS 是用 c 语言编写的一款开源的分布式文件系统。FastDFS 为互联网量身定制，充分考虑了冗余备份、负载均衡、线性扩容等机制，并注重高可用、高性能等指标，使用 FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。

FastDFS 架构包括 Tracker server 和 Storage server。客户端请求 Tracker server 进行文件上传、下载，通过 Tracker server 调度最终由 Storage server 完成文件上传和下载。

Tracker server 作用是负载均衡和调度，通过 Tracker server 在文件上传时可以根据一些策略找到 Storage server 提供文件上传服务。可以将 tracker 称为追踪服务器或调度服务器。

Storage server 作用是文件存储，客户端上传的文件最终存储在 Storage 服务器上，Storageserver 没有实现自己的文件系统而是利用操作系统的文件系统来管理文件。可以将storage称为存储服务器。

服务端两个角色：

Tracker：管理集群，tracker 也可以实现集群。每个 tracker 节点地位平等。收集 Storage 集群的状态。

Storage：实际保存文件 Storage 分为多个组，每个组之间保存的文件是不同的。每个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有主从的概念。

1.2文件上传流程

客户端上传文件后存储服务器将文件 ID 返回给客户端，此文件 ID 用于以后访问该文件的索引信息。文件索引信息包括：组名，虚拟磁盘路径，数据两级目录，文件名。

组名：文件上传后所在的 storage 组名称，在文件上传成功后有 storage 服务器返回，需要客户端自行保存。

虚拟磁盘路径：storage 配置的虚拟路径，与磁盘选项 store_path*对应。如果配置了store_path0 则是 M00，如果配置了 store_path1 则是 M01，以此类推。

数据两级目录：storage 服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据文件。

文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储服务器 IP 地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

1.3文件下载流程

最简单的 FastDFS 架构：

1.4FastDFS入门小Demo

需求：将本地图片上传至图片服务器，再控制台打印url

创建Maven工程fastDFSdemo

由于FastDFS客户端jar包并没有在中央仓库中，所以需要使用下列命令手动安装jar包到Maven本地仓库（将jar包放到d盘setup目录）

mvn install:install-file -DgroupId=org.csource.fastdfs -DartifactId=fastdfs  -Dversion=1.2 -Dpackaging=jar -Dfile=d:\setup\fastdfs_client_v1.20.jar

pom.xml中引入

<dependency>
    <groupId>org.csource.fastdfs</groupId>
    <artifactId>fastdfs</artifactId>
    <version>1.2</version>
</dependency>

（2）添加配置文件fdfs_client.conf ，将其中的服务器地址设置为192.168.25.133

# connect timeout in seconds
# default value is 30s
connect_timeout=30

# network timeout in seconds
# default value is 30s
network_timeout=60

# the base path to store log files
base_path=/home/fastdfs

# tracker_server can ocur more than once, and tracker_server format is
#  "host:port", host can be hostname or ip address
tracker_server=192.168.25.133:22122

#standard log level as syslog, case insensitive, value list:
### emerg for emergency
### alert
### crit for critical
### error
### warn for warning
### notice
### info
### debug
log_level=info

# if use connection pool
# default value is false
# since V4.05
use_connection_pool = false

# connections whose the idle time exceeds this time will be closed
# unit: second
# default value is 3600
# since V4.05
connection_pool_max_idle_time = 3600

# if load FastDFS parameters from tracker server
# since V4.05
# default value is false
load_fdfs_parameters_from_tracker=false

# if use storage ID instead of IP address
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# default value is false
# since V4.05
use_storage_id = false

# specify storage ids filename, can use relative or absolute path
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# since V4.05
storage_ids_filename = storage_ids.conf


#HTTP settings
http.tracker_server_port=80

#use "#include" directive to include HTTP other settiongs
##include http.conf

（3）创建java类，main方法代码如下：

// 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);
}

控制台输出如下结果：

group1

M00/00/00/wKgZhVkMP4KAZEy-AAA-tCf93Fo973.jpg

在浏览器输入：

http://192.168.25.133/group1/M00/00/00/wKgZhVkMP4KAZEy-AAA-tCf93Fo973.jpg即可查看刚刚上传的图片

2.商品图片上传

2.1后端

（1）pinyougou-common工程pom.xml引入依赖

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