抽奖系统（3——奖品模块）

1. 图片上传

application.properties 配置上传文件路径

## 文件上传 ##
# 目标路径
pic.local-path=D:/PIC
# spring boot3 升级配置名
spring.web.resources.static-locations=classpath:/static/,file:${pic.local-path}

tip：

1. 如果访问的是本地路径，需要添加配置项：：spring.web.resources.static-locations（springboot 3 升级过配置名，原本为 spring.resources.static-locations）

2. 访问静态资源不做拦截：AppConfig 类中 excludes 新增 "/*.jpg" 或者 "/*.png"

图片服务 PictureService 接口定义

package com.example.lotterysystem.service;import org.springframework.web.multipart.MultipartFile;public interface PictureService {/*** 保存图片** @param multipartFile：上传文件的工具类* 后面上传完图片后，需要将图片保存到项目中，因此需要一个索引来找到图片* @return 返回值 String 就是索引：上传后的文件名（唯一）*/String savePicture(MultipartFile multipartFile);
}

接口实现 PictureServiceImpl

package com.example.lotterysystem.service.impl;import com.example.lotterysystem.common.errorcode.ServiceErrorCodeConstants;
import com.example.lotterysystem.common.exception.ServiceException;
import com.example.lotterysystem.service.PictureService;
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 PictureServiceImpl implements PictureService {@Value("${pic.local-path}")private String localPath;@Overridepublic String savePicture(MultipartFile multipartFile) {// 创建目录File dir = new File(localPath);if (!dir.exists()) {dir.mkdirs();}// 创建索引 aaa.jpg -> xxx.jpg// 第一步：需要拿到当前文件的全名称，如：aaa.jpgString filename = multipartFile.getOriginalFilename();assert filename != null;// 第二步：拿到当前文件的后缀名，如：.jpgString suffix = filename.substring(filename.lastIndexOf("."));// 第三步：生成索引，如：xxx// 第四步：拼接 xxx.jpg（拼接为自己管控的文件名）filename = UUID.randomUUID() + suffix;// 图片保存try {// transferTo 方法将创建好的 multipartFile 保存到自定义的目录(localPath + "/" + filename)中multipartFile.transferTo(new File(localPath + "/" + filename));} catch (IOException e) {throw new ServiceException(ServiceErrorCodeConstants.PIC_UPLOAD_ERROR);}return filename;}
}

Postman 测试

在 D:\pic 目录下就能看到这个上传的图片了

2. 创建奖品

时序图

约定前后端交互接口

[请求] /prize/create  POST

 param: {"prizeName":"吹风机","description":"吹风机","price":100}
 prizePic: Obj-C.jpg  (FILE)

[响应]

{
    "code": 200,
    "data": 17,
    "msg": ""
}

Controller 层接口设计

package com.example.lotterysystem.controller;import com.example.lotterysystem.common.pojo.CommonResult;
import com.example.lotterysystem.common.utils.JacksonUtil;
import com.example.lotterysystem.controller.param.CreatePrizeParam;
import com.example.lotterysystem.service.PictureService;
import com.example.lotterysystem.service.PrizeService;
import jakarta.validation.Valid;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;@RestController
public class PrizeController {private static final Logger logger = LoggerFactory.getLogger(PrizeController.class);@Autowiredprivate PictureService pictureService;@Autowiredprivate PrizeService prizeService;@RequestMapping("/pic/upload")public String uploadPic(MultipartFile file) {return pictureService.savePicture(file);}/*** 创建奖品* @RequestPart：用于接受表单数据的 multipart/form-data** @param param* @param picFile* @return*/@RequestMapping("/prize/create")public CommonResult<Long> createPrizeParam(@Valid @RequestPart("param") CreatePrizeParam param,@RequestPart("prizePic") MultipartFile picFile) {logger.info("createPrizeParam CreatePrizeParam:{}", JacksonUtil.writeValueAsString(param));return CommonResult.success(prizeService.createPrize(param, picFile));}
}

CreatePrizeParam

package com.example.lotterysystem.controller.param;import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;import java.io.Serializable;
import java.math.BigDecimal;@Data
public class CreatePrizeParam implements Serializable {// 奖品名称@NotBlank(message = "奖品名称不能为空！")private String prizeName;// 奖品描述private String description;// 奖品价格@NotNull(message = "奖品价格不能为空！")private BigDecimal price;
}

Service 层接口设计

package com.example.lotterysystem.service;import com.example.lotterysystem.controller.param.CreatePrizeParam;
import org.springframework.web.multipart.MultipartFile;public interface PrizeService {/*** 创建单个奖品** @param param 奖品属性* @param picFile 上传的奖品图片* @return 奖品id*/Long createPrize(CreatePrizeParam param, MultipartFile picFile);
}

接口实现

package com.example.lotterysystem.service.impl;import com.example.lotterysystem.common.errorcode.ServiceErrorCodeConstants;
import com.example.lotterysystem.common.exception.ServiceException;
import com.example.lotterysystem.service.PictureService;
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 PictureServiceImpl implements PictureService {@Value("${pic.local-path}")private String localPath;@Overridepublic String savePicture(MultipartFile multipartFile) {// 创建目录File dir = new File(localPath);if (!dir.exists()) {dir.mkdirs();}// 创建索引 aaa.jpg -> xxx.jpg// 第一步：需要拿到当前文件的全名称，如：aaa.jpgString filename = multipartFile.getOriginalFilename();assert filename != null;// 第二步：拿到当前文件的后缀名，如：.jpgString suffix = filename.substring(filename.lastIndexOf("."));// 第三步：生成索引，如：xxx// 第四步：拼接 xxx.jpg（拼接为自己管控的文件名）filename = UUID.randomUUID() + suffix;// 图片保存try {// transferTo 方法将创建好的 multipartFile 保存到自定义的目录(localPath + "/" + filename)中multipartFile.transferTo(new File(localPath + "/" + filename));} catch (IOException e) {throw new ServiceException(ServiceErrorCodeConstants.PIC_UPLOAD_ERROR);}return filename;}
}

Dao 层接口设计

package com.example.lotterysystem.dao.mapper;import com.example.lotterysystem.dao.dataobject.PrizeDO;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;@Mapper
public interface PrizeMapper {@Insert("insert into prize (name, image_url, price, description)" +" values (#{name}, #{imageUrl}, #{price}, #{description})")@Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")int insert(PrizeDO prizeDO);
}

PrizeDO

package com.example.lotterysystem.dao.dataobject;import lombok.Data;
import lombok.EqualsAndHashCode;import java.math.BigDecimal;@Data
@EqualsAndHashCode(callSuper = true)
public class PrizeDO extends BaseDO{// 奖品名private String name;// 图片索引private String imageUrl;// 价格private BigDecimal price;// 描述private String description;
}

奖品上传测试

可能会出现下面的问题：

1. 被拦截器拦截

在拦截器中设置忽略掉 "/prize/create" 即可，如下：

2. param 转 json 错误 

可能的原因：根据报错提示，可能是 param 转为 json 的方式不是很好（序列化问题）

解决方法：通过一个转换器来进行转换

转换器代码：

package com.example.lotterysystem.common.converter;import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.http.MediaType;
import org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter;
import org.springframework.stereotype.Component;import java.lang.reflect.Type;@Component
public class MultipartJackson2HttpMessageConverter extends AbstractJackson2HttpMessageConverter {protected MultipartJackson2HttpMessageConverter(ObjectMapper objectMapper) {// MediaType.APPLICATION_OCTET_STREAM 表示这个转换器用于处理二进制流数据，通常用于文件上传。super(objectMapper, MediaType.APPLICATION_OCTET_STREAM);}@Overridepublic boolean canWrite(Class<?> clazz, MediaType mediaType) {// 转换器不用于写入（即不用于响应的序列化）return false;}@Overridepublic boolean canWrite(Type type, Class<?> clazz, MediaType mediaType) {return false;}@Overrideprotected boolean canWrite(MediaType mediaType) {return false;}
}

再次运行：

奖品创建页面前端实现

// create-prizes.html<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>创建奖品</title><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css"><link rel="stylesheet" href="./css/base.css"></link><style>body {font-family: Arial, sans-serif;background-color: white;margin: 0;padding: 0;}.container {max-width: 800px;margin: 10px auto;padding: 20px;background-color: #fff;/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input[type=text],.form-group input[type=url] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}.form-group textarea {width: 100%;height: 100px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}.btn {border: none;border-radius: 6px;cursor: pointer;width: 140px;height: 48px;display: flex;align-items: center;justify-content: center;margin: 0 auto;}.prize-row {margin-bottom: 10px;}.container h2{font-weight: 600;font-size: 30px;letter-spacing: 1px;color: #000000;line-height: 50px;text-align: center;margin-bottom: 40px;}.upload-box{display: flex;width: 150px;height: 150px;flex-direction: column;justify-content: center;align-items: center;border: 1px dashed  #4c8dfb;background-color: #EDF3FE;cursor: pointer;margin-bottom: 10px;position: relative;border-radius: 8px;overflow: hidden;}.plus{color: #4C8DFB;font-size: 30px;}.up-txt{font-weight: 400;font-size: 14px;color: #4C8DFB;}.upload-box .form-control{position: absolute;top: 0;left: 0;height: 100%;width: 100%;opacity: 0;z-index: 2;}.preview-img{width: 150px;height: 150px;position: absolute;top: 0;left: 0;z-index: 1;display: none;background-color: #fff;object-fit: scale-down;}</style>
</head>
<body>
<div class="container"><h2>开始创建奖品</h2><div id="prizeRows"><div class="prize-row"><div class="form-group"><label for="prizeName">奖品名称</label><input class="form-control" type="text" placeholder="请输入奖品名称" id="prizeName" name="prizeName" class="prize-name" required></div><div class="form-group"><label for="prizeName">奖品图片</label><div class="img-upload"><!-- 上传图片的框 --><div class="upload-box"><span class="plus">+</span><span class="up-txt">上传图片</span><!-- 预览图 --><img src="./pic/bg.png" class="preview-img" id="previewImg" alt="" srcset=""><input class="form-control" type="file" onchange="showImg()" id="prizeImageUrl" ></div></div></div><div class="form-group"><label for="price">奖品价格</label><input class="form-control" placeholder="请输入奖品价格" type="number" id="price" name="price" class="prize-price" required></div><div class="form-group"><label for="description">奖品描述</label><textarea class="form-control" id="description" placeholder="请输入奖品描述"  name="description" class="prize-description" required></textarea></div></div></div><button type="submit" class="btn btn-primary" onclick="submitPrizes()">创建奖品</button>
</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>var userToken = localStorage.getItem("user_token");var formData = new FormData();// 提交奖品数据的函数function submitPrizes() {var prizeName = $('#prizeName').val();var description = $('#description').val();var price = $('#price').val();formData.append("param", JSON.stringify({prizeName:prizeName,description:description,price:price,}));// 发送POST请求到后端接口$.ajax({url: '/prize/create',type: 'POST',// 不设置Content-Type请求头，因为数据将通过其他方式传递，例如通过FormData。contentType : false,// 不要处理发送的数据processData : false,headers: {// jwt"user_token": userToken},data: formData,success: function(result) {if(result.code == 200) {alert('奖品创建成功！');} else {alert('创建奖品失败：' + result.msg);}},error:function(err){console.log(err);if(err!=null && err.status==401){alert("用户未登录, 即将跳转到登录页!");// 跳转登录页window.location.href = "/blogin.html";window.parent.location.href = "/blogin.html";//让父页面一起跳转}}});}// 上传图片：读取用户通过文件输入选择的图片文件，并将其显示在一个网页元素中function showImg(){var file =  document.getElementById("prizeImageUrl").files[0];formData.append("prizePic",file);var r= new FileReader();result = r.readAsDataURL(file);r.onload=function (e) {console.log(e)$('#previewImg').attr("src", e.target.result).show();}}</script>
</body>
</html>

测试：

创建奖品，上传图片成功，创建成功

3. 奖品列表展示（翻页）

时序图

约定前后端交互接口

[请求]  /prize/find-list?currentPage=1&pageSize=10  GET

[响应]

{

    "code": 200,

    "data": {

        "total": 2,

        "records": [

            {

                "prizeId": 2,

                "prizeName": "吹风机",

                "description": "吹风机",

                "price": 500.00,

                "imageUrl": "0a767457-513d-4b02-bdb4-fbf7f57b5b8c.png"

            },

            {

                "prizeId": 1,

                "prizeName": "手机",

                "description": "手机",

                "price": 5000.00,

                "imageUrl": "9f1739c0-3b5f-4517-999b-8626cfe4b5f6.png"

            }

        ]

    },

    "msg": ""

}

Controller 层接口设计

// package com.example.lotterysystem.controller;// 查询奖品列表@RequestMapping("/prize/find-list")public CommonResult<FindPrizeListResult> findPrizeList(PageParam param) {logger.info("findPrizeList PageParam:{}", JacksonUtil.writeValueAsString(param));PageListDTO<PrizeDTO> pageListDTO = prizeService.findPrizeList(param);return CommonResult.success(converToFindPrizeListResult(pageListDTO));}private FindPrizeListResult converToFindPrizeListResult(PageListDTO<PrizeDTO> pageListDTO) {if (null == pageListDTO) {throw  new ControllerException(ControllerErrorCodeConstants.FIND_PRIZE_LIST_ERROR);}FindPrizeListResult result = new FindPrizeListResult();result.setTotal(pageListDTO.getTotal());result.setRecords(pageListDTO.getRecords().stream().map(prizeDTO -> {FindPrizeListResult.PrizeInfo prizeInfo = new FindPrizeListResult.PrizeInfo();prizeInfo.setPrizeId(prizeDTO.getPrizeId());prizeInfo.setPrizeName(prizeDTO.getName());prizeInfo.setDescription(prizeDTO.getDescription());prizeInfo.setImageUrl(prizeDTO.getImageUrl());prizeInfo.setPrice(prizeDTO.getPrice());return prizeInfo;}).collect(Collectors.toList()));return result;}

PageParam

package com.example.lotterysystem.controller.param;import lombok.Data;@Data
public class PageParam {// 当前页（默认从第一页开始）private Integer currentPage = 1;// 当前页数量（默认显示10条数据）private Integer pageSize = 10;// 获取偏移量public Integer offset() {// 如果当前是第一页，1-1=0，0*10=0，就是从数据库中第0个数据开始// 如果当前是第二页，2-1=1，1*10=10，就是从数据库中第10个数据开始return (currentPage - 1) * pageSize;}
}

FindPrizeListResult

package com.example.lotterysystem.controller.result;import lombok.Data;import java.io.Serializable;
import java.math.BigDecimal;
import java.util.List;@Data
public class FindPrizeListResult {// 奖品总量private Integer total;// 当前列表private List<PrizeInfo> records;@Datapublic static class PrizeInfo implements Serializable {// 奖品idprivate Long prizeId;// 奖品名称private String prizeName;// 奖品描述private String description;// 奖品价值private BigDecimal price;// 奖品图片private String imageUrl;}
}

Service 层接口设计

// package com.example.lotterysystem.service;/*** 翻页查询列表* 带有翻页功能的通用接口* 所有带有翻页的列表，如活动列表、奖品列表等，都可以调用该接口** @param param* @return*/PageListDTO<PrizeDTO> findPrizeList(PageParam param);

接口实现

// package com.example.lotterysystem.service.impl;@Overridepublic PageListDTO<PrizeDTO> findPrizeList(PageParam param) {// 总量int total = prizeMapper.count();// 查询当前页列表List<PrizeDTO> prizeDTOList = new ArrayList<>();List<PrizeDO> prizeDOList = prizeMapper.selectPrizeList(param.offset(), param.getPageSize());for (PrizeDO prizeDO : prizeDOList) {PrizeDTO prizeDTO = new PrizeDTO();prizeDTO.setPrizeId(prizeDO.getId());prizeDTO.setName(prizeDO.getName());prizeDTO.setDescription(prizeDO.getDescription());prizeDTO.setImageUrl(prizeDO.getImageUrl());prizeDTO.setPrice(prizeDO.getPrice());prizeDTOList.add(prizeDTO);}return new PageListDTO<>(total, prizeDTOList);}

PageListDTO<T>

package com.example.lotterysystem.service.dto;import lombok.Data;import java.util.List;@Data
public class PageListDTO<T> {// 奖品总量private Integer total;// 当前页列表private List<T> records;public PageListDTO(Integer total, List<T> records) {this.total = total;this.records = records;}
}

PrizeDTO

package com.example.lotterysystem.service.dto;import lombok.Data;import java.math.BigDecimal;@Data
public class PrizeDTO {// 奖品idprivate Long prizeId;// 奖品名private String name;// 图片索引private String imageUrl;// 价格private BigDecimal price;// 描述private String description;
}

Dao 层接口设计

// package com.example.lotterysystem.dao.mapper;// 查询总量@Select("select count(1) from prize")int count();/*** 先根据 id 进行降序排序，然后根据偏移量获取数据库中对应大小的数据* 通过 list 返回** @param offset* @param pageSize* @return*/@Select("select * from prize order by id desc limit #{offset}, #{pageSize}")List<PrizeDO> selectPrizeList(Integer offset, Integer pageSize);

ControllerErrorCodeConstants

// package com.example.lotterysystem.common.errorcode;// ------ 奖品模块错误码 ------ErrorCode FIND_PRIZE_LIST_ERROR = new ErrorCode(200, "查询奖品列表失败！");

Postman 测试

拦截器忽略该路径：

奖品列表页面前端实现

// prizes-list.html<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>奖品列表</title><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css"><link rel="stylesheet" href="./css/base.css"></link><style>body {font-family: Arial, sans-serif;padding: 0 30px;}table {/* height: calc(100vh - 143px); */height: 300px;}.table td, .table th{border: none;}.table thead th{background-color: #f7f7f7;border-bottom: none;font-weight: 600;font-size: 16px;color: #999999;height: 80px;line-height: 80px;padding: 0;position: sticky;top: 0px;}.table tbody+tbody{border-top: none;}.prize-table {width: 100%; /* 表格宽度为容器宽度的100% */height: 100vh;overflow-y: auto;}.prize-table h2{background: #fff;width: 100%;font-weight: 600;font-size: 18px;color: #000000;height: 70px;display: flex;align-items: center;margin-bottom: 0;}.table-box{height: calc(100vh - 140px);overflow-y: auto;}.prize-table th, .prize-table td {text-align: center;vertical-align: middle;padding: 10px;height: 50px; /* 统一设置表头和单元格的高度 */}/* 第一列和第三列的样式 */.prize-table th:first-child, .prize-table td:first-child,.prize-table th:nth-child(3), .prize-table td:nth-child(3),.prize-table th:nth-child(5), .prize-table td:nth-child(5) {width: 15%; /* 设置第一列和第三列的宽度为15% */}/* 第四列的样式 */.prize-table th:nth-child(4), .prize-table td:nth-child(4) {width: 30%; /* 设置第四列的宽度为30% */}/* 其他列的样式（例如第二列和第五列） */.prize-table th:nth-child(2), .prize-table td:nth-child(2) {width: 25%; /* 保持第二列和第五列的宽度为20% */}.prize-table th {/* 如果有特定的样式只适用于表头，可以在这里添加 */}.prize-table td {height: 100px; /* 特定于单元格的高度设置 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 300px;}.prize-table img{width: 76px;height: 76px;border-radius: 8px;object-fit: scale-down;border:1px solid #e4e4e4;}.pagination {display: flex;justify-content: flex-end;margin-top: 18px;padding-right: 16px;}.pagination button {margin: 0 5px; /* 按钮之间的间距保持不变 */border-radius: 5px; /* 设置圆角为20像素，可以根据需要调整 */border: 1px solid #007bff;background-color: #fff;padding: 0px 8px; /* 可以添加一些内边距，使按钮看起来更饱满 */cursor: pointer; /* 将鼠标光标改为指针形状，提升用户体验 */font-size: 13px;}.pagination span{margin: 0 10px;font-size: 14px;}.pagination input{width: 80px;text-align: center;}</style>
</head>
<body>
<div class=" prize-table"><h2>奖品列表</h2><div class="table-box"><table class="table"><thead><tr><th>奖品id</th><th>奖品图</th><th>奖品名</th><th>奖品描述</th><th>奖品价值</th></tr></thead><tbody><tbody id="prizeList"><!-- 奖品列表将动态插入这里 --></tbody></tbody></table></div><div class="pagination"><button class="btn-outline-primary" onclick="fetchPrizes(1)">首页</button><button class="btn-outline-primary" onclick="previousPage()">上一页</button><span>第 <input type="number" id="pageInput" min="1" value="1" /> 页</span><button class="btn-outline-primary" onclick="nextPage()">下一页</button><button class="btn-outline-primary" onclick="fetchPrizes(totalPages)">尾页</button></div>
</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>var userToken = localStorage.getItem("user_token");var currentPage = 1;var pageSize = 10;var totalPages;// 发送AJAX请求的函数function fetchPrizes(page) {console.log(page);// 如果页码小于1，则重置为1if (page < 1) {page = 1;}// 更新当前页码currentPage = page;// 构建要发送的数据对象var dataToSend = {currentPage: currentPage,pageSize: pageSize};// 发送AJAX请求$.ajax({url: '/prize/find-list',type: 'GET',data: dataToSend, // 将分页参数作为请求数据发送headers: {// jwt"user_token": userToken},dataType: 'json', // 期望从服务器接收的数据类型是JSONsuccess: function(result) {if (result.code != 200) {alert("查询奖品列表失败！" + result.msg);} else {var prizes = result.data.records;var prizesHtml = '';// 清空现有的表格内容var prizeList = $('#prizeList');prizeList.empty();prizes.forEach(function(prize) {var imageUrl = prize.imageUrl ? prize.imageUrl : '/pic/defaultPrizeImg.png';prizeList.append('<tr> ' +'<td>' + prize.prizeId + '</td>' +'<td><img src="' + imageUrl + '" alt="' + prize.prizeName + '" class="prize-image"></td>' +'<td>' + prize.prizeName + '</td>' +'<td>' + prize.description + '</td>' +'<td>' + prize.price + '元</td>' +'</tr>');});// 更新分页控件的总页数totalPages = Math.ceil(result.data.total / pageSize);// 更新输入框的值$('#pageInput').val(currentPage);} // else end},error:function(err){console.log(err);if(err!=null && err.status==401){alert("用户未登录, 即将跳转到登录页!");// 跳转登录页window.location.href = "/blogin.html";window.parent.location.href = "/blogin.html";//让父页面一起跳转}}});}function previousPage() {if (currentPage > 1) {fetchPrizes(currentPage - 1);} else {alert("已经是第一页");}}function nextPage() {if (currentPage < totalPages) {fetchPrizes(currentPage + 1);} else {alert("已经是最后一页");}}$(document).ready(function() {fetchPrizes(1);});// 绑定输入框回车事件$('#pageInput').on('keypress', function(e) {if (e.key === 'Enter') {var page = parseInt(this.value, 10);if (!isNaN(page) && page >= 1 && page <= totalPages) {fetchPrizes(page);}}});</script>
</body>
</html>

测试：

点击首页跳转、点击尾页跳转、输入页面回车跳转、在首页点击上一页提示已经是第一页