亿级流量架构|day05-图片回显及反向代理

最新推荐文章于 2022-01-17 21:28:05 发布

眼映星辰

最新推荐文章于 2022-01-17 21:28:05 发布

阅读量1.5k

点赞数

分类专栏： Java笔记文章标签：亿级并发图片回显反向代理 Nginx

本文链接：https://blog.csdn.net/s15810813994/article/details/83040869

版权

Java笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>

初始化

<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>

效果

2 商品详情新增

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 商品详情回显

3.1 页面分析

页面url
页面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 文件上传示例

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 商品图片上传

5.1 页面分析

页面url
页面js
页面回显格式

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

5.2 定义图片回显VO

在这里插入图片描述

5.3 正则表达式

元字符	描述
\	将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\n”匹配\n。“\n”匹配换行符。序列“\”匹配“\”而“(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。
^	匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$	匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
*	匹配前面的子表达式任意次。例如，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’]
.点	匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符，请使用像“[\s\S]”的模式。
(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”范围内的任意字符。
\b	匹配一个单词的边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置的）。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”；“\b1_”可以匹配“1_23”中的“1_”，但不能匹配“21_3”中的“1_”。
\B	匹配非单词边界。“er\B”能匹配“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。
\n	匹配一个换行符。等价于\x0a和\cJ。
\r	匹配一个回车符。等价于\x0d和\cM。
\s	匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S	匹配任何可见字符。等价于[^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于\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编码。
\num	匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
\n	标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
\nm	标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
\nml	如果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 Nginx

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命令

以超级管理员身份运行。
进程介绍：
Nginx中每次启动都会开启2个进程，一个是守护进程，一个是主进程。
主进程:主要实现功能
守护进程:防止主进程意外关闭
命令
说明:执行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 页面效果

在这里插入图片描述

7 完整项目代码

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

眼映星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
亿级流量架构|day05-图片回显及反向代理

京淘后台搭建1 富文本编辑器1.1 入门案例2 商品详情新增2.1 编辑POJO2.2 编辑controller2.3 编辑service3 商品详情回显3.1 页面分析3.2 编辑controller3.3 编辑service3.4 页面效果4 文件上传示例4.1 编辑mvc配置文件解析器4.2 编辑文件上传页面4.3 编辑controller5 商品图片上传5.1 页面分析5.2 定义图片回显...
复制链接

扫一扫