如何在uniapp中调用接口

我们可以通过uni.request来调用接口，并将接口数据渲染在页面上

只需要编辑文件

HBuilderProjectshellopagesindexindex.vue

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view></view></template><script>
    export default {
        data() {
            return {
                title: 'Hello the world!'
            }
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList(){
                uni.request({
                url: 'http://192.168.3.23:8080/api/v2/auth/admin_login',
                    data: {
                        phone: '138xxxx0731',
                        password: 'abcd1234'
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded',
                        "token":"hfhdsjkfhsdjkfhsjkdf",
                    },
                    method:'POST',
                    success: res => {
                            this.title = '编号:'+res.data.data.id;
                            console.log('返回', res.data.data);
                    },
                    fail: res => {
                        console.log('返回', res.data);
                    }
                })
            }
        }
    }
</script><style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

如有问题，可以QQ搜索群1028468525加入群聊，欢迎一起研究技术

有疑问联系站长，请联系QQ：