05.轮播图和主页开发

效果图

设计表

写个轮播图的表

id

轮播图的照片相对路径

添加时间

跳转地址

大标题

小标题

让 ai 给我生成 sql 语句，要把字段的解释也写进去 comment

CREATE TABLE `carousel` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '轮播图ID，主键自增',
  `image_url` varchar(255) NOT NULL COMMENT '轮播图照片的相对路径',
  `jump_url` varchar(255) DEFAULT NULL COMMENT '点击轮播图后的跳转地址',
  `main_title` varchar(100) DEFAULT NULL COMMENT '轮播图大标题',
  `sub_title` varchar(200) DEFAULT NULL COMMENT '轮播图小标题',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '添加时间，默认为当前时间',
  `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '最后更新时间，自动更新',
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '轮播图状态：1-启用，0-禁用',
  `sort_order` int(11) NOT NULL DEFAULT '0' COMMENT '排序序号，数字越小越靠前',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='轮播图表';

文件上传工具类

package com.jf3q.app_back.utils;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

/**
 * 文件上传和删除的工具类
 */
@Component
public class UploadFileUtils {
    private static String UPLOAD_PATH;
    
    @Value("${upload.path}")
    public void setUploadPath(String uploadPath) {
        UPLOAD_PATH = uploadPath;
    }

  
    private static final String[] IMAGE_EXTENSIONS = {".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"};

    /**
     * 图片上传（验证必须是图片格式）
     * @param file 上传的文件
     * @param path 存储路径（相对于UPLOAD_PATH的子路径）
     * @return 文件访问路径
     * @throws IOException 文件操作异常
     * @throws IllegalArgumentException 文件格式不符合要求
     */
    public static String uploadImage(MultipartFile file, String path) throws IOException {
        if (file == null || file.isEmpty()) {
            throw new IllegalArgumentException("文件不能为空");
        }

        String originalFilename = file.getOriginalFilename();
        if (originalFilename == null) {
            throw new IllegalArgumentException("文件名不能为空");
        }

        // 验证文件是否为图片格式
        boolean isImage = false;
        for (String ext : IMAGE_EXTENSIONS) {
            if (originalFilename.toLowerCase().endsWith(ext)) {
                isImage = true;
                break;
            }
        }
        if (!isImage) {
            throw new IllegalArgumentException("文件必须是图片格式（jpg, jpeg, png, gif, bmp, webp）");
        }

        return uploadFile(file, path);
    }

    /**
     * 普通文件上传（不验证格式）
     * @param file 上传的文件
     * @param path 存储路径（相对于UPLOAD_PATH的子路径）
     * @return 文件访问路径
     * @throws IOException 文件操作异常
     */
    public static String uploadFile(MultipartFile file, String path) throws IOException {
        if (file == null || file.isEmpty()) {
            throw new IllegalArgumentException("文件不能为空");
        }

        String originalFilename = file.getOriginalFilename();
        if (originalFilename == null) {
            throw new IllegalArgumentException("文件名不能为空");
        }

        // 确保目录存在
        String uploadPath = UPLOAD_PATH != null ? UPLOAD_PATH : "C:/work/xiaobai/";
        String directoryPath = uploadPath + (path != null && !path.isEmpty() ? path + "/" : "");
        File directory = new File(directoryPath);
        if (!directory.exists()) {
            directory.mkdirs();
        }

        // 生成唯一文件名
        String fileExtension = originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + fileExtension;

        // 保存文件
        File targetFile = new File(directoryPath + newFileName);
        file.transferTo(targetFile);

        // 返回相对访问路径
        return (path != null && !path.isEmpty() ? path + "/" : "") + newFileName;
    }

    /**
     * 删除文件
     * @param filePath 文件相对路径（相对于UPLOAD_PATH）
     * @return 删除成功返回true，失败返回false
     */
    public static boolean deleteFile(String filePath) {
        if (filePath == null || filePath.trim().isEmpty()) {
            return false;
        }

        String uploadPath = UPLOAD_PATH != null ? UPLOAD_PATH : "C:/work/xiaobai/";
        File file = new File(uploadPath + filePath);
        if (file.exists() && file.isFile()) {
            return file.delete();
        }
        return false;
    }
}

swagger3 上传文件无法测试的问题

管理员后台前端实现轮播图功能

注意 mybatisPlus 的分页

this.tableData=res.data.records
        this.pages=res.data.pages
        this.total=res.data.total
        this.pageNum=res.data.current

records 才是后端返回给我们的 page 里面的列表数据

current 才是当前页

图片显示的问题

<el-upload
              class="avatar-uploader"
              :action="baseURL+'/carousel/uploadImg'"
              :headers="headerObj"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="bannerForm.imageUrl" :src="baseURL+'/'+bannerForm.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

1. 注意这个baseURL 的前缀，用来反向代理的

baseURL:process.env.VUE_APP_BASE_API,

这样在数据模型中获取

1. headers 请求头里带上 token

前台主页展示轮播图

注意拦截器里面要把前台首页放行，不然会被拦截要求传 token

首页压根不需要登录也能访问才对，所以这个地方要放行

启用禁用轮播图

可以模仿之前咱们做的用户管理里的启用禁用功能

一键三连支持下杰哥哦，免费送资料