Product list display

1. The product list shows

1.1 Table design

1. Commodity list design 2. Product details table design Table relations : One item corresponds to one item details , item.id = item_desc.id List of commodities Id And detail sheet ID It's consistent .

1.2 POJO Design

1.2.1 edit Item surface

 

1.2.2 edit ItemDesc

 

1.3 The product page jumps to

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'
 // Use routing mechanism 
 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 The product list shows

1.4.1 Business interface description

• Request path : /item/getItemList?query=&pageNum=1&pageSize=10

• Request type : get

• Request parameters : Use pageResult Object reception

Parameter name	Parameter description	Notes
query	User query data	It can be for null
pageNum	Number of pages for paging query	Must be assigned, cannot be null
pageSize	Number of paged queries	Must be assigned, cannot be null

• Return value result :

Parameter name	Parameter description	remarks
status	State information	200 Indicates that the server request was successful 201 Indicates that the server is abnormal
msg	The prompt information returned by the server	It can be for null
data	Business data returned by the server	Item paging object

1.4.2 edit 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 {
 ​
     @Autowired
     private ItemService itemService;
 ​
     /**
      *  Business needs :  The product list shows 
      * URL Address : /item/getItemList?query=&pageNum=1&pageSize=10
      *  Parameters :    pageResult object 
      *  Return value :  SysResult(pageResult object )
      */
     @GetMapping("/getItemList")
     public SysResult getItemList(PageResult pageResult){//3 Parameters 
 ​
         pageResult = itemService.getItemList(pageResult); //3+2
         return SysResult.success(pageResult);
     }
 ​
 }

1.4.3 edit 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{
 ​
     @Autowired
     private ItemMapper itemMapper;
     @Autowired
     private ItemDescMapper itemDescMapper;
 ​
     /**
      * Sql: select * from item limit  The starting position , Number of display bars 
      *  Parameter description :
      *      1.page  Used to encapsulate paging parameters   Page / How many pieces per page 
      *      2.queryWrapper  Query condition constructor 
      * @param pageResult
      * @return
      */
     @Override
     public PageResult getItemList(PageResult pageResult) {
         //1. Build fuzzy query 
         boolean flag = StringUtils.hasLength(pageResult.getQuery());
         QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
         queryWrapper.like(flag,"title", pageResult.getQuery());
 ​
         //2. Define paging objects    2
         IPage<Item> page = new Page<>(pageResult.getPageNum(),pageResult.getPageSize());
         //page The parameters of are determined by the original number of pages / Number of pieces   After business call, add   Total records and paging results 
         page = itemMapper.selectPage(page,queryWrapper);//2+2
         long total = page.getTotal();   // Get total 
         List<Item> rows = page.getRecords(); // Get the result of paging 
 ​
         return pageResult.setTotal(total).setRows(rows);
     }
 }

1.4.4 Edit paging configuration class

explain : MybatisPlus It can realize cross database . The user operates on the object , But by MP Dynamically generate the corresponding Sql sentence . If you need to use paging , You need an additional specified database version . You need to edit the configuration class .

@Configuration  // Identity configuration class 
 public class MybatisPlusConfig {
 ​
     // Give the custom object to Spring Container management   tell MP  The use of mysql/mariadb database 
     @Bean
     public MybatisPlusInterceptor mybatisPlusInterceptor(){
         MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
         interceptor.addInnerInterceptor
                 (new PaginationInnerInterceptor(DbType.MARIADB));
         return interceptor;
     }
 }

1.5 Commodity addition is realized

1.5.1 About product information description

explain : item Basic information and ItemDesc Details of It can be wrapped as an object . for example : {item: item Data information , itemDesc: itemDesc Data information }

 

1.5.2 About the new interface description of the product

• Request path : http://localhost:8091/item/saveItem

• Request type : post

• Front end transfer parameter analysis

  {
         item: {
             images: "/2021/05/20/da0c1d4781c1499399f090da8b60f359.jpg,/2021/05/20/2ac1c34776a7465887eb019655354c3c.jpg"
             itemCatId: 560
             num: "100"
             price: 718800
             sellPoint: "【 Huawei official direct supply , Supreme 12 Interest free period 0 A down payment , Original genuine product 】 Send Huawei original wireless charger + Sports Bluetooth headset + Bluetooth speakers + Three in one multifunctional data line + Steel film, etc ！"
             title: " Huawei P40 Pro 5G mobile phone 【12 The interest free period can be given as a gift 】 All Netcom smartphone "
         },
         itemDesc: {
                 itemDesc: "<ul><li> brand ：&nbsp;<a href=https://list.jd.com/list.html".......      "
         }
     }

• Request parameters : Use ItemVO Object reception

Parameter name	Parameter type	Parameter description	remarks
item	Item	Commodity basic information object encapsulation	Not for null
itemDesc	ItemDesc	Product details	Not for null

• ItemVO Parameters, :

• Item object

Parameter name	Parameter type	Parameter description	remarks
title	String	Item title information	Not for null
sellPoint	String	Selling point information	Not for null
price	Integer	Commodity price information	Not for null The data needs to be expanded 100 times
num	Integer	Product quantity information	Not for null
images	String	Product picture address information	Not for null
itemCatId	Integer	Product parent classification ID	Not for null
status	Boolean	Product status information	Not for null

• itemDesc object

•       In order to reduce the coupling of commodity submission code , The large field information details , use ItemDesc Object to encapsulate 

Parameter name	Parameter type	Parameter description	remarks
id	Integer	goods Id Information	because Item and ItemDesc It's a one-on-one relationship So we need to rely on Item Object's Id value
itemDesc	String	Product details	It contains a lot of html sentence

• Return value result :

Parameter name	Parameter description	remarks
status	State information	200 Indicates that the server request was successful 201 Indicates that the server is abnormal
msg	The prompt information returned by the server	It can be for null
data	Business data returned by the server	It can be for null

1.5.3 encapsulation ItemVO object

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

1.5.4 Modify the table field type

explain : Text manipulation requires a lot of storage space , So instead of mediumtext

1.5.5 Page parameter passing

 

1.5.6 edit ItemCatController

   /**
      *  Realize the operation of adding goods 
      * URL Address : /item/saveItem
      *  Request type : post request 
      *  parameter information : itemVO object  JSON
      */
     @PostMapping("/saveItem")
     public SysResult saveItem(@RequestBody ItemVO itemVO){//Item/ItemDesc
 ​
         itemService.saveItem(itemVO);
         return SysResult.success();
     }

1.5.7 edit ItemCatService

 /**
     *  demand :  complete 2 Some warehousing operations 
     *  step 1:  complete Item Warehousing operation 
     *  step 2:  complete ItemDesc Warehousing operation  item.id=itemDesc.id
     * mybatis  Knowledge explanation 
     *  <insert id="xxxx" useGeneratedKeys="true"
     *             keyColumn="id"
     *             keyProperty="id">
     *          newly added sql
     *  </insert>
     *  MP Knowledge explanation :
     *      MP Manipulate data in an object-based way , If the data warehousing operation is realized ,
     *       Then the data will be bound to the object , Dynamic echo .
     *   Difficult knowledge :  How to realize data echo !!!!!!
     * @param itemVO
     */
    @Override
    @Transactional
    public void saveItem(ItemVO itemVO) {
        //1. step 1  Realization Item Object warehousing 
        Item item = itemVO.getItem().setStatus(true);
        // At first id by null, When warehousing ,id It will be assigned automatically in the database 
        // After the assignment , Object ID Still null
        itemMapper.insert(item);
        //2. step 2  Realization ItemDesc Object warehousing 
        ItemDesc itemDesc = itemVO.getItemDesc();
        itemDesc.setId(item.getId());
        itemDescMapper.insert(itemDesc);
    }

1.6 Product deletion operation

1.6.1 Commodity deletion business interface

• Request path : /item/deleteItemById

• Request type : delete

• Request parameters :

Parameter name	Parameter description	remarks
id	goods id	Not for null

• Return value result :

Parameter name	Parameter description	remarks
status	State information	200 Indicates that the server request was successful 201 Indicates that the server is abnormal
msg	The prompt information returned by the server	It can be for null
data	Business data returned by the server	It can be for null

1.6.2 edit ItemController

 /**
      *  Business :  To delete goods 
      * URL: /item/deleteItemById?id=xxx
      *  Parameters : id
      *  Return value : SysResult object 
      */
     @DeleteMapping("/deleteItemById")
     public SysResult deleteItemById(Integer id){
 ​
         itemService.deleteItemById(id);
         return SysResult.success();
     }

1.6.3 edit ItemService

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

2 File upload operation

2.1 File upload business description

explain : When the user selects multiple pictures , It is a transmission one by one .

2.2 File upload business description

• Request path : http://localhost:8091/file/upload

• Request type : post

• Request parameters :

Parameter name	Parameter description	remarks
file	Parameter name of file upload	file It carries binary information

• Return value result :

Parameter name	Parameter description	remarks
status	State information	200 Indicates that the server request was successful 201 Indicates that the server is abnormal
msg	The prompt information returned by the server	It can be for null
data	Business data returned by the server	return ImageVO object

• ImageVO Object description

Parameter name	Parameter type	Parameter description	remarks
virtualPath	String	Picture actual path Does not contain disk information	for example : 2021/11/11/a.jpg No need to write disk address
urlPath	String	picture url Access address	http://image.jt.com/2021/11/11/a.jpg You need to specify a domain name address
fileName	String	File name after file upload	UUID.type

2.3 ImageVO Object encapsulation

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; // Dynamic path , The disk information is not included. It is dead ahead , Rear movement .
     private String urlPath;  // network address , picture url Access address 
     private String fileName; // Image name 
 }

2.4 File upload introduction case

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
      *  type : post
      *  Parameters : file= Byte information 
      *  Return value : SysResult(ImageVO)
      *  Knowledge point :
      *   SpringMVC In view of the with IO The operation developed MultipartFile
      *    The underlying implementation is routine IO flow , Simplify the user's operation process . There is no need to close the flow manually 
      *   SpringMVC By default, the maximum support is 1M
      *  step :
      *      1. Get the file name 
      *      2. Prepare file path 
      *      3. Prepare the full path of file upload 
      *      4. Realize file upload operation 
      */
     @PostMapping("/upload")
     public SysResult upload(MultipartFile file) throws IOException {
         //1. Get the file name   a.jpg
         String fileName = file.getOriginalFilename();
         //2. Prepare the file directory 
         String dir = "D:/project3/images";
         File dirFile = new File(dir);
         if(!dirFile.exists()){// Determine whether the directory exists 
             dirFile.mkdirs(); // Create multi-level directory 
         }
         String path = dir + "/" + fileName;
         // File upload 
         file.transferTo(new File(path));
         return SysResult.success();
     }
 }

2.5 File upload complete code

2.5.1 edit FileController

@RestController
 @CrossOrigin
 @RequestMapping("/file")
 public class FileController {
 ​
     @Autowired
     private 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 edit 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{
 ​
     /**
      *  Ideas :
      *  1. Check whether the file is a picture    Check image type 
      *  2. Prevent files from being malicious programs    Trojan horse .exe.jpg
      *  3. Sub directory storage           According to the time dimension 
      *  4. Prevent duplicate names of files        UUID
      */
     @Override
     public ImageVO upload(MultipartFile file) {
         //1. Get the picture name , All in lowercase 
         String fileName = file.getOriginalFilename().toLowerCase();
         if(!fileName.matches("^.+\\.(jpg|png|gif)$")){
             return null;
         }
 ​
         //2. Judge whether it is a picture by checking the width and height  bufferedImage Picture wrapping object 
         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) {
             // In general, in order not to affect the code structure , Will check for anomalies , Convert to runtime exception 
             e.printStackTrace();
             throw new RuntimeException(e);
         }
 ​
         return null;
     }
 }