有接口如下:
http://127.0.0.1:8000/信息/计划/
返回json数据:
(
{
“名称”:“(山上双人标准间)黄山经典二日游(魅力黄山,日出云海,人间仙境,春暖花开)”,
“天”:2
“晚上”:1、
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/a9836502.jpg”,
“review_num”: 2
“unit_price”: 0
}，
{
“名称”:“0购物+三环内接!郑州——焦作云台山二日游,含1晚住宿+ 1早2正餐,无强制消费”,
“天”:2
“晚上”:1、
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/3 a82e902.jpg”,
“review_num”: 1、
“unit_price”: 329
}，
{
“名称”:“岛内酒店上门接在厦门至泉州开元寺+南少林+洛阳桥+西街+天后宫一日游”,
“天”:1、
“晚上”:0,
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/f8106f02.jpg”,
“review_num”: 2
“unit_price”: 0
}，
{
“名称”:“南宁& # 9992;西安兵马俑华清池延安黄帝陵壶口瀑布城墙5日/耳麦自助餐/0购物/接送机”,
“天”:5
“晚上”:4
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/93835 fbb.jpg”,
“review_num”: 1、
“unit_price”: 3045
}，
{
“名称”:“北京+天津纯玩6日游/餐餐特色/连锁酒店/专车专导/故宫/瓷房子赠升国旗”,
“天”:6,
“晚上”:5
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/0 f.water.jpg”,
“review_num”: 1、
“unit_price”: 0
}，
{
“名称”:“住蒙古包祝辞内蒙古希拉穆仁草原+响沙湾沙漠+成吉思汗陵+呼和浩特市内双飞五日游”,
“天”:5
“晚上”:4
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/4 b806602.jpg”,
“review_num”: 1、
“unit_price”: 0
}，
{
“名称”:“北京全景高端五星游丨餐餐特色,0购物0自费及24小时接送,赠德云社+人民大会堂”,
“天”:5
“晚上”:4
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/ca841f56.jpg”,
“review_num”: 1、
“unit_price”: 0
}，
{
“名称”:“机票+含餐在西安兵马俑/华清池/骊山/西岳华山/延安/黄帝陵/壶口瀑布6日”,
“天”:6,
“晚上”:5
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/93835 fbb.jpg”,
“review_num”: 1、
“unit_price”: 2740
}，
{
“名称”:“高铁/动车往返祝辞宁波——温州雁荡山2日游净名谷+灵岩景区+大龙湫赏灵峰夜景”,
“天”:2
“晚上”:1、
“最爱”:0,
“score_avg”: 4
:“photo_url/媒体/图片/景观/7565 abdd.jpg”,
“review_num”: 1、
“unit_price”: 0
}
)
通过vue去请求这个api,并将数据遍历,生成多个div块模板,并渲染数据,效果图如下:
api返回json中有9条记录,所以对应应该生成9个上图的div块,开始动手:
首先,在html页面上引入js
& lt;脚本type=" text/javascript src=" https://www.yisu.com/zixun/{%静态'js/vue。js ' %}”祝辞& lt;/script>
& lt;脚本type=" text/javascript src=" https://www.yisu.com/zixun/{%静态'js/axios.min。js ' %}”祝辞& lt;/script>
& lt;脚本type=" text/javascript src=" https://www.yisu.com/zixun/{%静态'js/常见。js ' %}”祝辞& lt;/script>
& lt; script>
美元(文档)。准备好(函数(){
getHotScheme ();1. 在dom加载完之后执行getHotScheme函数
});
& lt;/script>
要用到vue就少不vue.js, vue。js 2.0版本推荐使用axios来完成ajax请求。
我们将上面功能的实现写在common.js的getHotScheme中
相关的html如下:
& lt; div class=" GridLex——gap-30-wrappper package-grid-item-wrapper”比;
& lt; div类=癎ridLex-grid-noGutter-equalHeight”比;
& lt;模板v=皊chemesInfo schemeInfo”比;
& lt; div class=" GridLex-col-4_sm-6_xs-12 mb-30”比;
& lt; div类=皃ackage-grid-item”比;
& lt; a href=" https://www.yisu.com/zixun/detail-page.html " rel=巴獠縩ofollow”比;
& lt; div类="图像"比;
& lt; img src=" https://www.yisu.com/zixun/schemeInfo.photo_url " alt="旅游包"/比;
& lt; div类=癮bsolute-in-image”比;
& lt; div类=俺中奔洹弊４? lt; span> {{schemeInfo。天}}天{{schemeInfo。晚上}}夜& lt;/span> & lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=澳谌輈learfix”比;
& lt; h6> {{schemeInfo.name}} & lt;/h6>
& lt; div类=皉ating-wrapper”比;
& lt; div类=皉aty-wrapper”比;
& lt; div类=" star-rating-read-only " v-bind: data-rating-score=皊chemeInfo.score_avg祝辞& lt;/div>
& lt; span>/{{schemeInfo。review_num}}评论& lt;/span>
& lt;/div>
& lt;/div>
& lt; div类=癮bsolute-in-content”比;
& lt;跨类=" btn "祝辞& lt;我类=癴a fa-heart-o祝辞& lt;/i> & lt;/span>
& lt; div类="价格"祝辞￥{{schemeInfo。unit_price}} & lt;/div>
& lt;/div>
& lt;/div>
& lt;/a>
& lt;/div>
& lt;/div>
& lt;/template>
& lt;/div>
& lt;/div>
