Vue商品管理业务

已于 2024-03-11 10:38:16 修改
阅读量92 收藏
点赞数
分类专栏： 三阶段转载笔记 文章标签： vue.js javascript
于 2021-09-29 08:58:27 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/119562403
版权

CGB2105-Day16

2021-08-10 11:53:08 3007 收藏 12
分类专栏： 2105
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/qq_16804847/article/details/119562403
版权
2105 专栏收录该内容
17 篇文章 26 订阅
订阅专栏

1. 商品管理业务

1.1 VUE 过滤器用法

/* 定义过滤器 */
/* Vue.filter("定义过滤器名称",function(参数){
   过滤器需要添加return
}) */
Vue.filter("priceFormat",function(price){
    //console.log(price)
    return (price / 100).toFixed(2)
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

1.2 商品新增操作

1.2.1 页面跳转

根据用户请求地址,实现页面跳转.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import ElementUI from '../components/ElementUI.vue'
import Home from '../components/Home.vue'
import User from '../components/user/user.vue'
import Item from '../components/items/Item.vue'
import Welcome from '../components/Welcome.vue'
import ItemCat from '../components/items/ItemCat.vue'
import AddItem from '../components/items/addItem.vue'

//使用路由机制 通过children实现路由嵌套, redirect重定向
Vue.use(VueRouter)
const routes = [
{ path: ‘/’, redirect: ‘/login’},
{ path: ‘/login’, component: Login},
{ path: ‘/elementUI’, component: ElementUI},
//children组件的跳转 在home组件内部进行填充
{ path: ‘/home’, component: Home, redirect: ‘/welcome’, children:[
{ path: ‘/welcome’, component: Welcome},
{ path: ‘/user’, component: User},
{ path: ‘/item’, component: Item},
{ path: ‘/itemCat’, component: ItemCat},
{ path: ‘/item/addItem’, component: AddItem}
]}
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

1.2.2 商品新增业务说明(一)

商品分为(item/itemDesc), 目前只完成商品基本信息的提交即可.
在这里插入图片描述

1.2.3 页面JS分析

 /* 添加商品按钮 */
      async addItemBtn(){
        //console.log(this.addItemForm)

    <span class="token comment">//1.完成表单校验</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>addItemFormRef<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span> valid <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">"请输入商品必填项"</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">//2.完成商品参数的封装</span>
    <span class="token comment">//2.0 将商品价格扩大100倍</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>addItemForm<span class="token punctuation">.</span>price <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addItemForm<span class="token punctuation">.</span>price <span class="token operator">*</span> <span class="token number">100</span>
    <span class="token comment">//2.1 将商品图片的数据转化为字符串</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>addItemForm<span class="token punctuation">.</span>images <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addItemForm<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span>

    <span class="token comment">//2.5 实现商品数据提交 商品(item基本信息/商品详情信息)</span>
    let submitAddItem <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
      item <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addItemForm<span class="token punctuation">,</span>
      itemDesc<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>itemDesc
    <span class="token punctuation">}</span>


    <span class="token comment">//console.log(submitAddItem)</span>
    let <span class="token punctuation">{<!-- --></span>data<span class="token operator">:</span> result<span class="token punctuation">}</span> <span class="token operator">=</span> await <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/item/saveItem"</span><span class="token punctuation">,</span>submitAddItem<span class="token punctuation">)</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>status <span class="token operator">!=</span><span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">"商品添加失败"</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">"商品添加成功"</span><span class="token punctuation">)</span>

    <span class="token comment">//2.5添加完成之后,将数据重定向到商品展现页面</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">"/item"</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

1.2.4编辑ItemVO对象

/**
 * @author 刘昱江
 * 时间 2021/4/16
 */
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ItemVO {  //该对象封装商品所有的参数信息
    private Item item;
    private ItemDesc itemDesc;
    private ItemParam itemParam;
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

1.2.4 商品新增的业务接口

  • 请求路径: http://localhost:8091/item/saveItem
  • 请求类型: post
  • 前端传递参数分析
	{
		item: {
			images: "/2021/05/20/da0c1d4781c1499399f090da8b60f359.jpg,/2021/05/20/2ac1c34776a7465887eb019655354c3c.jpg"
			itemCatId: 560
			num: "100"
			price: 718800
			sellPoint: "【华为官方直供,至高12期免息0首付,原装正品】送华为原装无线充+运动蓝牙耳机+蓝牙音箱+三合一多功能数据线+钢化膜等！"
			title: "华为P40 Pro 5G手机【12期免息可选送豪礼】全网通智能手机"
		},
		itemDesc: {
				itemDesc: "<ul><li>品牌：&nbsp;<a href=https://list.jd.com/list.html".......      "
		}
	}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 请求参数: 使用ItemVO对象接收
参数名称参数类型参数说明备注
itemItem商品基本信息对象封装不能为null
itemDescItemDesc商品详情信息不能为null
  • ImageVO参数详解:
  • Item对象
参数名称参数类型参数说明备注
titleString商品标题信息不能为null
sellPointString商品卖点信息不能为null
priceInteger商品价格信息不能为null 需要将数据扩大100倍
numInteger商品数量信息不能为null
imagesString商品图片地址信息不能为null
itemCatIdInteger商品父级分类ID不能为null
statusBoolean商品状态信息不能为null
  • itemDesc 对象
  •  	为了降低商品提交代码的耦合性,将大字段信息详情,采用ItemDesc对象进行封装

   
   
    
   
   
    • 1
参数名称参数类型参数说明备注
idInteger商品Id信息因为Item和ItemDesc是一对一关系 所以需要依赖Item对象的Id值
itemDescString商品详情信息内部包含了大量的html语句
  • 返回值结果:
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据可以为null

1.3 商品详情说明

1.3.1 引入富文本编辑器

说明: 富文本用户操作的都是html代码片段

//1.导入JS
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'

/* 导入富文本编辑器对应的样式 */
import ‘quill/dist/quill.core.css’ // import styles
import ‘quill/dist/quill.snow.css’ // for snow theme
import ‘quill/dist/quill.bubble.css’ // for bubble theme

//2. 页面展现
<el-tab-pane label=“商品详情” name=“2”>
<!– 定义富文本编辑器–>
<quill-editor ref=“myQuillEditor” v-model=“itemDesc.itemDesc”>
</quill-editor>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 定义添加商品按钮<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">"primary"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"addItemBtnClass"</span> <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"addItemBtn"</span><span class="token operator">&gt;</span>添加商品<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>

</el-tab-pane>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

1.3.2 Item和ItemDesc关系

Item表: 主要封装了商品的基本信息.
ItemDesc表: 主要封装商品详情信息(大字段—html代码片段)
原因: 如果用户频繁的查询大字段 则影响效率. 所以将商品信息分为item和itemDesc
关联关系: item.id = itemDesc.id ID的值一致的.
在这里插入图片描述

1.2.4 编辑ItemController

  /**
     * 完成商品新增操作
     * 1.URL地址:  http://localhost:8091/item/saveItem
     * 2.参数: {item,itemDesc} 使用ItemVO进行接收
     * 3.请求类型: post    JSON
     * 4.返回值: SysResult对象
     */
    @PostMapping("/saveItem")
    public SysResult saveItem(@RequestBody ItemVO itemVO){

    itemService<span class="token punctuation">.</span><span class="token function">saveItem</span><span class="token punctuation">(</span>itemVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token class-name">SysResult</span><span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

1.2.5 编辑ItemServiceImpl

  /**
     * 完成商品入库操作
     * @param itemVO
     * 问题分析:
     *      1.item入库之后,才会有主键信息. 对象理论上的ID=null
     *      2.itemDesc入库时,必须获取与Item.id一样的数据.
     * 如何解决:
     *      设定主键自动回显功能!!!!!
     * 如何设计:
     *   开启主键自增  主键回显的配置  Mybatis原生操作
     *    <insert id="xxxx" useGeneratedKeys="true" keyColumn="主键字段" keyProperty="主键属性">
     *
     *    </insert>
     *  MybatisPlus:
     *        MP在完成入库操作时,自动的实现了数据的回显功能. 所以ID是有值的.
     *  知识: 哪种情况会有自动的回显功能!!!!!
     *  BUG:  由于测试数据可能会出现重复的现象. 需要提前删除多余的记录
     */
    @Override
    @Transactional  //事务控制
    public void saveItem(ItemVO itemVO) {
        //1.获取Item对象信息
        Item item = itemVO.getItem();
        item.setStatus(true);
        //2.商品入库操作  主键自增,入库之后才能看到主键. ID回显
        itemMapper.insert(item);

    <span class="token comment">//3.获取商品详情</span>
    <span class="token class-name">ItemDesc</span> itemDesc <span class="token operator">=</span> itemVO<span class="token punctuation">.</span><span class="token function">getItemDesc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//如何保证item和ItemDesc的ID一致?</span>
    itemDesc<span class="token punctuation">.</span><span class="token function">setId</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    itemDescMapper<span class="token punctuation">.</span><span class="token function">insert</span><span class="token punctuation">(</span>itemDesc<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

1.2.6 BUG说明

如果出现主键重复,会报入库异常.则需要提前删除多余测试数据
在这里插入图片描述

1.3 文件上传操作

1.3.1 官网API

  <!-- 图片上传操作
           file-list="fileList"  双向数据绑定 控制图片的数量数组结构[],
           :on-preview="handlePreview"  点击图片时候调用的函数
           :on-remove="handleRemove"    当用户点击删除按钮时,触发函数
           multiple 配置多选
           drag   是否启用拖拽
           action="图片提交的地址信息"
         -->
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          multiple
          drag>
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

1.3.2 文件上传的业务接口文档

  • 请求路径: http://localhost:8091/file/upload
  • 请求类型: post
  • 请求参数:
参数名称参数说明备注
file文件上传的参数名称file中携带的是二进制信息
  • 返回值结果:
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据返回ImageVO对象
  • ImageVO对象说明
参数名称参数类型参数说明备注
virtualPathString图片实际路径 不包含磁盘信息例如: 2021/11/11/a.jpg 不需要写磁盘地址
urlPathString图片url访问地址http://image.jt.com/2021/11/11/a.jpg 需要指定域名地址
fileNameString文件上传后的文件名称UUID.type

1.3.3 封装ImageVO对象

@Data
@Accessors(chain = true)
public class ImageVO {
    private String virtualPath; //虚拟路径
    private String urlPath;     //网络地址
    private String fileName;    //图片名称
}

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.3.4 文件上传入门案例

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {

<span class="token comment">/**
 * 业务: 文件上传入门案例
 * URL:  http://localhost:8091/file/upload
 * 参数:  file=[101001010111]
 * 返回值: SysResult对象(ImageVO)
 * 知识回顾: 字节流/字符流/缓存流  默认的语法复杂
 * 高级API:  SpringMVC 专门针对与流,开发了一个高级API
 * 文件上传步骤:
 *      1.获取文件上传名称
 *      2.准备文件上传的目录
 *      3.准备全文件的路径   目录/文件名称
 *      4.实现上传
 */</span>
<span class="token annotation punctuation">@PostMapping</span><span class="token punctuation">(</span><span class="token string">"/upload"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token class-name">SysResult</span> <span class="token function">upload</span><span class="token punctuation">(</span><span class="token class-name">MultipartFile</span> file<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">//1.动态获取文件名称</span>
    <span class="token class-name">String</span> fileName <span class="token operator">=</span> file<span class="token punctuation">.</span><span class="token function">getOriginalFilename</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//2.准备文件目录  Linux系统不能识别\</span>
    <span class="token class-name">String</span> dirPath <span class="token operator">=</span> <span class="token string">"F:/images"</span><span class="token punctuation">;</span>
    <span class="token class-name">File</span> dirFile <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>dirPath<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>dirFile<span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">//应该创建一个新目录 创建多级目录</span>
        dirFile<span class="token punctuation">.</span><span class="token function">mkdirs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//3.拼接文件路径</span>
    <span class="token class-name">String</span> filePath <span class="token operator">=</span> <span class="token string">"F:/images/"</span> <span class="token operator">+</span> fileName<span class="token punctuation">;</span>
    <span class="token comment">//4.实现文件上传</span>
    file<span class="token punctuation">.</span><span class="token function">transferTo</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>filePath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token class-name">System</span><span class="token punctuation">.</span>out<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span><span class="token string">"实现文件上传"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token class-name">SysResult</span><span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

1.3.5 正则表达式

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

语法:
在这里插入图片描述
匹配确定的次数:
例子: a{5} a出现5次
a{5,} a出现至少5次 >=5
a{5,8} a出现只能 5-8次
在这里插入图片描述
匹配任意字符
在这里插入图片描述
匹配字符区间范围
[xyz] 该字符只能取值 x/y/z中的一个 匹配单个字符
^ xyz 该字符除了xyz之外的其他字符.
[a-z] 该字符必须 a-z的区间中的一个
[0-9] 该字符必须 0-9的区间中的一个
在这里插入图片描述
分组结构:
(png|jpg|gif) 字符只能匹配png|jpg|gif中的一个 匹配的是字符串
在这里插入图片描述

1.3.6 编辑FileController

 /**
     * 需求分析: 文件上传完成之后,需要返回ImageVO对象
     * @param file
     * @return
     * @throws IOException
     */
    @PostMapping("/upload")
    public SysResult upload(MultipartFile file) throws IOException {

    <span class="token class-name">ImageVO</span> imageVO <span class="token operator">=</span> fileService<span class="token punctuation">.</span><span class="token function">upload</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//不成功 应该返回null</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>imageVO <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">return</span> <span class="token class-name">SysResult</span><span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token class-name">SysResult</span><span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span>imageVO<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

1.3.6 编辑FileServiceImpl(部分)

@Service
public class FileServiceImpl implements FileService{

<span class="token comment">/**
 * 1.校验文件上传的类型   jpg|png|gif
 * 2.应该校验文件是否为恶意程序.   木马.exe.jpg
 * 3.为了提高检索效率  应该分目录存储.  1.hash方式  xx/xx/xx/xx 分布不均
 *                                 2.日期格式   yyyy/MM/dd  目录不断增长
 * 4.防止文件重名        UUID.jpg
 * @param file
 * @return
 */</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">ImageVO</span> <span class="token function">upload</span><span class="token punctuation">(</span><span class="token class-name">MultipartFile</span> file<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">//1.图片类型的校验  正则表达式  aaa.jpg</span>
    <span class="token class-name">String</span> fileName <span class="token operator">=</span> file<span class="token punctuation">.</span><span class="token function">getOriginalFilename</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//字符大小写 干扰正则的判断  将所有的文件转化为小写字母</span>
    fileName <span class="token operator">=</span> fileName<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//程序不满足正则, 则用户上传的图片有问题</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>fileName<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">"^.+\\.(jpg|png|gif)$"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>

        <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//2. 校验文件是否为恶意程序  判断依据 属性宽度和高度  aa.exe.jpg</span>
    <span class="token keyword">try</span> <span class="token punctuation">{<!-- --></span>
        <span class="token comment">//该对象是用来专门操作图片的API</span>
        <span class="token class-name">BufferedImage</span> bufferedImage <span class="token operator">=</span> <span class="token class-name">ImageIO</span><span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span><span class="token function">getInputStream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">int</span> height <span class="token operator">=</span> bufferedImage<span class="token punctuation">.</span><span class="token function">getHeight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">int</span> width  <span class="token operator">=</span> bufferedImage<span class="token punctuation">.</span><span class="token function">getWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//如果有一项为0 则表示一定不是正经的图片</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>height <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">||</span> width <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token comment">//3.分目录存储文件  /yyyy/MM/dd</span>
        <span class="token comment">//3.1 准备文件根目录</span>
        <span class="token class-name">String</span> localDir <span class="token operator">=</span> <span class="token string">"F:/images"</span><span class="token punctuation">;</span>
        <span class="token class-name">String</span> dateDir <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SimpleDateFormat</span><span class="token punctuation">(</span><span class="token string">"/yyyy/MM/dd/"</span><span class="token punctuation">)</span>
                         <span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//拼接文件目录  F:/images/2021/MM/dd/</span>
        <span class="token class-name">String</span> dirPath <span class="token operator">=</span> localDir <span class="token operator">+</span> dateDir<span class="token punctuation">;</span>
        <span class="token class-name">File</span> dirFile <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>dirPath<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//3.2 判断是否需要创建目录</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>dirFile<span class="token punctuation">.</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//不存在目录时,应该创建目录</span>
            dirFile<span class="token punctuation">.</span><span class="token function">mkdirs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token comment">//4.防止文件重名 UUID.后缀</span>
        <span class="token class-name">String</span> uuid <span class="token operator">=</span> UUID<span class="token punctuation">.</span><span class="token function">randomUUID</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">"-"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//获取.的下标位置</span>
        <span class="token keyword">int</span> index <span class="token operator">=</span> fileName<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//截取文件类型</span>
        <span class="token class-name">String</span> fileType <span class="token operator">=</span>  fileName<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//拼接新文件路径</span>
        <span class="token class-name">String</span> realFileName <span class="token operator">=</span> uuid <span class="token operator">+</span> fileType<span class="token punctuation">;</span>

        <span class="token comment">//作业!!!!:  目录/文件名 实现文件上传  前端暂时不管</span>


    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">IOException</span> e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        e<span class="token punctuation">.</span><span class="token function">printStackTrace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>    <span class="token comment">//如果程序执行报错,则返回null</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
程序员 阿酷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue_shop后台管理系统—商品列表
Minnor的博客
07-19 2967
$router.push()实现了路由跳转，在添加商品组件中，用到了挺多新方法和新思路，实现了Tabs标签和对应的步骤条之间的数据联动；阻止标签页的替换；新组件Upload上传照片：每次上传图片时都需要为上传组件手动设置headers请求头，同时在请求头对象中，绑定Authorization字段，因为Upload上传组件没有调用axios；富文本编辑器组件 quill- editor；在添加动态参数和静态属性时出现了数组和字符串的矛盾，所以用到了lodash库中的_.cloneDeep()方法进行深拷贝..
基于Vue+Nodejs+MongoDB超市后台商品订单管理系统设计
10-23
## 开发软件： WebStorm 开发环境：Nodejs + ...server 目录是用Node、Express写的服务端，主要负责处理客户端发来的业务请求 vue-api-server 目录是本项目用到的课程上的服务端api接口.里面主要涉及到用户角色权限接口
vue后台管理模块业务
m0_68907098的博客
11-08 689
后台管理模块
vue电商管理后台前端项目
初辰的博客
03-17 1988
电商后台项目概述 管理员使用的业务服务：PC后台管理端 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 前端项目是基于Vue的SPA（单页应用程序）项目，前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 项目及数据库准备 恢复依赖包安装 进入 vue-api-server 目录，运行如下命令，进行恢复安装 npm install 数据库创建及导入 新建数据库 shop_admin，找到
Vue后台管理系统项目总结
热门推荐
qq_29607677的博客
06-16 1万+
项目背景： 对于一家企业来说，拥有一个完整网站是很重要的事情，网站包括前端设计和后端的信息管理。简单来说，前端就是我们当我们打开一个网站的时候，肉眼所能看到的一切，而后台则是我们所看不到的一个信息管理系统。网站后台管理系统主要是用于对网站前台的信息管理，如文字、图片、影音、和其他日常使用文件的发布、更新、删除等操作，同时也包括会员信息、订单信息、访客信息的统计和管理。简单来说就是对网站数据库和文件的快速操作和管理系统，以使得前台内容能够得到及时更新和调整。现在企业对于网站建设的要求越来越高，很多不想自己浪
Vue+element 商品分类业务实现
benlalagang的博客
08-30 873
商品参数的业务实现、使用vue-table-with-tree-grid 外部包 注册树形表格组件、编辑、删除、新增数据 与之前的步骤大同小异，这里注意 新增分类要携带参数： 父级分类的id和自身的分类等级
Vue3全家桶之数据管理
江拥羡橙的博客
05-24 1055
我们都知道Vue框架是通过数据驱动的，所以数据的重要性不言而喻，那么有哪些数据需要管理又是如何进行管理的呢？本节我们就来聊一聊Vue3中的数据管理。
超市商品管理系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
Designer 小郑的技术博客
06-05 9564
基于JAVA+Vue+SpringBoot+MySQL实现超市商品管理系统，拥有超市区域模块、超市货架模块、商品类型模块、商品档案模块，给消费者、超市管理员所使用。
Vue电商后台管理
weixin_45860609的博客
08-14 2122
项目初始化 1 安装Vue 脚手架 npm install -g @vue/cli 2 通过Vue脚手架创建项目 输入vue ui 进入vue管理界面 选择创建 在指定的目录下创建项目 选择手动预设 勾选以下这些功能 点击下一步后 点击创建项目 3 配置element-ui组件库 配置插件 将其改为按需导入 5 配置axios库 安装axios运行依赖 将代码托管至远程github仓储 后台项目环境配置 安装phpstudy 配置安装数据库 解压vue_api_server文
Vue状态管理
ProChick's Blog
11-05 1292
状态管理1.什么是状态管理？2.下载使用3.管理模式4.配置选项5.状态管理中的API 1.什么是状态管理？ 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长，所以 Vuex是Vue团队提供的一套组件状态管理维护的解决方案 作用 进一步完善了Vue基础代码功能 使Vue组件状态更加容易维护 为大型项目开发提供了强大的技术支持 使用 <script src="vue.js"></script> <script src="vuex.js"
springboot和vue的药品管理系统
qq_46199553的博客
09-09 1187
60年代，美国开始了医药管理的研究。清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，相对于文字说明更加直观。药品管理系统实现了药品的库存管理，对于药品的库存管理，我们主要分为药品出入库，以及我们的问题药品的检查，药品出入库，我们判断库存中是否存在，如果不存在，我们直接将药品插入，如果药品存在，我们则添加入库，则库存里面的库存数量会发生变化，修改出入库的数量也会判断库存是否存在这么多的数量等操作，我们会对库存中药品的保质期进行对应的检查，显示保质期等信息，也会对问题药品进行增删改查等操作。
Vue电商后台管理系统
06-15
Vue电商管理后台。电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目。用于管理用户账号，商品分类，商品信息，订单，数据统计等业务功能
基于SpringBoot+Vue实现的资产出入库管理系统仓库管理系统源码+数据库+项目文档，Java毕业设计
04-21
资产类型维护、资产入库、资产领用出库、资产出库审核这四大核心业务，适用于中小企业管理行政办公资产。系统给每个资产档案提供一个唯一标识，对物品入库、出库等各个作业环节进行快速批量的数据采集，确保中小企业...
基于Vue的甜品店后台管理系统设计源码
05-26
本项目是基于Vue的甜品店后台管理系统设计源码，包含320个文件，其中...系统包括登录功能、用户管理功能、权限管理功能、店铺管理功能、商品管理功能、订单管理功能以及数据统计等功能，该项目运用Vue框架进行开发。
基于node+vue的电商后台管理系统源码
09-01
我们的项目是一个基于Node.js和Vue.js的电商后台管理系统源码，旨在帮助开发人员快速构建和管理电商网站的后台系统。 我们的项目源码结合了Node.js和Vue.js这两个流行的技术框架，以提供高效、可扩展和可靠的Web...
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 294
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 199
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 346
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 804
vue初使用实例之笔记本
vue电商后台管理项目业务描述
08-09
总之，vue电商后台管理项目是一个用于方便管理电商网站后台业务的项目，通过使用Vue.js框架来实现对商品、订单、用户和权限进行管理。该项目具备了丰富的功能和用户友好的界面，可以提高管理员的工作效率和用户体验...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值