专栏首页编程微刊uni-app学习笔记-uni.request请求和渲染页面(九)

uni-app学习笔记-uni.request请求和渲染页面(九)

前端最主要的还是将数据从后端请求过来,对数据进行处理,并且渲染在界面, 前面讲到了uni-app请求接口跨域问题https://www.jianshu.com/p/aea58ee405b8,自己写完json就放在了自己的服务器上了,日常就是对自己写的json的一些请求玩耍~

今天主要写一下关于uni.request请求相关操作 文档:https://uniapp.dcloud.io/api/request/request

首先准备服务器接口数据:http://www.intmote.com/test.json 目的是把这些数据拿过来渲染在前端界面上

具体步骤

1:首先要写一个空白的组件页面

<template>
    <view>     
        空白页面请求数据示例
    </view>
</template>
<script>
    export default {
        data() {
            return {   
            }
        },
        onLoad() {
        },
        methods: {  
        }
    }
</script>
<style>
</style>

2:看文档,写请求方法 https://uniapp.dcloud.io/api/request/request 使用示例代码,复制黏贴过来

图片.png

将代码写在getList()函数里面,并且把函数 写在methods的方法里面 这里需要将 url: 'https://www.example.com/request',改成 url: '/api/test.json', (前面已经设置了跨域的代理了)

 methods: {  
            getList() {
            uni.request({
              url: '/api/test.json', 
                success: (res) => {
                    console.log(res.data);
                    this.text = 'request success';
                }
            });
            }
        }

3:载入页面的时候加载调用请求函数请求api

 onLoad() {
             this.getList();
},

4:成功调用,在控制台打印 console.log(res.data);

5:在data里面写一个空数组itemList: [],接收api里面返回的数据

data() {
            return {  
                 itemList: []
            }
        },

6:api请求成功之后,将请求过来的数据赋值给上一步在data()定义的数组itemList 里面

 success: (res) => {
                        console.log(res.data);
                         this.itemList =res.data.first;
                    }

7:赋值完成之后,需要对数据进行循环处理,渲染在view标签里面

<view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
             <span>{{item.name}}</span>
             <span>{{item.nick}}</span>
        </view>

ok,完成了,效果如下

参考代码

<template>
    <view>     
        <view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
             <span>{{item.name}}</span>
             <span>{{item.nick}}</span>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {  
                 itemList: []
            }
        },
        onLoad() {
                   this.getList();
               },
        methods: {
             getList() {
                uni.request({
                    url: '/api/test.json', 
                    success: (res) => {
                        console.log(res.data);
                         this.itemList =res.data.first;
                    }
                });
            }
        }
    }
</script>
<style>
.img {
    width: 500upx;
    height: 500upx;
    margin: 0 95upx;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uniapp图片弹框效果

    需求:点击提交按钮,提交成功后会弹出一个弹框,提示成功,点击右上角的叉号或者我知道了,隐藏弹框效果。

    王小婷
  • uni-app提交表单成功之后跳转首页

    功能需求: 1:填写表单内容,点击提交审批按钮,提交成功之后,弹出弹框,提示已经提交成功。2:提交成功之后,两秒钟之后自动跳转到首页

    王小婷
  • uni-app点击按钮,生成列表元素

    在jQuery里面,动态生成div元素需要进行html的拼接,拼接完成再将拼接的内容放到指定的div里面去,在vue中一般编写代码时都不需要操作DOM元素,那么...

    王小婷
  • MySQL数据库(十):用户授权与撤销授权

    前言: 1.mysql数据库服务在不授权的情况下,只允许数据库管理员从数据库服务器本机登陆. 2.系统管理员才有修改数据库管理员密码的权限. 一、用户授权(...

    行 者
  • MySQL查询用户权限

    简书主页:https://www.jianshu.com/u/756c9c8ae984

    JouyPub
  • 最大似然估计(Maximum Likelihood Estimation) - 机器学习基础

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    Steve Wang
  • 使用windows命令行查看mySQL应用的安装路径

    命令行netstat -ao | find “3306”, 查看MySQL默认端口号3306对应的进程id(pid)为30016:

    Jerry Wang
  • 通达OA v11.7后台SQL注入到RCE[0day]

    注入出现在general/hr/manage/query/delete_cascade.php文件中,代码实现如下:

    tnt阿信
  • 【R语言经典实例6】对整个向量执行计算

    基本的数学运算符可以对向量中的元素进行逐个计算。许多其他的函数也能对向量元素逐个进行运算,并以向量的形式输出结果。

    统计学家
  • leetcode队列之设计循环双端队列

    这里采用数组实现,insert操作之前都要先判断是否满了,delete操作之前都要先判断是否空了,对于insertFront及deleteFront都要设置数组...

    codecraft

扫码关注云+社区

领取腾讯云代金券