《锋迷商城》系列项目

链接: 《一》项目搭建
链接: 《二》数据库的创建
链接: 《三》业务流程设计
链接: 《四》业务流程实现：用户管理
链接: 《五》逆向工程
链接: 《六》用户认证

文章目录

《锋迷商城》系列项目
开发任务
- 1.登录注册功能用户
- 2.首页轮播图
- 3.首页商品分类
九、首页-轮播图
- 9.1实现流程分析
- 9.2完成后台接口开发
- - 9.2.1 数据库操作和DAO层实现
  - 9.2.2业务层实现
  - 9.2.3控制层实现
- 9.3完成前端功能
- 9.3完成前端功能

开发任务

1.登录注册功能用户

vue+axios实现
首页显示用户头像和昵称

2.首页轮播图

3.首页商品分类

九、首页-轮播图

9.1实现流程分析

流程图
接口
- 查询轮播图信息返回

9.2完成后台接口开发

9.2.1 数据库操作和DAO层实现

分析数据表结构

编写sql

select img_id
img_url,
img_bg_color,
prod_id,
category_id,
index_type,
seq,
status,
create_time,
update_timeFROM index_img WHERE status=1 ORDER BY seq

在IndexImgMapper 接口定义方法

public interface IndexImgMapper extends GeneralDAO<IndexImg> {/*** 查询轮播图信息：查询status=1 按照seq排序* @return*/List<IndexImg> listIndexImgs();
}

修改IndexImgMapper.xml文件

<!-- BaseResultMap 逆向工程生成 -->
<select id="listIndexImgs" resultMap="BaseResultMap">select img_idimg_url,img_bg_color,prod_id,category_id,index_type,seq,status,create_time,update_time
FROM index_img
WHERE status=1 ORDER BY seq</select>

9.2.2业务层实现

IndexImgService 接口

public interface IndexImgService {ResultVO listIndexImgs();
}

IndexImgServiceImpl 实现类

@Service
public class IndexImgServiceImpl implements IndexImgService {@Autowiredprivate IndexImgMapper indexImgMapper;@Overridepublic ResultVO listIndexImgs() {List<IndexImg> indexImgs = indexImgMapper.listIndexImgs();if (indexImgs.size() == 0) {return new ResultVO(ResStatus.NO, "fail", null);} else {return new ResultVO(ResStatus.OK, "success", indexImgs);}}
}

9.2.3控制层实现

@RestController
@CrossOrigin
@RequestMapping("/index")
@Api(value = "提供首页数据显示所需的接口",tags = "首页管理")
public class IndexConller {@Autowiredprivate IndexImgService indexImgService;@GetMapping("/indeximg")@ApiOperation("首页轮播图接口")public ResultVO listIndexImgs(){return indexImgService.listIndexImgs();}
}

9.3完成前端功能

加载轮播图	显示轮播

《锋迷商城》——首页：轮播图相关推荐

vue2.0 + vux （五）api接口封装及首页轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...
（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮
目录首页 1.显示轮播图 2.服务器返回轮播图数据 3安装axios 4从服务器获取数据 5快速访问按钮首页 1.显示轮播图 src\pages\Home.vue <template> ...
品优购首页——网页轮播图
效果图首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
Luffy之Xadmin以及首页搭建(轮播图,导航)
1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
Mint-UI 移动首页开发 - header导航、banner轮播图
Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页中文 2.x官方文档( ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...

《锋迷商城》——首页：轮播图

《锋迷商城》系列项目

文章目录

开发任务

1.登录注册功能用户

2.首页轮播图

3.首页商品分类

九、首页-轮播图

9.1实现流程分析

9.2完成后台接口开发

9.2.1 数据库操作和DAO层实现

9.2.2业务层实现

9.2.3控制层实现

9.3完成前端功能

9.3完成前端功能

《锋迷商城》——首页：轮播图相关推荐

最新文章

热门文章