35-uni.request获取网络数据

新手一号
327 阅读5分钟

下面是视频提供的新闻接口，一共三个

获取新闻栏目--导航栏部分 ku.qingnian8.com/dataApi/new…

返回值：

[     {         "id": "50",         "classname": "国内"     },     {         "id": "51",         "classname": "国际"     }         .......... ]

获取新闻列表 ku.qingnian8.com/dataApi/new…

参数名介绍是否必填
cid栏目id必填
num获取的条数非必填
page页码非必填

返回值

参数名介绍
idid唯一标识符
title标题
picture缩略图地址
posttime发布时间
classid栏目id
author作者
hits阅读量
[  
    {  
        "id":"232",  
        "title":"谷歌vs反垄断：“消灭”Cookie计划将延至2024年",  
        "picurl":"<http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220729/1659113387.png>",  
        "posttime":"1659105841",  
        "hits":"339",  
        "classid":"53",  
        "author":"腾讯新闻"  
    },  
    {  
        "id":"231",  
        "title":"华为又“撞上”苹果，巅峰对决如何延续？",  
        "picurl":"<http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220729/1659112918.jpg>",  
        "posttime":"1659105680",  
        "hits":"658",  
        "classid":"53",  
        "author":"侠客岛"  
    }  
]

获取新闻详情 ku.qingnian8.com/dataApi/new…

参数名|介绍|是否必填 |--|--| cid|栏目id|必填 id|当前新闻id|必填

返回值

参数名介绍
idid唯一标识
title标题
picurl缩略图地址
posttime发布时间
classid栏目id
author作者
hits阅读量
content详情内容

获取新闻栏目部分接口

这个接口是导航栏部分的每一项 在methods中写请求方法，并在onload中调用方法

onLoad() {
      this.getNavData()
		},
		methods: {
      // 点击导航栏切换选中项
      clickNav(index){
        this.navIndex = index
      },
      // 跳转到详情页
      goDetail(){
        uni.navigateTo({
          url:"/pages/detail/detail"
        })
      },
      // 获取导航列表数据--导航栏内容要在一刷新页面就出现
      // 所以在onload中调用这个方法
      getNavData(){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
          success: res=>{
            console.log(res);
          }
        })
      }
}

一刷新页面就打印出数据了

image.png

将接口拿到的数据赋值给data中定义的变量 data中自定义的变量：navArr: []，然后标签中将这个值遍历出来，通过插值表达式写到标签内，循环要写key

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item" 
        :class="index==navIndex?'active':''" 
        v-for="(item, index) in navArr" 
        @click="clickNav(index)"
        :key="item.id">
          {{item.classname}}
        </view>
      </scroll-view>

    <view class="content">
      <view class="row" v-for="item in newsList">
        <newsStyle @click.native="goDetail"></newsStyle>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        newsList: 10,
        navIndex:0,
        navArr: []
			}
		},
		onLoad() {
      this.getNavData()
		},
		methods: {
      // 点击导航栏切换选中项
      clickNav(index){
        this.navIndex = index
      },
      // 跳转到详情页
      goDetail(){
        uni.navigateTo({
          url:"/pages/detail/detail"
        })
      },
      // 获取导航列表数据--导航栏内容要在一刷新页面就出现
      // 所以在onload中调用这个方法
      getNavData(){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
          success: res=>{
            this.navArr = res.data
          }
        })
      }
		}
	}
</script>

image.png

接下来就是获取新闻列表

同样在methods中写好获取数据的方法，然后在onload中调用

      // 获取新闻列表数据
      getNewsData(){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          success:res=>{
            console.log(res);
          }
        })
      }

image.png

然后在data中定义newsArr存储值，最后在标签中遍历出来

遍历出来的值就是item，这是一个对象，下面自定义组件标签有一个:item="item"，意思是覆盖自定义组件的默认值，要覆盖这个值，需要写一个对象，绑定给item，这个默认值是自定义组件时，为了实现不同页面传递不同的值写的，这里用拿到的接口数据item直接给他把默认值覆盖掉就可以了


    <view class="content">
      <view class="row" v-for="item in newsArr" :key = "item.id">
        <newsStyle :item="item" @click.native="goDetail"></newsStyle>
      </view>
    </view>

现在数据渲染到页面了，但是有一个问题，他和上面导航栏的分类栏目并不对应，是把所有的数据直接渲染到页面的，没有进行分类 image.png

传参

之前是默认获取8条数据，把获取的数据条数写成自定义的

测试携带的参数是3，cid是导航栏的分类，50是国内，51是国际，52是体育，cid是接口自带的

      // 获取新闻列表数据
      getNewsData(){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          data:{
            num: 3,
            cid:52
          },
          success:res=>{
            this.newsArr = res.data
          }
        })
      }

返回3条体育类数据，测试成功，num不是必填的，不填就默认获取8条数据

image.png

点击导航跳转到不同的新闻列表

首先，点击滚动导航栏时要传选择的id，之前只传了index，通过id可以判断点的是哪一栏，就可以去拿对应的数据，通过，点击事件方法也要接收一个id。

      <scroll-view scroll-x class="navScroll">
        <view class="item" 
        :class="index==navIndex?'active':''" 
        v-for="(item, index) in navArr" 
        @click="clickNav(index, item.id)"
        :key="item.id">
          {{item.classname}}
        </view>
      </scroll-view>

拿id,这个id是接口自带的id，通过id，可以判断是哪一类型的新闻

      // 点击导航栏切换选中项
      clickNav(index,id){
        this.navIndex = index;
        console.log(id);
      },

点击国际，打印51，点击体育，打印52，成功拿到了接口带的id image.png

在获取新闻的函数getNewsData中，写一个参数id=50，使这个网络方法一进入页面，onload中调用的方法就直接去拿id为50的分类数据了

2是在点击事件方法中，调用这个新闻内容获取方法，同时把id传进来做参数，这样，点击标签时，就能拿到这个id，然后重新在这里调用网络数据获取的方法，这个方法就根据这个id重新在这里进行网络数据获取，而在网络数据获取的接口中，把获取到的值重新赋给了data中的自定义变量，从而渲染到页面中

在1这里是给网络数据获取方法一个默认值，一进入页面就就获取第一栏的数据，而在2这里的方法调用是当用户点击不同栏目时，重新根据获取到的对应id获取被点击页面的数据，获取到的数据是在网络数据获取的方法中进行重新赋值的 image.png

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item" 
        :class="index==navIndex?'active':''" 
        v-for="(item, index) in navArr" 
        @click="clickNav(index, item.id)"
        :key="item.id">
          {{item.classname}}
        </view>
      </scroll-view>

    <view class="content">
      <view class="row" v-for="item in newsArr" :key = "item.id">
        <newsStyle :item="item" @click.native="goDetail"></newsStyle>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        navIndex:0,
        navArr: [],
        newsArr:[]
			}
		},
		onLoad() {
      this.getNavData()
      this.getNewsData()
		},
		methods: {
      // 点击导航栏切换选中项
      clickNav(index,id){
        this.navIndex = index;
        this.getNewsData(id)
      },
      // 跳转到详情页
      goDetail(){
        uni.navigateTo({
          url:"/pages/detail/detail"
        })
      },
      // 获取导航列表数据--导航栏内容要在一刷新页面就出现
      // 所以在onload中调用这个方法
      getNavData(){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
          success: res=>{
            this.navArr = res.data
          }
        })
      },
      // 获取新闻列表数据
      getNewsData(id=50){
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          data:{
            cid:id
          },
          success:res=>{
            this.newsArr = res.data
          }
        })
      }
		}
	}
</script>

现在，点击不同的页面，就拿到不同的值了 image.png

image.png

在时尚这一栏接口没有数据，对于这种情况，就需要放一个没有内容的图片，提示用户，这里没有数据

最下面nodata那个盒子，如果不加判断的话，点击所有栏目，最下面都会显示这个图片，加一个判断，使他在没有数据的栏目才显示一张图

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item" 
        :class="index==navIndex?'active':''" 
        v-for="(item, index) in navArr" 
        @click="clickNav(index, item.id)"
        :key="item.id">
          {{item.classname}}
        </view>
      </scroll-view>

    <view class="content">
      <view class="row" v-for="item in newsArr" :key = "item.id">
        <newsStyle :item="item" @click.native="goDetail"></newsStyle>
      </view>
    </view>
    
    <view class="nodata" v-if="!newsArr.length">
      <image src="../../static/images/nodata.png" mode=""></image>
    </view>
	</view>
</template>

这样，获取到内容的栏目，会显示获取到的数据，没有获取到数据的栏目，会显示这张图 image.png

image.png

最后，给图片写一个居中的样式，并给定宽度，然后在图片标签中，给图片一个属性mode="widthFix",使图片根据宽度自适应

    <view class="nodata" v-if="!newsArr.length">
      <image src="../../static/images/nodata.png" mode="widthFix"></image>
    </view>

  .nodata {
    // 使图片居中显示
    display: flex;
    justify-content: center;
    image{
      width: 360rpx;
    }
  }
avatar
文章
阅读
粉丝