1.VMware下载
1.1 网址
https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html
2.作业讲解
2.1 实现商品分类更新操作
2.1.1 页面JS分析
- 作用域插槽获取当前行数据
<!-- 定义作用域插槽 定义标签等级-->
<template slot-scope="scope">
<el-button type="success" icon="el-icon-edit" @click="updateItemCatBtn(scope.row)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="deleteItemCatBtn(scope.row)">删除</el-button>
</template>
- 展现页面对话框
- 实现分类修改操作
2.1.2 接口文档说明
2.1.3 编辑ItemCatController
2.1.4 编辑ItemCatService
3. 商品业务实现
3.1 实现商品新增页面跳转
3.1.1 业务说明
- 当用户跳转页面路径 http://localhost:8080/#/item/addItem
- 要求在Home页面展现 页面数据.
3.1.2 配置页面路由信息
3.1.3 实现页面跳转
3.2 实现商品新增操作
3.2.1 业务接口文档
业务说明: 商品新增时 提供了2部分业务数据 1.Item业务数据 2.ItemDesc业务数据. 要求通过一个新增按钮 实现2张表的入库操作. 参数封装时 采用一个大对象 其中包裹了 2个小对象 格式如下 {item:{xxxx},itemDesc:{xxxxx}}
参数接收: 使用ItemVO对象接收数据
3.2.2 编辑ItemController
3.2.3 编辑ItemService
3.3 商品详情说明
3.3.1 业务说明
通常用户检索商品信息时,首先获取的是商品基本信息. 当用户具体点击某个商品时,才应该展现商品的详情信息.
在设计时,应该将商品/详情分为2张表进行设计. 这样的设计可以极大的提高用户的查询的效率 (详情信息是大字段)
关联关系: 1个商品对应1个详情!!!
表示关联关系: item中的ID与ItemDesc中的ID 相同!!
3.3.2 商品详情表介绍
ID: 商品详情主键信息 要求和item中的ID一一对应!!!
Item_desc: 其中保存的是商品详情的html代码片段. 之后如需展现 则采用 v-html等方式展现数据即可.
3.3.3 编辑ItemDesc pojo对象
3.3.4 定义ItemDescMapper
3.3.5 重构ItemService
主键自增配置:
<!--实现主键自动回显!!!-->
<insert id="xxxxx" useGeneratedKeys="true" keyProperty="id" keyColumn="id">
</insert>
3.4 文件上传页面UI
<!-- 文件上传组件
action: 指定具体上传的地址信息
name: 表示文件上传的属性名称 后端接收参数与之对应. 默认值file
on-preview 点击文件列表中已上传的文件时的钩子 function(file) — —
on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
on-success 文件上传成功时的钩子 function(response, file, fileList)
drag 是否拖拽
multiple 是否支持多选
-->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
drag
multiple
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
3.5 文件上传入门案例
3.5.1 页面接口文档
3.5.2 编辑FileController
@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {
@Autowired
private FileService fileService;
/**
* 请求路径: "http://localhost:8091/file/upload"
* 请求参数: file: (binary)
* 返回值: SysResult(ImageVO)
* 缓存流 一次性搬运多大的字节效率最高? 1024
* 注意事项: 关闭流文件
* MultipartFile: SpringMVC 专门针对文件上传开发的API
*/
@PostMapping("/upload")
public SysResult upload(MultipartFile file){
//文件上传入门案例
fileService.upload(file);
return SysResult.success();
}
}
3.5.3 编辑FileService
@Service
public class FileServiceImpl implements FileService{
/**
* 步骤:
* 1.准备文件上传的目录
* 2.获取文件上传名称
* 3.拼接文件路径
* 4.实现文件上传
* 关于业务层异常处理原则: 将检查异常转化为运行时异常
* @param file
*/
@Override
public void upload(MultipartFile file){
String filePath = "D:/images/";
File fileDir = new File(filePath);
//判断目录是否存在
if(!fileDir.exists()){
//fileDir.mkdir(); //创建一级目录
fileDir.mkdirs(); //创建多级目录
}
//获取文件名称
String fileName = file.getOriginalFilename();
//文件上传目录路径
String path = filePath + fileName;
//实现文件上传
try {
file.transferTo(new File(path));
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
}
3.6 文件上传操作
3.6.1 编辑FileController
@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {
@Autowired
private FileService fileService;
/**
* 请求路径: "http://localhost:8091/file/upload"
* 请求参数: file: (binary)
* 返回值: SysResult(ImageVO)
* 缓存流 一次性搬运多大的字节效率最高? 1024
* 注意事项: 关闭流文件
* MultipartFile: SpringMVC 专门针对文件上传开发的API
*/
@PostMapping("/upload")
public SysResult upload(MultipartFile file){
//文件上传入门案例
ImageVO imageVO = fileService.upload(file);
//如果文件上传失败 1.null 2.如果报错抛出异常
if(imageVO == null){
return SysResult.fail();//如果为null 告知前端失败
}
return SysResult.success(imageVO);
}
}
3.6.2 编辑FileService
@Service
public class FileServiceImpl implements FileService{
/**
* 1.验证上传的文件是图片! jpg|png|gif 采用正则的方式校验
* 2.防止恶意程序攻击, 验证图片是否有宽度和高度.
* 3.文件分目录存储 例如: /2021/11/11
* 例如2: hash码 8位hash xx/xx/xx/xx
* 数据hahs时 特征:因为是算法 可能造成数据分配不均!!!
* 4.防止文件重名,修改文件名称 UUID
* @param file
* @return
*/
@Override
public ImageVO upload(MultipartFile file) {
//1.校验图片类型是否正确 正则表达式 a.jpg
//1.1 获取文件名称
String fileName = file.getOriginalFilename();
//1.3将名称全部小写
fileName = fileName.toLowerCase();
//1.2 正则校验 bug!!!!
if(!fileName.matches("^.+\\.(jpg|png|gif)$")){
//如果文件不是图片 则返回null
return null;
}
//2.判断是否为恶意程序
//2.1 通过图片对象 获取宽度和高度
try {
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
int height = bufferedImage.getHeight();
int width = bufferedImage.getWidth();
if(height==0 || width==0){
return null;
}
} catch (IOException e) {
e.printStackTrace();
//终止程序
return null;
}
return null;
}
3. 虚拟机安装
3.1 网卡说明
3.2 虚拟机基本配置
3.2.1 网段配置
路径 编辑----虚拟网络编辑器
3.2.2 还原默认设置
如果修改了号段之后,检查IP时,发现号段不生效. 或者net8网卡丢失.,则需要重置网卡.
3.2.3 修改后的结果
3.3 导入Linux系统
3.3.1 路径
在本地文件目录进行解压.要求不要有中文/空格/特殊字符.
解压之后的效果如图:
3.3.2 虚拟机打开
选中.vmx 文件双击运行即可. 用户名和密码: root/root
3.3.3 虚拟化禁用问题
解决: 开机 狂点F1/F2/F8/DELETE 搜自己电脑的型号 如何进入BIOS系统
cpu设置: VT-X 禁用改为启用 F10保存退出.
3.4 虚拟机网络说明
3.4.1 桥接模式
规则: 如果需要与局域网中的其他设备进行通信 则首选桥接模式.
特点:
1.在局域网址的其他主机 可以访问虚拟机
2.要想使用桥接则必须有物理设备 (路由器(WIFI)/交换机)
3.4.2 NAT模式
特点: 只允许主机与虚拟机通讯.采用NAT