商品基本信息\商品介绍

商品录入

课程目标

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

指令定义


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

循环列表


<tr ng-repeat="entity in list">

<td><input type="checkbox"
></td>

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

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

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

<td class="text-center">

<button type="button"
class="btn bg-olive btn-xs"
ng-click="findByParentId(entity.id)">查询下级</button>

<button type="button"
class="btn bg-olive btn-xs"
data-toggle="modal"
data-target="#editModal"
>修改</button>

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


<div class="modal-body">

<table class="table table-bordered table-striped"  width="800px">

<tr>

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

<td>

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

</td>

</tr>

<tr>

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

<td><input  class="form-control" ng-model="entity.name"
placeholder="商品分类名称">  </td>

</tr>

<tr>

<td>类型模板</td>

<td>

<input ng-model="entity.typeId"
placeholder="商品类型模板" class="form-control"
type="text"/>

</td>

</tr>

</table>

</div>

<div class="modal-footer">

<button class="btn btn-success"
data-dismiss="modal"
aria-hidden="true"
ng-click="save()">保存</button>

<button class="btn btn-default"
data-dismiss="modal"
aria-hidden="true">关闭</button>

</div>

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

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

修改item_cat.html的修改按钮


<button type="button"
class="btn bg-olive btn-xs"
data-toggle="modal"
data-target="#editModal"  ng-click="findOne(entity.id)">修改</button>

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>

定义控制器：


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

表单部分代码：


<div class="col-md-2 title">商品名称</div>

<div class="col-md-10 data">

<input type="text" class="form-control"  ng-model="entity.goods.goodsName"  placeholder="商品名称" value="">

</div>

<div class="col-md-2 title">副标题</div>

<div class="col-md-10 data">

<input type="text" class="form-control" ng-model="entity.goods.caption"  placeholder="副标题" value="">

</div>

<div class="col-md-2 title">价格</div>

<div class="col-md-10 data">

<div class="input-group">

<span class="input-group-addon">￥</span>

<input type="text" class="form-control"  ng-model="entity.goods.price"  placeholder="价格" value="">

</div>

</div>

<div class="col-md-2 title rowHeight2x">包装列表</div>

<div class="col-md-10 data rowHeight2x">

<textarea rows="4"  class="form-control"  ng-model="entity.goodsDesc.packageList"  placeholder="包装列表"></textarea>

</div>

<div class="col-md-2 title rowHeight2x">售后服务</div>

<div class="col-md-10 data rowHeight2x">

<textarea rows="4"  class="form-control"  ng-model="entity.goodsDesc.saleService"  placeholder="售后服务"></textarea>

</div>

保存按钮


<button class="btn
btn-primary" ng-click="add()"><i
class="fa fa-save"></i>保存</button>

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


<script type="text/javascript">

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


<dependency>

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

<artifactId>fastdfs</artifactId>

<version>1.2</version>

</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引入依赖


<!-- 文件上传组件 -->

<dependency>

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

<artifactId>fastdfs</artifactId>

</dependency>

<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 id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="defaultEncoding"
value="UTF-8"></property>

<!-- 设定文件上传的最大值5MB，5*1024*1024 -->

<property name="maxUploadSize"
value="5242880"></property>

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


<script type="text/javascript" src="../js/base.js">  </script>

<script type="text/javascript" src="../js/service/goodsService.js">  </script>

<script type="text/javascript" src="../js/service/itemCatService.js">  </script>

<script type="text/javascript"
src="../js/service/uploadService.js">  </script>

<script type="text/javascript" src="../js/controller/baseController.js">  </script>

<script
type="text/javascript"
src="../js/controller/goodsController.js">  </script>

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）修改图片上传窗口，调用上传方法，回显上传图片


<div class="modal-body">

<table class="table table-bordered
table-striped">

<tr>

<td>颜色</td>

<td><input  class="form-control"
placeholder="颜色" ng-model="image_entity.color">  </td>

</tr>

<tr>

<td>商品图片</td>

<td>

<table>

<tr>

<td>

<input
type="file" id="file" />

<button class="btn btn-primary" type="button" ng-click="uploadFile()">

上传

</button>

</td>

<td>

<img  src="{{image_entity.url}}" width="200px" height="200px">

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

（3）修改新建按钮


<button type="button"
class="btn btn-default"
title="新建" data-target="#uploadModal"  data-toggle="modal" ng-click="image_entity={}" ><i class="fa fa-file-o"></i>
新建</button>

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）修改上传窗口的保存按钮


<button class="btn
btn-success" ng-click="add_image_entity()" data-dismiss="modal" aria-hidden="true">保存</button>

（3）遍历图片列表


<tr ng-repeat="pojo in entity.goodsDesc.itemImages">

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

<td><img alt="" src="{{pojo.url}}"
width="100px" height="100px"></td>

<td><button type="button"
class="btn btn-default"
title="删除"
><i class="fa
fa-trash-o"></i> 删除</button></td>

</tr>

6.3.4
移除图片

在goodsController.js增加代码


//列表中移除图片

$scope.remove_image_entity=function(index){

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

}

修改列表中的删除按钮


<button type="button"
class="btn btn-default"
title="删除" ng-click="remove_image_entity($index)"><i class="fa
fa-trash-o"></i> 删除</button>

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

时间： 2024-10-13 21:51:24

商品基本信息\商品介绍的相关文章

爬取京东本周热卖商品基本信息存入MySQL

爬取京东本周热卖商品基本信息存入MySQL 网络爬虫介绍 概述 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫. 产生背景 随着网络的迅速发展,万维网成为大量信息的载体,如何有效地提取并利用这些信息成为一个巨大的挑战.搜索引擎(Search Engine),例如传统的通用搜索引擎AltaVista,Yahoo!和Google等,作为一个辅助人

亚马逊新手必备：商品基本信息填写规则

亚马逊商品基本信息填写规则 1. 商品名称: a. 每个字的首字母必须大写(除了 a, an, and, or, for, on, the 之类的词),不能全大写或者全小写. b. 不能有特殊字符,不能有中文输入法状态下输入的标点符号;商品标题不能有商标符号;如有数字描述请 用阿拉伯数字不要使用 文字例如:要写 2 不要写 Two.商品名称不能有自己的 SKU 号码或者其他编码. c. 如包含批量销售,请在商品名称后面添加( pack of X). d. 不能过长, 不能有重复关键字或者不同单词

IOS之UI--小实例项目--添加商品和商品名（纯代码终结版）

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

IOS之UI--小实例项目--添加商品和商品名（使用xib文件终结版） + xib相关知识点总结

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

ECSHOP后台商品列表显示商品缩略图

ECSHOP后台商品列表显示商品缩略图 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-06 ecshop 后台商品列表显示商品缩略图,大楷步凑如下: 一:admin\includes\lib_goods.php (可能是781行)$sql = “SELECT goods_id, goods_name, goods_sn, shop_price, goods_thumb, is_on_sale, is_best, is_new, is_hot, go

jQuery制作仿京东商城-商品列表商品筛选功能

这次使用jquery来实现一个仿京东商城-商品列表商品筛选的功能 一.html代码 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class

14.首页点击商品显示商品详情

1.在index.jsp中传递商品id,在a标签中加入href的内容,href="${pageContext.request.contextPath }/product_findByPid.action?pid=<s:property value="#p.pid"/>" <s:iterator value="nList" var="p"> <li> <a target="_b

添加商品验证商品是否存在的两种实现方式

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="ctx" value="

destoon 专题下的商品无商品ID DIY简单添加方法只适用于后台操作专题

文件中添加如下: 然后这 文件中添加如下: 最后要记得这数据库destoon_special_item表中新增goodid这个字段.