文章目录

• 1. 商品列表展现
• • 1.1 表设计
  • 1.2 POJO设计
  • • 1.2.1 编辑Item表
    • 1.2.2 编辑ItemDesc
  • 1.3 商品页面跳转
  • 1.4 商品列表展现
  • • 1.4.1 业务接口说明
    • 1.4.2 编辑ItemController
    • 1.4.3 编辑ItemService
    • 1.4.4 编辑分页配置类
  • 1.5 商品新增实现
  • • 1.5.1 关于商品信息说明
    • 1.5.2 关于商品新增接口说明
    • 1.5.3 封装ItemVO对象
    • 1.5.4 修改表字段类型
    • 1.5.5 页面参数传递
    • 1.5.6 编辑ItemCatController
    • 1.5.7 编辑ItemCatService
  • 1.6 商品删除操作
  • • 1.6.1 商品删除业务接口
    • 1.6.2 编辑ItemController
    • 1.6.3 编辑ItemService
• 2 文件上传操作
• • 2.1 文件上传业务说明
  • 2.2 文件上传业务说明
  • 2.3 ImageVO对象封装
  • 2.4 文件上传入门案例
  • 2.5 文件上传完整代码
  • • 2.5.1 编辑FileController
    • 2.5.2 编辑FileService

1. 商品列表展现

1.1 表设计

1. 商品表设计
   
   2.商品详情表设计
   
   表关系: 一个商品对应一个商品详情, item.id = item_desc.id 商品表的Id和详情表的ID是一致的.

1.2 POJO设计

1.2.1 编辑Item表

1.2.2 编辑ItemDesc

1.3 商品页面跳转

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 ItemCat from '../components/items/ItemCat.vue'
import Item from '../components/items/Item.vue'
import AddItem from '../components/items/addItem.vue'
//使用路由机制
Vue.use(VueRouter)
const routes = [{path: '/', redirect: '/login'},{path: '/login', component: Login},{path: '/elementUI', component: ElementUI},{path: '/home', component: Home, children: [{path: '/user', component: User},{path: '/itemCat', component: ItemCat},{path: '/item', component: Item},{path: '/item/addItem', component: AddItem}]},
]

1.4 商品列表展现

1.4.1 业务接口说明

• 请求路径: /item/getItemList?query=&pageNum=1&pageSize=10
• 请求类型: get
• 请求参数: 使用pageResult对象接收

• 返回值结果:

1.4.2 编辑ItemController

package com.jt.controller;import com.jt.service.ItemService;
import com.jt.vo.PageResult;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;@RestController
@CrossOrigin
@RequestMapping("/item")
public class ItemController {@Autowiredprivate ItemService itemService;/*** 业务需求: 商品列表展现* URL地址: /item/getItemList?query=&pageNum=1&pageSize=10* 参数:    pageResult对象* 返回值:  SysResult(pageResult对象)*/@GetMapping("/getItemList")public SysResult getItemList(PageResult pageResult){//3个参数pageResult = itemService.getItemList(pageResult); //3+2return SysResult.success(pageResult);}}

1.4.3 编辑ItemService

package com.jt.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jt.mapper.ItemDescMapper;
import com.jt.mapper.ItemMapper;
import com.jt.pojo.Item;
import com.jt.vo.PageResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;import java.util.List;@Service
public class ItemServiceImpl implements ItemService{@Autowiredprivate ItemMapper itemMapper;@Autowiredprivate ItemDescMapper itemDescMapper;/*** Sql: select * from item limit 起始位置,显示条数* 参数说明:*      1.page 用来封装分页参数 第几页/每页多少条*      2.queryWrapper 查询的条件构造器* @param pageResult* @return*/@Overridepublic PageResult getItemList(PageResult pageResult) {//1.构建模糊查询boolean flag = StringUtils.hasLength(pageResult.getQuery());QueryWrapper<Item> queryWrapper = new QueryWrapper<>();queryWrapper.like(flag,"title", pageResult.getQuery());//2.定义分页对象   2IPage<Item> page = new Page<>(pageResult.getPageNum(),pageResult.getPageSize());//page的参数由原来的页数/条数 经过业务调用添加了 总记录数和分页的结果page = itemMapper.selectPage(page,queryWrapper);//2+2long total = page.getTotal();   //获取总数List<Item> rows = page.getRecords(); //获取分页的结果return pageResult.setTotal(total).setRows(rows);}
}

1.4.4 编辑分页配置类

说明: MybatisPlus可以实现跨数据库. 用户操作的是对象,但是由MP动态的生成对应的Sql语句.
如果需要使用分页,则需要额外的指定数据库版本. 需要编辑配置类.

@Configuration  //标识配置类
public class MybatisPlusConfig {//将自定义的对象交给Spring容器管理 告诉MP 使用的mysql/mariadb数据库@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));return interceptor;}
}

1.5 商品新增实现

1.5.1 关于商品信息说明

说明: item的基本信息与ItemDesc的详情信息 可以采用对象的方式进行包裹.
例如: {item: item的数据信息, itemDesc: itemDesc的数据信息}

1.5.2 关于商品新增接口说明

• 请求路径: http://localhost:8091/item/saveItem
• 请求类型: post
• 前端传递参数分析

	{item: {images: "/2021/05/20/da0c1d4781c1499399f090da8b60f359.jpg,/2021/05/20/2ac1c34776a7465887eb019655354c3c.jpg"itemCatId: 560num: "100"price: 718800sellPoint: "【华为官方直供,至高12期免息0首付,原装正品】送华为原装无线充+运动蓝牙耳机+蓝牙音箱+三合一多功能数据线+钢化膜等！"title: "华为P40 Pro 5G手机【12期免息可选送豪礼】全网通智能手机"},itemDesc: {itemDesc: "
品牌： .......      "}}

1.5.3 封装ItemVO对象

@Data
@Accessors(chain = true)
public class ItemVO implements Serializable {private Item item;private ItemDesc itemDesc;
}

1.5.4 修改表字段类型

说明: 文本操作需要大量的存储空间,所以改为mediumtext

1.5.5 页面参数传递

1.5.6 编辑ItemCatController

  /*** 实现商品新增操作* URL地址: /item/saveItem* 请求类型: post请求* 参数信息: itemVO对象 JSON*/@PostMapping("/saveItem")public SysResult saveItem(@RequestBody ItemVO itemVO){//Item/ItemDescitemService.saveItem(itemVO);return SysResult.success();}

1.5.7 编辑ItemCatService

 /*** 需求: 完成2部分入库操作* 步骤1: 完成Item入库操作* 步骤2: 完成ItemDesc入库操作 item.id=itemDesc.id* mybatis 知识讲解*  *         新增sql*  *  MP知识讲解:*      MP基于对象的方式操作数据,如果实现数据的入库操作,*      则数据都会与对象绑定,动态回显.*  难点知识: 如何实现数据回显!!!!!!* @param itemVO*/@Override@Transactionalpublic void saveItem(ItemVO itemVO) {//1.步骤1 实现Item对象入库Item item = itemVO.getItem().setStatus(true);//刚开始id为null,入库操作时候,id在数据库中会自动赋值//赋值之后,对象中的ID依然为nullitemMapper.insert(item);//2.步骤2 实现ItemDesc对象入库ItemDesc itemDesc = itemVO.getItemDesc();itemDesc.setId(item.getId());itemDescMapper.insert(itemDesc);}

1.6 商品删除操作

1.6.1 商品删除业务接口

• 请求路径: /item/deleteItemById
• 请求类型: delete
• 请求参数:

• 返回值结果:

1.6.2 编辑ItemController

/*** 业务: 实现商品删除操作* URL: /item/deleteItemById?id=xxx* 参数: id* 返回值: SysResult对象*/@DeleteMapping("/deleteItemById")public SysResult deleteItemById(Integer id){itemService.deleteItemById(id);return SysResult.success();}

1.6.3 编辑ItemService

@Override@Transactionalpublic void deleteItemById(Integer id) {itemMapper.deleteById(id);itemDescMapper.deleteById(id);}

2 文件上传操作

2.1 文件上传业务说明

说明:当用户选择多张图片时,则是一张一张的传输.

2.2 文件上传业务说明

• 请求路径: http://localhost:8091/file/upload
• 请求类型: post
• 请求参数:

• 返回值结果:

• ImageVO对象说明

2.3 ImageVO对象封装

package com.jt.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO {private String virtualPath; //动态变化的路径private String urlPath;  //网络地址private String fileName; //图片名称
}

2.4 文件上传入门案例

package com.jt.controller;import com.jt.vo.SysResult;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.io.InputStream;@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {/*** URL: /file/upload* 类型: post* 参数: file=字节信息* 返回值: SysResult(ImageVO)* 知识点:*   SpringMVC针对与IO操作开发了MultipartFile*   底层实现就是常规IO流,简化了用户的操作过程.无需手动关流*   SpringMVC中默认支持最大1M* 步骤:*      1.获取文件名称*      2.准备文件路径*      3.准备文件上传的全路径*      4.实现文件上传操作*/@PostMapping("/upload")public SysResult upload(MultipartFile file) throws IOException {//1.获取文件名称  a.jpgString fileName = file.getOriginalFilename();//2.准备文件目录String dir = "D:/project3/images";File dirFile = new File(dir);if(!dirFile.exists()){//判断目录是否存在dirFile.mkdirs(); //创建多级目录}String path = dir + "/" + fileName;//实现文件上传file.transferTo(new File(path));return SysResult.success();}
}

2.5 文件上传完整代码

2.5.1 编辑FileController

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {@Autowiredprivate FileService fileService;@PostMapping("/upload")public SysResult fileUpload(MultipartFile file){ImageVO imageVO = fileService.upload(file);if(imageVO == null ){return SysResult.fail();}return SysResult.success(imageVO);}}

2.5.2 编辑FileService

package com.jt.service;import com.jt.vo.ImageVO;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.IOException;@Service
public class FileServiceImpl implements FileService{/*** 思路:*  1.校验文件是否为图片  校验图片类型*  2.防止文件为恶意程序  木马.exe.jpg*  3.分目录存储         按照时间维度划分*  4.防止文件重名       UUID*/@Overridepublic ImageVO upload(MultipartFile file) {//1.获取图片名称,全部转化为小写String fileName = file.getOriginalFilename().toLowerCase();if(!fileName.matches("^.+\\.(jpg|png|gif)$")){return null;}//2.通过校验宽度和高度判断是否为图片 bufferedImage图片包装对象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();throw new RuntimeException(e);}return null;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！