SSM项目之---淘淘商城（第三天）文档步骤

梦里梦外; 2022-05-22 02:43 229阅读 0赞

# 1 课程计划 #

后台管理商品的添加功能

1、商品分类选择

2、上传图片

3、富文本编辑器（kindEditor）

4、实现商品的添加

5、课后作业（商品的修改、删除）

# 2 商品添加功能说明 #

![Center][]

# 3 类目选择 #

## 3.1 需求 ##

点击类目选择按钮弹出类目选择窗口，窗口中是一个树形视图。分级展示商品分类。当选择商品分类的叶子节点后，关闭窗口并将选中的商品分类的名称显示到网页上。

1、初始化tree的url：

/item/cat/list

2、请求的参数

Id（当前节点的id，根据此id查询子节点）

3、返回数据的格式json数据：

\[\{

"id": 1,    //当前节点的id

"text": "Node 1",    //节点显示的名称

"state": "closed"    //节点的状态，如果是closed就是一个文件夹形式，

// 当打开时还会 做一次请求。如果是open就显示为叶子节点。

\},\{

"id": 2,

"text": "Node 2",

"state": "closed"

\}\]

## 3.1 Mapper ##

数据中的表：

![Center 1][]

### 3.1.1 Sql语句 ###

SELECT \* FROM \`tb\_item\_cat\` where parent\_id=父节点id;

可以使用 逆向工程生成的mapper。

## 3.1 Service层 ##

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

参数：parentId

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

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

List<TreeNode>

### 3.1.1 创建一个tree node的pojo： ###

是一个通用的pojo可以放到taotao-common中。

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">public&nbsp;class&nbsp;TreeNode { private&nbsp;long&nbsp;id;private&nbsp;String&nbsp;text;private&nbsp;String&nbsp;state;public&nbsp;TreeNode(long&nbsp;id, String&nbsp;text, String&nbsp;state) { this.id&nbsp;=&nbsp;id;this.text&nbsp;=&nbsp;text;this.state&nbsp;=&nbsp;state;}public&nbsp;long&nbsp;getId() { return&nbsp;id;}public&nbsp;void&nbsp;setId(long&nbsp;id) { this.id&nbsp;=&nbsp;id;}public&nbsp;String getText() { return&nbsp;text;}public&nbsp;void&nbsp;setText(String&nbsp;text) { this.text&nbsp;=&nbsp;text;}public&nbsp;String getState() { return&nbsp;state;}public&nbsp;void&nbsp;setState(String&nbsp;state) { this.state&nbsp;=&nbsp;state;}&nbsp;}</td> 
 </tr> 
 </tbody> 
</table>

### 3.1.2 代码实现 ###

## 3.2 表现层 ##

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

参数：Long id

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

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">@Controller@RequestMapping("/item/cat")public&nbsp;class&nbsp;ItemCatController { &nbsp;@Autowiredprivate&nbsp;ItemCatService&nbsp;itemCatService;@RequestMapping("/list")@ResponseBodypublic&nbsp;List&lt;TreeNode&gt;&nbsp;getItemCatList(@RequestParam(value="id", defaultValue="0")Long&nbsp;parentId) { List&lt;TreeNode&gt;&nbsp;list&nbsp;=&nbsp;itemCatService.getItemCatList(parentId);return&nbsp;list;}} </td> 
 </tr> 
 </tbody> 
</table>

#     #

# 4 图片上传 #

## 4.1 图片上传实现 ##

### 1.1.1 需求分析 ###

Common.js

1、绑定事件

2、初始化参数

3、上传图片的url：

/pic/upload

4、上图片参数名称：

uploadFile

5、返回结果数据类型json

参考文档：

[http://kindeditor.net/docs/upload.html][http_kindeditor.net_docs_upload.html]

返回格式(JSON)

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;background:rgb(230,230,230);">//成功时{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"error" : 0,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"url" : "http://www.example.com/path/to/file.ext"}//失败时{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"error" : 1,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"message" : "错误信息"}</td> 
 </tr> 
 </tbody> 
</table>

### 1.1.2 Service ###

功能：接收controller层传递过来的图片对象，把图片上传到ftp服务器。给图片生成一个新的名字。

参数：MultiPartFile uploadFile

返回值：返回一个pojo，应该是PictureResult。

#### 1.1.2.1 PictureResult ####

应该把此pojo放到taotao-common工程中。

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">public&nbsp;class&nbsp;PictureResult { &nbsp;private&nbsp;int&nbsp;error;private&nbsp;String&nbsp;url;private&nbsp;String&nbsp;message;private&nbsp;PictureResult(int&nbsp;error, String&nbsp;url, String&nbsp;message) { this.error&nbsp;=&nbsp;error;this.url&nbsp;=&nbsp;url;this.message&nbsp;=&nbsp;message;}//成功时调用的方法public&nbsp;static&nbsp;PictureResult ok(String&nbsp;url) { return&nbsp;new&nbsp;PictureResult(0,&nbsp;url,&nbsp;null);}//失败时调用的方法public&nbsp;static&nbsp;PictureResult&nbsp;error(String&nbsp;message) { return&nbsp;new&nbsp;PictureResult(1,&nbsp;null,&nbsp;message);}public&nbsp;int&nbsp;getError() { return&nbsp;error;}public&nbsp;void&nbsp;setError(int&nbsp;error) { this.error&nbsp;=&nbsp;error;}public&nbsp;String getUrl() { return&nbsp;url;}public&nbsp;void&nbsp;setUrl(String&nbsp;url) { this.url&nbsp;=&nbsp;url;}public&nbsp;String getMessage() { return&nbsp;message;}public&nbsp;void&nbsp;setMessage(String&nbsp;message) { this.message&nbsp;=&nbsp;message;}}</td> 
 </tr> 
 </tbody> 
</table>

#### 1.1.2.2 Service实现 ####

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">@Servicepublic&nbsp;class&nbsp;PictureServiceImpl&nbsp;implements&nbsp;PictureService { @Value("${FTP_ADDRESS}")private&nbsp;String&nbsp;FTP_ADDRESS;@Value("${FTP_PORT}")private&nbsp;Integer&nbsp;FTP_PORT;@Value("${FTP_USER_NAME}")private&nbsp;String&nbsp;FTP_USER_NAME;@Value("${FTP_PASSWORD}")private&nbsp;String&nbsp;FTP_PASSWORD;@Value("${FTP_BASE_PATH}")private&nbsp;String&nbsp;FTP_BASE_PATH;@Value("${IMAGE_BASE_URL}")private&nbsp;String&nbsp;IMAGE_BASE_URL;&nbsp;@Overridepublic&nbsp;PictureResult uploadPicture(MultipartFile&nbsp;uploadFile) { //判断上传图片是否为空if&nbsp;(null&nbsp;==&nbsp;uploadFile&nbsp;||&nbsp;uploadFile.isEmpty()) { return&nbsp;PictureResult.error("上传图片为空");}//取文件扩展名String&nbsp;originalFilename&nbsp;=&nbsp;uploadFile.getOriginalFilename();String&nbsp;ext&nbsp;=&nbsp;originalFilename.substring(originalFilename.lastIndexOf("."));//生成新文件名//可以使用uuid生成新文件名。//UUID.randomUUID()//可以是时间+随机数生成文件名String&nbsp;imageName&nbsp;= IDUtils.genImageName();//把图片上传到ftp服务器（图片服务器）//需要把ftp的参数配置到配置文件中//文件在服务器的存放路径，应该使用日期分隔的目录结构DateTime&nbsp;dateTime&nbsp;=&nbsp;new&nbsp;DateTime();String&nbsp;filePath&nbsp;=&nbsp;dateTime.toString("/yyyy/MM/dd");try&nbsp;{ FtpUtil.uploadFile(FTP_ADDRESS,&nbsp;FTP_PORT,&nbsp;FTP_USER_NAME,&nbsp;FTP_PASSWORD,FTP_BASE_PATH,&nbsp;filePath,&nbsp;imageName&nbsp;+&nbsp;ext,&nbsp;uploadFile.getInputStream());}&nbsp;catch&nbsp;(Exception&nbsp;e) { e.printStackTrace();return&nbsp;PictureResult.error(ExceptionUtil.getStackTrace(e));}//返回结果，生成一个可以访问到图片的url返回return&nbsp;PictureResult.ok(IMAGE_BASE_URL&nbsp;+&nbsp;filePath&nbsp;+&nbsp;"/"&nbsp;+&nbsp;imageName&nbsp;+&nbsp;ext);}&nbsp;}</td> 
 </tr> 
 </tbody> 
</table>

### 1.1.3 Controller ###

功能：接收页面传递过来的图片。调用service上传到图片服务器。返回结果。

参数：MultiPartFile uploadFile

返回值：返回json数据，应该返回一个pojo，PictureResult对象。

### 1.1.4 Springmvc.xml ###

<table style="border-spacing:0px;width:852px;color:rgb(51,51,51);font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">&lt;!-- 定义文件上传解析器 --&gt;&lt;bean&nbsp;id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"&gt;&lt;!-- 设定默认编码 --&gt;&lt;property&nbsp;name="defaultEncoding"&nbsp;value="UTF-8"&gt;&lt;/property&gt;&lt;!-- 设定文件上传的最大值5MB，5*1024*1024 --&gt;&lt;property&nbsp;name="maxUploadSize"&nbsp;value="5242880"&gt;&lt;/property&gt;&lt;/bean&gt;</td> 
 </tr> 
 </tbody> 
</table>

# 2 富文本编辑器 #

## 2.1 使用方法 ##

第一步：在jsp中加入富文本编辑器js的引用。

第二步：在富文本编辑器出现的位置添加一个input 类型为textarea

第三步：调用js方法初始化富文本编辑器。

第四步：提交表单时，调用富文本编辑器的同步方法sync，把富文本编辑器中的内容同步到textarea中。

# 6、商品添加功能实现 #

## 1.1 功能分析 ##

1、请求的url

/item/save

2、返回结果，自定义。

TaotaoResult，参见参考资料。

## 1.2 Dao层 ##

### 1.2.1 数据库 ###

商品表、商品描述表。

分开的目的是为了提高查询效率。

### 1.1.1 Mapper文件 ###

逆向工程生成的mapper可以使用。

## 1.1 Service层 ##

功能分析：接收controller传递过来的对象一个是item一个是itemDesc对象。需要生成商品的id。把不为空的字段都补全。分别向两个表中插入数据。

参数：TbItem，TbItemDesc

返回值：TaotaoResult

<table style="border-spacing:0px;width:852px;"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">@Overridepublic&nbsp;TaotaoResult&nbsp;addItem(TbItem&nbsp;item, TbItemDesc&nbsp;itemDesc) { try&nbsp;{ //生成商品id//可以使用redis的自增长key，在没有redis之前使用时间+随机数策略生成Long&nbsp;itemId&nbsp;= IDUtils.genItemId();//补全不完整的字段item.setId(itemId);item.setStatus((byte) 1);Date&nbsp;date&nbsp;=&nbsp;new&nbsp;Date();item.setCreated(date);item.setUpdated(date);//把数据插入到商品表itemMapper.insert(item);//添加商品描述itemDesc.setItemId(itemId);itemDesc.setCreated(date);itemDesc.setUpdated(date);//把数据插入到商品描述表itemDescMapper.insert(itemDesc);}&nbsp;catch&nbsp;(Exception&nbsp;e) { e.printStackTrace();return&nbsp;TaotaoResult.build(500, ExceptionUtil.getStackTrace(e));}return&nbsp;TaotaoResult.ok();}</td> 
 </tr> 
 </tbody> 
</table>

## 1.2 Controller ##

功能分析：接收页面传递过来的数据包括商品和商品描述。

参数：TbItem、TbItemDesc。

返回值：TaotaoResult

<table style="border-spacing:0px;width:852px;"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;">@RequestMapping("/save")@ResponseBodypublic&nbsp;TaotaoResult&nbsp;addItem(TbItem&nbsp;item, String&nbsp;desc) { TbItemDesc&nbsp;itemDesc&nbsp;=&nbsp;new&nbsp;TbItemDesc();itemDesc.setItemDesc(desc);TaotaoResult&nbsp;result&nbsp;=&nbsp;itemService.addItem(item,&nbsp;itemDesc);return&nbsp;result;}</td> 
 </tr> 
 </tbody> 
</table>

[Center]: /images/20220522/3ecafc740d3341a6965073e760e89e01.png
[Center 1]: /images/20220522/592048754c4a435680a958989b292dbc.png
[http_kindeditor.net_docs_upload.html]: http://kindeditor.net/docs/upload.html