商品基本信息\商品介绍

时间：2018-06-15 16:02:54 阅读：410 评论：0 收藏：0 [点我收藏+]

标签：form cell har 绑定 ESS 虚拟进入 exception 审核

商品录入

课程目标

目标1：完成商品分类功能

目标2：了解电商概念SPU 和SKU

目标3：掌握富文本编辑器的使用

目标4：掌握上传服务器FastDFS

目标5：掌握angularJS图片上传

1.商品分类

1.1需求及表结构分析

1.1.1需求分析

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

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

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

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

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

1.1.2表结构分析

tb_item_cat 商品分类表

字段	类型	长度	含义
Id	Bigint		主键
Parent_id	Bigint		上级ID
Name	varchar		分类名称
Type_id	Bigint		类型模板ID

1.2列表实现

1.2.1后端代码

修改pinyougou-sellergoods-interface工程ItemCatService接口，新增方法定义

/**
* 跟据父ID查询商品分类列表
* @param parentId
* @return
*/
public List<TbItemCat> findByParentId(Long parentId);

修改pinyougou-sellergoods-interface工程ItemCatServiceImpl ，实现方法

@Override
public List<TbItemCat> findByParentId(Long parentId) {
//组装查询条件
TbItemCat where = new TbItemCat();
where.setParentId(parentId);
//查询数据
List<TbItemCat> catList = itemCatMapper.select(where);
return catList;
}

修改pinyougou-manager-web的ItemCatController.java

/**
* 跟据父ID查询商品分类列表
* @param parentId 父id
* @return
*/
@RequestMapping("findByParentId")
public List<TbItemCat> findByParentId(Long parentId){
return itemCatService.findByParentId(parentId);
}

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

（3）修改item_cat.html

引入JS

<script src="../plugins/angularjs/angular.min.js"></script>

<script src="../js/base.js"></script>
<script src="../js/services/itemCatService.js"></script>
<script src="../js/controller/baseController.js"></script>
<script src="../js/controller/itemCatController.js"></script>

指令定义

循环列表

<td>{{entity.id}}</td>

<td>{{entity.name}}</td>

<td>{{entity.typeId}}</td>

</td>

</tr>

1.3面包屑导航

我们需要返回上级列表，需要通过点击面包屑来实现

修改itemCatController.js

//面包屑当前级别
$scope.grade=1;
//修改当前级别
$scope.setGrade=function (value) {
   $scope.grade=value;
   }

   //面包屑记录逻辑
   $scope.selectList=function (p_entity) {
   if($scope.grade == 1){
      $scope.entity_1=null;
      $scope.entity_2=null;
   }else if($scope.grade == 2){
           $scope.entity_1=p_entity;
           $scope.entity_2=null;
       }else if($scope.grade == 3){
           $scope.entity_2=p_entity;
       }
       this.findByParentId(p_entity.id)
   }

绑定面包屑：

<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>

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

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

这里我们可以使用ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮

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

1.4新增商品分类（学员实现）

实现商品分类，如下图:

当前显示的是哪一分类的列表，我们就将这个商品分类新增到这个分类下。

实现思路：我们需要一个变量去记住上级ID，在保存的时候再根据这个ID来新增分类

修改itemCatController.js, 定义变量

$scope.parentId=0;//上级ID

查询时记录上级ID

//根据上级ID显示下级列表

$scope.findByParentId=function(parentId){

$scope.parentId=parentId;//记住上级ID

itemCatService.findByParentId(parentId).success(

function(response){

$scope.list=response;

}

);

}

保存的时候，用到此变量

//保存

$scope.save=function(){

var serviceObject;//服务层对象

if($scope.entity.id!=null){//如果有ID

serviceObject=itemCatService.update( $scope.entity ); //修改

}else{

$scope.entity.parentId=$scope.parentId;//赋予上级ID

serviceObject=itemCatService.add( $scope.entity );//增加

}

serviceObject.success(

function(response){

if(response.success){

//重新查询

$scope.findByParentId($scope.parentId);//重新加载

}else{

alert(response.message);

}

);

}

修改页面item_cat.html

<tr>

<td>上级商品分类</td>

<td>

{{entity_1.name}} >> {{entity_2.name}}

</td>

</tr>

<tr>

<td>商品分类名称</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</div>

实现类型模板下拉列表的代码略

1.5修改商品分类（学员实现）

修改item_cat.html的修改按钮

1.6删除商品分类（学员实现）

核心思想，有下级分类的，要么一起删除，要么不准删除。

（代码略）

2.电商概念及表结构分析

2.1电商概念SPU与SKU

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

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

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

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

2.2表结构分析

Tb_goods 商品表

3.商家后台-商品录入【基本功能】

3.1需求分析

在商家后台实现商品录入功能。包括商品名称、副标题、价格、包装列表、售后服务

3.2后端代码

3.2.1实体类

创建组合实体类goods

public class Goods implements Serializable{

private TbGoods goods;//商品SPU

private TbGoodsDesc goodsDesc;//商品扩展

private List<TbItem> itemList;//商品SKU列表

//getter and setter方法......

}

3.2.3服务接口层

修改pinyougou-sellergoods-interface 的GoodsService接口 add方法

/**

* 增加

public void add(Goods goods);

3.2.4服务实现层

修改pinyougou-sellergoods-service的GoodsServiceImpl.java

@Autowired
private TbGoodsDescMapper goodsDescMapper;
/**
* 增加
*/
@Override
public void add(Goods goods) {
   //设置状态为未审核
   goods.getGoods().setAuditStatus("0");
   goodsMapper.insertSelective(goods.getGoods());

   //设置商品id
   goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());
   goodsDescMapper.insertSelective(goods.getGoodsDesc());
}

3.2.5控制层

修改pinyougou-shop-web工程的GoodsController的add方法

/**
* 增加
* @param goods
* @return
*/
@RequestMapping("/add")
public Result add(@RequestBody Goods goods){
   try {
      //获取当前登录用户的id
     String username = SecurityContextHolder.getContext().getAuthentication().getName();
      goods.getGoods().setSellerId(username);
      goodsService.add(goods);
      return new Result(true, "增加成功");
   } catch (Exception e) {
      e.printStackTrace();
      return new Result(false, "增加失败");
   }
}

3.3前端代码

3.3.1控制层

修改goodsController.js ，在增加成功后弹出提示，并清空实体（因为编辑页面无列表）

//保存商品
   $scope.add=function(){
       goodsService.add( $scope.entity ).success(
           function(response){
               alert(response.message);
               if(response.success){
                   //清空实体
                   $scope.entity={};
               }
           }
       );
   }

3.3.2页面

修改goods_edit.html

引入JS:

<script src="../plugins/angularjs/angular.min.js"></script>

<script src="../js/base.js"></script>
<script src="../js/services/goodsService.js"></script>
<script src="../js/controller/baseController.js"></script>
<script src="../js/controller/goodsController.js"></script>

定义控制器：

表单部分代码：

</div>

</div>

</div>

</div>

</div>

保存按钮

4.商家后台-商品录入【商品介绍】

4.1需求分析

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

4.2富文本编辑器介绍

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

KindEditor http://kindeditor.net/

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

CKEditor http://ckeditor.com/

4.3使用kindeditor完成商品介绍的录入

4.3.1初始化kindeditor编辑器

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

var editor;

KindEditor.ready(function(K) {

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

allowFileManager : true

});

</script>

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

4.3.2提取kindeditor编辑器的内容

在goodsController.js中的add()方法中添加

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

4.3.3清空kindeditor编辑器的内容

修改goodsController.js的add方法

function(response){

if(response.success){

alert("保存成功");

$scope.entity={};

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

}else{

alert(response.message);

}

5.分布式文件服务器FastDFS

5.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 分为多个组，每个组之间保存的文件是不同的。每个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有主从的概念。

5.2文件上传及下载的流程

5.2.1 文件上传流程（时序图）

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

组名：文件上传后所在的storage组名称，在文件上传成功后有storage服务器返回，需要客户端自行保存。
虚拟磁盘路径：storage配置的虚拟路径，与磁盘选项store_path*对应。如果配置了store_path0则是M00，如果配置了store_path1则是M01，以此类推。
数据两级目录：storage服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据文件。两级目录的范围都是 00~FF，备注(16进制中FF等于255，加上从00开始，也就是说第一级目录可以放255+1个目录，二级目录可放个数为：256*256 =65,536个文件夹目录，为保证文件访问速度，粗略按照一个目录2,000个文件存放<00-FF>总共可保存文件: 131,072,000个)。
文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

5.2.2 文件下载流程

5.3最简单的 FastDFS 架构

5.4 FastDFS安装

FastDFS 安装步骤非常繁琐，我们在课程中不做要求。已经提供单独的《FastDFS安装部署文档》供学员们课后阅读。

为了能够快速的搭建FastDFS环境进行代码开发，我们这里提供了安装好的镜像。

解压“资源/Linux镜像/fastDFS/pinyougou-image-server.zip”,双击vmx文件，然后启动。

注意：遇到下列提示选择“我已移动该虚拟机”！

IP地址已经固定为192.168.25.133 ，请设置你的仅主机网段为25。

登录名为root 密码为itcast

5.5 FastDFS入门小Demo

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

（1）创建Maven工程fastDFSdemo

由于FastDFS客户端jar包并没有在中央仓库中，所以需要使用下列命令手动安装jar包到Maven本地仓库（将jar包放到d盘setup目录）课程配套的本地仓库已经有此jar包，此步可省略。

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中引入

<groupId>org.csource.fastdfs</groupId>

<artifactId>fastdfs</artifactId>

</dependency>

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

//......

tracker_server=192.168.25.133:22122

//......

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

编码思路：

1、复制tracker.conf配置文件到resources目录，然后加载配置文件(ClientGlobal.init方法加载)

2、创建一个TrackerClient对象。直接new一个。

3、使用TrackerClient对象创建连接，getConnection获得一个TrackerServer对象。

4、创建一个StorageServer的引用，值为null，为接下来创建StorageClient使用

5、创建一个StorageClient对象，直接new一个，需要两个参数TrackerServer对象、StorageServer的引用

6、使用StorageClient对象upload_file方法上传图片，使用3个参数的，扩展名不带“.”。

7、返回数组。包含组名和图片的路径，打印结果。

// 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

6.商家后台-商品录入【商品图片上传】

6.1需求分析

在商品录入界面实现多图片上传

当用户点击新建按钮，弹出上传窗口

6.2后端代码

6.2.1 工具类

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

<groupId>org.csource.fastdfs</groupId>

<artifactId>fastdfs</artifactId>

</dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

（2）将“资源/fastDFS/工具类”的FastDFSClient.java 拷贝到pinyougou-common工程

6.2.2 配置文件

（1）将“资源/fastDFS/配置文件”文件夹中的 fdfs_client.conf 拷贝到pinyougou-shop-web工程config文件夹

（2）在pinyougou-shop-web工程application.properties添加配置

FILE_SERVER_URL=http://192.168.25.133/

（3）在pinyougou-shop-web工程springmvc.xml添加配置：

</bean>

6.2.3 控制层

在pinyougou-shop-web新建UploadController.java

package com.pinyougou.shop.controller;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.multipart.MultipartFile;

import entity.Result;

import util.FastDFSClient;

/**

* 文件上传Controller

* @author Administrator

@RestController

public class UploadController {

@Value("${FILE_SERVER_URL}")

private String FILE_SERVER_URL;//文件服务器地址

@RequestMapping("/upload")

public Result upload( MultipartFile file){

//1、取文件的扩展名

String originalFilename = file.getOriginalFilename();

String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);

try {

//2、创建一个 FastDFS 的客户端

FastDFSClient fastDFSClient

= new FastDFSClient("classpath:config/fdfs_client.conf");

//3、执行上传处理

String path = fastDFSClient.uploadFile(file.getBytes(), extName);

//4、拼接返回的 url 和 ip 地址，拼装成完整的 url

String url = FILE_SERVER_URL + path;

return new Result(true,url);

} catch (Exception e) {

e.printStackTrace();

return new Result(false, "上传失败");

}

6.3前端代码

6.3.1 服务层

（1）在pinyougou-shop-web工程创建uploadService.js

//文件上传服务层

app.service("uploadService",function($http){

this.uploadFile=function(){

var formData=new FormData();

formData.append("file",file.files[0]);

return $http({

method:‘POST‘,

url:"../upload.do",

data: formData,

headers: {‘Content-Type‘:undefined},

transformRequest: angular.identity

});

}

});

anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined，这样浏览器会帮我们把Content-Type 设置为 multipart/form-data.

通过设置 transformRequest: angular.identity ，anjularjs transformRequest function 将序列化我们的formdata object.

（2）将uploadService服务注入到goodsController 中

//商品控制层（商家后台）

app.controller(‘goodsController‘ ,function($scope,$controller ,goodsService,itemCatService,uploadService){

（3）在goods_edit.html引入js

6.3.2 上传图片

（1）goodsController编写代码

/**

* 上传图片

$scope.uploadFile=function(){

uploadService.uploadFile().success(function(response) {

if(response.success){//如果上传成功，取出url

$scope.image_entity.url=response.message;//设置文件地址

}else{

alert(response.message);

}

}).error(function() {

alert("上传发生错误");

});

};

（2）修改图片上传窗口，调用上传方法，回显上传图片

<tr>

</tr>

<tr>

<td>

<table>

<tr>

<td>

上传

</button>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

（3）修改新建按钮

6.3.3 图片列表

（1）在goodsController.js增加方法

$scope.entity={goods:{},goodsDesc:{itemImages:[]}};//定义页面实体结构

//添加图片列表

$scope.add_image_entity=function(){

$scope.entity.goodsDesc.itemImages.push($scope.image_entity);

}

（2）修改上传窗口的保存按钮

（3）遍历图片列表

<td>{{pojo.color}}</td>

</tr>

6.3.4 移除图片

在goodsController.js增加代码

//列表中移除图片

$scope.remove_image_entity=function(index){

$scope.entity.goodsDesc.itemImages.splice(index,1);

}

修改列表中的删除按钮

商品基本信息\商品介绍

标签：form cell har 绑定 ESS 虚拟进入 exception 审核

原文地址：https://www.cnblogs.com/yan562474129/p/9186878.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

商品基本信息\商品介绍

课程目标

1.商品分类

1.1需求及表结构分析

1.1.1需求分析

1.1.2表结构分析

1.2列表实现

1.2.1后端代码

1.2.2前端代码

1.3面包屑导航

修改itemCatController.js

绑定面包屑：

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

这里我们可以使用ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮

1.4新增商品分类（学员实现）

1.5修改商品分类（学员实现）

1.6删除商品分类（学员实现）

2.电商概念及表结构分析

2.1电商概念SPU与SKU

2.2表结构分析

3.商家后台-商品录入【基本功能】

3.1需求分析

3.2后端代码

3.2.1实体类

3.2.3服务接口层

3.2.4服务实现层

3.2.5控制层

3.3前端代码

3.3.1控制层

3.3.2页面

4.商家后台-商品录入【商品介绍】

4.1需求分析

4.2富文本编辑器介绍

4.3使用kindeditor完成商品介绍的录入

4.3.1初始化kindeditor编辑器

4.3.2提取kindeditor编辑器的内容

4.3.3清空kindeditor编辑器的内容

5.分布式文件服务器FastDFS

5.1什么是FastDFS

5.2文件上传及下载的流程

5.2.1 文件上传流程（时序图）

5.2.2 文件下载流程

5.3最简单的 FastDFS 架构

5.4 FastDFS安装

5.5 FastDFS入门小Demo

6.商家后台-商品录入【商品图片上传】

6.1需求分析

6.2后端代码

6.2.1 工具类

6.2.2 配置文件

6.2.3 控制层

6.3前端代码

6.3.1 服务层

6.3.2 上传图片

6.3.3 图片列表

6.3.4 移除图片

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