牛骨文教育服务平台(让学习变的简单)
博文笔记

亿级并发|day05-图片回显及反向代理

创建时间：2018-10-13 投稿人： 浏览次数：313

京淘后台搭建

  • 1 富文本编辑器
    • 1.1 入门案例
  • 2 商品详情新增
    • 2.1 编辑POJO
    • 2.2 编辑controller
    • 2.3 编辑service
  • 3 商品详情回显
    • 3.1 页面分析
    • 3.2 编辑controller
    • 3.3 编辑service
    • 3.4 页面效果
  • 4 文件上传示例
    • 4.1 编辑mvc配置文件解析器
    • 4.2 编辑文件上传页面
    • 4.3 编辑controller
  • 5 商品图片上传
    • 5.1 页面分析
    • 5.2 定义图片回显VO
    • 5.3 正则表达式
    • 5.4 编辑controller
    • 5.5 编辑service
  • 6 Nginx
    • 6.1 Nginx介绍
    • 6.2 反向代理介绍
    • 6.3 Nginx下载
    • 6.4 Nginx命令
    • 6.5 实现反向代理
    • 6.6 修改host文件
    • 6.7 页面效果
  • 7 完整项目代码

1.1 入门案例

  1. 引入js
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
  1. 初始化
<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
			KindEditor.create("#editor")
		})
	})
	
</script>
</head>
<body>
	<h1>富文本编辑器</h1>
	<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
  1. 效果
    在这里插入图片描述

2.1 编辑POJO

在这里插入图片描述

2.2 编辑controller

在这里插入图片描述

2.3 编辑service

@Override
public void saveItem(Item item,String desc) {
	//利用通用mapper实现数据入库
	item.setStatus(1);
	item.setCreated(new Date());
	item.setUpdated(item.getCreated());
	itemMapper.insert(item);
	
	//100,101,103,105,106,A107 B110 C120
	//查找当前事务中的最大Id 
	//Executing: SELECT LAST_INSERT_ID() 
	ItemDesc itemDesc = new ItemDesc();
	itemDesc.setItemId(item.getId()); //mybatis底层自动回填数据
	itemDesc.setItemDesc(desc);
	itemDesc.setCreated(item.getCreated());
	itemDesc.setUpdated(item.getCreated());
	itemDescMapper.insert(itemDesc);
}

说明
通用Mapper基于mybatis会自动查询最后新增id，并且回填数据。

Executing: SELECT LAST_INSERT_ID()

3.1 页面分析

  1. 页面url
    在这里插入图片描述

  2. 页面js

$.getJSON("/item/query/item/desc/"+data.id,
	function(_data){
		if(_data.status == 200){
        	//UM.getEditor("itemeEditDescEditor").setContent(_data.data.itemDesc, false);
        	itemEditEditor.html(_data.data.itemDesc);
        }
    });

3.2 编辑controller

//根据ItemId查询商品详情信息
@RequestMapping("/query/item/desc/{itemId}")
@ResponseBody
public SysResult findItemDescById(@PathVariable Long itemId){
	try {
		ItemDesc itemDesc = itemService.findItemDescById(itemId);
		return SysResult.oK(itemDesc);
	} catch (Exception e) {
		e.printStackTrace();
	}
	return SysResult.build(201, "商品详情查询失败");
}

3.3 编辑service

@Override
public ItemDesc findItemDescById(Long itemId) {
	
	return itemDescMapper.selectByPrimaryKey(itemId);
}

3.4 页面效果

在这里插入图片描述

4.1 编辑mvc配置文件解析器

<!--4.添加文件上传视图解析器 
	要求:bean的Id必须为multipartResolver
 -->
<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<!--上传量10M  -->
	<property name="maxUploadSize" value="10485760"/>
	<property name="defaultEncoding" value="utf-8"/>
</bean>

4.2 编辑文件上传页面

<body>
	<!--如果需要上传媒体信息,需要开启多媒体标签  -->
	<form action="http://localhost:8091/file" 
	method="post" enctype="multipart/form-data">
		文件:<input name="pic" type="file"/>
		<input type="submit" value="提交"/>
	</form>
</body>

4.3 编辑controller

@Controller
public class FileController {
	
	//文件上传后重定向到文件上传页面
	@RequestMapping("/file")
	public String file(MultipartFile pic) throws IllegalStateException, IOException{
		//1.定义上传文件
		File file = new File("E:/jt-upload");
		
		//2.判断文件夹是否存在
		if(!file.exists()){
			//新建多级文件夹
			file.mkdirs();
		}
		//获取文件名称   abc.jpg
		String fileName = pic.getOriginalFilename();
		pic.transferTo(new File("E:/jt-upload/"+fileName)); //实现文件上传
		
		return "redirect:/File.jsp";
	}
}

5.1 页面分析

  1. 页面url
    在这里插入图片描述

  2. 页面js
    在这里插入图片描述

  3. 页面回显格式

{"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}

5.2 定义图片回显VO

在这里插入图片描述

5.3 正则表达式

元字符 描述
将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“ ”匹配 。“ ”匹配换行符。序列“”匹配“”而“(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。
^ 匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“ ”或“ ”之后的位置。
$ 匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“ ”或“ ”之前的位置。
* 匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于{0,}。
+ 匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
? 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。
{n} n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,} n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m} m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o为一组，后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少地匹配所搜索的字符串，而默认的贪婪模式则尽可能多地匹配所搜索的字符串。例如，对于字符串“oooo”，“o+”将尽可能多地匹配“o”，得到结果[“oooo”]，而“o+?”将尽可能少地匹配“o”，得到结果 [‘o’, ‘o’, ‘o’, ‘o’]
.点 匹配除“ ”和" "之外的任何单个字符。要匹配包括“ ”和" "在内的任何字符，请使用像“[sS]”的模式。
(pattern) 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“(”或“)”。
(?:pattern) 非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(
(?=pattern) 非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95
(?!pattern) 非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95
(?<=pattern) 非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。“(?<=95|98|NT|2000)Windows”目前在python3.6中re模块测试会报错，用“|”连接的字符串长度必须一样，这里“95|98|NT”的长度都是2，“2000”的长度是4，会报错。
(?<!patte_n) 非获取匹配，反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。这个地方不正确，有问题此处用或任意一项都不能超过2位，如“(?<!95|98|NT|20)Windows正确，“(?<!95|980|NT|20)Windows 报错，若是单独使用则无限制，如(?<!2000)Windows 正确匹配。同上，这里在python3.6中re模块中字符串长度要一致，并不是一定为2，比如“(?<!1995|1998|NTNT|2000)Windows”也是可以的。
x|y 匹配x或y。例如，“z|food”能匹配“z”或“food”(此处请谨慎)。“[zf]ood”则匹配“zood”或“food”。
[xyz] 字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”任一字符。
[a-z] 字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
 匹配一个单词的边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的就是匹配位置的）。例如，“er”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”；“1_”可以匹配“1_23”中的“1_”，但不能匹配“21_3”中的“1_”。
B 匹配非单词边界。“erB”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
cx 匹配由x指明的控制字符。例如，cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
d 匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持
D 匹配一个非数字字符。等价于[^0-9]。grep要加上-P，perl正则支持
f 匹配一个换页符。等价于x0c和cL。
匹配一个换行符。等价于x0a和cJ。
匹配一个回车符。等价于x0d和cM。
s 匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ f v]。
S 匹配任何可见字符。等价于[^ f v]。
匹配一个制表符。等价于x09和cI。
v 匹配一个垂直制表符。等价于x0b和cK。
w 匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。
W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
xn 匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“x41”匹配“A”。“x041”则等价于“x04&1”。正则表达式中可以使用ASCII编码。
um 匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)1”匹配两个连续的相同字符。
标识一个八进制转义值或一个向后引用。如果 之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
m 标识一个八进制转义值或一个向后引用。如果 m之前至少有nm个获得子表达式，则nm为向后引用。如果 m之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则 m将匹配八进制转义值nm。
ml 如果n为八进制数字（0-7），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
un 匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，u00A9匹配版权符号（©）。
p{P} 小写 p 是 property 的意思，表示 Unicode 属性，用于 Unicode 正表达式的前缀。中括号内的“P”表示Unicode 字符集七个字符属性之一：标点字符。其他六个属性：L：字母；M：标记符号（一般不会独出现）；Z：分隔符（比如空格、换行等）；S：符号（比如数学符号、货币符号等）；N：数字（比如阿拉伯数字、罗马数字等）；C：其他字符。*注：此语法部分语言不支持，例：javascript。
< > 匹配词（word）的开始（<）和结束（>）。例如正则表达式<the>能够匹配字符串"for the wise"中的"the"，但是不能匹配字符串"otherwise"中的"the"。注意：这个元字符不是所有的软件都支持的。
( ) 将( 和 ) 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用 1 到9 的符号来引用。
| 将两个匹配条件进行逻辑“或”（Or）运算。例如正则表达式(him

5.4 编辑controller

//实现图片文件上传
@RequestMapping("/pic/upload")
@ResponseBody
public PicUploadResult fileUpload
(MultipartFile uploadFile){
	
	return fileService.fileUpload(uploadFile);
}

5.5 编辑service

@Service
public class FileServiceImpl implements FileService {
	
	private String localPath = "E:/jt-upload/";
	private String imageUrl = "http://image.jt.com/";
	
	
	/**
	 * 1.判断上传的文件是否为图片 jpg|png|gif
	 * 2.判断文件是否为恶意软件
	 * 3.为了提高检索效率.采用分文件存储
	 * 	 3.1 aaaaaaaa-bbbbbbbb-cccccccc-dddddddd 使用UUID
	 * 	 3.2 根据时间yyyy/MM/dd
	 * 4.为了防止文件名称重复  UUID + 随机数0-999
	 * 5.判断文件夹是否存在,实现文件上传
	 */
	@Override
	public PicUploadResult fileUpload(MultipartFile uploadFile) {
		PicUploadResult uploadResult = new PicUploadResult();
		//一.判断图片类型
		//1.获取文件名称     abc.jpg   
		String fileName = uploadFile.getOriginalFilename();
		//2.为了文件名称大小写一致,统统转化为小写
		fileName = fileName.toLowerCase();
		if(!fileName.matches("^.*\.(jpg|png|gif)$")){
			uploadResult.setError(1);//表示不是图片
			return uploadResult;
		}
		
		//二.判断是否为恶意程序
		//2.将文件转化为图片类型,获取宽度和高度
		try {
			BufferedImage bufferedImage = 
					ImageIO.read(uploadFile.getInputStream());
			int height = bufferedImage.getHeight();
			int width  = bufferedImage.getWidth();
			
			if(height ==0 || width == 0){
				uploadResult.setError(1);//表示不是图片
				return uploadResult;
			}
			
			//表示上传的文件是图片!!
			//三 分文件存储     2018/10/01
			String dateDir = 
	new SimpleDateFormat("yyyy/MM/dd").format(new Date());
			
			//3.1判断文件夹是否存在
			String localDirPath = localPath + dateDir;
			File fileDir = new File(localDirPath);
			if(!fileDir.exists()){
				fileDir.mkdirs();
			}
			
			//四.防止文件名称重复
			String uuid = UUID.randomUUID().toString()
					.replace("-", "");
			int randomNum = new Random().nextInt(1000);
			String fileType = 		//.jpg
					fileName.substring(fileName.lastIndexOf("."));
			String realFileName = uuid + randomNum + fileType;
			//5.实现文件上传  将文件上传到本地磁盘下
			//E:/jt-upload/2018/10/01/32位+1-3位.jpg
			String localFilePath = localDirPath + "/" 
					+realFileName;
			uploadFile.transferTo(new File(localFilePath));
			
			/**
			 * 为了实现图片回显需要编辑虚拟路径
			 * http://image.jt.com/2018/10/09/aqwerqwe.jpg
			 */
			String imageUrlPath = imageUrl + dateDir +"/" + realFileName;
			uploadResult.setUrl(imageUrlPath);
			uploadResult.setHeight(height+"");
			uploadResult.setWidth(width+"");
		} catch (Exception e) {
			e.printStackTrace();
			uploadResult.setError(1);//表示不是图片
			return uploadResult;
		}
		return uploadResult;
	}
}

6.1 Nginx介绍

Nginx (engine x)是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。

Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。
其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日，nginx
1.0.4发布。

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

理论值:Nginx理论值可以支持并发量5万/秒
实际值:Nginx实际值3万/秒

6.2 反向代理介绍

在这里插入图片描述

总结
当用户发起请求时，由nginx发起拦截，代替用户访问目标数据，最终将结果返回给用户的过程称之为反向代理。

调用过程
1.当用户发起 image.jt.com/a.jpg 这样的请求时，被nginx配置的监听器所拦截。
2-3.当nginx成功接收请求后，根据内部的配置文件实现反向代理，最终获取数据。
4.将nginx得到的数据最终返回给用户。

6.3 Nginx下载

网址: http://nginx.org
在这里插入图片描述

6.4 Nginx命令

  1. 以超级管理员身份运行。
  2. 进程介绍：
    Nginx中每次启动都会开启2个进程，一个是守护进程，一个是主进程。
    主进程:主要实现功能
    守护进程:防止主进程意外关闭
  3. 命令
    说明:执行Nginx命令时必须在nginx根目录中运行
    在这里插入图片描述
  • start nginx（启动Nginx）
  • nginx -s reload（重启Nginx）
  • nginx -s stop（关闭Nginx）

6.5 实现反向代理

入门案例

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
    	#root代表反向代理的文件夹   index 默认访问页
        root   html;	
        index  index.html index.htm;
    }
}

配置nginx

#实现图片回显 配置图片服务器  image.jt.com
server {
	listen   80;
	server_name   image.jt.com;
	
	#个别电脑需要区分斜杠
	location / {
		root  E:/jt-upload;		
	}
}

6.6 修改host文件

# 京淘电商环境
127.0.0.1       image.jt.com
127.0.0.1       manage.jt.com
127.0.0.1       www.jt.com
127.0.0.1       sso.jt.com
127.0.0.1       cart.jt.com
127.0.0.1       order.jt.com
127.0.0.1       solr.jt.com
192.168.126.148 www.easymall.com

6.7 页面效果

在这里插入图片描述

链接:https://pan.baidu.com/s/1JWvKNb7mvOU8nt_6VK50eg
密码:e1h8

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
未上传头像

热门文章
CTF writeup 2_南邮网络攻防训...
SSM框架——详细整合教程（...
Linux Shell脚本编程－－curl命...
HttpClient使用详解
Java面试题全集（上）
JAVA设计模式之单例模式
java.lang.OutOfMemoryError: PermGen ...
TCP协议中的三次握手和四次...
form表单的两种提交方式，su...
String,StringBuffer与StringBuilder...
最新文章
Java之品优购课程讲义_day20（7）
剑指 Offer - 8：跳台阶
Netty权威指南_札记02_NIO编程
mysql时间属性之时间戳和datetime之...
虚拟现实或许可以拯救古埃及的“...
spring cloud服务注册中心eureka---集群...
Java SE 第六章
HTTP请求+数据库
HIDL学习笔记之HIDL C++（第二天）
ubuntu系统下指定tomcat运行时为JDK1.8...
copyright © 2008-2019 亿联网络 版权所有 备案号：粤ICP备14031511号-2