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

40次阅读

共计 9113 个字符，预计需要花费 23 分钟才能阅读完成。

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>
效果

正文完
eggjs
发表至：无分类
2018-12-26
 0