首页优化加载速度

src/main/java/com/caimei/www/controller/unlimited/HomeController.java

@@ -40,8 +40,8 @@ public class HomeController extends BaseController {
     @GetMapping("/index.html")
     public String home(final Model model) {
         model.addAttribute("msg", "首页");
-        List<PageFloor> pageFloors = homeService.getHomePageFloor();
-        model.addAttribute("pageFloors", pageFloors);
+        /*List<PageFloor> pageFloors = homeService.getHomePageFloor();*/
+       /* model.addAttribute("pageFloors", pageFloors);*/
         return HOME_PATH;
     }
 
@@ -56,33 +56,43 @@ public class HomeController extends BaseController {
     }
 
     /**
-     * 首页左侧广告图
+     * 首页推荐专区
      * @return
      */
-    @GetMapping("/home/advertising")
+    @GetMapping("/home/recommend")
     @ResponseBody
-    public JsonModel<List<ImageLink>> getAdvertising() {
-        return homeService.getAdvertising();
+    public JsonModel<List<ProductList>> getRecommendProducts() {
+        return homeService.getRecommendProducts();
     }
 
     /**
-     * 首页推荐专区
+     * 首页楼层专题数据
      * @return
      */
-    @GetMapping("/home/recommend")
+    @GetMapping("/home/floor")
     @ResponseBody
-    public JsonModel<List<ProductList>> getRecommendProducts() {
-        return homeService.getRecommendProducts();
+    public JsonModel<List<PageFloor>> getHomePageFloorData() {
+        return homeService.getHomePageFloorData();
     }
 
     /**
-     * 首页专题数据
+     * 首页楼层专题数据
      * @return
      */
-    @GetMapping("/home/topic")
+    /*@GetMapping("/home/topic")
     @ResponseBody
     public JsonModel<Map<String, Object>> getHomeTopicData() {
         return homeService.getHomeTopicData();
+    }*/
+
+    /**
+     * 首页左侧广告图
+     * @return
+     */
+    @GetMapping("/home/advertising")
+    @ResponseBody
+    public JsonModel<List<ImageLink>> getAdvertising() {
+        return homeService.getAdvertising();
     }
 
 }

src/main/java/com/caimei/www/service/HomeService.java

@@ -15,29 +15,21 @@ import java.util.Map;
  * @date : 2020/6/22
  */
 public interface HomeService {
-    /**
-     * 首页楼层
-     */
-    List<PageFloor> getHomePageFloor();
-
     /**
      * 首页轮播图
      */
     JsonModel<List<ImageLink>> getHomeBanners();
-
-    /**
-     * 首页左侧广告图
-     */
-    JsonModel<List<ImageLink>> getAdvertising();
-
     /**
      * 首页推荐专区
      */
     JsonModel<List<ProductList>> getRecommendProducts();
-
     /**
-     * 首页专题数据
+     * 首页楼层专题数据
      */
-    JsonModel<Map<String, Object>> getHomeTopicData();
+    JsonModel<List<PageFloor>> getHomePageFloorData();
+    /**
+     * 首页左侧广告图
+     */
+    JsonModel<List<ImageLink>> getAdvertising();
 
 }

src/main/java/com/caimei/www/service/impl/HomeServiceImpl.java

@@ -31,14 +31,6 @@ public class HomeServiceImpl implements HomeService {
     private HomeDao homeDao;
     @Value("${caimei.wwwDomain}")
     private String domain;
-    /**
-     * 首页楼层
-     */
-    @Override
-    public List<PageFloor> getHomePageFloor() {
-        List<PageFloor> floorList = homeDao.getHomePageFloor();
-        return floorList;
-    }
 
     /**
      * 首页轮播图
@@ -50,16 +42,6 @@ public class HomeServiceImpl implements HomeService {
         return JsonModel.success(list);
     }
 
-    /**
-     * 首页左侧广告图
-     */
-    @Override
-    @Cacheable(value = "getAdvertising", key="'www'", unless="#result == null")
-    public JsonModel<List<ImageLink>> getAdvertising() {
-        List<ImageLink> list = homeDao.getAdvertising();
-        return JsonModel.success(list);
-    }
-
     /**
      * 首页推荐专区商品
      */
@@ -79,31 +61,46 @@ public class HomeServiceImpl implements HomeService {
     }
 
     /**
-     * 首页专题数据
+     * 首页楼层专题数据
      */
     @Override
-    public JsonModel<Map<String, Object>> getHomeTopicData() {
+    public JsonModel<List<PageFloor>> getHomePageFloorData() {
         // 大专题:6,小专题:5,商品专题:4,优质供应商:3
-        Map<String, Object> topicMap = new HashMap<>();
-        // 6大专题二级楼层
-        List<PageFloor> bigTopicFloors = homeDao.getHomeBigTopicFloor();
-        bigTopicFloors.forEach(bigTopic -> {
-            List<ImageLink>  topicData = homeDao.getBigTopicData(bigTopic.getId());
-            bigTopic.setFloorData(topicData);
+        List<PageFloor> floorList = homeDao.getHomePageFloor();
+        floorList.forEach(floor -> {
+            if(floor.getType() == 6){
+                // 6大专题二级楼层
+                List<PageFloor> bigTopicFloors = homeDao.getHomeBigTopicFloor();
+                bigTopicFloors.forEach(bigTopic -> {
+                    List<ImageLink>  topicData = homeDao.getBigTopicData(bigTopic.getId());
+                    bigTopic.setFloorData(topicData);
+                });
+                floor.setSubFloors(bigTopicFloors);
+            } else if (floor.getType() == 5){
+                // 5小专题
+                List<ImageLink>  topicData5 = homeDao.getSmallTopicData();
+                floor.setFloorData(topicData5);
+            } else if (floor.getType() == 4){
+                // 4商品专题
+                List<ImageLink>  topicData4 = homeDao.getCommodityTopicData();
+                floor.setFloorData(topicData4);
+            } else if (floor.getType() == 3){
+                // 3优质供应商
+                List<ImageLink>  topicData3 = homeDao.getSuppliersTopData();
+                floor.setFloorData(topicData3);
+            }
         });
-        topicMap.put("bigTopicData", bigTopicFloors);
-        // 专题4
-        List<ImageLink>  topicData4 = homeDao.getCommodityTopicData();
-        topicMap.put("topicData4", topicData4);
-        // 专题5
-        List<ImageLink>  topicData5 = homeDao.getSmallTopicData();
-        topicMap.put("topicData5", topicData5);
-        // 专题3
-        List<ImageLink>  topicData3 = homeDao.getSuppliersTopData();
-        topicMap.put("topicData3", topicData3);
-
-        return JsonModel.success(topicMap);
+        return JsonModel.success(floorList);
     }
 
+    /**
+     * 首页左侧广告图
+     */
+    @Override
+    @Cacheable(value = "getAdvertising", key="'www'", unless="#result == null")
+    public JsonModel<List<ImageLink>> getAdvertising() {
+        List<ImageLink> list = homeDao.getAdvertising();
+        return JsonModel.success(list);
+    }
 
 }

src/main/resources/static/js/index.js

@@ -5,10 +5,7 @@ var homeData = new Vue({
         images: [],
         recommends: [],
         recommendPage: 1,
-        bigTopicData: [],
-        topicData3: [],
-        topicData4: [],
-        topicData5: [],
+        pageFloors: [],
         advertising: [],
         asideNav: []
     },
@@ -100,15 +97,12 @@ var homeData = new Vue({
                 }
             });
         },
-        getTopicData: function(){
+        getFloorData: function(){
             var _self = this;
-            $.getJSON("/home/topic").done(function (r) {
+            $.getJSON("/home/floor").done(function (r) {
                 if (r.code === 0 && r.data) {
-                    _self.bigTopicData = r.data.bigTopicData;
-                    _self.topicData3 = r.data.topicData3;
-                    _self.topicData4 = r.data.topicData4;
-                    _self.topicData5 = r.data.topicData5;
-                    setTimeout(function(){
+                     _self.pageFloors = r.data;
+                     setTimeout(function(){
                         // 设置侧边导航数据
                         _self.setAsideNav();
                         // 商品专题
@@ -189,9 +183,9 @@ var homeData = new Vue({
         }
         this.getBanners();
         this.getRecommends();
+        this.getFloorData();
     },
     mounted: function() {
-        this.getTopicData();
         this.getAdvertising();
         // 侧边栏滚动判断
         var distance = 0;

src/main/resources/templates/index.html

@@ -47,54 +47,55 @@
     </div>
     <!--页面主体数据-->
     <div class="wrap">
-        <div th:each="item: ${pageFloors}">
-            <div th:if="${item.type}==1">
-                <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="1">推荐专区</h2>
-                </div>
-                <div class="floorCon">
-                    <div id="recommendBox" class="swiper-container">
-                        <ul class="swiper-wrapper" v-cloak>
-                            <li class="swiper-slide productItem mfc" v-for="p in recommends">
-                                <div class="item">
-                                    <a class="image" :href="'/product/detail.html?id='+p.id" target="_blank">
-                                        <img :src="p.image" :alt="p.name">
-                                        <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
-                                    </a>
-                                    <a class="name" :href="'/product/detail.html?id='+p.id" target="_blank">
-                                        <span v-html="p.name"></span>
-                                    </a>
-                                    <div class="price mfhc">
-                                        <template v-if="userId && userId>0">
-                                            <em v-if="p.priceFlag==1">未公开价格</em>
-                                            <template v-else>
-                                                <em v-if="!p.priceLoaded">正在获取价格...</em>
-                                                <template v-else-if="p.priceFlag==2 && p.userIdentity!=2">
-                                                    <em>价格仅会员可见</em>
-                                                    <div class="btnBox">
-                                                        <a href="javascript:void(0)" class="btn">升级成为会员</a>
-                                                    </div>
-                                                </template>
-                                                <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
-                                            </template>
-                                        </template>
+        <div>
+            <div class="floorTit">
+                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
+                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
+            </div>
+            <div class="floorCon">
+                <div id="recommendBox" class="swiper-container">
+                    <ul class="swiper-wrapper" v-cloak>
+                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
+                            <div class="item">
+                                <a class="image" :href="'/product/detail.html?id='+p.id" target="_blank">
+                                    <img :src="p.image" :alt="p.name">
+                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
+                                </a>
+                                <a class="name" :href="'/product/detail.html?id='+p.id" target="_blank">
+                                    <span v-html="p.name"></span>
+                                </a>
+                                <div class="price mfhc">
+                                    <template v-if="userId && userId>0">
+                                        <em v-if="p.priceFlag==1">未公开价格</em>
                                         <template v-else>
-                                            <em>价格：<i class="icon mIcon" v-for="i in 5">
-                                                    <i v-if="i==1||p.priceGrade>=i" class="icon mIcon on"></i>
-                                            </i></em>
-                                            <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
+                                            <em v-if="!p.priceLoaded">正在获取价格...</em>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity!=2">
+                                                <em>价格仅会员可见</em>
+                                                <div class="btnBox">
+                                                    <a href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                </div>
+                                            </template>
+                                            <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
                                         </template>
-                                    </div>
+                                    </template>
+                                    <template v-else>
+                                        <em>价格：<i class="icon mIcon" v-for="i in 5">
+                                                <i v-if="i==1||p.priceGrade>=i" class="icon mIcon on"></i>
+                                        </i></em>
+                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
+                                    </template>
                                 </div>
-                            </li>
-                        </ul>
-                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
-                    </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
                 </div>
             </div>
-            <div th:if="${item.type}==6">
+        </div>
+        <div v-for="item in pageFloors">
+            <div v-if="item.type==6">
                 <!--大专题-->
-                <div v-for="bigTopic in bigTopicData">
+                <div v-for="bigTopic in item.subFloors">
                     <div class="floorTit">
                         <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
                         <h5 v-text="bigTopic.detail"></h5>
@@ -111,30 +112,30 @@
                     </div>
                 </div>
             </div>
-            <div th:if="${item.type}==4">
+            <div v-if="item.type==4">
                 <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="4">专题</h2>
+                    <h2 v-text="item.title" data-id="4">专题</h2>
                     <a class="more" href="/promotions.html">更多商品专题</a>
                 </div>
                 <div class="floorCon">
                     <div id="goodsTopic" class="swiper-container">
                         <ul class="swiper-wrapper" v-cloak>
-                            <li class="swiper-slide mfc" v-for="topic in topicData4">
+                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
                                 <a :href="topic.link">
                                     <img :src="topic.image" :alt="topic.title">
                                 </a>
                             </li>
                         </ul>
-                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in topicData4.length"></span></div>
+                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
                         <a class="swiper-button-prev" href="javascript:void(0)"></a>
                         <a class="swiper-button-next" href="javascript:void(0)"></a>
                     </div>
                 </div>
             </div>
-            <div th:if="${item.type}==5" class="floorCon smallTopic">
+            <div v-if="item.type==5" class="floorCon smallTopic">
                 <!--小专题-->
                 <ul class="mfw">
-                    <li v-for="topic in topicData5" style="display: inline-block">
+                    <li v-for="topic in item.floorData" style="display: inline-block">
                         <a :href="topic.link">
                             <img :src="topic.image" :alt="topic.title">
                             <p v-text="topic.title"></p>
@@ -142,16 +143,16 @@
                     </li>
                 </ul>
             </div>
-            <div th:if="${item.type}==3">
+            <div v-if="item.type==3">
                 <div class="floorTit">
-                    <h2 th:text="${item.title}" data-id="3">优质供应商</h2>
+                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
                     <h5>采美正品联盟 质量保证</h5>
                 </div>
                 <div class="floorCon">
                     <div class="supplierList">
                         <ul class="clear mfw">
                             <li><img src="/img/common/goodsup.png"/></li>
-                            <li v-for="topic in topicData3" style="display: inline-block">
+                            <li v-for="topic in item.floorData" style="display: inline-block">
                                 <a :href="topic.link">
                                     <img :src="topic.image" :alt="topic.title">
                                     <p v-text="topic.title"></p>