图片服务器FastDFS上传(富文本,商品增删改查上下架)

1课程计划

[添加链接描述](https://blog.csdn.net/etna_hh/article/details/82468508)

1.图片上传

            a)  图片服务器FastDFS

            b)  图片上传功能实现

2.富文本编辑器的使用KindEditor

3.商品添加功能完成

2图片服务器的安装

搭建参考:

1.存储空间可扩展。

2.提供一个统一的访问方式。

使用FastDFS,分布式文件系统。存储空间可以横向扩展,可以实现服务器的高可用。支持每个节点有备份机

2.1什么是FastDFS?

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

2.2 FastDFS架构

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

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

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

服务端两个角色:

Tracker:管理集群,tracker也可以实现集群。每个tracker节点地位平等。

收集Storage集群的状态。

Storage:实际保存文件

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

2.3文件上传的流程

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

  1. 组名:文件上传后所在的storage组名称,在文件上传成功后有storage服务器返回,需要客户端自行保存。
  2. 虚拟磁盘路径:storage配置的虚拟路径,与磁盘选项store_path*对应。如果配置了store_path0则是M00,如果配置了store_path1则是M01,以此类推。
  3. 数据两级目录:storage服务器在每个虚拟磁盘路径下创建的两级目录,用于存储数据文件。
  4. 文件名:与文件上传时不同。是由存储服务器根据特定信息生成,文件名包含:源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

2.4文件下载

2.5最简单的FastDFS架构

3图片服务器安装方法

3.1安装步骤

第一步:把图片服务器解压缩。

第二步:把图片服务器添加到Vmware中。

第三步:Vmware的网络配置。

第四步:开机

移动:网络配置不发生变化。要使用图片服务器,需要保证网络配置不变。

复制:重新生成一块网卡mac地址是新地址。

Ip地址:192.168.25.133

用户名root、itcast

密码:itcast

Startx启动桌面

4图片服务器使用

4.1Java客户端:

Maven环境:

安装到本地仓库run as->maven install

复制 到common工程pom文件

4.2上传图片

4.2.1上传步骤

  1. 加载配置文件,配置文件中的内容就是tracker服务的地址。

配置文件内容:tracker_server=192.168.25.133:22122

  1. 创建一个TrackerClient对象。直接new一个。
  2. 使用TrackerClient对象创建连接,获得一个TrackerServer对象。
  3. 创建一个StorageServer的引用,值为null
  4. 创建一个StorageClient对象,需要两个参数TrackerServer对象、StorageServer的引用
  5. 使用StorageClient对象上传图片。
  6. 返回数组。包含组名和图片的路径。

4.2.2代码

public class FastDFSTest {

		<p style="margin-left:0cm;">&nbsp;</p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#646464;">@Test</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">public</span></strong> <strong><span style="color:#7f0055;">void</span></strong><span style="color:#000000;"> testFileUpload() </span><strong><span style="color:#7f0055;">throws</span></strong><span style="color:#000000;"> Exception {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 1</span><span style="color:#3f7f5f;">、加载配置文件,配置文件中的内容就是tracker服务的地址。</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ClientGlobal.<em>init</em>(</span><span style="color:#2a00ff;">"D:/workspaces-itcast/</span><span style="color:#2a00ff;">e3</span><span style="color:#2a00ff;">-manager-web/src/main/resources/resource/client.conf"</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 2</span><span style="color:#3f7f5f;">、创建一个TrackerClient对象。直接new一个。</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TrackerClient </span><span style="color:#6a3e3e;">trackerClient</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> TrackerClient();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 3</span><span style="color:#3f7f5f;">、使用TrackerClient对象创建连接,获得一个TrackerServer对象。</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TrackerServer </span><span style="color:#6a3e3e;">trackerServer</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">trackerClient</span><span style="color:#000000;">.getConnection();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 4</span><span style="color:#3f7f5f;">、创建一个StorageServer的引用,值为null</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; StorageServer </span><span style="color:#6a3e3e;">storageServer</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">null</span></strong><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 5</span><span style="color:#3f7f5f;">、创建一个StorageClient对象,需要两个参数TrackerServer对象、StorageServer的引用</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; StorageClient </span><span style="color:#6a3e3e;">storageClient</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> StorageClient(</span><span style="color:#6a3e3e;">trackerServer</span><span style="color:#000000;">, </span><span style="color:#6a3e3e;">storageServer</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 6</span><span style="color:#3f7f5f;">、使用StorageClient对象上传图片。</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//</span><span style="color:#3f7f5f;">扩展名不带“.”</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String[] </span><span style="color:#6a3e3e;">strings</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">storageClient</span><span style="color:#000000;">.upload_file(</span><span style="color:#2a00ff;">"D:/Documents/Pictures/images/200811281555127886.jpg"</span><span style="color:#000000;">, </span><span style="color:#2a00ff;">"jpg"</span><span style="color:#000000;">, </span><strong><span style="color:#7f0055;">null</span></strong><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 7</span><span style="color:#3f7f5f;">、返回数组。包含组名和图片的路径。</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">for</span></strong><span style="color:#000000;"> (String </span><span style="color:#6a3e3e;">string</span><span style="color:#000000;"> : </span><span style="color:#6a3e3e;">strings</span><span style="color:#000000;">) {</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.</span><strong><em><span style="color:#0000c0;">out</span></em></strong><span style="color:#000000;">.println(</span><span style="color:#6a3e3e;">string</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">}</span></p>
		</td>
	</tr></tbody></table></div><h2><a name="t14"></a>4.3使用工具类上传</h2>

@Test

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">public</span></strong> <strong><span style="color:#7f0055;">void</span></strong><span style="color:#000000;"> testFastDfsClient() </span><strong><span style="color:#7f0055;">throws</span></strong><span style="color:#000000;"> Exception {</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FastDFSClient </span><span style="color:#6a3e3e;">fastDFSClient</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> FastDFSClient(</span><span style="color:#2a00ff;">"D:/workspaces-itcast/</span><span style="color:#2a00ff;">e3</span><span style="color:#2a00ff;">-manager-web/src/main/resources/resource/client.conf"</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String </span><span style="color:#6a3e3e;">file</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">fastDFSClient</span><span style="color:#000000;">.uploadFile(</span><span style="color:#2a00ff;">"D:/Documents/Pictures/images/2f2eb938943d.jpg"</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.</span><strong><em><span style="color:#0000c0;">out</span></em></strong><span style="color:#000000;">.println(</span><span style="color:#6a3e3e;">file</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>
		</td>
	</tr></tbody></table></div><h1><a name="t15"></a>5图片上传功能</h1>

5.1功能分析

使用的是KindEditor的多图片上传插件。

KindEditor 4.x 文档

http://kindeditor.net/doc.php

请求的url:/pic/upload

参数:MultiPartFile uploadFile

返回值:

可以创建一个pojo对应返回值。可以使用map

 

业务逻辑:

1、接收页面传递的图片信息uploadFile

2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。

3、图片服务器返回图片的url

4、将图片的url补充完整,返回一个完整的url。

5、把返回结果封装到一个Map对象中返回。

 

1、需要把commons-io(common工程)、fileupload(web工程) 的jar包添加到工程中。

e3-manager-web工程:

e3-common工程:

2、在spring-mvc.xml下配置多媒体解析器。

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

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#008080;">&lt;</span><span style="color:#3f7f7f;">bean</span> <span style="color:#7f007f;">id</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"multipartResolver"</span></em></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#7f007f;">class</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"org.springframework.web.multipart.commons.CommonsMultipartResolver"</span></em><span style="color:#008080;">&gt;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f5fbf;">&lt;!-- </span><span style="color:#3f5fbf;">设定默认编码 --&gt;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#008080;">&lt;</span><span style="color:#3f7f7f;">property</span> <span style="color:#7f007f;">name</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"defaultEncoding"</span></em> <span style="color:#7f007f;">value</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"UTF-8"</span></em><span style="color:#008080;">&gt;&lt;/</span><span style="color:#3f7f7f;">property</span><span style="color:#008080;">&gt;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f5fbf;">&lt;!-- </span><span style="color:#3f5fbf;">设定文件上传的最大值5MB,5*1024*1024 --&gt;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#008080;">&lt;</span><span style="color:#3f7f7f;">property</span> <span style="color:#7f007f;">name</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"maxUploadSize"</span></em> <span style="color:#7f007f;">value</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;">"5242880"</span></em><span style="color:#008080;">&gt;&lt;/</span><span style="color:#3f7f7f;">property</span><span style="color:#008080;">&gt;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#008080;">&lt;/</span><span style="color:#3f7f7f;">bean</span><span style="color:#008080;">&gt;</span></p>
		</td>
	</tr></tbody></table></div><p>加入e3-manager-web配置文件:</p>

resource.properties:

在spring-mvc.xml读取配置文件:

client.conf:

配置文件在controller中读取

5.2Controller

@Controller

		<p style="margin-left:0cm;"><strong><span style="color:#7f0055;">public</span></strong> <strong><span style="color:#7f0055;">class</span></strong><span style="color:#000000;"> PictureController {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#646464;">@Value</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"${IMAGE_SERVER_URL}"</span><span style="color:#000000;">)</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">private</span></strong><span style="color:#000000;"> String </span><span style="color:#0000c0;">IMAGE_SERVER_URL</span><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;</p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#646464;">@RequestMapping</span><span style="color:#000000;">(</span><span style="color:#2a00ff;">"/pic/upload"</span><span style="color:#000000;">)</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#646464;">@ResponseBody</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">public</span></strong><span style="color:#000000;"> <u>Map</u> fileUpload(MultipartFile </span><span style="color:#6a3e3e;">uploadFile</span><span style="color:#000000;">) {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">try</span></strong><span style="color:#000000;"> {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//1</span><span style="color:#3f7f5f;">、取文件的扩展名</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String </span><span style="color:#6a3e3e;">originalFilename</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">uploadFile</span><span style="color:#000000;">.getOriginalFilename();</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String </span><span style="color:#6a3e3e;">extName</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">originalFilename</span><span style="color:#000000;">.substring(</span><span style="color:#6a3e3e;">originalFilename</span><span style="color:#000000;">.lastIndexOf(</span><span style="color:#2a00ff;">"."</span><span style="color:#000000;">) + 1);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//2</span><span style="color:#3f7f5f;">、创建一个FastDFS的客户端</span>&nbsp; <span style="color:#3f7f5f;">读取图片服务器配置文件</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FastDFSClient </span><span style="color:#6a3e3e;">fastDFSClient</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> FastDFSClient(</span><span style="color:#2a00ff;">"classpath:resource/client.conf"</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//3</span><span style="color:#3f7f5f;">、执行上传处理</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String </span><span style="color:#6a3e3e;">path</span><span style="color:#000000;"> = </span><span style="color:#6a3e3e;">fastDFSClient</span><span style="color:#000000;">.uploadFile(</span><span style="color:#6a3e3e;">uploadFile</span><span style="color:#000000;">.getBytes(), </span><span style="color:#6a3e3e;">extName</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//4</span><span style="color:#3f7f5f;">、拼接返回的<u>url</u>和<u>ip</u>地址,拼装成完整的<u>url</u></span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String </span><span style="color:#6a3e3e;">url</span><span style="color:#000000;"> = </span><span style="color:#0000c0;">IMAGE_SERVER_URL</span><span style="color:#000000;"> + </span><span style="color:#6a3e3e;">path</span><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//5</span><span style="color:#3f7f5f;">、返回map</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u>Map</u> </span><span style="color:#6a3e3e;">result</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> HashMap&lt;&gt;();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u><span style="color:#6a3e3e;">result</span></u><u><span style="color:#000000;">.put(</span></u><u><span style="color:#2a00ff;">"error"</span></u><u><span style="color:#000000;">, 0)</span></u><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u><span style="color:#6a3e3e;">result</span></u><u><span style="color:#000000;">.put(</span></u><u><span style="color:#2a00ff;">"url"</span></u><u><span style="color:#000000;">, </span></u><u><span style="color:#6a3e3e;">url</span></u><u><span style="color:#000000;">)</span></u><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">return</span></strong> <span style="color:#6a3e3e;">result</span><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } </span><strong><span style="color:#7f0055;">catch</span></strong><span style="color:#000000;"> (Exception </span><span style="color:#6a3e3e;">e</span><span style="color:#000000;">) {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">e</span><span style="color:#000000;">.printStackTrace();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//5</span><span style="color:#3f7f5f;">、返回map</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u>Map</u> </span><span style="color:#6a3e3e;">result</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> HashMap&lt;&gt;();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u><span style="color:#6a3e3e;">result</span></u><u><span style="color:#000000;">.put(</span></u><u><span style="color:#2a00ff;">"error"</span></u><u><span style="color:#000000;">, 1)</span></u><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <u><span style="color:#6a3e3e;">result</span></u><u><span style="color:#000000;">.put(</span></u><u><span style="color:#2a00ff;">"message"</span></u><u><span style="color:#000000;">, </span></u><u><span style="color:#2a00ff;">"</span></u><u><span style="color:#2a00ff;">图片上传失败"</span></u><u><span style="color:#000000;">)</span></u><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">return</span></strong> <span style="color:#6a3e3e;">result</span><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">}</span></p>
		</td>
	</tr></tbody></table></div><h2><a name="t18"></a>5.3解决浏览器兼容性的问题</h2>

KindEditor的图片上传插件,对浏览器兼容性不好。

使用@ResponseBody注解返回java对象,

Content-Type:application/json;charset=UTF-8

 

返回字符串时:

Content-Type:text/plan;charset=UTF-8

指定响应结果的content-type:

KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。

6富文本编辑器的使用方法

6.1富文本编辑器介绍

KindEditor

http://kindeditor.net/

UEditor:百度编辑器

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

CKEditor

http://ckeditor.com/

纯js开发,跟后台语言没有关系。

6.2使用方法

第一步:在jsp中引入KindEditor的css和js代码。

第二步:在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

第三步:初始化富文本编辑器。使用官方提供的方法初始化。

common.js(富文本编辑器也需要上传):

第四步:取富文本编辑器的内容。

表单提交之前,把富文本编辑器的内容同步到textarea控件中。

item-add.jsp:

7商品添加功能实现

7.1功能分析

请求的url:/item/save

参数:表单的数据。可以使用pojo接收表单的数据,要求pojo的属性和input的name属性要一致。

使用TbItem对象接收表单的数据。

TbItem item,String desc

返回值:

Json数据。应该包含一个status的属性。

可以使用E3Result,放到e3-common中。

 

业务逻辑:

  1. 生成商品id

实现方案:

     a)  aUuid,字符串,不推荐使用。

     b)  数值类型,不重复。日期+时间+随机数20160402151333123123

     c)  可以直接去毫秒值+随机数。可以使用。

     d)  使用redis。Incr。推荐使用。

使用IDUtils生成商品id

  1. 补全TbItem对象的属性
  2. 向商品表插入数据
  3. 创建一个TbItemDesc对象
  4. 补全TbItemDesc的属性
  5. 向商品描述表插入数据
  6. E3Result.ok()

7.2Dao层

向tb_item, tb_item_desc表中插入数据

可以使用逆向工程

7.3Service层

参数:TbItem item,String desc

业务逻辑:略,参加上面

返回值:E3Result

@Override

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">public</span></strong> <span style="color:#000000;">E3</span><span style="color:#000000;">Result addItem(TbItem </span><span style="color:#6a3e3e;">item</span><span style="color:#000000;">, String </span><span style="color:#6a3e3e;">desc</span><span style="color:#000000;">) {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 1</span><span style="color:#3f7f5f;">、生成商品id</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">long</span></strong> <span style="color:#6a3e3e;">itemId</span><span style="color:#000000;"> = IDUtils.<em>genItemId</em>();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 2</span><span style="color:#3f7f5f;">、补全TbItem对象的属性</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">item</span><span style="color:#000000;">.setId(</span><span style="color:#6a3e3e;">itemId</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">//</span><span style="color:#3f7f5f;">商品状态,1-正常,2-下架,3-删除</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">item</span><span style="color:#000000;">.setStatus((</span><strong><span style="color:#7f0055;">byte</span></strong><span style="color:#000000;">) 1);</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Date </span><span style="color:#6a3e3e;">date</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> Date();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">item</span><span style="color:#000000;">.setCreated(</span><span style="color:#6a3e3e;">date</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">item</span><span style="color:#000000;">.setUpdated(</span><span style="color:#6a3e3e;">date</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 3</span><span style="color:#3f7f5f;">、向商品表插入数据</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#0000c0;">itemMapper</span><span style="color:#000000;">.insert(</span><span style="color:#6a3e3e;">item</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 4</span><span style="color:#3f7f5f;">、创建一个TbItemDesc对象</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TbItemDesc </span><span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;"> = </span><strong><span style="color:#7f0055;">new</span></strong><span style="color:#000000;"> TbItemDesc();</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 5</span><span style="color:#3f7f5f;">、补全TbItemDesc的属性</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;">.setItemId(</span><span style="color:#6a3e3e;">itemId</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;">.setItemDesc(</span><span style="color:#6a3e3e;">desc</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;">.setCreated(</span><span style="color:#6a3e3e;">date</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;">.setUpdated(</span><span style="color:#6a3e3e;">date</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 6</span><span style="color:#3f7f5f;">、向商品描述表插入数据</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#0000c0;">itemDescMapper</span><span style="color:#000000;">.insert(</span><span style="color:#6a3e3e;">itemDesc</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#3f7f5f;">// 7</span><span style="color:#3f7f5f;">、</span><span style="color:#3f7f5f;">E3</span><span style="color:#3f7f5f;">Result.ok()</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">return</span></strong> <span style="color:#000000;">E3</span><span style="color:#000000;">Result.<em>ok</em>();</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>
		</td>
	</tr></tbody></table></div><p>发布服务</p>

7.4表现层

引用服务

7.4.1Controller

请求的url:/item/save

参数:TbItem item,String desc

返回值:E3Result

@RequestMapping("/save")

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#646464;">@ResponseBody</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">public</span></strong> <span style="color:#000000;">E3</span><span style="color:#000000;">Result saveItem(TbItem </span><span style="color:#6a3e3e;">item</span><span style="color:#000000;">, String </span><span style="color:#6a3e3e;">desc</span><span style="color:#000000;">) {</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:#000000;">E3</span><span style="color:#000000;">Result </span><span style="color:#6a3e3e;">result</span><span style="color:#000000;"> = </span><span style="color:#0000c0;">itemService</span><span style="color:#000000;">.addItem(</span><span style="color:#6a3e3e;">item</span><span style="color:#000000;">, </span><span style="color:#6a3e3e;">desc</span><span style="color:#000000;">);</span></p>

		<p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><span style="color:#7f0055;">return</span></strong> <span style="color:#6a3e3e;">result</span><span style="color:#000000;">;</span></p>

		<p style="margin-left:0cm;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>
		</td>
	</tr></tbody></table></div><h2><a name="t28"></a>7.5作业</h2>

商品修改:

item-list:

商品删除:

item-list:

上架下架:

item-list:

 

 

[添加链接描述](https://blog.csdn.net/etna_hh/article/details/82468508)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值