作者：田超凡

原创博文，严禁复制转载，仿冒必究

1 项目计划

第二天：

商品类目选择
图片上传
1. 图片服务器FastDFS
2. 图片上传功能实现
富文本编辑器的使用KindEditor
商品添加功能完成

2 商品类目选择

2.1 原型

2.2 功能分析

展示商品分类列表，使用EasyUI的tree控件展示。

初始化tree请求的url：/item/cat/list

参数：

初始化tree时只需要把第一级节点展示，子节点异步加载。

long id（父节点id）

返回值：json。数据格式

[{

"id": 1,

"text": "Node 1",

"state": "closed"

},{

"id": 2,

"text": "Node 2",

"state": "closed"

}]
state：如果节点下有子节点“closed”，如果没有子节点“open”

创建一个pojo来描述tree的节点信息，包含三个属性id、text、state。放到qingniao-common工程中。

public class EasyUITreeNode implements Serializable{

private long id;

private String text;

private String state;

public long getId() {

return id;

}

public void setId(long id) {

this.id = id;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public String getState() {

return state;

}

public void setState(String state) {

this.state = state;

}

查询的表：

tb_item_cat

查询列：

Id、name、isparent

查询条件parentId

2.3 Dao层实现

tb_item_cat

可以使用逆向工程生成的代码

2.4 Service层实现

参数：long parentId

业务逻辑：

根据parentId查询节点列表
转换成EasyUITreeNode列表。
返回。

返回值：List<EasyUITreeNode>

@Service

public class ItemCatServiceImpl implements ItemCatService {

@Autowired

private TbItemCatMapper itemCatMapper;

@Override

public List<EasyUITreeNode> getCatList(long parentId) {

// 1、根据parentId查询节点列表

TbItemCatExample example = new TbItemCatExample();

//设置查询条件

Criteria criteria = example.createCriteria();

criteria.andParentIdEqualTo(parentId);

List<TbItemCat> list = itemCatMapper.selectByExample(example);

// 2、转换成EasyUITreeNode列表。

List<EasyUITreeNode> resultList = new ArrayList<>();

for (TbItemCat tbItemCat : list) {

EasyUITreeNode node = new EasyUITreeNode();

node.setId(tbItemCat.getId());

node.setText(tbItemCat.getName());

node.setState(tbItemCat.getIsParent()?"closed":"open");

//添加到列表

resultList.add(node);

}

// 3、返回。

return resultList;

}

2.4.1 发布服务

2.5.1 引用服务

2.5.2 Controller实现

初始化tree请求的url：/item/cat/list

参数：

long id（父节点id）

返回值：json。数据格式

List<EasyUITreeNode>

@Controller

public class ItemCatController {

@Autowired

private ItemCatService itemCatService;

@RequestMapping("/item/cat/list")

@ResponseBody

public List<EasyUITreeNode> getItemCatList(@RequestParam(value="id", defaultValue="0")Long parentId) {

List<EasyUITreeNode> list = itemCatService.getCatList(parentId);

return list;

}

3 图片上传分析

传统方式：

集群环境：

解决方案：

搭建一个图片服务器，专门保存图片。可以使用分布式文件系统FastDFS。

4 图片服务器的安装

存储空间可扩展。
提供一个统一的访问方式。

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

4.1 什么是FastDFS？

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

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

4.3 文件上传的流程

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

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

4.4 文件下载

4.5 最简单的FastDFS架构

5 图片服务器安装方法

5.1 安装步骤

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

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

第三步：Vmware的网络配置。

第四步：开机

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

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

Ip地址：192.168.128.130

用户名root密码：qingniao

6 图片服务器使用

6.1 Java客户端

Maven环境：

6.2 上传图片

6.2.1 上传步骤

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

配置文件内容：tracker_server=192.168.128.130:22122

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

6.2.2 代码

public class FastDFSTest {

@Test

public void testFileUpload() throws Exception {

// 1、加载配置文件，配置文件中的内容就是tracker服务的地址。

ClientGlobal.init("D:/workspaces-itcast/term197/taotao-manager-web/src/main/resources/resource/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:/Documents/Pictures/images/200811281555127886.jpg", "jpg", null);

// 7、返回数组。包含组名和图片的路径。

for (String string : strings) {

System.out.println(string);

}

6.3 使用工具类上传

@Test

public void testUploadFile1() throws Exception {

FastDFSClient fastDFSClient = new FastDFSClient("D:/qingniao/client.conf");

String file = fastDFSClient.uploadFile("D:/qingniao/wmh.png");

System.out.println(file);

}

7 图片上传功能

7.1 功能分析

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

KindEditor 4.x 文档

文档 - KindEditor - 在线HTML编辑器

请求的url：/pic/upload

参数：MultiPartFile uploadFile

返回值：

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

业务逻辑：

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

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

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

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

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

1. 需要把commons-io、fileupload 的jar包添加到工程中。

2. 配置多媒体解析器。

<bean id="multipartResolver"

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

</bean>

7.2 Controller代码实现

@Controller

public class PictureController {

@Value("${IMAGE_SERVER_URL}")

private String IMAGE_SERVER_URL;

@RequestMapping("/pic/upload")

@ResponseBody

public Map fileUpload(MultipartFile uploadFile) {

try {

//1、取文件的扩展名

String originalFilename = uploadFile.getOriginalFilename();

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

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

FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");

//3、执行上传处理

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

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

String url = IMAGE_SERVER_URL + path;

//5、返回map

Map result = new HashMap<>();

result.put("error", 0);

result.put("url", url);

return result;

} catch (Exception e) {

e.printStackTrace();

//5、返回map

Map result = new HashMap<>();

result.put("error", 1);

result.put("message", "图片上传失败");

return result;

}

7.3 解决浏览器兼容性的问题

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

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

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

返回字符串时：

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

指定响应结果的content-type：

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

8.1 富文本编辑器介绍

KindEditor

在线HTML编辑器

UEditor：百度编辑器

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

CKEditor

WYSIWYG HTML Editor with Collaborative Rich Text Editing

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

8.2 使用方法

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

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

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

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

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

9 商品添加功能实现

9.1 功能分析

请求的url：/item/save

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

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

TbItem item,String desc

返回值：

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

可以使用QingNiaoResult，放到qingniao-common中。

业务逻辑：

生成商品id

实现方案：

Uuid，字符串，不推荐使用。
数值类型，不重复。日期+时间+随机数20160402151333123123
可以直接去毫秒值+随机数。可以使用。
使用redis。Incr。推荐使用。

使用IDUtils生成商品id

补全TbItem对象的属性
向商品表插入数据
创建一个TbItemDesc对象
补全TbItemDesc的属性
向商品描述表插入数据
QingNiaoResult.ok()

9.2 Dao层代码实现

向tb_item, tb_item_desc表中插入数据

可以使用逆向工程

9.3 Service层代码实现

参数：TbItem item,String desc

业务逻辑：略，参加上面

返回值：QingniaoResult

@Override

public QingNiaoResult addItem(TbItem item, String desc) {

// TODO Auto-generated method stub

//1.生成商品ID

long itemId = IDUtils.genItemId();

//2.赋值

item.setId(itemId);

item.setStatus((byte)1);

Date date = new Date();

item.setCreated(date);

item.setUpdated(date);

//3.插入数据

itemMapper.insert(item);

//4.插入商品描述数据

TbItemDesc itemDesc = new TbItemDesc();

itemDesc.setItemId(itemId);

itemDesc.setItemDesc(desc);

itemDesc.setCreated(date);

itemDesc.setUpdated(date);

itemDescMapper.insert(itemDesc);

return QingNiaoResult.ok();

}

9.3.1 发布服务

9.4 表现层代码实现

9.4.1 引用服务

9.4.2 Controller代码实现

请求的url：/item/save

参数：TbItem item,String desc

返回值：QingNiaoResult

@RequestMapping("/item/save")

@ResponseBody

public QingNiaoResult addItem(TbItem item,String desc){

QingNiaoResult result = itemService.addItem(item, desc);

return result;

}

9.5 完善商品基本信息CRUD功能开发

完善商品修改、商品删除、上架下架功能。

原创博文，严禁复制转载，仿冒必究

Java高级开发0-1项目实战-青鸟商城-Day02相关推荐

Java高级开发0-1项目实战-青鸟商城-Day03
作者:田超凡原创博文,严禁复制转载,仿冒必究项目计划第三天: 前台系统搭建商城首页展示 Cms系统的实现内容分类管理内容管理前台内容动态展示 1. 商城首页展示系统架构: 页面位置: ...
Java高级-云课堂后端项目实战网易云课堂
Java高级-云课堂后端项目实战网易云课堂课程概述 <Java高级开发工程师>课程包含六大专题,分别是高性能编程专题.中间件专题.容器化技术专题.分布式系统开发技术.后端项目实战及网易 ...
Java高级开发0-1项目实战-青鸟商城-Day01
作者:田超凡原创博文,严禁复制转载,仿冒必究 1 项目计划第一天: 电商行业的背 ...
Java高级开发0-1项目实战-青鸟商城-Day04
作者:田超凡原创博文,严禁复制转载,仿冒必究 1 项目计划第四天: Redis服务器搭建向业务逻辑中添加缓存. 使用redis做缓存缓存同步. Solr服务器安装 2 首页大广告的展示流程首 ...
Java高级开发0-1项目实战-青鸟商城-Day05
作者:田超凡原创博文,严禁复制转载,仿冒必究项目计划搭建solr服务器 Solrj使用测试把数据库中的数据导入索引库搜索功能的实现注意: 1. 解压缩solr安装包解压缩tomcat压缩 ...
Java高级开发0-1项目实战-青鸟商城-Day06
作者:田超凡原创博文,严禁复制转载,仿冒必究 1 项目计划第六天: nginx的安装 Nginx配置虚拟机 Nginx实现反向代理 Nginx实现负载均衡 Sso系统工程搭建 2 什么是nginx ...
【赠书活动】赠送清华社的《好好学Java:从零基础到项目实战》
零基础学习Java的朋友有福利啦,本博客现联合公众号"老欧说安卓"开展送书活动,下面就是本次活动要赠送的书籍封面书籍信息: 作者:欧阳燊出版时间:2020年7月定价:128元 ...
视频教程-用Java从零开始开发一个物联网项目-物联网技术
用Java从零开始开发一个物联网项目多年的产品设计和开发经验,带领团队完成多个知名产品.历任多家大型公司的Java架构师,对知名框架的源码均有深入研究.拥有IT一线开发.教学10多年的实战经验,能充 ...
网易云课堂微专业--Java高级开发工程师
获取方式:公众号:文若课堂 5.微专业-java | |──大纲.jpg 910.32KB | |──阶段1:高性能编程专题 | | |──1.1.1 J ...

Java高级开发0-1项目实战-青鸟商城-Day02

1 项目计划

2 商品类目选择

2.1 原型

2.2 功能分析

2.3 Dao层实现

2.4 Service层实现

2.4.1 发布服务

2.5.1 引用服务

2.5.2 Controller实现

3 图片上传分析

4 图片服务器的安装

4.1 什么是FastDFS？

4.2 FastDFS架构

4.3 文件上传的流程

4.4 文件下载

4.5 最简单的FastDFS架构

5 图片服务器安装方法

5.1 安装步骤

6 图片服务器使用

6.1 Java客户端

6.2 上传图片

6.2.1 上传步骤

6.2.2 代码

6.3 使用工具类上传

7 图片上传功能

7.1 功能分析

7.2 Controller代码实现

7.3 解决浏览器兼容性的问题

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

8.1 富文本编辑器介绍

8.2 使用方法

9 商品添加功能实现

9.1 功能分析

9.2 Dao层代码实现

9.3 Service层代码实现

9.3.1 发布服务

9.4 表现层代码实现

9.4.1 引用服务

9.4.2 Controller代码实现

9.5 完善商品基本信息CRUD功能开发

Java高级开发0-1项目实战-青鸟商城-Day02相关推荐

最新文章

热门文章