1. 商品新增页面跳转

1.1 页面跳转机制

定义按钮
实现页面跳转
编辑路由机制
实现页面跳转

2. 商品新增

2.1 商品新增业务分析

商品信息分为基本信息,商品详情信息.商品参数信息
由于商品查询比较频繁,所以再表设计时应该分开设计.
表 item 商品的基本信息. 表item_desc商品详情存储的是详情信息.
设定主键时应该写成一样的.

2.2 商品详情POJO

2.3 构建商品详情Mapper

2.4 实现商品新增

2.4.1 页面JS

页面Ajax
提交的参数
商品VO对象定义

2.4.2 编辑ItemController

/*** 实现商品新增操作* URL: http://localhost:8091/item/saveItem* 参数: {item,itemDesc}    JSON* 返回值: SysResult对象*/@PostMapping("/saveItem")public SysResult saveItem(@RequestBody ItemVO itemVO){itemService.saveItem(itemVO);return SysResult.success();}

2.4.3 编辑ItemService

 /*** 完成2张表的入库操作* 1.item表* 2.item_desc表   要求ID一致.* @param itemVO*/@Override@Transactional //控制事务public void saveItem(ItemVO itemVO) {//1.获取商品对象Item item = itemVO.getItem();item.setStatus(true);//MP已经实现了主键的自动回显 所以ID有值的itemMapper.insert(item);//2.获取商品详情ItemDesc itemDesc = itemVO.getItemDesc();itemDesc.setId(item.getId());itemDescMapper.insert(itemDesc);}

2.5 图片上传页面分析

2.5.1 页面API

JS API

2.5.2 图片上传JS分析

2.5.3 接口文档

2.6 文件上传入门案例

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {/*** 文件上传入门案例* URL: /file/upload* 参数名:  file  二进制字节信息* 返回值: SysResult(imageVO)* 步骤:*      1.获取文件名称*      2.指定具体上传路径*      3.拼接文件的全路径*      4.实现上传*/@PostMapping("/upload")public SysResult upload(MultipartFile file) throws IOException {//1.获取文件名称String fileName = file.getOriginalFilename();//2.定义上传路径  绝对路径  注意/问题String fileDir = "D:/JT-SOFT/image";File dirFile = new File(fileDir);if(!dirFile.exists()){//如果文件不存在,则应该创建一个新的目录dirFile.mkdirs(); //多级目录创建}//3.指定文件上传的全路径 目录/文件名称//D:/JT-SOFT/image/abc.jpg  注意/问题String filePath = fileDir + "/" + fileName;//4.实现文件上传file.transferTo(new File(filePath));return SysResult.success();}
}

2.7 文件上传最终实现

2.7.1 编辑ImageVO

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO {private String virtualPath; //文件动态路径private String urlPath;     //文件网络路径private String fileName;    //文件名称
}

2.7.2 编辑YML配置

说明: 添加文件上传的根目录

server:port: 8091servlet:context-path: /
spring:datasource:#如果使用高版本的数据库则添加cjdriver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=trueusername: rootpassword: root#mybatis-plush配置
mybatis-plus:type-aliases-package: com.jt.pojomapper-locations: classpath:/mappers/*.xmlconfiguration:map-underscore-to-camel-case: truelogging:level:com.jt.mapper: debug#标识图片上传的路径
file:#本地存储的根目录localDir: D:/JT-SOFT/image#网络访问虚拟路径urlPath: http://image.jt.com

2.7.3 编辑FileController

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {@Autowiredprivate FileService fileService;@PostMapping("/upload")public SysResult uploadFile(MultipartFile file) throws IOException {ImageVO imageVO = fileService.upload(file);//如果imageVO 为null  说明文件上传失败if(imageVO == null){return SysResult.fail();}return SysResult.success(imageVO);}}

2.7.4 编辑FileService

@Service
public class FileServiceImpl implements FileService{@Value("${file.localDir}")private String localDir;    //获取磁盘路径@Value("${file.urlPath}")   //spel表达式private String urlPath;     //获取虚拟路径/*** 业务说明:*      1.是否为图片类型*      2.防止恶意程序  木马.exe.jpg*      3.分文件目录存储 hash date  yyyy/MM/dd*      4.重新设定文件名称UUID*      5.实现文件上传*      6.封装VO对象之后返回* @return*/@Overridepublic ImageVO upload(MultipartFile file) {//1.校验图片类型 jpg|png|gif  a.jpg A.JPGString fileName = file.getOriginalFilename();//将字符全部转化为小写之后校验fileName = fileName.toLowerCase();if(!fileName.matches("^.+\\.(jpg|png|gif)$")){return null;}//2.恶意程序校验  通过宽度/高度进行判断//将文件强制转化为图片try {BufferedImage bufferedImage = ImageIO.read(file.getInputStream());int width = bufferedImage.getWidth();int height = bufferedImage.getHeight();if(width == 0 || height == 0){return null;}} catch (IOException e) {e.printStackTrace();//如果有错,则直接报错返回.return null;}//3.分目录存储 将当前时间格式化   /yyyy/MM/dd/String dateDir = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());String fileDir = localDir + dateDir;File dirFile = new File(fileDir);if(!dirFile.exists()){dirFile.mkdirs();}//4.动态生成UUID   a.jpgString uuid = UUID.randomUUID().toString().replace("-", "");//获取文件后缀int index = fileName.lastIndexOf('.');String fileType = fileName.substring(index);String realFileName = uuid + fileType;//5.实现文件上传String realFilePath = fileDir + realFileName;try {file.transferTo(new File(realFilePath));//6.封装VO对象ImageVO imageVO = new ImageVO();//存储文件磁盘地址:imageVO.setVirtualPath(realFilePath);//指定文件名称imageVO.setFileName(realFileName);//设定网络访问地址//https://img14.360buyimg.com/n1/s5463359/1/a70500aeed589028.jpg//http://image.jt.com/2021/11/11/uuid.jpgString url = urlPath + dateDir + realFileName;imageVO.setUrlPath(url);return imageVO;} catch (IOException e) {e.printStackTrace();return null;}}
}

2.8 文件删除

2.8.1 页面URL分析

2.8.2 编辑FileController

/*** 实现文件删除* URL: /file/deleteFile* 请求参数: virtualPath* 返回值: SysResult对象*/@DeleteMapping("/deleteFile")public SysResult deleteFile(String virtualPath){File file = new File(virtualPath);//删除指定文件file.delete();return SysResult.success();}

3 实现图片回显

3.1 关于图片路径分析

本地磁盘地址:
D:/JT-SOFT/image/2021/06/18/96a5c392f33048439ee81c48eedb5897.png
图片URL地址:
http://image.jt.com/2021/06/18/96a5c392f33048439ee81c48eedb5897.png

问题:
1.由于该域名并没有购买所以运营商不能将请求转向到本地.
hosts文件:在开发阶段可以解决域名与IP的绑定关系.但是只对本机有效
2.域名与本地磁盘路径没有匹配关系.
反向代理方式实现

3.2 关于Hosts说明

3.2.1 Hosts作用

说明: 在操作系统中,有一个文件可以设定域名与IP的映射关系. 但是该设定只对本机有效. 专门为测试/开发时引入的文件.

3.2.2 Hosts文件位置

检查文件位置
检查文件是否可写
编辑Hosts文件

#IP   域名
#图片服务器域名
127.0.0.1   image.jt.com
#192.168.126.129  image.jt.com#后台服务器域名
127.0.0.1  manage.jt.com
#192.168.126.129  manage.jt.com#前台服务器域名
127.0.0.1  web.jt.com
#192.168.126.129  web.jt.com

hosts测试

3.3 关代理方式介绍

3.3.1 关于代理的说明

参与者: 3个角色 1.用户 2.中间代理 3.服务器
代理作用: 当用户无法直接获取(处理)业务时需要使用代理机制.

3.3.2 正向代理(面试题)

正向代理，意思是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。

特点:
1.客户端可以使用正向代理(正向代理是客户端代理)
2.正向代理用户非常清楚自己访问服务器的地址, 服务器不知道真实的请求者是谁
3.应用场景: 美团外卖,滴滴打车,路由器机制

3.3.3 反向代理

反向代理服务器位于用户与目标服务器之间，但是对于用户而言，反向代理服务器就相当于目标服务器，即用户直接访问反向代理服务器就可以获得目标服务器的资源。同时，用户不需要知道目标服务器的地址，也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速，即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载，提高访问效率。

特点:
1. 服务器端使用反向代理( 服务器端代理)
2. 反向代理用户访问服务器时,用户不清楚真实的服务器到底是谁, 服务器清楚是谁访问的.
3. 使用场景: 一般服务器端都是反向代理

3.4 Nginx

3.4.1 Nginx介绍

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了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网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

特点:
1. 占有内存少运行时内存占用量不超过2M
2. 并发能力强官网测试数据 5万次/秒实测 3万次/秒
tomcat服务器并发能力 150-220左右 1000/秒
扩展: F5 负载均衡服务器运营商一般使用 20万/秒

3.4.2 Nginx安装和使用

关于进程说明
nginx启动占用端口 80端口
详情参数问题集.
检查Nginx启动是否正常

3.4.3 关于nginx 命令

说明: 要求执行nginx 命令应该在nginx.exe所在目录执行.
命令:
1. start nginx 启动nginx
2. nginx -s reload 重启nginx 只有nginx启动时才可以重启
3. nginx -s stop 停止nginx

注意事项:
1. nginx中如果编辑错误 start nginx 没有报错信息.
2. nginx -s reload 如果配置文件中有错误,则会控制台提示.
总结: 启动nginx 先执行 start nginx 之后执行nginx -s reload

3.4.4 反向代理入门案例

#Nginx只能支持http/https
http {#反向代理服务  一个服务一个serverserver {#监听端口    一般都是80listen       80;#拦截的域名   server_name  localhost;# 进行反向代理服务配置   # / 根目录  拦截用户所有的请求location / {#root关键字  代理的是一个目录root   html;# 默认访问的页面index  index.html index.htm;}}
}

3.4.5 反向代理调用流程

3.4.6 nginx实现图片代理

3.4.7 注意事项

检查HOSTS文件是否有效!!!
检查Nginx服务项一次 2个进程先关闭再重启
配置本地的域名与磁盘路径的映射关系
http协议自动转化为https 设置谷歌浏览器禁用HTTPS
解决方案: chrome://net-internals/#hsts
报错信息: No mapping for the Unicode character exists in the target multi-byte code page
解决方案: 路径中不要有中文

3.5 实现域名代理

3.5.1 需求说明

说明: 要求用户通过域名实现服务器的访问
案例1:
http://web.jt.com 要求访问 http://localhost:8080
nginx配置:

#实现前台代理 web.jt.com:80 http://localhost:8080server {listen 80;server_name web.jt.com;location / {#代理发起http请求proxy_pass http://localhost:8080;}}

案例2:
http://manage.jt.com 要求访问 http://localhost:8091

#通过manage.jt.com 访问localhost:8091服务器server {listen 80;server_name manage.jt.com;location / {proxy_pass http://localhost:8091;}}

3.6 集群说明

3.6.1 需求说明

要求后端服务器可以抗击300次/秒的并发. 准备2台tomcat服务器即可.
集群: 由多台tomcat服务器组合集群.
集群的作用: 可以利用大量的tomcat服务器,来实现高并发. 搭建集群是解决高并发问题的有效的手段(软件不够,硬件来凑)

3.6.2 集群部署图

3.6.3 动态获取端口号

3.6.4 打包说明

说明: 将项目中的.java文件经过编译器编译为.class文件. 项目打包就是将.class文件通过API 封装为xxxx.jar包文件.
jar中包含的内容: .class/第三方的…jar包(class)/配置文件.

3.6.5 项目发布

步骤:
1.将项目打包

2.通过java命令实现项目发布
以JDK的方式直接启动服务器.

3.7 负载均衡实现

3.7.1 集群配置

#配置集群upstream tomcats {server localhost:8091;server localhost:8092;}#通过manage.jt.com 访问localhost:8091服务器server {listen 80;server_name manage.jt.com;location / {#proxy_pass http://localhost:8091;proxy_pass http://tomcats;}}

3.7.2 轮询机制

说明: 根据配置文件的顺序,依次访问服务器. 默认的负载均衡策略

#配置集群upstream tomcats {server localhost:8091;server localhost:8092;}

3.7.3 权重策略(了解)

说明: 如果需要设定访问服务器的频次(某个访问的多,某个访问的少),可以通过权重的策略实现.

#配置集群  1.轮询机制   2.权重upstream tomcats {server localhost:8091 weight=9;server localhost:8092 weight=1;}

3.7.4 IPHash(了解)

需求: 如果需要用户与服务器进行绑定时,则设定IPHash
测试环境: 压力测试时可能会用到.

#配置集群  1.轮询机制   2.权重  3.ip_hashupstream tomcats {ip_hash;server localhost:8092;server localhost:8091;}

3.7.5 IPhash算法说明

说明: 根据用户的IP地址进行hash计算. 对结果进行求模计算. 按照求模的结果匹配服务器.
弊端:
1.由于都是算数计算的结果所以可能会造成负载不均的现象.
2.用户如果与服务器进行绑定,则服务器宕机则直接影响用户.

CGB2103-day16-17相关推荐

英语语法超图解2：30个一定要学的句型
Level1 基础概念马上建立 Day8 一.那里有个漂亮的女孩 There is a beautiful girl! 语法句型示范情境会话..... 语法句型翻译练习.... 延申句型加分学习... ...
JAVA day16、17 数据结构（栈、队列、数组、链表、红黑树）
一.什么叫数据结构? 数据结构是相互之间存在一种或多种特定关系的数据元素的集合,即带"结构"的数据元素的集合."结构"就是指数据元素之间存在的关系,分为逻辑结构 ...
Day16 os模块、time模块、random模、math模块
1.os模块-对系统就行操作 #system() 在python中执行系统命令 #popen() 执行系统命令返回对象,通过read方法读出字符串 #listdir() 获取指定文件夹中所有内容的名称 ...
day16【前台】项目展示
day16[前台]项目展示 1.首页显示项目 1.1.整体思路 1.2.创建VO 1.2.1.PortalTypeVO 数据库表实体类如下:封装List<PortalProjectVO> ...
下班时间学写作练习17天
2019年春节到,假期虽短,还是想了解点儿新奇的东西尤其是那些可以转化为"内功"的软实力,作为PM,能力地图中也需要一部分的文案能力,对于我自己,除了工作需要,更想掌握一门拥有&q ...
【CV】吴恩达机器学习课程笔记第17章
本系列文章如果没有特殊说明,正文内容均解释的是文字上方的图片机器学习 | Coursera 吴恩达机器学习系列课程_bilibili 目录 17 大规模机器学习 17-1 学习大数据集 17-2 随 ...
零起点学算法17——比较2个数大小
零起点学算法17--比较2个数大小 Time Limit: 1 Sec Memory Limit: 64 MB 64bit IO Format: %lld Description 输入2个整数, ...
Day-16 面向对象03 类与类之间的关系
一.类与类之间的依赖关系我用着你,但是你不属于我,这种关系是最弱的,比如,公司和雇员之间,对于正式员工,肯定要签订劳动合同,还得小心伺候着,但是如果是兼职,那无所谓,需要了你就来,不需要你就可以拜拜 ...
北语计算机应用基础2,北语17春《计算机应用基础》练习2
北语17春<计算机应用基础>练习2 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14.90 积分 2017秋北语17春<计算机应 ...
机器学习入门（17）— 输入 4 维数据、基于 im2col 展开来实现卷积层
1. 输入 4 维数据 CNN 中各层间传递的数据是 4 维数据.所谓 4 维数据,比如数据的形状是(10, 1, 28, 28),则它对应 10 个高为 28.长为 28.通道为 1 的数据.用 P ...

CGB2103-day16-17