10.2.4 最新案例
本小节讲解最新案例的数据获取和循环显示,效果如图10-5。
开发分析
第1步:查看和测试接口的内容。
第2步:在程序的data代码块初始化变量anli,用于存放最新案例数据。
第3步:在程序的methods代码块中自定义方法GetAnli,用于获取接口的最新案例数据。
第4步:在程序的mounted代码块中调用方法GetAnli,获取数据。
第5步:改造布局代码,将获取的最新案例数组信息循环显示出来。
第1步:查看和测试接口
地址
返回值类型
对象数组,每一个数组的元素是一个对象,每个对象代表一个案例产品的信息。
返回值
[
{
"id" : 53,
"title" : "案例产品14",
"shijian" : "2020-04-24",
"shuoming" : "产品分类1",
"img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271025380000004068.jpg"
},
{
"id" : 52,
"title" : "案例产品13",
"shijian" : "2020-04-24",
"shuoming" : "产品分类1",
"img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271025260000003825.jpg"
},
{
"id" : 51,
"title" : "案例产品12",
"shijian" : "2020-04-23",
"shuoming" : "产品分类1",
"img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271023250000004901.jpg"
},
{
"id" : 50,
"title" : "案例产品11",
"shijian" : "2020-04-23",
"shuoming" : "产品分类1",
"img" : "http://qiyephp.yaoyiwangluo.com/up/tupian/201909271027220000004713.jpg"
}
]
第2,3,4步:获取数据
<script>
export default {
data() {
return {
anli:[], //初始化为空,数组,存放最新案例数据
}
},
onLoad() {
},
mounted:function(){
this.GetAnli(); //调用获取最新案例的方法
},
methods: {
//自定义方法:获取最新案例
GetAnli:function(){
//调用uni-app的api获取远程服务器数据
uni.request({
//url:this.$WebURL.WebUrl.dizhi + "/m/wx_api_AnLi_top4.asp",
//http://qiyephp.yaoyiwangluo.com/h5/wx_api_AnLi_top4.php
url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_AnLi_top4.php",
//success:function(res) 不能获取
success:(res) =>{
this.anli = res.data;//返回值赋值给变量
//console.log("返回产品数据:"+this.chanpin)
}
})
},//获取最新案例 结束
}
}
</script>
第5步:显示数据
<!--通过接口获取最新案例数据,然后循环显示-->
<!--变量anli,存放的是通过接口获取的最新案例数据(数组)-->
<!--url属性里面的内容是要跳转的案例详细页面+参数-->
<!--参数anli_id:案例id,参数anli_mc:案例名称-->
<navigator class='anli' :url="'/pages/c/anli_info/anli_info?anli_id='+an.id+'&anli_mc='+an.title"
v-for="an in anli" :key="an.id" >
<image :src='an.img' mode='widthFix' class='anli-tupian'></image><!--案例图片-->
<view class='anli_jieshao'>
<text class='anli_biaoti1'>{{an.title}}</text><!--案例标题-->
<text class='anli_biaoti2'>时间:{{an.shijian}}</text><!--案例发布时间-->
<text class='anli_biaoti3'>分类:{{an.shuoming}}</text><!--案例分类-->
</view>
</navigator