（五）轮播图管理与文件上传（上）

实体与数据库

• 类名：Banner
• 表名：blog_banner

代码生成

属性列表

title----标题
link----跳转链接
cover----图片
ordered----顺序
summary----描述信息

实体代码抽取

package cn.kevinlu98.pojo;

import lombok.Getter;
import lombok.RequiredArgsConstructor;
import lombok.Setter;
import lombok.ToString;
import org.hibernate.Hibernate;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Objects;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/7 15:45
 * Email: kevinlu98@qq.com
 * Description:
 */
@Getter
@Setter
@ToString
@RequiredArgsConstructor
@Entity
@Table(name = "blog_##{name-en}##")
public class ##{name-en-up}## {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer ##{id}##; //主键

  ##{each}##
    private String ##{ename}##; //##{zname}##
  ##{endeach}##

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || Hibernate.getClass(this) != Hibernate.getClass(o)) return false;
        ##{name-en-up}## ##{name-en}## = (##{name-en-up}##) o;
        return ##{id}## != null && Objects.equals(id, ##{name-en}##.##{id}##);
    }

    @Override
    public int hashCode() {
        return getClass().hashCode();
    }
}

完成基本操作

• 利用代码生成器完成轮播图基本的增删查改操作
• 定义轮播图管理的路由
• 加入几条测试数据

页面改造

• 修改展示图片的那列的内容为图片

  {
    title: '图片',
    field: 'cover',
    formatter: function (value) {
        return `<img src="${value}">`
    }
  },

• 修改顺序那一列内容为输入框

  {
    title: '跳转链接',
    field: 'link',
    formatter: function (value) {
        return `<a href="${value}" target="_blank">${value}</a>`
    }
  },

• 新增一个保存顺序的按钮

  <button type="button" id="lw-order-btn" class="btn btn-default"><i class="fa fa-refresh"></i> 保存顺序</button>

• 修改编辑窗口加入文件上传功能

  <div class="form-group">
    <label>图片 </label>
    <br>
    <img id="lw-image-show" src="/static/admin/image/default.png"
         style="vertical-align: top;width: 60%;border: 1px solid #cccccc;" alt="">
    <button type="button" id="lw-upload-btn" class="btn btn-success"><i class="fa fa-image"></i>上传图片
    </button>
    <input id="lw-upload-hide" type="file" style="display: none">
    <input type="hidden" name="cover" required class="form-control" placeholder="请输入图片...">
  </div>

• 默认图片：

文件上传

• 在项目启动时将用户自定义的文件上传目录映射到/upload/路由

File dir = new File(baseDir);
if (!dir.isDirectory()) {
  // 创建目录
  dir.mkdirs();
}
String absolutePath = dir.getAbsolutePath().replace("./", "") + "/";
log.info("absolutePath:{}", absolutePath);
//  一定要在绝对路径前加上file://表明它是一个本地目录
registry.addResourceHandler("/upload/**").addResourceLocations("file://" + absolutePath);

• 完成文件上传操作，按天分文件夹，文件名称为随机字符串

package cn.kevinlu98.controller;

import cn.kevinlu98.common.Result;
import cn.kevinlu98.enums.ResultEnum;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Objects;
import java.util.UUID;


/**
 * Author: Mr丶冷文
 * Date: 2022/10/8 11:24
 * Email: kevinlu98@qq.com
 * Description:
 */
@Slf4j
@RestController
@RequestMapping("/admin/")
public class UploadController {

    @Value("${upload.base-dir}")
    private String baseDir;

    private static final DateFormat DATA_FORMAT = new SimpleDateFormat("yyyyMMdd/");

    @PostMapping("/upload")
    public Result<String> upload(@RequestParam MultipartFile file) {

        if (!baseDir.endsWith("/")) {
            baseDir += "/";
        }
        // 生成时间分区的目录
        String dateName = DATA_FORMAT.format(new Date());
        String folderPath = baseDir + dateName;
        File folder = new File(folderPath);
        if (!folder.isDirectory()) {
            folder.mkdirs();
        }
        //取上传目录的绝对路径
        String absPath = folder.getAbsolutePath().replace("./", "") + "/";
        //取文件后缀
        String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
        //生成文件名
        String filename = UUID.randomUUID().toString().replace("-", "") + suffix;
        try {
            //上传到服务器
            file.transferTo(new File(absPath + "/" + filename));
        } catch (IOException e) {
            log.error(e.getMessage(), e);
            return Result.error(ResultEnum.RESULT_UPLOAD_FAIL);
        }
        return Result.success("/upload/" + dateName + "/" + filename);
    }
}

• 在管理页面完成js文件上传操作

$('#lw-upload-hide').on('change', function () {
  let file = this.files[0]
  let fd = new FormData();
  fd.append('file', file);
  $.ajax({
    url: '/admin/upload',
    method: 'post',
    data: fd,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: res => {
      if (res.code === 200) {
        $('#lw-image-show').attr('src', res.data);
        $('#data-form [name=cover]').val(res.data);
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
})