AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

实战SSM_O2O商铺_39【前端展示】首页轮播图和一级商铺Dao+Service+Controller层的实现

2023-05-24 164
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实战SSM_O2O商铺_39【前端展示】首页轮播图和一级商铺Dao+Service+Controller层的实现

概述


接下来我们来完成前端展示模块部分的功能，极其丑陋的页面原型如下


20180720082953632.png

可以分析得出，主页中轮播图需要从后台加载数据，同样的一级类别（即parent_id = null ）的商铺信息也需要从后台加载数据

HeadLine Dao层

接口

package com.artisan.o2o.dao;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import com.artisan.o2o.entity.HeadLine;
public interface HeadLineDao {
  /**
   * 
   * 
   * @Title: selectHeadLineList
   * 
   * @Description: 根据enable_status查询符合条件的头条信息
   * 
   * @param headLineConditon
   * @return
   * 
   * @return: List<HeadLine>
   */
  List<HeadLine> selectHeadLineList(@Param("headLineConditon") HeadLine headLineConditon);
}


映射文件

<?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.artisan.o2o.dao.HeadLineDao">
  <select id="selectHeadLineList" resultType="HeadLine">
    SELECT
      line_id,
      line_name,
      line_link,
      line_img,
      priority,
      enable_status,
      create_time,
      last_edit_time
    FROM
      tb_head_line
    <where>
      <if test="headLineConditon.enableStatus != null">
        and enable_status = #{headLineConditon.enableStatus}
      </if>
    </where>
    ORDER  BY 
      priority 
    DESC 
  </select>
</mapper>



单元测试

模拟数据：

20180725180216325.png


package com.artisan.o2o.dao;
import java.util.List;
import org.junit.Assert;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
import com.artisan.o2o.BaseTest;
import com.artisan.o2o.entity.HeadLine;
public class HeadLineDaoTest extends BaseTest {
  @Autowired
  private HeadLineDao headLineDao;
  @Test
  public void testSelectHeadLineList() {
    HeadLine headLineConditon = new HeadLine();
    // 状态 0 不可用 1 可用
    headLineConditon.setEnableStatus(0);
    // 查询不可用的头条信息
    List<HeadLine> headLineList = headLineDao.selectHeadLineList(headLineConditon);
    Assert.assertEquals(2, headLineList.size());
    for (HeadLine headLine : headLineList) {
      System.out.println(headLine);
    }
    // 查询可用的头条信息
    headLineConditon.setEnableStatus(1);
    headLineList = headLineDao.selectHeadLineList(headLineConditon);
    Assert.assertEquals(3, headLineList.size());
    for (HeadLine headLine : headLineList) {
      System.out.println(headLine);
    }
    // 查询全部状态的头条信息
    headLineList = headLineDao.selectHeadLineList(new HeadLine());
    Assert.assertEquals(5, headLineList.size());
    for (HeadLine headLine : headLineList) {
      System.out.println(headLine);
    }
  }
}

20180725180329806.png

单元测试日志：

JDBC Connection [com.mchange.v2.c3p0.impl.NewProxyConnection@7e6ef134] will not be managed by Spring
==>  Preparing: SELECT line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time FROM tb_head_line WHERE enable_status = ? ORDER BY priority DESC 
==> Parameters: 0(Integer)
<==    Columns: line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time
<==        Row: 4, test4, aa, bb, 96, 0, null, null
<==        Row: 5, test5, cc, dd, 95, 0, null, null
<==      Total: 2
Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@4716be8b]
HeadLine [lineId=4, lineName=test4, lineLink=aa, lineImg=bb, priority=96, enableStatus=0, createTime=null, lastEditTime=null]
HeadLine [lineId=5, lineName=test5, lineLink=cc, lineImg=dd, priority=95, enableStatus=0, createTime=null, lastEditTime=null]
Creating a new SqlSession
SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@21a21c64] was not registered for synchronization because synchronization is not active
JDBC Connection [com.mchange.v2.c3p0.impl.NewProxyConnection@42bc14c1] will not be managed by Spring
==>  Preparing: SELECT line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time FROM tb_head_line WHERE enable_status = ? ORDER BY priority DESC 
==> Parameters: 1(Integer)
<==    Columns: line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time
<==        Row: 1, test1, xxx, yyy, 99, 1, null, null
<==        Row: 2, test2, x, y, 98, 1, null, null
<==        Row: 3, test3, xx, yy, 97, 1, null, null
<==      Total: 3
Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@21a21c64]
HeadLine [lineId=1, lineName=test1, lineLink=xxx, lineImg=yyy, priority=99, enableStatus=1, createTime=null, lastEditTime=null]
HeadLine [lineId=2, lineName=test2, lineLink=x, lineImg=y, priority=98, enableStatus=1, createTime=null, lastEditTime=null]
HeadLine [lineId=3, lineName=test3, lineLink=xx, lineImg=yy, priority=97, enableStatus=1, createTime=null, lastEditTime=null]
Creating a new SqlSession
SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@74f5ce22] was not registered for synchronization because synchronization is not active
JDBC Connection [com.mchange.v2.c3p0.impl.NewProxyConnection@16fdec90] will not be managed by Spring
==>  Preparing: SELECT line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time FROM tb_head_line ORDER BY priority DESC 
==> Parameters: 
<==    Columns: line_id, line_name, line_link, line_img, priority, enable_status, create_time, last_edit_time
<==        Row: 1, test1, xxx, yyy, 99, 1, null, null
<==        Row: 2, test2, x, y, 98, 1, null, null
<==        Row: 3, test3, xx, yy, 97, 1, null, null
<==        Row: 4, test4, aa, bb, 96, 0, null, null
<==        Row: 5, test5, cc, dd, 95, 0, null, null
<==      Total: 5
Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@74f5ce22]
HeadLine [lineId=1, lineName=test1, lineLink=xxx, lineImg=yyy, priority=99, enableStatus=1, createTime=null, lastEditTime=null]
HeadLine [lineId=2, lineName=test2, lineLink=x, lineImg=y, priority=98, enableStatus=1, createTime=null, lastEditTime=null]
HeadLine [lineId=3, lineName=test3, lineLink=xx, lineImg=yy, priority=97, enableStatus=1, createTime=null, lastEditTime=null]
HeadLine [lineId=4, lineName=test4, lineLink=aa, lineImg=bb, priority=96, enableStatus=0, createTime=null, lastEditTime=null]
HeadLine [lineId=5, lineName=test5, lineLink=cc, lineImg=dd, priority=95, enableStatus=0, createTime=null, lastEditTime=null]


HeadLine Service层

接口

package com.artisan.o2o.service;
import java.util.List;
import com.artisan.o2o.entity.HeadLine;
public interface HeadLineService {
  /**
   * 
   * 
   * @Title: queryHeadLineList
   * 
   * @Description: 查询headLine
   * 
   * @param headLineConditon
   * 
   * @return: List<HeadLine>
   */
  List<HeadLine> queryHeadLineList(HeadLine headLineConditon);
}


实现类

package com.artisan.o2o.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.artisan.o2o.dao.HeadLineDao;
import com.artisan.o2o.entity.HeadLine;
import com.artisan.o2o.service.HeadLineService;
@Service
public class HeadLineServiceImpl implements HeadLineService {
  @Autowired
  HeadLineDao headLineDao;
  @Override
  public List<HeadLine> queryHeadLineList(HeadLine headLineConditon) {
    return headLineDao.selectHeadLineList(headLineConditon);
  }
}


单元测试

package com.artisan.o2o.service;
import java.util.List;
import org.junit.Assert;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
import com.artisan.o2o.BaseTest;
import com.artisan.o2o.entity.HeadLine;
public class HeadLineServiceTest extends BaseTest {
  @Autowired
  private HeadLineService headLineService;
  @Test
  public void testQueryHeadLineList() {
    HeadLine headLineConditon = new HeadLine();
    // 状态 0 不可用 1 可用
    headLineConditon.setEnableStatus(0);
    // 查询不可用的头条信息
    List<HeadLine> headLineList = headLineService.queryHeadLineList(headLineConditon);
    Assert.assertEquals(2, headLineList.size());
    for (HeadLine headLine : headLineList) {
      System.out.println(headLine);
    }
    // 查询可用的头条信息
    headLineConditon.setEnableStatus(1);
    headLineList = headLineService.queryHeadLineList(headLineConditon);
    Assert.assertEquals(3, headLineList.size());
    for (HeadLine headLine : headLineList) {
      System.out.println(headLine);
    }
  }
}


20180725180541248.png


检查是否符合预期，单元测试正常

ShopCategory Dao层完善


因为按照设计，首页展示的商品类别是一级商品类别，即parent_id为null的商铺类别信息。 因此需要扩招之前写好的Dao层的SQL映射文件。


映射文件完善

<?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.artisan.o2o.dao.ShopCategoryDao">
  <select id="queryShopCategoryList" resultType="com.artisan.o2o.entity.ShopCategory">
    SELECT
      shop_category_id ,
      shop_category_name,
      shop_category_desc,
      shop_category_img,
      priority,
      create_time,
      last_edit_time,
      parent_id
    FROM
      tb_shop_category
  <where>
    <!-- 首页查询一级类别的商铺信息 -->
    <if test="shopCategoryCondition == null">
      and parent_id is null
    </if>
    <!-- 控制层getshopinitinfo的方法 shopCategoryService.getShopCategoryList(new ShopCategory());
      只能选择二级商铺类别，不能挂载一级商铺类别大类目录下
     -->
    <if test="shopCategoryCondition != null">
      and parent_id is not null
    </if>
    <!-- 如果传递了父类的id,则查询对应父类下的目录 -->
    <if test="shopCategoryCondition != null and shopCategoryCondition.parent != null">
      and parent_id = #{shopCategoryCondition.parent.shopCategoryId}
    </if>
  </where>  
    ORDER BY priority 
    DESC  
  </select>
</mapper>

单元测试

package com.artisan.o2o.dao;
import java.util.List;
import org.junit.Assert;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
import com.artisan.o2o.BaseTest;
import com.artisan.o2o.entity.ShopCategory;
public class ShopCategoryDaoTest extends BaseTest {
  @Autowired
  ShopCategoryDao shopCategoryDao;
  @Test
  public void testQueryShopCategoryList() {
    // shopCategoryCondition 不为null的情况，查询parent_id is not null 的数据
    ShopCategory shopCategory = new ShopCategory();
    List<ShopCategory> categoryList = shopCategoryDao.queryShopCategoryList(shopCategory);
    Assert.assertEquals(2, categoryList.size());
    for (ShopCategory shopCategory2 : categoryList) {
      System.out.println(shopCategory2);
    }
    // shopCategoryCondition.parent 不为null的情况
    // 查询parent=1的店铺目录
    ShopCategory child = new ShopCategory();
    ShopCategory parent = new ShopCategory();
    parent.setShopCategoryId(1L);
    child.setParent(parent);
    categoryList = shopCategoryDao.queryShopCategoryList(child);
    Assert.assertEquals(2, categoryList.size());
    for (ShopCategory shopCategory2 : categoryList) {
      System.out.println(shopCategory2);
    }
    // 查询 parent is null 的情况
    categoryList = shopCategoryDao.queryShopCategoryList(null);
    Assert.assertEquals(1, categoryList.size());
    System.out.println(categoryList.get(0));
  }
}


20180725180954962.png

检查是否符合预期，单元测试正常

Controller层

MainPageController

package com.artisan.o2o.web.frontend;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.artisan.o2o.entity.HeadLine;
import com.artisan.o2o.entity.ShopCategory;
import com.artisan.o2o.enums.HeadLineStateEnum;
import com.artisan.o2o.enums.ShopCategoryStateEnum;
import com.artisan.o2o.service.HeadLineService;
import com.artisan.o2o.service.ShopCategoryService;
@Controller
@RequestMapping("/frontend")
public class MainPageController {
  @Autowired
  private HeadLineService headLineService;
  @Autowired
  private ShopCategoryService shopCategoryService;
  @RequestMapping(value = "/listmainpage", method = RequestMethod.GET)
  @ResponseBody
  public Map<String, Object> listMainPage() {
    Map<String, Object> modelMap = new HashMap<String, Object>();
    List<ShopCategory> shopCategoryList = new ArrayList<ShopCategory>();
    List<HeadLine> headLineList = new ArrayList<HeadLine>();
    try {
      // 查询状态为1的可见的headLine信息
      HeadLine headLineConditon = new HeadLine();
      headLineConditon.setEnableStatus(1);
      headLineList = headLineService.queryHeadLineList(headLineConditon);
      modelMap.put("headLineList", headLineList);
    } catch (Exception e) {
      e.printStackTrace();
      modelMap.put("errMsg", HeadLineStateEnum.INNER_ERROR.getStateInfo());
    }
    try{
      // 查询parentId为null的一级类别
      shopCategoryList = shopCategoryService.getShopCategoryList(null);
      modelMap.put("shopCategoryList", shopCategoryList);
    } catch (Exception e) {
      e.printStackTrace();
      modelMap.put("success", false);
      modelMap.put("errMsg", ShopCategoryStateEnum.INNER_ERRO.getStateInfo());
    }
    modelMap.put("success", true);
    return modelMap;
  }
}


测试

启动tomcat，访问 http://localhost:8080/o2o/frontend/listmainpage

得到JSON字符串如下

{
    "shopCategoryList": [
        {
            "shopCategoryId": 1,
            "shopCategoryName": "咖啡奶茶",
            "shopCategoryDesc": "咖啡奶茶大类",
            "shopCategoryImg": "/xxxx/xxxx",
            "priority": 0,
            "createTime": 1526580836000,
            "lastEditTime": 1526580838000,
            "parent": null
        }
    ],
    "success": true,
    "headLineList": [
        {
            "lineId": 1,
            "lineName": "test1",
            "lineLink": "xxx",
            "lineImg": "yyy",
            "priority": 99,
            "enableStatus": 1,
            "createTime": null,
            "lastEditTime": null
        },
        {
            "lineId": 2,
            "lineName": "test2",
            "lineLink": "x",
            "lineImg": "y",
            "priority": 98,
            "enableStatus": 1,
            "createTime": null,
            "lastEditTime": null
        },
        {
            "lineId": 3,
            "lineName": "test3",
            "lineLink": "xx",
            "lineImg": "yy",
            "priority": 97,
            "enableStatus": 1,
            "createTime": null,
            "lastEditTime": null
        }
    ]
}


符合预期。后端完成，接下来我们来试下View层的逻辑。

Github地址

代码地址： https://github.com/yangshangwei/o2o

文章标签：
前端开发
测试技术
应用服务中间件
SQL
数据格式
JSON
关键词：
前端实战
前端轮播图
ssm controller
前端service
ssm商铺
小小工匠
目录
相关文章
html的七十二变
|
1月前
|
存储 前端开发 JavaScript
前端状态管理：Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念，如 State、Getter、Mutation 和 Action，并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
html的七十二变
58 4
跃@sir
|
2月前
|
Web App开发 缓存 监控
前端性能优化实战：从代码到部署的全面策略
前端性能优化实战：从代码到部署的全面策略
跃@sir
37 1
Star时光
|
2月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战：从代码到部署的全面指南
前端性能优化实战：从代码到部署的全面指南
Star时光
39 1
欲揽西江月
|
2月前
|
缓存 前端开发 搜索推荐
前端性能优化实战：提升网页加载速度
前端性能优化实战：提升网页加载速度
欲揽西江月
51 1
有路有乔-六月
|
2月前
|
缓存 监控 前端开发
前端性能优化实战：从加载速度到用户体验
前端性能优化实战：从加载速度到用户体验
有路有乔-六月
29 0
想飞的雪糕
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
220 14
你都不懂
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
59 0
想飞的雪糕
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记（一）：两个指令反过来说大模型就理解不了啦？或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下，自然语言指令解析的困境及解决方案。通过增加一个LLM解析层，将复杂的指令拆解为多个明确的步骤，明确操作类型与对象识别，处理任务依赖关系，并将自然语言转化为具体的工具命令，从而提高指令解析的准确性和执行效率。
想飞的雪糕
63 6
想飞的雪糕
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记（四）：如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备（如1核处理器和1GB内存）上实现高效向量存储和检索的方法，旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景，推荐Annoy作为多数情况下的首选方案，并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法，即使在资源受限的环境中也能实现高效的向量检索。
想飞的雪糕
75 1
想飞的雪糕
|
3月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记（二）：最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文，表现优异，和移动端更配
llama3.1支持128K上下文，6万字+输入，适用于多种场景。模型能力超出预期，但处理中文时需加中英翻译。测试显示，其英文支持较好，中文则需改进。llama3.2 1B参数量小，适合移动端和资源受限环境，可在阿里云2vCPU和4G ECS上运行。
想飞的雪糕
149 1

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    基于SSM的学校在线考试系统的设计与实现
    101
  • 2
    基于SSM的宠物医院信息管理系统
    122
  • 3
    基于SSM框架的购物商城系统设计与实现
    285
  • 4
    基于SSM家政预约管理系统的设计与实现
    72
  • 5
    基于SSM的高速公路收费系统的设计与实现
    77
  • 6
    基于SSM大创项目申报管理系统的设计与实现
    114
  • 7
    基于SSM大学生宿舍管理系统的设计与实现
    90
  • 8
    基于SSM的计算机课程实验管理系统的设计与实现
    53
  • 9
    基于SSM个性化点餐配送系统的设计与实现
    92
  • 10
    基于ssm校园图书在线阅读系统的设计与实现
    133

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月