淘淘商城第三天笔记

第三天笔记

1 课程计划

后台管理商品的添加功能

1、商品分类选择

2、上传图片

3、富文本编辑器（kindEditor）

4、实现商品的添加

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

2 商品添加功能说明

clip_image002

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.2 Mapper

3.2.1 数据中的表：

clip_image004

3.2.2 Sql语句

SELECT * FROM `tb_item_cat` where parent_id=父节点id;

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

3.3 Service层

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

参数：parentId

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

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

List<TreeNode>

3.3.1 创建一个tree node的pojo：

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

  1 public class TreeNode {
  2 
  3 private long id;
  4 
  5 private String text;
  6 
  7 private String state;
  8 
  9 public TreeNode(long id, String text, String state) {
 10 
 11 this.id = id;
 12 
 13 this.text = text;
 14 
 15 this.state = state;
 16 
 17 }
 18 
 19 public long getId() {
 20 
 21 return id;
 22 
 23 }
 24 
 25 public void setId(long id) {
 26 
 27 this.id = id;
 28 
 29 }
 30 
 31 public String getText() {
 32 
 33 return text;
 34 
 35 }
 36 
 37 public void setText(String text) {
 38 
 39 this.text = text;
 40 
 41 }
 42 
 43 public String getState() {
 44 
 45 return state;
 46 
 47 }
 48 
 49 public void setState(String state) {
 50 
 51 this.state = state;
 52 
 53 }
 54 
 55 }
 56
3.3.2 代码实现
  1 @Service
  2 
  3 public class ItemCatServiceImpl implements ItemCatService {
  4 
  5 @Autowired
  6 
  7 private TbItemCatMapper itemCatMapper;
  8 
  9 @Override
 10 
 11 public List<TreeNode> getItemCatList(long parentId) {
 12 
 13 //根据parentId查询分类列表
 14 
 15 TbItemCatExample example = new TbItemCatExample();
 16 
 17 //设置查询条件
 18 
 19 Criteria criteria = example.createCriteria();
 20 
 21 criteria.andParentIdEqualTo(parentId);
 22 
 23 //执行查询
 24 
 25 List<TbItemCat> list = itemCatMapper.selectByExample(example);
 26 
 27 //分类列表转换成TreeNode的列表
 28 
 29 List<TreeNode> resultList = new ArrayList<>();
 30 
 31 for (TbItemCat tbItemCat : list) {
 32 
 33 //创建一个TreeNode对象
 34 
 35 TreeNode node = new TreeNode(tbItemCat.getId(), tbItemCat.getName(),
 36 
 37 tbItemCat.getIsParent()?"closed":"open");
 38 
 39 resultList.add(node);
 40 
 41 }
 42 
 43 return resultList;
 44 
 45 }
 46 
 47 }
 48

3.4 表现层

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

参数：Long id

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

  1 /**
  2 
  3 * 商品分类管理
  4 
  5 * <p>Title: ItemCatController</p>
  6 
  7 * <p>Description: </p>
  8 
  9 * <p>Company: www.itcast.com</p>
 10 
 11 * @author 入云龙
 12 
 13 * @date 2015年8月15日上午9:49:18
 14 
 15 * @version 1.0
 16 
 17 */
 18 
 19 @Controller
 20 
 21 @RequestMapping("/item/cat")
 22 
 23 public class ItemCatController {
 24 
 25 @Autowired
 26 
 27 private ItemCatService itemCatService;
 28 
 29 @RequestMapping("/list")
 30 
 31 @ResponseBody
 32 
 33 public List<TreeNode> getItemCatList(@RequestParam(value="id", defaultValue="0")Long parentId) {
 34 
 35 List<TreeNode> list = itemCatService.getItemCatList(parentId);
 36 
 37 return list;
 38 
 39 }
 40 
 41 }
 42

4 图片上传

image

如果把图片放到工程中，在集群环境下，会出现找不到图片的情况。

4.2 集群环境下的上传图片

image


图片服务器两个服务：

http：可以使用nginx做静态资源服务器。也可以使用apache。推荐使用nginx，效率更高。

Nginx：

1、http服务

2、反向代理

3、负载均衡

ftp服务：

使用linux做服务器，在linux中有个ftp组件vsftpd。

4.3 图片服务器

4.3.1 搭建
<具体搭建步骤请参考以下文章《centos7 nginx图片 服务器可以访问ftp用户上传的图片资源的配置》、《CentOS7 搭建FTP服务器》和 《centos7_ linux : Nginx安装手册》《CentOS7 搭建FTP服务器》、《处理ftp服务器 在重启后ftp客户端不能连接访问的问题》>

要求安装vmware虚拟机。

Linux：CentOS6.4（32）

Nginx：1.8.0

Vsftpd:需要在线安装。

4.3.1.1 Linux关闭图像界面：

[root@bogon ~]# vim /etc/inittab

clip_image010

手动启动图像界面：

#startx

4.3.1.2 Nginx安装

1、nginx安装环境（详见nginx安装手册）

2、把nginx安装包上传到服务器。

3、解压缩

[root@bogon ~]# tar -zxf nginx-1.8.0.tar.gz

4、配置makefile

  1 ./configure 
  2 
  3 --prefix=/usr/local/nginx 
  4 
  5 --pid-path=/var/run/nginx/nginx.pid 
  6 
  7 --lock-path=/var/lock/nginx.lock 
  8 
  9 --error-log-path=/var/log/nginx/error.log 
 10 
 11 --http-log-path=/var/log/nginx/access.log 
 12 
 13 --with-http_gzip_static_module 
 14 
 15 --http-client-body-temp-path=/var/temp/nginx/client 
 16 
 17 --http-proxy-temp-path=/var/temp/nginx/proxy 
 18 
 19 --http-fastcgi-temp-path=/var/temp/nginx/fastcgi 
 20 
 21 --http-uwsgi-temp-path=/var/temp/nginx/uwsgi 
 22 
 23 --http-scgi-temp-path=/var/temp/nginx/scgi
 24

注意：上边将临时文件目录指定为/var/temp/nginx，需要在/var下创建temp及nginx目录

  1 [root@bogon nginx-1.8.0]# mkdir /var/temp/nginx -p

5、编译安装

make

make install

clip_image012

6、启动nginx

clip_image014

7、关闭

  1 [root@bogon sbin]# ./nginx -s stop

8、重新加载配置文件

  1 [root@bogon sbin]# ./nginx -s reload

9、关闭防火墙

1）关闭

  1 [root@bogon sbin]# service iptables stop
  2 
  3 iptables: Flushing firewall rules: [ OK ]
  4 
  5 iptables: Setting chains to policy ACCEPT: filter [ OK ]
  6 
  7 iptables: Unloading modules: [ OK ]
  8

2）也可以修改防火墙配置文件：

  1 [root@bogon sbin]# vim /etc/sysconfig/iptables

修改后需要重启防火墙：

  1 [root@bogon sbin]# service iptables restart

10、访问nginx服务

clip_image016

4.3.2 图片服务器的配置

<具体搭建步骤请参考以下文章《centos7 nginx图片 服务器可以访问ftp用户上传的图片资源的配置》、《CentOS7 搭建FTP服务器》和 《centos7_ linux : Nginx安装手册》《CentOS7 搭建FTP服务器》、《处理ftp服务器 在重启后ftp客户端不能连接访问的问题》>

4.3.2.1 测试ftp：

1、使用ftp客户端测试。

clip_image018

2、使用java代码访问ftp服务器

使用apache的FTPClient工具访问ftp服务器。需要在pom文件中添加依赖：

  1 <dependency>
  2 
  3 <groupId>commons-net</groupId>
  4 
  5 <artifactId>commons-net</artifactId>
  6 
  7 <version>${commons-net.version}</version>
  8 
  9 </dependency>
 10 
  1 public class FTPClientTest {
  2 
  3 @Test
  4 
  5 public void testFtp() throws Exception {
  6 
  7 //1、连接ftp服务器
  8 
  9 FTPClient ftpClient = new FTPClient();
 10 
 11 ftpClient.connect("192.168.25.133", 21);
 12 
 13 //2、登录ftp服务器
 14 
 15 ftpClient.login("ftpuser", "ftpuser");
 16 
 17 //3、读取本地文件
 18 
 19 FileInputStream inputStream = new FileInputStream(new File("D:\Documents\Pictures\images\2010062119283578.jpg"));
 20 
 21 //4、上传文件
 22 
 23 //1）指定上传目录
 24 
 25 ftpClient.changeWorkingDirectory("/home/ftpuser/www/images");
 26 
 27 //2）指定文件类型
 28 
 29 ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);
 30 
 31 //第一个参数：文件在远程服务器的名称
 32 
 33 //第二个参数：文件流
 34 
 35 ftpClient.storeFile("hello.jpg", inputStream);
 36 
 37 //5、退出登录
 38 
 39 ftpClient.logout();
 40 
 41 }
 42 
 43 }
 44
4.3.2.2 Nginx配置

clip_image019

需要把nginx的根目录指向ftp上传文件的目录。

clip_image021

需要nginx重新加载配置文件：

  1 [root@bogon sbin]# ./nginx -s reload

4.4 把ftp代码封装成工具类

把工具类放到taotao-common中。

clip_image023

4.5 图片上传实现

4.5.1 需求分析

Common.js

1、绑定事件

clip_image025

2、初始化参数

clip_image027

3、上传图片的url：

/pic/upload

4、上图片参数名称：

uploadFile

5、返回结果数据类型json

参考文档：

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

返回格式(JSON)

//成功时

{

"error" : 0,

"url" : "http://www.example.com/path/to/file.ext"

}

//失败时

{

"error" : 1,

"message" : "错误信息"

}

4.5.2 Service

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

参数：MultiPartFile uploadFile

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

4.5.2.1 PictureResult

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

  1 /**
  2 
  3 * 上传图片的返回结果
  4 
  5 * <p>Title: PictureResult</p>
  6 
  7 * <p>Description: </p>
  8 
  9 * <p>Company: www.itcast.com</p>
 10 
 11 * @author 入云龙
 12 
 13 * @date 2015年8月15日下午2:53:21
 14 
 15 * @version 1.0
 16 
 17 */
 18 
 19 public class PictureResult {
 20 
 21 private int error;
 22 
 23 private String url;
 24 
 25 private String message;
 26 
 27 private PictureResult(int error, String url, String message) {
 28 
 29 this.error = error;
 30 
 31 this.url = url;
 32 
 33 this.message = message;
 34 
 35 }
 36 
 37 //成功时调用的方法
 38 
 39 public static PictureResult ok(String url) {
 40 
 41 return new PictureResult(0, url, null);
 42 
 43 }
 44 
 45 //失败时调用的方法
 46 
 47 public static PictureResult error(String message) {
 48 
 49 return new PictureResult(1, null, message);
 50 
 51 }
 52 
 53 public int getError() {
 54 
 55 return error;
 56 
 57 }
 58 
 59 public void setError(int error) {
 60 
 61 this.error = error;
 62 
 63 }
 64 
 65 public String getUrl() {
 66 
 67 return url;
 68 
 69 }
 70 
 71 public void setUrl(String url) {
 72 
 73 this.url = url;
 74 
 75 }
 76 
 77 public String getMessage() {
 78 
 79 return message;
 80 
 81 }
 82 
 83 public void setMessage(String message) {
 84 
 85 this.message = message;
 86 
 87 }
 88 
 89 }
 90
4.5.2.2 Service实现
  1 /**
  2 
  3 * 上传图片处理服务实现类
  4 
  5 * <p>Title: PictureService</p>
  6 
  7 * <p>Description: </p>
  8 
  9 * <p>Company: www.itcast.com</p>
 10 
 11 * @author 入云龙
 12 
 13 * @date 2015年8月15日下午2:59:38
 14 
 15 * @version 1.0
 16 
 17 */
 18 
 19 @Service
 20 
 21 public class PictureServiceImpl implements PictureService {
 22 
 23 @Value("${FTP_ADDRESS}")
 24 
 25 private String FTP_ADDRESS;
 26 
 27 @Value("${FTP_PORT}")
 28 
 29 private Integer FTP_PORT;
 30 
 31 @Value("${FTP_USER_NAME}")
 32 
 33 private String FTP_USER_NAME;
 34 
 35 @Value("${FTP_PASSWORD}")
 36 
 37 private String FTP_PASSWORD;
 38 
 39 @Value("${FTP_BASE_PATH}")
 40 
 41 private String FTP_BASE_PATH;
 42 
 43 @Value("${IMAGE_BASE_URL}")
 44 
 45 private String IMAGE_BASE_URL;
 46 
 47 @Override
 48 
 49 public PictureResult uploadPicture(MultipartFile uploadFile) {
 50 
 51 //判断上传图片是否为空
 52 
 53 if (null == uploadFile || uploadFile.isEmpty()) {
 54 
 55 return PictureResult.error("上传图片为空");
 56 
 57 }
 58 
 59 //取文件扩展名
 60 
 61 String originalFilename = uploadFile.getOriginalFilename();
 62 
 63 String ext = originalFilename.substring(originalFilename.lastIndexOf("."));
 64 
 65 //生成新文件名
 66 
 67 //可以使用uuid生成新文件名。
 68 
 69 //UUID.randomUUID()
 70 
 71 //可以是时间+随机数生成文件名
 72 
 73 String imageName = IDUtils.genImageName();
 74 
 75 //把图片上传到ftp服务器（图片服务器）
 76 
 77 //需要把ftp的参数配置到配置文件中
 78 
 79 //文件在服务器的存放路径，应该使用日期分隔的目录结构
 80 
 81 DateTime dateTime = new DateTime();
 82 
 83 String filePath = dateTime.toString("/yyyy/MM/dd");
 84 
 85 try {
 86 
 87 FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USER_NAME, FTP_PASSWORD,
 88 
 89 FTP_BASE_PATH, filePath, imageName + ext, uploadFile.getInputStream());
 90 
 91 } catch (Exception e) {
 92 
 93 e.printStackTrace();
 94 
 95 return PictureResult.error(ExceptionUtil.getStackTrace(e));
 96 
 97 }
 98 
 99 //返回结果，生成一个可以访问到图片的url返回
100 
101 return PictureResult.ok(IMAGE_BASE_URL + filePath + "/" + imageName + ext);
102 
103 }
104 
105 }
106
4.5.3 Controller

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

参数：MultiPartFile uploadFile

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

  1 @Controller
  2 
  3 public class PictureController {
  4 
  5 @Autowired
  6 
  7 private PictureService pictureService;
  8 
  9 @RequestMapping("/pic/upload")
 10 
 11 @ResponseBody
 12 
 13 public PictureResult upload(MultipartFile uploadFile) {
 14 
 15 PictureResult result = pictureService.uploadPicture(uploadFile);
 16 
 17 return result;
 18 
 19 }
 20 
 21 }
 22
4.5.4 Springmvc.xml
  1 <!-- 定义文件上传解析器 -->
  2 
  3 <bean id="multipartResolver"
  4 
  5 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  6 
  7 <!-- 设定默认编码 -->
  8 
  9 <property name="defaultEncoding" value="UTF-8"></property>
 10 
 11 <!-- 设定文件上传的最大值5MB，5*1024*1024 -->
 12 
 13 <property name="maxUploadSize" value="5242880"></property>
 14 
 15 </bean>
 16

5 富文本编辑器

5.1 使用方法

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

clip_image029

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

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

clip_image033

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

clip_image035

6 商品添加功能实现

6.1 功能分析

1、请求的url

/item/save

2、返回结果，自定义。

TaotaoResult，参见参考资料。

6.2 Dao层

6.2.1 数据库

clip_image036

商品表、商品描述表。

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

6.2.2 Mapper文件

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

6.3 Service层

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

参数：TbItem，TbItemDesc

返回值：TaotaoResult

  1 @Override
  2 
  3 public TaotaoResult addItem(TbItem item, TbItemDesc itemDesc) {
  4 
  5 try {
  6 
  7 //生成商品id
  8 
  9 //可以使用redis的自增长key，在没有redis之前使用时间+随机数策略生成
 10 
 11 Long itemId = IDUtils.genItemId();
 12 
 13 //补全不完整的字段
 14 
 15 item.setId(itemId);
 16 
 17 item.setStatus((byte) 1);
 18 
 19 Date date = new Date();
 20 
 21 item.setCreated(date);
 22 
 23 item.setUpdated(date);
 24 
 25 //把数据插入到商品表
 26 
 27 itemMapper.insert(item);
 28 
 29 //添加商品描述
 30 
 31 itemDesc.setItemId(itemId);
 32 
 33 itemDesc.setCreated(date);
 34 
 35 itemDesc.setUpdated(date);
 36 
 37 //把数据插入到商品描述表
 38 
 39 itemDescMapper.insert(itemDesc);
 40 
 41 } catch (Exception e) {
 42 
 43 e.printStackTrace();
 44 
 45 return TaotaoResult.build(500, ExceptionUtil.getStackTrace(e));
 46 
 47 }
 48 
 49 return TaotaoResult.ok();
 50 
 51 }
 52

6.4 Controller

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

参数：TbItem、TbItemDesc。

返回值：TaotaoResult

  1 @RequestMapping("/save")
  2 
  3 @ResponseBody
  4 
  5 public TaotaoResult addItem(TbItem item, String desc) {
  6 
  7 TbItemDesc itemDesc = new TbItemDesc();
  8 
  9 itemDesc.setItemDesc(desc);
 10 
 11 TaotaoResult result = itemService.addItem(item, itemDesc);
 12 
 13 return result;
 14 
 15 }
 16
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ios9/p/7466854.html