easyui获取图片路径_094 ego电商项目-2 菜单、图片上传、CRUD

最新推荐文章于 2021-09-12 17:44:03 发布

邹晓航0号

最新推荐文章于 2021-09-12 17:44:03 发布

阅读量119

点赞数

文章标签： easyui获取图片路径

本文链接：https://blog.csdn.net/weixin_30674431/article/details/112281632

版权

1. 编写代码_商品类目查询

(1) 描述怎么设计一个树型的表结构

在后台管理页面，用户点击商品管理下的新增商品，会打开新增商品的选项卡页面，点击选择类目，会弹出选择类目面板，在该面板上有一个异步树，用于显示商品类目分类信息，包括一级类目，二级类目，三级类目。

在数据库菜单列表添加parentId一列来设置父级菜单的id，一级菜单的id是0.二级是1，以此类推。

(2) 描述easyui加载一个异步树的过程和相关参数

当点击页面时，会把点击的菜单的id发送给controller，controller接收id参数然后去数据库查询parentId为此id的所有子节点，封装为TreeNode的list集合，然后通过@ResponseBody注解返回list的JSON格式字符串。

2. FTP服务器的搭建

(1) 什么是ftp？

文件传输协议（File Transfer Protocol，FTP）是用于在网络上进行文件传输的一套标准协议，它工作在 OSI 模型的第七层， TCP 模型的第四层，即应用层，使用 TCP 传输而不是 UDP，客户在和服务器建立连接前要经过一个“三次握手”的过程，保证客户与服务器之间的连接是可靠的，而且是面向连接，为数据传输提供可靠保证。

(2) 怎么安装vsftpd服务

Linux 中安装 vsftpd：

1-执行安装命令：yum install vsftpd -y

2-添加 ftp 用户

3- 分配 ftp 密码

4-禁止 ftp 用户 ssh 登陆

5- 开启防火墙 21 端口

6-查看 ftp 状态

7-修改 ftp 状态

8-关闭 ftp 匿名访问

9- 设置 vsftpd 服务开机启动

10-测试 ftp 链接

11-配置 vsftpd 的被动模式

默认是开启的，需要配置端口好的范围。

在防火墙打开响应范围的端口。

3. Http服务器搭建

(1) 传统文件上传将文件保存到哪里?有什么问题？

保存到tomcat服务器中。

没法满足在 tomcat 服务器集群状态下，图片的保存问题，会出现图片找不到的 404 问题。同时会占用服务器的内存资源，给服务器造成过大的压力。

(2) 描述分布式系统中解决文件上传的思路

ftp 服务：实现图片的上传，保存图片资源

客户端---(http 协议)---tomcat---(ftp 协议)---图片服务器

图片服务的实现，使用 linux 的 vsftpd 服务

http 服务：获取图片服务的图片资源

客户端---(http 协议)---图片服务器

Linux 中安装 nginx 服务，类似与 tomcat 的 http 容器

4. 编写代码_FtpClient_实现文件上传

(1) 简述Ftp实现文件上传的基本步骤

提交上传请求路径 url

提交图片参数名称

上传后返回值 json 模型：

参考 kindeditor 控件文件上传文档:

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

创建 PictureResult 封装返回值

package com.bjsxt.ego.beans;
/***
* 封装上传图片之后的返回结果
* **/
public class PictureResult {
private Integer error; //状态 1 失败 0 成功
private String url; //上传图片后，图片在服务器的 url
private String message;//响应到客户端的提示消息
public Integer getError() {
return error;
}
public void setError(Integer error) {
this.error = error;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}

ego-manager-web 功能实现

创建 ftp.properties

FTP_HOST=192.168.30.30
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_PATH=/home/ftpuser/jd
IMAGE_HTTP_PATH=http://image.taotao.com/jd

创建工具类 IDUtils

ManagerItemService 接口添加方法

/**
* 完成商品图片的上传
* **/
public PictureResult uploadItemPic(MultipartFile file);

ManagerItemServiceImpl 实现方法

//通过 spring 的 EL 表达式注入 ftp信息
@Value("${FTP_HOST}")
private String FTP_HOST;
@Value("${FTP_PORT}")
private Integer FTP_PORT;
@Value("${FTP_USERNAME}")
private String FTP_USERNAME;
@Value("${FTP_PASSWORD}")
private String FTP_PASSWORD;
@Value("${FTP_PATH}")
private String FTP_PATH;
@Value("${IMAGE_HTTP_PATH}")
private String IMAGE_HTTP_PATH;
@Override
public PictureResult uploadItemPic(MultipartFile file) {
 // TODO Auto-generated method stub
boolean flag=false;
String fileName=null;
try{
//获得信息的文件名字
fileName=IDUtils.genImageName();
//获得上传的文件的原始名字
String oriName = file.getOriginalFilename();
//获得文件扩展名
String ext=oriName.substring(oriName.lastIndexOf("."));
fileName=fileName+ext;
InputStream local = file.getInputStream();
//实现文件上传到 ftp
flag=FtpUtils.uploadFile(FTP_HOST, FTP_PORT, FTP_USERNAME,
FTP_PASSWORD,
FTP_PATH, fileName, local);
}catch(Exception ex){
ex.printStackTrace();
flag=false;
}
PictureResult result=null;
if(flag){
result=new PictureResult();
result.setError(0);
result.setUrl(IMAGE_HTTP_PATH+"/"+fileName);
result.setMessage("ok");
}else{
result=new PictureResult();
result.setError(1);
result.setUrl("url");
result.setMessage("error");
}
return result;
}

创建 ItemImageUploadController 类

package com.bjsxt.ego.manager.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.bjsxt.ego.beans.PictureResult;
import com.bjsxt.ego.manager.service.ManagerItemService;
@Controller
public class ItemImageController {
//注入service
@Autowired
private ManagerItemService managerItemService;
/**
* 处理图片上传请求
* ***/
@RequestMapping(value="pic/upload",produces=MediaType. APPLICATION_JSON_VAL
UE +";charset=UTF-8")
@ResponseBody
public PictureResult picUpload(MultipartFile uploadFile){
return managerItemService.uploadItemPic(uploadFile);
}
}

配置 springmvc.xml

发布测试

(1) Ftp实现文件上传需要使用到哪些方法？

FtpUtils工具类

public static boolean uploadFile(String hostname, int port, String username, String password, String pathname,
			String remote,InputStream local) {
		boolean flag = false;
		try {
			//创建FtpClient对象
			FTPClient ftpClient = new FTPClient();
			//建立和FTP服务器的连接
			ftpClient.connect(hostname, port);
			//登录ftp服务器
			ftpClient.login(username, password);
			//设置上传文件的类型
			ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
			//切换工作目录，文件上传后保存到哪个目录
			if (!ftpClient.changeWorkingDirectory(pathname)) {
				if (ftpClient.makeDirectory(pathname)) {
					ftpClient.changeWorkingDirectory(pathname);
				}
			}
			//实现文件上传
			ftpClient.storeFile(remote, local);
			System.out.println("上传成功");
			local.close();
			ftpClient.logout();
			ftpClient.disconnect();
			flag=true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return flag;
	}

5. 编写代码_实现商品新增

(1) 商品需要使用哪些表，之间关系是什么?

需要商品基本信息表tb_item和商品详细信息表tb_item_desc两张表。

详情表是基本表的补充说明。

(2) 商品基本信息表和商品描述表为什么分开设计？

因为商品描述一项信息量巨大，如果都设计在一张表中，用户每次查询商品信息时都要等较长时间才能得到相应的商品信息，影响用户体验。而且详情较于基本信息用户需求度没有那么高，所以可以将其分离出来。基本信息和详情分开单独查询显示缩短了查询时间，提高用户体验。

6. 编写代码_实现商品回显_商品修改

(1) 描述实现商品信息回显的思路

前端控件参数说明

主要实现商品信息的回显和商品描述信息的回显

创建 ItemDescService 接口添加方法

package com.bjsxt.ego.rpc.service;
import com.bjsxt.ego.rpc.pojo.TbItemDesc;
public interface ItemDescService {
/***
* 通过商品的 id，获得商品的描述信息
* @param itemId
* @return
*/
public TbItemDesc getItemDesc(Long itemId);
}

创建 ItemDescServiceImpl 实现类

package com.bjsxt.ego.rpc.service.impl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.bjsxt.ego.rpc.mapper.TbItemDescMapper;
import com.bjsxt.ego.rpc.pojo.TbItemDesc;
import com.bjsxt.ego.rpc.service.ItemDescService;
@Service
public class ItemDescServiceImpl implements ItemDescService {
//注入 mapper接口代理对象
@Autowired
private TbItemDescMapper tbItemDescMapper;
@Override
public TbItemDesc getItemDesc(Long itemId) {
// TODO Auto-generated method stub
return tbItemDescMapper.selectByPrimaryKey(itemId);
}
}

修改 applicationContxt-dubbo.xml

<dubbo:service interface="com.bjsxt.ego.rpc.service.ItemDescService"
ref="itemDescServiceImpl"></dubbo:service>

修改 applicationContext-duubo.xml

<dubbo:reference interface="com.bjsxt.ego.rpc.service.ItemDescService"
id="itemDescServiceProxy"></dubbo:reference>

创建 ManagerItemDescService 接口

package com.bjsxt.ego.manager.service;
import com.bjsxt.ego.beans.EgoResult;
public interface ManagerItemDescService {
/**
* 获得需要回显的商品描述
* **/
public EgoResult getItemDescService(Long itemId);
}

创建 ManagerItemDescServiceImpl 实现类

package com.bjsxt.ego.manager.service.impl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.bjsxt.ego.beans.EgoResult;
import com.bjsxt.ego.manager.service.ManagerItemDescService;
import com.bjsxt.ego.rpc.pojo.TbItemDesc;
import com.bjsxt.ego.rpc.service.ItemDescService;
@Service
public class ManagerItemDescServiceImpl implements ManagerItemDescService {
//注入远程服务的代理对象
@Autowired
private ItemDescService itemDescServiceProxy;
@Override
public EgoResult getItemDescService(Long itemId) {
// TODO Auto-generated method stub
//调用远程服务
TbItemDesc desc=itemDescServiceProxy.getItemDesc(itemId);
if(desc!=null)
return new EgoResult(desc);
return new EgoResult(null);
}
}

创建 ItemDescController

package com.bjsxt.ego.manager.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.bjsxt.ego.beans.EgoResult;
import com.bjsxt.ego.manager.service.ManagerItemDescService;
@Controller
public class ItemDescController {
//注入 service 对象
@Autowired
private ManagerItemDescService managerItemDescService;
/**
* 处理加载商品描述信息的请求
* **/
@RequestMapping(value="query/item/desc/{itemId}"
,produces=MediaType.APPLICATION_JSON_VALUE+";charset=UTF-8")
@ResponseBody
public EgoResult itemDesc(@PathVariable Long itemId){
return managerItemDescService.getItemDescService(itemId);
}
}

发布测试

(2) 商品详细信息回显需要kindeditor调用什么方法

//创建富文本编辑器

itemAddEditor = EGO.createEditor("#itemAddForm [name=desc]");

//同步文本框中的商品描述

itemAddEditor.sync();

邹晓航0号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui获取图片路径_094 ego电商项目-2 菜单、图片上传、CRUD

1. 编写代码_商品类目查询(1) 描述怎么设计一个树型的表结构在后台管理页面，用户点击商品管理下的新增商品，会打开新增商品的选项卡页面，点击选择类目，会弹出选择类目面板，在该面板上有一个异步树，用于显示商品类目分类信息，包括一级类目，二级类目，三级类目。在数据库菜单列表添加parentId一列来设置父级菜单的id，一级菜单的id是0.二级是1，以此类推。(2) 描述easyui加载一个异步树的过...
复制链接

扫一扫