day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记

本文主要是介绍day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

淘淘商城项目_03

    • 1、商品类目选择
      • 1.1、功能分析
        • 1.1.1、数据库表结构设计
        • 1.1.2、前端页面分析
      • 1.2、服务层工程开发
        • 1.2.1、Dao层
        • 1.2.2、Service层
        • 1.2.3、发布服务
      • 1.3、表现层功能开发
        • 1.3.1、引用服务
        • 1.3.2、Controller
    • 2、新增商品数据库分析
      • 2.1、商品表分析
      • 2.2、商品描述表分析
    • 3、图片上传分析
    • 4、图片服务器
      • 4.1、什么是FastDFS
      • 4.2、FastDFS架构
      • 4.3、文件上传的流程
      • 4.4、文件下载
      • 4.5、最简单的FastDFS架构
    • 5、图片服务器安装方法
    • 6、图片服务器使用
      • 6.1、FastDFS的Java客户端
      • 6.2、使用DastDFS的Java客户端上传图片
        • 6.2.1、上传步骤
        • 6.2.2、测试代码
      • 6.3、使用工具类上传图片
    • 7、实现图片上传功能
      • 7.1、功能分析
        • 7.1.1、前端页面实现
        • 7.1.2、请求分析
        • 7.1.3、加入文件上传的jar包
        • 7.1.4、配置(多媒体)文件上传解析器
      • 7.2、Controller开发
      • 7.3、解决火狐浏览器兼容性的问题
    • 8、富文本编辑器的使用方法
      • 8.1、富文本编辑器介绍
      • 8.2、使用方法
    • 9、新增商品功能实现
      • 9.1、功能分析
      • 9.2、服务层功能开发
        • 9.2.1、Dao层
        • 9.2.2、Service层
        • 9.2.3、发布服务
      • 9.3、表现层功能开发
        • 9.3.1、引用服务
        • 9.3.2、Controller
      • 9.4、作业

  • 课程计划
    • 第三天:
  • 1、商品类目选择
  • 2、图片上传
    • a) 图片服务器FastDFS
    • b) 图片上传功能实现
  • 3、富文本编辑器的使用KindEditor
  • 4、商品添加功能完成

1、商品类目选择

1.1、功能分析

1.1.1、数据库表结构设计


parent_id 表示节点的父节点。
上表的设计可以展示为树形结构展开类目。

1.1.2、前端页面分析

在taotao-manager-web项目中的jsp下的item-add.jsp中:

我们在该文件中使用 【Ctrl + F】 进行搜索,没有找到事件绑定的样式class(selectItemCat),那我们在Eclipse使用【文件搜索】功能,步骤:Search --> File…,如下:

我们找到了class绑定事件元素处理的js文件common.js,如下:

我们发现:在item-add.jsp中我们并没有引用common.js,但由于在首页index.jsp中我们已经引入了,所以item-add.jsp作为首页index.jsp一个片段,所以在item-add.jsp中我们同样可以使用common.js。
展示商品分类列表,使用EasyUI的tree控件展示。如下:

详解如下:

初始化tree请求的url:/item/cat/list
参数:id  父节点的id值。
初始化tree时只需要把第一级节点展示,子节点异步加载展示。返回值:json格式数据[{    "id": 1,    "text": "Node 1",    "state": "closed"
},{    "id": 2,    "text": "Node 2",    "state": "closed"   
}] 
state:如果节点下有子节点则state的值为"closed",如果节点下没有子节点则state的值为"open"。

所以我们需要创建一个pojo来描述tree的节点信息,包含三个属性id、text、state。
放到taotao-common工程中。由于是服务端响应回来的pojo数据,所以需要实现序列化接口。
EasyUITreeNode.java

package com.taotao.common.pojo;import java.io.Serializable;/*** 类目查询时的返回的数据类* @author	chenmingjun* @date	2018年11月12日下午5:01:23* @version 1.0*/
public class EasyUITreeNode implements Serializable {private static final long serialVersionUID = 1L;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;}@Overridepublic String toString() {return "EasyUITreeNode [id=" + id + ", text=" + text + ", state=" + state + "]";}
}

查询的表:
  tb_item_cat
查询的列:
  id、name、is_parent
查询条件:
  parentId

1.2、服务层工程开发

1.2.1、Dao层

  Dao层只需要查询商品分类表tb_item_cat即可,属于单表查询,单表查询我们没有必要自己写Mapper了,使用Mybatis逆向工程生成的Mapper即可。

1.2.2、Service层

参数:
  Long parentId
业务逻辑:
  1、根据parentId查询节点列表。
  2、转换成EasyUITreeNode列表。
  3、返回。
返回值:
  List<EasyUITreeNode>

先写接口,在taotao-manager-interface工程中:

package com.taotao.service;import java.util.List;import com.taotao.common.pojo.EasyUITreeNode;/*** 商品类目管理接口* @author	chenmingjun* @date	2018年11月12日下午8:15:24* @version 1.0*/
public interface ItemCatService {/*** 根据商品类目的父节点id,查询该节点的子类目列表* @param parentId* @return*/List<EasyUITreeNode> getItemCatList(Long parentId);
}

再写实现类,在taotao-manager-service工程中:

/*** 商品类目管理Service* @author	chenmingjun* @date	2018年11月12日下午8:15:58* @version 1.0*/
@Service
public class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate TbItemCatMapper itemCatMapper;@Overridepublic List<EasyUITreeNode> getItemCatList(Long parentId) {TbItemCatExample example = new TbItemCatExample();// 设置查询条件Criteria criteria = example.createCriteria();criteria.andParentIdEqualTo(parentId);List<TbItemCat> list = itemCatMapper.selectByExample(example);// 将list转换成EasyUITreeNode列表List<EasyUITreeNode> resultList = new ArrayList<>();for (TbItemCat tbItemCat : list) {EasyUITreeNode node = new EasyUITreeNode();node.setId(tbItemCat.getId());node.setText(tbItemCat.getName());// 如果节点下有子节点则state的值为"closed",如果节点下没有子节点则state的值为"open"node.setState(tbItemCat.getIsParent() ? "closed" : "open");// 将节点添加到list集合(列表)resultList.add(node);}return resultList;}
}
1.2.3、发布服务

在taotao-manager-service中的applicationContext-service.xml中发布服务:

1.3、表现层功能开发

1.3.1、引用服务

在taotao-manager-web中的springmvc.xml中引用服务:

这篇关于day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1100830

相关文章

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Apache Tomcat服务器版本号隐藏的几种方法

《ApacheTomcat服务器版本号隐藏的几种方法》本文主要介绍了ApacheTomcat服务器版本号隐藏的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1. 隐藏HTTP响应头中的Server信息编辑 server.XML 文件2. 修China编程改错误

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

javafx 如何将项目打包为 Windows 的可执行文件exe

《javafx如何将项目打包为Windows的可执行文件exe》文章介绍了三种将JavaFX项目打包为.exe文件的方法:方法1使用jpackage(适用于JDK14及以上版本),方法2使用La... 目录方法 1:使用 jpackage(适用于 JDK 14 及更高版本)方法 2:使用 Launch4j(

Docker集成CI/CD的项目实践

《Docker集成CI/CD的项目实践》本文主要介绍了Docker集成CI/CD的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、引言1.1 什么是 CI/CD?1.2 docker 在 CI/CD 中的作用二、Docke

如何在一台服务器上使用docker运行kafka集群

《如何在一台服务器上使用docker运行kafka集群》文章详细介绍了如何在一台服务器上使用Docker运行Kafka集群,包括拉取镜像、创建网络、启动Kafka容器、检查运行状态、编写启动和关闭脚本... 目录1.拉取镜像2.创建集群之间通信的网络3.将zookeeper加入到网络中4.启动kafka集群

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

Python如何实现 HTTP echo 服务器

《Python如何实现HTTPecho服务器》本文介绍了如何使用Python实现一个简单的HTTPecho服务器,该服务器支持GET和POST请求,并返回JSON格式的响应,GET请求返回请求路... 一个用来做测试的简单的 HTTP echo 服务器。from http.server import HT

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

Jenkins中自动化部署Spring Boot项目的全过程

《Jenkins中自动化部署SpringBoot项目的全过程》:本文主要介绍如何使用Jenkins从Git仓库拉取SpringBoot项目并进行自动化部署,通过配置Jenkins任务,实现项目的... 目录准备工作启动 Jenkins配置 Jenkins创建及配置任务源码管理构建触发器构建构建后操作构建任务