ideaspringboot项目上传服务器_淘淘商城项目学习日记-02-商品添加相关实现

商品添加实现

1.实现内容

完成商品添加功能

• 商品类目选择（商品种类确定）
• 图片上传
• 图片服务器搭建
• kindEditor富文本编辑器的使用
• 商品添加功能

2.实现商品类目选择功能

需求分析：

在商品添加页面，点击“选择类目”显示商品类目列表：

实现步骤：

按钮添加点击事件，弹出窗口，加载数据显示tree

将选择类目的组件封装起来，通过TT.iniit()初始化，最终调用initItemCat()方法进行初始化

创建数据库、以及tb _item_cat表，初始化数据

编写Controller、Service、Mapper

EasyUI tree数据结构分析

数据结构中必须包含：

Id：节点id

Text：节点名称

State：如果不是叶子节点就是close，叶子节点就是open。Close的节点点击后会在此发送请求查询子项目。

可以根据parentid查询分类列表。

Mapper

使用逆向工程生成的mapper文件

Service

功能：根据parentId查询商品分类列表

参数：parentId

返回值：返回tree所需要的数据结构，是一个节点列表。

可以创建一个tree node的pojo表示节点的数据，也可以使用map。

List<TreeNode>

创建一个tree node的pojo

public 

Service实现

ItemCatService接口

Controller

功能：接收页面传递过来的id，作为parentId查询子节点。

参数：Long id

返回值：要返回json数据要使用@ResponseBody。List<TreeNode>

@Controller

3.图片上传

<1>图片服务器

传统项目中的图片管理

传统项目中，可以在web项目中添加一个文件夹，来存放上传的图片。例如在工程的根目录WebRoot下创建一个images文件夹。把图片存放在此文件夹中就可以直接使用在工程中引用。

优点：

引用方便，便于管理

缺点：

如果是分布式环境图片引用会出现问题

图片的下载会给服务器增加额外的压力

传统图片管理方式在分布式环境中的问题：

第一次请求：图片上传

分布式环境的图片管理

分布式环境一般都有一个专门的图片服务器存放图片。

我们使用虚拟机搭建一个专门的服务器来存放图片。在此服务器上安装一个nginx来提供http服务，安装一个ftp服务器来提供图片上传服务。

搭建图片服务器

第一步：安装vsftpd提供ftp服务（详见：vsftpd安装手册.doc）

第二步：安装nginx提供http服务（详见：nginx安装手册.doc）

测试图片服务器

ftp服务测试

使用ftp客户端

使用java程序

ftp可以需要依赖commons-net-3.3.jar包。

public 

http服务测试

浏览器测试

FastDFS文件上传测试

一般在taotao-parent定义依赖版本，有时候

在taotao-manager-web下通过Maven中引入相关jar包(需要将jar导入maven仓库，中央仓库可能没有该jar包的存在)

<dependency>
  	

编写文件client.conf：tracker_server=10.0.7.68:22122

在taotao-common下加载工具类（相应地也要修改pom.xml）

编写测试代码测试服务器连接：

@Test
	

SpringMVC中实现图片上传

上传思路：

第一步：

导入common-fileupload的依赖

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

第二步：

在SpringMVC配置文件中添加文件上传解析器

<!-- 定义文件上传解析器 -->
	

Service实现

获取资源配置文件的内容

第一步：

创建资源配置文件

FILI_UPLOAD_PATH=D:/temp/imagestest/webapps/images

IMAGE_BASE_URL=http://localhost:9000/images

第二步：

在Spring（taotao-manage-servlet.xml）容器中加载资源文件

第三步：

在Service中获取资源配置：

@Value

图片名生成策略

时间+随机数：

/**

使用UUID：

UUID.randomUUID();

Service实现

读取配置文件中的数据（设置文件上传所需的基本属性），在taotao-manager-web下配置属性文件。

利用spring框架提供的读取文件的机制完成文件信息的读取，在applicationContext-dao.xml下加载相关的配置文件

public 

Controller实现

功能：接收MultiPartFile对象，调用Service上传图片，返回json数据格式，使用@ResponseBody注解。

此前需要在springmvc.xml中配置多部件解析器，

<!-- 定义文件上传解析器 -->
	

前端JS实现图片上传

Js实现逻辑

KindEditor 4.x 文档

http://kindeditor.net/doc.php

上传图片使用kindeditor的上传组件实现。

上传图片请求url：

返回值

参考文档：

http://kindeditor.net/docs/upload.html

返回格式(JSON)

//成功时

{
        

//失败时

{
        

返回值数据类型：

public 

文件上传可能存在的问题：

文件服务器部署存在问题，考虑调整为存储到本地的服务器

文件上传插件：存在浏览器兼容问题，在google能正常使用，在firefox无法正常使用（可以通过f12查看相关的json数据，考虑这一问题（保证功能的兼容性），在controller层需要将Result转化为相应的json格式的字符串数据）

4.kindeditor（富文本编辑器）的使用

kindeditor的使用过程：

步骤1：导入js：（在item.add.jsp中引入）

步骤2：定义多行文本（设置不可见、给定name）

步骤3：调用TT.createEditor（查看common.js）

创建富文本编辑器，初始化类目选择和图片上传器

提交表单之前，需要先将富文本编辑器中的内容和textarea中的内容进行同步

步骤4：测试效果

取文本编辑器中的内容：将编辑器的内容设置到原来的textarea控件里

editor.sync();

5.新增商品实现

js编写逻辑

表单提交请求：（请求url、表单数据序列化成key-value形式）

//提交表单

提交请求的数据格式

$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串，以post 的形式将表单的内容提交。

请求的url：/item/save

返回的结果：淘淘自定义返回结果：

状态码、响应的消息、响应的数据

/**

获得商品id

临时主键生成策略：

/**

ItemServiceImpl

调用mapper的insert方法添加商品信息

@Override
	

Controller实现

@RequestMapping

在此基础上完成商品信息的修改

6.fastDFS实现文件上传

参考已有的虚拟机服务器，修改相关文件：

修改/etc/fdfs/storage.conf和/etc/fdfs/client.conf文件，修改对应的ip和端口号信息：

tracker_server=192.168.187.128:22122

重新启动fastDFS、nginx使配置生效

cd/usr/bin/

重启nginx

再次测试访问链接：

http://192.168.187.128/group1/M00/00/00/wKi7gFwu_ZyAUs-BAAHUEC1DZhw324.png

使用fastDFS工具类实现图片上传：

@Test

上传的图片在服务器中存储的位置：

/home/fastdfs/storage/data/00/00

上传测试：第一次上传测试需要加载flash插件，否则可能出现“添加图片”的按钮不显示，其次添加图片完成之后，图片数据不回显，如下图所示

右键选择“检查元素”查看相应的数据，显示如下，发现文件路径出错，没有拼接相关的ip地址

在返回相应url时拼接相应的ip

火狐浏览器兼容性问题解决

要求返回的数据是一个文本类型，要求content-type 为text/plan