1、课程介绍
2、简单功能实现
3、图片上传功能实战
4、项目源码与资料下载
5、参考文章前端
一共14天课程
(1)第一天:电商行业的背景。淘淘商城的介绍。搭建项目工程。Svn的使用。
(2)次日:框架的整合。后台管理商品列表的实现。分页插件。
(3)第三天:后台管理。商品添加。商品类目的选择、图片上传、富文本编辑器的使用。
(4)第四天:商品规格的实现。
(5)第五天:商城前台系统的搭建。首页商品分类的展现。Jsonp。
(6)第六天:cms系统的实现。前台大广告位的展现。
(7)第七天:cms系统添加缓存。Redis。缓存同步。
(8)第八天:搜索功能的实现。使用solr实现搜索。
(9)第九天:商品详情页面的展现。
(10)第十天:单点登陆系统。Session共享。
(11)第十一天:购物车订单系统的实现。
(12)第十二天:nginx。反向代理工具。
(13)第十三天:redis集群的搭建、solr集群的搭建。系统的部署。
(14)项目总结。java
因为jsp在实际项目中已经比较少使用,如今更多的是先后端分离,因此文章重点关注于后端技术实现,该模块详细功能,请移步项目源码与资料下载内容中进行学习。linux
因为jsp在实际项目中已经比较少使用,如今更多的是先后端分离,因此文章重点关注于后端技术实现,该模块详细功能,请移步项目源码与资料下载内容中进行学习。nginx
传统项目中,能够在web项目中添加一个文件夹,来存放上传的图片。例如在工程的根目录WebRoot下建立一个images文件夹。把图片存放在此文件夹中就能够直接使用在工程中引用。
优势:引用方便,便于管理
缺点:
(1)若是是分布式环境图片引用会出现问题。
(2)图片的下载会给服务器增长额外的压力web
传统图片管理方式在分布式环境中的问题redis
分布式环境通常都有一个专门的图片服务器存放图片。
咱们使用虚拟机搭建一个专门的服务器来存放图片。在此服务器上安装一个nginx来提供http服务,安装一个ftp服务器来提供图片上传服务。spring
3.1 图片服务器相关服务
图片服务器两个服务:
http:可使用nginx作静态资源服务器。也可使用apache。推荐使用nginx,效率更高。
Nginx功能:
(1)http服务
(2)反向代理
(3)负载均衡数据库
ftp服务:
使用linux作服务器,在linux中有个ftp组件vsftpd。
ngnix服务器的安装过程包括配置资源、启动、中止、重启、开机自动启动等,FTP服务安装包括添加vsftpd组件、添加ftp用户、分配ftp用户密码、开启防火墙21端口、关闭匿名访问、开启被动模式等,具体教程请参考资料下载中的内容。apache
4.1 工具类编写
taotao-common项目中编写上传图片的返回结果的实体类PictureResult.javajson
public class PictureResult { private int error;//判断是否成功 0位成功,1为失败 private String url;//若是成功 该参数为图片的请求地址 失败则为null private String message;//若是失败,该参数是描述缘由,若是成功,则为null private PictureResult(int error, String url, String message) { this.error = error; this.url = url; this.message = message; } //成功时调用的方法 public static PictureResult ok(String url) { return new PictureResult(0, url, null); } //失败时调用的方法 public static PictureResult error(String message) { return new PictureResult(1, null, message); } public int getError() { return error; } public void setError(int 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; } }
taotao-common项目中编写ftp上传下载工具类FtpUtil.java
public class FtpUtil { /** * Description: 向FTP服务器上传文件 * @param host FTP服务器hostname * @param port FTP服务器端口 * @param username FTP登陆帐号 * @param password FTP登陆密码 * @param basePath FTP服务器基础目录 * @param filePath FTP服务器文件存放路径。例如分日期存放:/2015/01/01。文件的路径为basePath+filePath * @param filename 上传到FTP服务器上的文件名 * @param input 输入流 * @return 成功返回true,不然返回false */ public static boolean uploadFile(String host, int port, String username, String password, String basePath, String filePath, String filename, InputStream input) { boolean result = false; FTPClient ftp = new FTPClient(); try { int reply; ftp.connect(host, port);// 链接FTP服务器 // 若是采用默认端口,可使用ftp.connect(host)的方式直接链接FTP服务器 ftp.login(username, password);// 登陆 reply = ftp.getReplyCode(); if (!FTPReply.isPositiveCompletion(reply)) { ftp.disconnect(); return result; } //切换到上传目录 if (!ftp.changeWorkingDirectory(basePath+filePath)) { //若是目录不存在建立目录 String[] dirs = filePath.split("/"); String tempPath = basePath; for (String dir : dirs) { if (null == dir || "".equals(dir)) continue; tempPath += "/" + dir; if (!ftp.changeWorkingDirectory(tempPath)) { if (!ftp.makeDirectory(tempPath)) { return result; } else { ftp.changeWorkingDirectory(tempPath); } } } } //设置上传文件的类型为二进制类型 ftp.setFileType(FTP.BINARY_FILE_TYPE); //上传文件 if (!ftp.storeFile(filename, input)) { return result; } input.close(); ftp.logout(); result = true; } catch (IOException e) { e.printStackTrace(); } finally { if (ftp.isConnected()) { try { ftp.disconnect(); } catch (IOException ioe) { } } } return result; } /** * Description: 从FTP服务器下载文件 * @param host FTP服务器hostname * @param port FTP服务器端口 * @param username FTP登陆帐号 * @param password FTP登陆密码 * @param remotePath FTP服务器上的相对路径 * @param fileName 要下载的文件名 * @param localPath 下载后保存到本地的路径 * @return */ public static boolean downloadFile(String host, int port, String username, String password, String remotePath, String fileName, String localPath) { boolean result = false; FTPClient ftp = new FTPClient(); try { int reply; ftp.connect(host, port); // 若是采用默认端口,可使用ftp.connect(host)的方式直接链接FTP服务器 ftp.login(username, password);// 登陆 reply = ftp.getReplyCode(); if (!FTPReply.isPositiveCompletion(reply)) { ftp.disconnect(); return result; } ftp.changeWorkingDirectory(remotePath);// 转移到FTP服务器目录 FTPFile[] fs = ftp.listFiles(); for (FTPFile ff : fs) { if (ff.getName().equals(fileName)) { File localFile = new File(localPath + "/" + ff.getName()); OutputStream is = new FileOutputStream(localFile); ftp.retrieveFile(ff.getName(), is); is.close(); } } ftp.logout(); result = true; } catch (IOException e) { e.printStackTrace(); } finally { if (ftp.isConnected()) { try { ftp.disconnect(); } catch (IOException ioe) { } } } return result; } public static void main(String[] args) { try { FileInputStream in=new FileInputStream(new File("D:\\temp\\image\\gaigeming.jpg")); boolean flag = uploadFile("192.168.25.133", 21, "ftpuser", "ftpuser", "/home/ftpuser/www/images","/2015/01/21", "gaigeming.jpg", in); System.out.println(flag); } catch (FileNotFoundException e) { e.printStackTrace(); } } }
编写完成后的文件结构以下:
4.2 Service层编写
taotao-manager-web项目编写资源文件resource.properties,用于存放于FTP相关的变量
#FTP\u7684\u76f8\u5173\u914d\u7f6e FTP_ADDRESS=192.168.101.6 FTP_PORT=21 FTP_USER_NAME=haha FTP_PASSWORD=147258qq FTP_BASE_PATH=/home/ftpuser/www/images #\u56fe\u7247\u670d\u52a1\u5668\u7684url IMAGE_BASE_URL=http://192.168.101.6/images
taotao-manager-service项目中编写上传图片处理接口PictureService.java
/** * 上传图片处理 */ public interface PictureService { PictureResult uploadPicture(MultipartFile uploadFile); }
taotao-manager-service项目中编写上传图片处理实现类PictureServiceImpl.java
/** * 上传图片处理服务实现类 */ @Service public class PictureServiceImpl implements PictureService { //使用@Value注解时候,当配置文件中内容修改时候,映射过来的内容会自动更改的 @Value("${FTP_ADDRESS}") private String FTP_ADDRESS; @Value("${FTP_PORT}") private Integer FTP_PORT; @Value("${FTP_USER_NAME}") private String FTP_USER_NAME; @Value("${FTP_PASSWORD}") private String FTP_PASSWORD; @Value("${FTP_BASE_PATH}") private String FTP_BASE_PATH; @Value("${IMAGE_BASE_URL}") private String IMAGE_BASE_URL; @Override public PictureResult uploadPicture(MultipartFile uploadFile) { //判断上传图片是否为空 if (null == uploadFile || uploadFile.isEmpty()) { return PictureResult.error("上传图片为空"); } //取文件扩展名 String originalFilename = uploadFile.getOriginalFilename(); String ext = originalFilename.substring(originalFilename.lastIndexOf(".")); //生成新文件名 //可使用uuid生成新文件名。 //UUID.randomUUID() //能够是时间+随机数生成文件名 String imageName = IDUtils.genImageName(); //把图片上传到ftp服务器(图片服务器) //须要把ftp的参数配置到配置文件中 //文件在服务器的存放路径,应该使用日期分隔的目录结构 DateTime dateTime = new DateTime(); String filePath = dateTime.toString("/yyyy/MM/dd"); try { FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USER_NAME, FTP_PASSWORD, FTP_BASE_PATH, filePath, imageName + ext, uploadFile.getInputStream()); } catch (Exception e) { e.printStackTrace(); return PictureResult.error(ExceptionUtil.getStackTrace(e)); } //返回结果,生成一个能够访问到图片的url返回 return PictureResult.ok(IMAGE_BASE_URL + filePath + "/" + imageName + ext); } }
编写完成后的项目结构以下
功能:接收controller层传递过来的图片对象,把图片上传到ftp服务器。给图片生成一个新的名字。
参数:MultiPartFile uploadFile
返回值:返回一个pojo,应该是PictureResult。
舒适提示:在resource.properties文件中编写的变量内容,与service层中@Value注解的内容一一对应,若resource.properties中内容变了,@Value会随之变化
4.3 Controller层编写
在taotao-manager-web项目的springmvc.xml文件中添加如下内容
<!-- 定义文件上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设定默认编码 --> <property name="defaultEncoding" value="UTF-8"></property> <!-- 设定文件上传的最大值5MB,5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </bean>
在taotao-manager-web项目中编写接收的图片的PictureController.java
package com.taotao.controller; import org.springframework.beans.factory.annotation.Autowired; 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.taotao.common.pojo.PictureResult; import com.taotao.common.utils.JsonUtils; import com.taotao.service.PictureService; /** * 图片上传controller */ @Controller public class PictureController { @Autowired private PictureService pictureService; @RequestMapping("/pic/upload") @ResponseBody public String upload(MultipartFile uploadFile) { PictureResult result = pictureService.uploadPicture(uploadFile); //将对象转化成json字符串 return JsonUtils.objectToJson(result); } }
在实际开发中,咱们图片管理的方式能够有多种,好比:
(1)本身搭建图片服务器,以后将图片上传后的访问路径保存在数据库中,以后返回给前端进行渲染
(2)采用第三方提供的OSS存储空间(阿里云、腾讯云等),将图片托管在云端,以后上传时候,本身备份一份在本身服务器,全部的操做以第三方文档为准
连接:https://pan.baidu.com/s/12lllAj4PdrGV6_b2WsrhfQ
提取码:f5qm