1. Toy模板网首页
  2. > Toy博客

Swiper轮播图后端接口实现

9月前 作者：九品印相 分类：Toy博客 阅读(47) 违法举报

这篇具有很好参考价值的文章主要介绍了Swiper轮播图后端接口实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

mybatis-plus:
  global-config:
    db-config:
      id-type: auto #id生成规则：数据库id自增
  configuration:
    map-underscore-to-camel-case: false  # 开启驼峰功能
    auto-mapping-behavior: full # 自动映射任何复杂的结果
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mybatis/mapper/*.xml

产品表

/*
SQLyog Ultimate v11.33 (64 bit)
MySQL - 5.7.18-log 
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;

create table `t_product` (
	`id` int (11),
	`name` varchar (300),
	`price` Decimal (10),
	`stock` int (11),
	`proPic` varchar (765),
	`isHot` bit (1),
	`isSwiper` bit (1),
	`swiperPic` varchar (765),
	`swiperSort` int (11),
	`typeId` int (11),
	`hotDateTime` datetime ,
	`productIntroImgs` varchar (6000),
	`productParaImgs` varchar (6000),
	`description` varchar (6000)
); 
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('1','小米电视大师 82英寸','10999.00','3451','21.png','','','2.jpg','3','14','2021-11-26 21:36:34','\"\"','\"\"','\"\"');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('4','Xiaomi 11','3799.00','3232','6.png','','','default.jpg','0','2','2021-07-28 21:36:34','<img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/11.jpg\'></img>','<img width=\'100%\' src=\'http://192.168.0.116/image/productParaImgs/11.jpg\'></img>','「全版本领券立减200元，券后价3299元起；享至高24期免息；赠手机保护壳*1;【全款支付套装】赠果冻包」');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('5','Redmi K40 游戏增强版','2299.00','2005','11.png','','','1.jpg','1','39',NULL,'\"\"','\"\"','\"\"');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('6','Xiaomi 11 Pro','4499.00','2343','1.png','','','default.jpg','0','2','2021-09-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('7','Xiaomi MIX FOLD折叠屏手机','7999.00','2222','2.png','','','default.jpg','0','3','2021-10-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('8','Note 9 5G','1199.00','1111','3.png','','','default.jpg','0','40','2021-09-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('9','Xiaomi 10S','2999.00','1111','4.png','','','default.jpg','0','2','2021-12-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('10','Note 9 Pro 5G','1399.00','2222','5.png','','','default.jpg','0','40','2021-11-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('11','黑鲨4','2499.00','3322','7.png','','','default.jpg','0','41','2021-11-28 21:36:34','\"\"',NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('12','Redmi  K40 Pro 系列','2499.00','3244','8.png','','','default.jpg','0','39','2021-11-28 21:36:34',NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('14','Xiaomi Civi','2599.00','4444','9.png','','','default.jpg','0','1',NULL,'<img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/1.jpg\'></img><img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/2.jpg\'></img><img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/3.jpg\'></img>','<img width=\'100%\' src=\'http://192.168.0.116/image/productParaImgs/1.jpg\'></img><img width=\'100%\' src=\'http://192.168.0.116/image/productParaImgs/2.jpg\'></img>','「购机至高享24期免息；赠Redmi AirDots 2真无线蓝牙耳机；赠Keep会员7天体验卡；+110元得Air2 SE蓝牙耳机」');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('15','Xiaomi 11 Ultra','5499.00','4444','10.png','','','default.jpg','0','2',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('16','小米平板5','1999.00','444','13.png','','','default.jpg','0','5',NULL,'<img src=\'http://192.168.0.116/image/productIntroImgs/111.jpg\'></img><img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/222.jpg\'></img><img width=\'100%\' src=\'http://192.168.0.116/image/productIntroImgs/333.jpg\'></img>','<img width=\'100%\' src=\'http://192.168.0.116/image/productParaImgs/111.jpg\'></img>','11英寸大屏 2.5K超清显示 120Hz高刷新率');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('17','小米平板5 Pro','2499.00','444','14.png','','','default.jpg','0','5',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('19','RedmiBook Pro 15 增强版','5299.00','444','15.png','','','default.jpg','0','6',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('20','Redmi G 2021','6499.00','1999','16.png','','','3.jpg','2','6',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('21','Redmi G 2021 锐龙版','7499.00','2000','17.png','','','default.jpg','0','6',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('22','RedmiBook Pro 14 增强版','4999.00','777','18.png','','','default.jpg','0','6',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('23','小米笔记本 Pro 14 锐龙版','5499.00','666','19.png','','','default.jpg','0','7',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('24','小米笔记本 Pro 14 增强版','5499.00','666','20.png','','','default.jpg','0','7',NULL,NULL,NULL,NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('26','1','1.00','1','default.jpg','','','default.jpg','0','6',NULL,'1','1',NULL);
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('27','1','2.00','3','default.jpg','','','default.jpg','0','6',NULL,'5','6','4');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('28','2','3.00','4','default.jpg','','','default.jpg','0','6',NULL,'6','7','5');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('29','1','1.00','1','default.jpg','','','default.jpg','0','11',NULL,'1','1','1');
insert into `t_product` (`id`, `name`, `price`, `stock`, `proPic`, `isHot`, `isSwiper`, `swiperPic`, `swiperSort`, `typeId`, `hotDateTime`, `productIntroImgs`, `productParaImgs`, `description`) values('30','223335552','322.00','22355','default.jpg','','','default.jpg','0','6',NULL,'22333522','22333544442','22333511');


package com.java1234.entity;

import com.baomidou.mybatisplus.annotation.FieldStrategy;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import lombok.Data;

import java.math.BigDecimal;
import java.util.Date;

/**
 * 商品
 * @author java1234_小锋
 * @site www.java1234.com
 * @company 南通小锋网络科技有限公司
 * @create 2021-11-22 22:13
 */
@TableName("t_product")
@Data
public class Product {

    private Integer id; // 编号

    private String name; // 名称

    private BigDecimal price; // 价格

    private String productIntroImgs; // 商品介绍图片

    private String productParaImgs;  // 商品规格参数图片

    private Integer stock; // 库存

    private String proPic="default.jpg"; // 商品图片

    private boolean isHot=false; // 是否热门推荐商品

    private boolean isSwiper=false; // 是否轮播图片商品

    private Integer swiperSort=0; // 轮播排序

    private String swiperPic="default.jpg"; // 商品轮播图片

    private String description; // 描述

    @JsonSerialize(using=CustomDateTimeSerializer.class)
    private Date hotDateTime; // 设置热门推荐日期时间



}


package com.java1234.entity;

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.TimeZone;

/**
 * 自定义返回JSON 数据格式中日期格式化处理
 * @author java1234 小锋 老师
 *
 */
public class CustomDateTimeSerializer extends JsonSerializer<Date>{

	@Override
	public void serialize(Date value, JsonGenerator gen, SerializerProvider serializers)
			throws IOException {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		sdf.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai"));
		gen.writeString(sdf.format(value));  
	}

}


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.java1234.mapper.ProductMapper">


</mapper>

package com.java1234.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.java1234.entity.Product;

public interface ProductMapper extends BaseMapper<Product> {
}


package com.java1234.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.java1234.entity.Product;
import com.java1234.mapper.ProductMapper;
import com.java1234.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 *
 * 商品Service实现类
 */
@Service("productService")
public class IProductServiceImpl extends ServiceImpl<ProductMapper, Product> implements IProductService {

    @Autowired
    private ProductMapper productMapper;
}


package com.java1234.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.java1234.entity.Product;

/**
 * 商品Service接口
 */
public interface IProductService extends IService<Product> {
}


package com.java1234.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.java1234.entity.Product;
import com.java1234.entity.R;
import com.java1234.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 商品Controller
 */
@RestController
@RequestMapping("/product")
public class ProductController {

    @Autowired
    private IProductService productService;

    /**
     * 查询轮播商品
     * @return
     */
    @GetMapping("/findSwiper")
    public R findSwiper(){
        List<Product> swiperProductList = productService.list(new QueryWrapper<Product>().eq("isSwiper", true).orderByAsc("swiperSort"));
        Map<String,Object> map=new HashMap<>();
        map.put("message",swiperProductList);
        return R.ok(map);
    }
}

文章来源地址https://www.toymoban.com/news/detail-824857.html

到了这里，关于Swiper轮播图后端接口实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • springboot第54集：思维导图后端知识点微服务分布式架构周刊

    springboot第54集：思维导图后端知识点微服务分布式架构周刊

    InnoDB和Myisam是MySQL数据库中两种非常流行的存储引擎，主要存在四大区别： 事务支持能力不同：InnoDB支持ACID事务。所以可以处理高级别的数据完整性和可靠性。而MyISAM不支持事务，所以MyISAM在处理需要高度数据完整性的操作时不如InnoDB可靠。 锁定机制不同：InnoDB使用行级别

    2024年02月20日
    浏览(46)
  • 使用 swiper 做轮播图

    使用 swiper 做轮播图

    大好好，我是 17。 虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。 版本 Swiper 8.3.0 我把所有常用配置的都写上了，不需要哪个直接删除就好。 最外层的 swiper 的样式 并没有设置高宽，需要使用者来设

    2024年02月07日
    浏览(45)

  • vue中swiper轮播图的使用

    说明：导入相应js引css import \\\"Swiper\\\" from \\\"swiper\\\" import \\\"swiper/css/swiper.css\\\"; import \\\"swiper/js/swiper\\\"; 说明：必要的结构使用；直接封装成一个组件  说明：(页面当中务必要有结构）；注释已经写入代码。 第一：可以解决获取数据在Swiper实例之前；第二：可以解决v-for遍历完后在Swiper之

    2024年02月14日
    浏览(45)
  • 微信小程序轮播图swiper使用

    微信小程序轮播图swiper使用

    文章目录 一、swiper的作用？ 二、使用步骤 1.引入库 2.读入数据 总结 小程序中创建轮播图。 微信开放文档中组件--》视图容器--》swiper将下面代码拷贝   将代码粘贴至需要轮播图的页面，并根据实际情况修改代码 这里的tabList和img是根据接口传来的数据，需要在js中定义，这

    2024年02月12日
    浏览(46)

  • uni-app 中 swiper 轮播图高度自适应

    方法一(好像只对第一张起作用) 1、首先 swiper 标签的宽度是 width: 100% 2、swiper 标签存在默认高度是 height: 150px ；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度 swiper 高度 = swiper 宽度 * 原图高度 / 原图宽度 方法

    2024年02月09日
    浏览(52)
  • 在vue中使用swiper轮播图（搭配watch和$nextTick()）

    在vue中使用swiper轮播图（搭配watch和$nextTick()）

    在组件中使用轮播图展示图片信息： 1.下载swiper,5版本为稳定版本 cnpm install swiper@5 2.在组件中引入swiper包和对应样式，若多组件使用swiper，可以把swiper引入到main.js入口文件中： import \\\'swiper/css/swiper.css\\\' //引入swiper样式 import Swiper from \\\'swiper\\\'; //引入swiper  3.在组件中使用： 由于我

    2024年02月13日
    浏览(44)
  • 小程序中轮播图u-swiper图片无法显示问题

    小程序中轮播图u-swiper图片无法显示问题

    问题：uview官网中 指定的图片路径字段为image，完全按照uview写轮播图却无法正常显示。    解决方法：1.把image字段改成url字段 2.给u-swiper加上  keyName=\\\"image\\\" 最后找到了总结原因： npm下载的uview默认是2.0的最新版本，百度上的uview文档默认是1.0的文档，title也是一样的问题，所

    2024年02月11日
    浏览(53)
  • 微信小程序（原生）——轮播图swiper、1秒切换、自动轮播、无缝切换

    微信小程序（原生）——轮播图swiper、1秒切换、自动轮播、无缝切换

    微信小程序的轮播图制作，且图片不变形。1秒切换、自动轮播、无缝切换 index.wxml文件： index.wxss文件： 完整示意图 swiper网址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html image网址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html 图片处理方面： mode=\\\"aspectFi

    2024年02月15日
    浏览(54)
  • 【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item

    【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item

    对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？ 为此我特意开设此专栏，在我学习的同时也将其分享给大家！ 本篇文章主要介绍我们微信小程序常用的视图容器类组件，对于 swiper 和 swiper-item 我们将逐一讲解。 如果在往下阅读

    2024年02月20日
    浏览(53)

  • 【前端版】分布式医疗云平台【解决面包屑的问题、定义路由、服务端接口、动态渲染菜单、登陆测试、字典类型管理 】(二十)

    目录 2.3.解决其它问题 2.3.1.面包屑的问题及控制台报错 3.登陆和加载菜单和后台关联问题 

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包