egg(83,84,85,86)--egg之商城首页数据渲染

controller

app/controller/default/index.js

'use strict';

const Controller = require('egg').Controller;

class IndexController extends Controller {
  async index() {


    //获取顶部导航的数据

    var topNav=await this.ctx.model.Nav.find({"position":1});


   //轮播图

   var focus=await this.ctx.model.Focus.find({"type":1});


   //商品分类

   var goodsCate=await this.ctx.model.GoodsCate.aggregate([
            
        {
          $lookup:{
            from:'goods_cate',
            localField:'_id',
            foreignField:'pid',
            as:'items'      
          }      
      },
      {
          $match:{
            "pid":'0'
          }
      }

    ])

    // console.log(topNav);
    var middleNav=await this.ctx.model.Nav.find({"position":2});

    middleNav=JSON.parse(JSON.stringify(middleNav));  //1、不可扩展对象

    for(var i=0;i<middleNav.length;i++){     
       if(middleNav[i].relation){
            //数据库查找relation对应的商品            
            try{
                var tempArr=middleNav[i].relation.replace(/，/g,',').split(',');
                var tempRelationIds=[];
                tempArr.forEach((value)=>{
                  tempRelationIds.push({
                    "_id":this.app.mongoose.Types.ObjectId(value)
                  })
                })
                var relationGoods=await this.ctx.model.Goods.find({
                  $or:tempRelationIds
                },'title goods_img');

              middleNav[i].subGoods=relationGoods;

            }catch(err){   //2、如果用户输入了错误的ObjectID（商品id）

              middleNav[i].subGoods=[];
            
            }
       }else{

          middleNav[i].subGoods=[];
       }

    }

    console.log(JSON.stringify(middleNav))

    var shoujiResult=await this.service.goods.get_category_recommend_goods('5bbf058f9079450a903cb77b','best',8);
    await this.ctx.render('default/index',{
      topNav:topNav,
      focus:focus,
      goodsCate:goodsCate,
      middleNav:middleNav,
      shoujiResult:shoujiResult
    });
    
  }
}

module.exports = IndexController;

view

app/view/default/index.html

<% include  ./public/header.html%>
<!--end header -->

<!-- start banner_x -->
        <div class="banner_x center">
            <a href="./index.html" target="_blank"><div class="logo fl"></div></a>
            <a href=""><div class="ad_top fl"></div></a>
            <div class="nav fl">
                <ul class="clearfix" id="nav_list">


                <%for(var i=0;i<middleNav.length;i++){ %>
                        


                    <li>
                        <a href="#" target="_blank"><%=middleNav[i].title%></a>

                        <%if(middleNav[i].subGoods.length>0) {%>
                    
                            <ol class="children-list clearfix">
                                    
                                    <%for(var j=0;j<middleNav[i].subGoods.length;j++){ %>
                            
                                        <li>
                                            <a href="#">
                                                <img src="<%=middleNav[i].subGoods[j].goods_img%>" />
                                                <p><%=middleNav[i].subGoods[j].price%></p>
                                            </a>
                                        </li>        
                                        
                                    <%}%>
                        
                            </ol>

                        <%}%>
                    
                    </li>

                <%} %>
                </ul>
            </div>
            <div class="search fr">
                <form action="" method="post">
                    <div class="text fl">
                        <input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货">
                    </div>
                    <div class="submit fl">
                        <input type="submit" class="sousuo" value="搜索"/>
                    </div>
                    <div class="clear"></div>
                </form>
                <div class="clear"></div>
            </div>
        </div>
<!-- end banner_x -->

    <!-- start banner_y -->
        <div class="banner_y center">
            <div class="nav">                
                <ul>

                    <%for(var i=0;i<goodsCate.length;i++){ %>
                        <li>
                            <a href="#"><%=goodsCate[i].title%></a>                        
                            <div class="pop">
                                    <ol class="cate_list clear">
                                    
                                            <%for(var j=0;j<goodsCate[i].items.length;j++){ %>
                                                <li>
                                                    <div class="xuangou_left">
                                                        <a href="#">
                                                            <div class="img fl"><img src="<%=goodsCate[i].items[j].cate_img%>" alt="<%=goodsCate[i].items[j].title%>"></div>
                                                            <span class="fl"><%=goodsCate[i].items[j].title%></span>                                                            
                                                        </a>
                                                    </div>
                                                    
                                                </li>
                                            <%}%>
                                                                    
                                    </ol>
                            </div>
                        </li>
                    <%}%>
                </ul>
            </div>


              <div class="swiper-container">
                <div class="swiper-wrapper">
                    

                    <%for(var i=0;i<focus.length;i++){ %>
                        <div class="swiper-slide">

                                <a href="<%=focus[i].link%>" target="_blank">
                                    <img src="<%=focus[i].focus_img%>" alt="<%=focus[i].title%>" />

                                </a>
                        </div>
                    <%}%>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
        
        </div>    

        <div class="sub_banner center">
            <div class="sidebar fl">
                <div class="fl"><a href=""><img src="/public/default/image/hjh_01.gif"></a></div>
                <div class="fl"><a href=""><img src="/public/default/image/hjh_02.gif"></a></div>
                <div class="fl"><a href=""><img src="/public/default/image/hjh_03.gif"></a></div>
                <div class="fl"><a href=""><img src="/public/default/image/hjh_04.gif"></a></div>
                <div class="fl"><a href=""><img src="/public/default/image/hjh_05.gif"></a></div>
                <div class="fl"><a href=""><img src="/public/default/image/hjh_06.gif"></a></div>
                <div class="clear"></div>
            </div>
            <div class="datu fl"><a href=""><img src="/public/default/image/hongmi4x.png" alt=""></a></div>
            <div class="datu fl"><a href=""><img src="/public/default/image/xiaomi5.jpg" alt=""></a></div>
            <div class="datu fr"><a href=""><img src="/public/default/image/pinghengche.jpg" alt=""></a></div>
            <div class="clear"></div>


        </div>
    <!-- end banner -->

    <!-- start danpin -->
        <div class="danpin center">
            
            <div class="title center">小米明星单品</div>
            <div class="main center">
                <div class="mingxing fl">
                    <div class="sub_mingxing"><a href=""><img src="/public/default/image/pinpai1.png" alt=""></a></div>
                    <div class="pinpai"><a href="">小米MIX</a></div>
                    <div class="youhui">5月9日-21日享花呗12期分期免息</div>
                    <div class="jiage">3499元起</div>
                </div>
                <div class="mingxing fl">
                    <div class="sub_mingxing"><a href=""><img src="/public/default/image/pinpai2.png" alt=""></a></div>
                    <div class="pinpai"><a href="">小米5s</a></div>
                    <div class="youhui">5月9日-10日，下单立减200元</div>
                    <div class="jiage">1999元</div>
                </div>
                <div class="mingxing fl">
                    <div class="sub_mingxing"><a href=""><img src="/public/default/image/pinpai3.png" alt=""></a></div>
                    <div class="pinpai"><a href="">小米手机5 64GB</a></div>
                    <div class="youhui">5月9日-10日，下单立减100元</div>
                    <div class="jiage">1799元</div>
                </div>
                <div class="mingxing fl">     
                    <div class="sub_mingxing"><a href=""><img src="/public/default/image/pinpai4.png" alt=""></a></div>
                    <div class="pinpai"><a href="">小米电视3s 55英寸</a></div>
                    <div class="youhui">5月9日，下单立减200元</div>
                    <div class="jiage">3999元</div>
                </div>
                <div class="mingxing fl">
                    <div class="sub_mingxing"><a href=""><img src="/public/default/image/pinpai5.png" alt=""></a></div>
                    <div class="pinpai"><a href="">小米笔记本</a></div>
                    <div class="youhui">更轻更薄，像杂志一样随身携带</div>
                    <div class="jiage">3599元起</div>
                </div>
                <div class="clear"></div>
            </div>
        </div>



        <!-- 手机 -->

        <div class="category_item w">
            <div class="title center">手机</div>
            <div class="main center">


                <div class="category_item_left">

                    <img src="/public/default/image/shouji.jpg" alt="手机">
                </div>


                <div class="category_item_right">
                        
                        <%for(var i=0;i<shoujiResult.length;i++){ %>
                        

                                <div class="hot fl">
                                        <div class="xinpin"><span>新品</span></div>
                                        <div class="tu"><a href=""><img src="<%=shoujiResult[i].goods_img%>"></a></div>
                                        <div class="miaoshu"><a href="#"><%=shoujiResult[i].title%></a></div>
                                        <div class="jiage"><%=shoujiResult[i].price%>元</div>
                                        <!-- <div class="pingjia">372人评价</div> -->
                                        <div class="piao">
                                            
                                                <span><%=shoujiResult[i].sub_title%></span>
                                                
                                            
                                        </div>
                                </div>
                        <%} %>
                            
                </div>
            
            
            </div>
        </div>



        <!-- 配件 -->
        <div class="category_item w">
            <div class="title center">配件</div>
            <div class="main center">
                <div class="content">
                    <div class="hot fl"><a href=""><img src="/public/default/image/peijian1.jpg"></a>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span>新品</span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian2.jpg"></a></div>
                        <div class="miaoshu"><a href="">小米6 硅胶保护套</a></div>
                        <div class="jiage">49元</div>
                        <div class="pingjia">372人评价</div>
                        <div class="piao">
                            <a href="">
                                <span>发货速度很快！很配小米6！</span>
                                <span>来至于mi狼牙的评价</span>
                            </a>
                        </div>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:#fff"></span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian3.jpg"></a></div>
                        <div class="miaoshu"><a href="">小米手机4c 小米4c 智能</a></div>
                        <div class="jiage">29元</div>
                        <div class="pingjia">372人评价</div>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:red">享6折</span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian4.jpg"></a></div>
                        <div class="miaoshu"><a href="">红米NOTE 4X 红米note4X</a></div>
                        <div class="jiage">19元</div>
                        <div class="pingjia">372人评价</div>
                        <div class="piao">
                            <a href="">
                                <span>发货速度很快！很配小米6！</span>
                                <span>来至于mi狼牙的评价</span>
                            </a>
                        </div>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:#fff"></span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian5.jpg"></a></div>
                        <div class="miaoshu"><a href="">小米支架式自拍杆</a></div>
                        <div class="jiage">89元</div>
                        <div class="pingjia">372人评价</div>
                        <div class="piao">
                            <a href="">
                                <span>发货速度很快！很配小米6！</span>
                                <span>来至于mi狼牙的评价</span>
                            </a>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="content">
                    <div class="hot fl"><a href=""><img src="/public/default/image/peijian6.png"></a>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:#fff"></span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian7.jpg"></a></div>
                        <div class="miaoshu"><a href="">小米指环支架</a></div>
                        <div class="jiage">19元</div>
                        <div class="pingjia">372人评价</div>
                        <div class="piao">
                            <a href="">
                                <span>发货速度很快！很配小米6！</span>
                                <span>来至于mi狼牙的评价</span>
                            </a>
                        </div>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:#fff"></span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian8.jpg"></a></div>
                        <div class="miaoshu"><a href="">米家随身风扇</a></div>
                        <div class="jiage">19.9元</div>
                        <div class="pingjia">372人评价</div>
                    </div>
                    <div class="hot fl">
                        <div class="xinpin"><span style="background:#fff"></span></div>
                        <div class="tu"><a href=""><img src="/public/default/image/peijian9.jpg"></a></div>
                        <div class="miaoshu"><a href="">红米4X 高透软胶保护套</a></div>
                        <div class="jiage">59元</div>
                        <div class="pingjia">775人评价</div>
                    </div>
                    <div class="hotlast fr">
                        <div class="hongmi"><a href=""><img src="/public/default/image/hongmin4.png" alt=""></a></div>
                        <div class="liulangengduo"><a href=""><img src="/public/default/image/liulangengduo.png" alt=""></a></div>                    
                    </div>
                    <div class="clear"></div>
                </div>                
            </div>
        </div>
        <footer class="mt20 center">            
            <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
            <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
            <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
        </footer>
    </body>
</html>

效果