admin管理员组文章数量:1643280
作者:田超凡
原创博文,严禁复制转载,仿冒必究
1 项目计划
第二天:
- 商品类目选择
- 图片上传
- 图片服务器FastDFS
- 图片上传功能实现
- 富文本编辑器的使用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.multipartmons.CommonsMultipartResolver"> <!-- 设定默认编码 --> <property name="defaultEncoding" value="UTF-8"></property> <!-- 设定文件上传的最大值5MB,5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </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/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 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729356820a1198333.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论