Vue+Element(el-upload+el-form的使用)+springboot

目录

1、编写模板

 2、发请求调接口

 3、后端返回数据

1.编写实体类

2.Controller类 

3、interface接口（Service层接口）

 4.Service（接口实现）

5、interface接口（Mapper层接口）

6、xml

4、upload相关参数 

---

 

 说明（该案例是一个el-form和el-upload结合的，逻辑是：需要先保存输入框的内容才能上传图片，分别调用了4（查询，删除、插入，上传图片）个接口）

1、编写模板

 2、发请求调接口

 3、后端返回数据

1.编写实体类

package com.example.goods_admin.entity;

public class Goods extends Page {
    private String id;
    private String name;
    private int price;
    private String imageUrl;
    private String status;

    public Goods() {
        super();
    }
    public Goods(int pageNum, int pageSize, String keyWord) {
        super(pageNum, pageSize, keyWord);
    }
    public Goods(int pageNum, int pageSize, String keyWord, String id, String name, int price, String imageUrl, String status) {
        super(pageNum, pageSize, keyWord);
        this.id = id;
        this.name = name;
        this.price = price;
        this.imageUrl = imageUrl;
        this.status = status;
    }


    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}

2.Controller类 

@RestController
@RequestMapping("/upload")
public class UploadFileController {

    @Autowired
    UploadFileService uploadFileService;

    @PostMapping("/uploadImage")
    public Result uploadImage(@RequestPart MultipartFile[] file,@RequestParam("id") String id) {
        return uploadFileService.uploadImage(file,id);
    }
    @PostMapping("/saveGoods")
    public Result saveGoods(@RequestBody Goods goods) {
        return uploadFileService.saveGoods(goods);
    }

    @PostMapping("/deleteGoodsImage")
    public Result deleteGoodsImage(@RequestBody Goods goods) {
        return uploadFileService.deleteGoodsImage(goods);
    }

    @PostMapping("/selectGoods")
    public Result selectGoods(@RequestBody Goods goods) {
        return uploadFileService.selectGoods(goods);
    }


}

3、interface接口（Service层接口）

public interface UploadFileService {
    Result uploadImage(MultipartFile[] imageFile, String id);

    Result saveGoods(Goods goods);

    Result deleteGoodsImage(Goods goods);


    Result selectGoods(Goods goods);
}

 4.Service（接口实现）

@Service
public class UploadFileServiceImpl implements UploadFileService {
    @Autowired
    UploadFileMapper uploadFileMapper;
    @Override
    public Result uploadImage(MultipartFile[] imageFile, String id) {

        //1、吧图片放到指定的文件夹下
        //2、更新数据


        try {
            // 指定目标文件夹路径
            String folderPath = "D:/imagePath/";

            // 获取文件名
            String fileName ="";

            // 遍历上传的文件数组
            for (MultipartFile file : imageFile) {
                // 获取文件名
                fileName = file.getOriginalFilename();

                // 构建目标文件路径
                Path targetPath = Paths.get(folderPath, fileName);

                // 将文件保存到目标文件夹
                Files.copy(file.getInputStream(), targetPath, StandardCopyOption.REPLACE_EXISTING);
            }
            Goods goods=new Goods();
            goods.setId(id);
            goods.setImageUrl(folderPath+fileName);
            uploadFileMapper.updateGoods(goods);

            Map resultMap = new HashMap<>();
            resultMap.put("name",fileName);
            resultMap.put("url",folderPath+fileName);

            // 文件保存成功，返回相应信息
            return Result.succeed("文件保存成功！",resultMap);
        } catch (Exception e) {
            e.printStackTrace();
            // 文件保存失败，返回错误信息
            return  Result.failed ("文件保存失败！",new HashMap());
        }
    }

    @Override
    public Result saveGoods(Goods goods) {
        goods.setStatus("1");
        String id = UUID.randomUUID().toString();
        goods.setId(id);
        int count=uploadFileMapper.saveGoods(goods);
        if (count==1){
            return Result.succeed("保存成功",id);
        }else{
            return Result.failed("保存失败",id);
        }
    }

    @Override
    public Result deleteGoodsImage(Goods goods) {
        goods.setImageUrl("");
       int count=uploadFileMapper.updateGoods(goods);
        if (count==1){
            return Result.succeed("删除成功");
        }else{
            return Result.failed("删除失败");
        }
    }

    @Override
    public Result selectGoods(Goods goods) {
        int pageNum = goods.getPageNum()==0?1:goods.getPageNum();
        int pageSize = goods.getPageSize()==0?10:goods.getPageSize();

        //1、开启分页查询
        PageHelper.startPage(pageNum,pageSize);

        //2、查询结果
        List goodsList  = uploadFileMapper.selectGoods(goods);

        //3、封装结果
        PageInfo goodsPageInfo = new PageInfo<>(goodsList);

        //4、返回
        return Result.succeed("查询成功",goodsPageInfo);
    }



}

5、interface接口（Mapper层接口）

public interface UploadFileMapper {

    int saveGoods(Goods goods);
    int updateGoods(Goods goods);

    int deleteGoodsImage(Goods goods);


    List selectGoods(Goods goods);
}

6、xml

    
        
        
        
        
        

    
    
        INSERT INTO goods (
        
            id
        
        
            ,name
        
        
            ,price
        
        
            ,imageUrl
        
        
            ,status
        
        ) VALUES (
        
            #{id}
        
        
            ,#{name}
        
        
            ,#{price}
        
        
            ,#{imageUrl}
        
        
            ,#{status}
        
        )
    

    
        delete from user
    
        id = #{id}
    

    
    
        select * from goods
        
            
                name like concat('%', #{keyWord}, '%')
            
            
                and id =#{id}
            
        
    

    
       update goods
        
            name=#{name},
            price=#{price},
            imageUrl=#{imageUrl},
            status=#{status}
        
        where
            id = #{id}
    
    

4、upload相关参数