uniapp+vue2+json-server+uView项目(day2)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

上一篇文章中我们已经使用hbuilder搭建好了一个基本的uniapp框架，并且安装了json-server完成了数据的模拟还封装了request请求，接下来就需要把json-server模拟的数据发送get请求获取到并且渲染到页面上去就行了

• 首先在methods里面定义一个getNewsData的方法来发送request请求，并且传递page和limit两个参数，用来规定获取数据的页数以及每次获取多少条数据，return里面定义page为1，意思是请求一页数据，定义limit为5，意思是每一页的数据为五条，然后将这两个参数赋值给发送request里面的data的_page以及_limit，然后request请求发送成功后为了确定请求到了数据，建议先console.log一下res,如果出现下面图所示的数据，即请求发送成功

• 将res.data赋值给一个需要在return里面定义的一个空数据，newsData，具体的代码如下所示：

 getNewsData() {
      uni.request({
        url: "http://localhost:3000/news",
        data: {
          _page: this.page,
          _limit: this.limit,
        },
        method: "GET",
        success:(res)=>{
        this.newsData=res.data
        ]

• 获取到了数据之后我们需要使用v-for循环渲染数据到我们的页面上，然后给每一个新闻页面绑定一个toDetail方法，传递item.id参数，以便于跳转到相应的详情页，然后文章标题，发布时间，浏览数量以及文章来源只需要使用item.各个就可以渲染到页面上了，图片需要动态绑定，:src，然后item.pic，图片也要绑定跳转事件传入id值，这样点标题或者图片都可以跳转到详情页了。