电商首页轮播图实现(后端)

标签: vue  java

在这里插入图片描述
1.轮播图为什么要设计background_color和item_id呢?
设计background_color为了防止轮播图片长度不够,两边出现白色边缘。
设计item_id当用户点击轮播图片可以把相应的item_id的传入处理跳转到详情页面。
2.CarouselService

public interface CarouselService {
    /**
     * 查询所有轮播图
     * @param isShow
     * @return
     */
    public List<Carousel> queryAll(Integer isShow);
}

3.CarouselServiceImpl

@Service
public class CarouselServiceImpl implements  CarouselService{
    @Autowired
    private CarouselMapper carouselMapper;
    @Override
    public List<Carousel> queryAll(Integer isShow) {
        Example example = new Example(Carousel.class);
        example.orderBy("sort").desc();
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("isShow",isShow);
        List<Carousel> result = carouselMapper.selectByExample(example);
        return result;
    }
}

4.IndexController

@Api(value = "首页",tags = "首页展示的相关接口")
@RestController
@RequestMapping("index")
public class IndexController {
    @Autowired
    private CarouselService carouselService;
    @ApiOperation(value = "获取首页轮播图",notes = "获取首页轮播图",httpMethod = "GET")
    @GetMapping("/carousel")
    public JSONResult carousel(){
        List<Carousel> list = carouselService.queryAll(YesOrNo.Yes.type);
        return JSONResult.ok(list);
    }
}

4.前段展示(部分关键代码)

<div class="banner" style="top: 213px;">
	<!--轮播 -->
	<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
		<ul class="am-slides">
			<li class="banner1"><a></a></li>
		</ul>
	</div>
	<div class="clear"></div>
</div>
renderCarousel() {
					var serverUrl = app.serverUrl;
					// 获得轮播图
					axios.get(
							serverUrl + '/index/carousel', {})
						.then(res => {
							if (res.data.status == 200) {
								var carouselList = res.data.data
								this.carouselList = carouselList;

							
								// 循环渲染轮播图
								var $slider = $('#demo-slider-0');
								for (var i = 0; i < carouselList.length; i++) {

									var type = carouselList[i].type;
									var catId = carouselList[i].catId;
									var itemId = carouselList[i].itemId;
									var catOrItemId = "";

									if (type == 1) {
										catOrItemId = itemId;
									}
									if (type == 2) {
										catOrItemId = catId;
									}
									
									catOrItemId = encodeURI(catOrItemId);

									var cal = '<li class="" style="background: ' + carouselList[i].backgroundColor +
										';">' +
										'<a href=javascript:showPage(' + type + ',\"'+catOrItemId+'\");><img src="' + carouselList[i].imageUrl + '" /></a>' +
										+'</li>';
									$slider.flexslider('addSlide', cal);
								}
								// <li class="banner4"><a><img src="images/ad4.jpg" /></a></li>

								// console.log($slider.flexslider('count'));
								$slider.flexslider('removeSlide', 0);

								// var img1 = '<li><img src="http://122.152.205.72:88/group1/M00/00/02/CpoxxFvJanCAMgx0AAU6szwbghI657.png" />';
								// $slider.flexslider('addSlide', img1);
							}
						});
				},
				// 渲染轮播图
				this.renderCarousel();
版权声明:本文为Yearingforthefuture原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Yearingforthefuture/article/details/106068274

智能推荐

Vuejs——前端学习日记(二)

Vuejs——前端学习日记(二) Vue列表显示 新的指令和属性 后续 通过之前对Vuejs进行简单项目的学习,让我对Vuejs有了初步的认识,接下来是进一步的了解。 Vue列表显示 与之前看到的声明的简单变量message,name相比,数据列表是一个更加复杂的数据,所以在显示方面也会有所不同。在HTML代码中,我们会用v-for指令来显示列表。 如果用之前那样的方法来显...

设计模式之适配器模式

一、适配器模式的背景 在现实生活中,经常出现两个对象因接口不兼容而不能在一起工作的实例,这时需要第三者进行适配。例如,讲中文的人同讲英文的人对话时需要一个翻译,用直流电的笔记本电脑接交流电源时需要一个电源适配器,用计算机访问照相机的 SD 内存卡时需要一个读卡器等。 在软件设计中也可能出现:需要开发的具有某种业务功能的组件在现有的组件库中已经存在,但它们与当前系统的接口规范不兼容,如果重新开发这些...

Spring 4.x遇到的连接数据库拒绝访问

使用了Spring JdbcTemplate连接数据库, 提示 ‘Access denied for user ‘lil’@’192.168.3.104’ (using password: YES)’ , 问题记录与解决 使用了两种方法连接数据库 使用Java读取properties配置文件读取数据库配置(没有使用spring...

Day80.html的基本内容 -HTML和CSS

Html和CSS Javase → C/S模式 → Client / Server Javaweb→B/S模式 → Browser / Server 1. 前端BS软件结构 2. 前端的开发流程 3. 网页的组成部分 页面组成: 内容(结构)、表现、行为。 4. HTML简介 5… 创建HTML文件 创建一个web工程(静态的web工程) 在工...

排序算法

(1)冒泡排序 (2)快速排序参考博客(快排原理) 参考博客(形象化过程) 快排原理: 在要排的数(比如数组A)中选择一个中心值key(比如A[0]),通过一趟排序将数组A分成两部分,其中以key为中心,key右边都比key大,key左边的都key小,然后对这两部分分别重复这个过程,直到整个有序。 整个快排的过程就简化为了一趟排序的过程,然后递归调用就行了。 一趟排序的方法: 1,定义i=0,j=...

猜你喜欢

如何在Windows中获取Mac地址?

Mac Address is a network address used to layer 2 network traffic. The communication is done between network nodes with the mac address. It is important part of computer networking. In this tutorial, w...

使用stm32cubemx快速生成fatfs例程

使用stm32cubemx快速生成fatfs例程 前言 1. cubemx生成过程 1.1 sdio相关配置 1.2 系统时钟树配置 1.3 fatfs配置 1.4 修改工程的栈空间 2. 修改工程代码 2.1 fatfs sd卡读写文件的流程 2.2 具体代码的实现 3.实验现象 前言 本文将介绍如何使用stm32cubemx快速生成一个stm32 sdio 接口的fatfs例程,并实现对sd卡...

史上最简单maven配置与使用

什么是maven maven是用来帮助开发者管理项目所依赖的jar包的一款工具,创建maven工程使得开发不必再自己下载jar包,放入项目文件作为依赖,开发者只需在pom.xml文件里加入依赖的坐标即刻 什么是坐标 关于scope 配置 1、官网下载 2、环境配置 此电脑->属性->高级系统设置->环境变量 新建系统变量,变量名maven_home,变量值maven安装目录 系统...

U-Boot基本用法

U-Boot基本用法 mmc命令 帮助信息 打印板子信息 打印环境变量 设置、保存环境变量 U-Boot 倒计时 bootcmd 自定义环境变量 删除环境变量 mmc命令 帮助信息 查看全部命令:输入?,或help 查看某一个命令帮助信息:? + [命令] 打印板子信息 bdinfo 打印环境变量 printenv 设置、保存环境变量 设置:setenv 保存:saveenv U-Boot 倒计时...

R语言 随机抽样

简单随机抽样是指从总体N个单位中任意抽取n个单位作为样本,使每个可能的样本被抽中的概率相等的一种抽样方式 可通过srswr函数,srswor和sample函数实现 srswr函数和srswor函数在sampling包中,使用前需要先加载sampling包 srswr(n, N) srswor(n, N) sample(x, size, replace = FALSE, prob = NULL) 示...