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

《锋迷商城》系列项目

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

---

---

开发任务

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_time
  	FROM index_img WHERE status=1 ORDER BY seq
  	
  

• 在IndexImgMapper 接口定义方法

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

• 修改IndexImgMapper.xml文件

  
  <select id="listIndexImgs" resultMap="BaseResultMap">
     select img_id
         img_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 {
  
      @Autowired
      private IndexImgMapper indexImgMapper;
  
      @Override
      public 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 {

    @Autowired
    private IndexImgService indexImgService;

    @GetMapping("/indeximg")
    @ApiOperation("首页轮播图接口")
    public ResultVO listIndexImgs(){
        return indexImgService.listIndexImgs();
    }
}

9.3完成前端功能

9.3完成前端功能

加载轮播图	显示轮播

​