uni-app 发起请求,Toast 消息提示 ,跳转页面

一、发起请求

 发起网络请求

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单

官方文档:https://uniapp.dcloud.io/api/request/request

下面说几个重点知识

data 数据说明

最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String。转换规则如下:

  • 对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18
  • 对于 POST 方法且 header['content-type'] 为 application/json 的数据,会进行 JSON 序列化。
  • 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

二、Toast 消息提示 

此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方,具体表现在:

uView的toast有5种主题可选
可以配置toast结束后,跳转相应URL

目前没有加载中的状态,请用uni的uni.showLoading,这个需求uni已经做得很好

官方网站:https://www.uviewui.com/components/toast.html

基本使用

以下为一个模拟登录成功后,弹出toast提示,并在一定时间(默认2000ms)后,自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

<template>
    <view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {
        methods: {
            showToast() {
                this.$refs.uToast.show({
                    title: '登录成功',
                    type: 'success',
                    url: '/pages/user/index'
                })
            }
        }
    }
</script>
View Code

三、跳转页面

基本用法

this.$u.route({
  url: 'pages/xxx/xxx'
})

注意:仅限uView使用

四、综合实践

前端页面

 新建一个uView项目,参考文章:https://www.cnblogs.com/xiao987334176/p/15075858.html

 在pages目录创建home文件夹,在home文件夹中创建index.vue,代码如下:

<template>
    <view class="wrap">
        <view class="title">
            这是主页
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

<style scoped>
    .wrap {
        padding: 40rpx;
    }
    .title {
        font-size: 40rpx;
        font-weight: 500;
    }
</style>
View Code

修改pages/index/index.vue

<template>
    <view class="wrap">
        <u-toast ref="uToast" />
        <view style="text-align: center;">
            <text class="title">登录</text>
        </view>
        <u-form :model="form" ref="uForm">
            <u-form-item label="用户名" label-width="100" prop="name">
                <u-input v-model="form.name" placeholder="请输入用户名" />
            </u-form-item>
            <u-form-item label="密 码" label-width="100" prop="pwd">
                <u-input v-model="form.pwd" type="password" :password-icon="passwordIcon" placeholder="请输入密码" />
            </u-form-item>
        </u-form>
        <u-button type="success" @click="submit">提交</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                passwordIcon: true,
                form: {
                    name: '',
                    pwd: '',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入用户名',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: ['change', 'blur'],
                    }]
                }
            }
        },
        methods: {
            login() {
                let _this = this
                let params = this.form
                uni.request({
                    method: 'POST',
                    url: 'http://127.0.0.1:8000/login/', //仅为示例,并非真实接口地址。
                    data: params,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
                    },
                    success: (res) => {
                        // console.log(res);
                        if (res.data.status == '200') {
                            //跳转首页
                            _this.$refs.uToast.show({
                                title: '登录成功',
                                type: 'success',
                                url: 'pages/home/index',
                                duration: 500
                            })
                            // _this.goHome()
                        } else {
                            _this.$refs.uToast.show({
                                title: res.data.message,
                                type: 'error',
                            })
                        }

                    },
                    fail: (res) => {
                        console.log("调用失败", res)
                    }
                });
            },
            goHome() {
                console.log("执行goHome")
                this.$u.route({
                    url: 'pages/home/index'
                })
                // uni.switchTab({
                //     url: '/pages/home/index'
                // });
            },
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                        this.login()
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        },
        // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    }
</script>

<style scoped>
    .wrap {
        padding: 40rpx;
    }

    .title {
        font-size: 40rpx;
        font-weight: 500;
    }
</style>
View Code

后端接口

这里使用python django框架作为后端接口,django版本3.5。这里仅限于对于django比较熟悉的人使用,小白路过。

使用Pycharm编辑器,创建一个demo项目。

views.py

from django.shortcuts import render
from rest_framework.viewsets import ViewSetMixin
from rest_framework import status
from django.http import JsonResponse
from rest_framework.views import APIView

# Create your views here.
class YueDuView(ViewSetMixin, APIView):
    def login(self, request, *args, **kwargs):
        # print(request.POST)
        user = request.POST.get('name')
        pwd = request.POST.get('pwd')
        print(user,pwd)
        if user=='xiao' and pwd=='1234':
            return JsonResponse({'status': status.HTTP_200_OK, 'data': [],'message':''},
                                status=status.HTTP_200_OK)
        else:
            return JsonResponse({'status': status.HTTP_403_FORBIDDEN, 'data': [],'message':'用户名或密码错误'},
                                status=status.HTTP_200_OK)
View Code

urls.py

from django.contrib import admin
from django.urls import path
from application import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.YueDuView.as_view({'post':'login'})),
]
View Code

注意:这是测试代码仅供测试使用。

启动django项目,使用Pycharm编辑器启动即可。

启动uView项目,效果如下:

uni-app框架是一种可以实现一次编码多端编译运行的开发框架,它的优点在于可以方便地开发适用于多个平台的应用。在开发uni-app登录页面时,可以通过学习uni-app框架的使用来完成。 首先,需要明确登录界面的基本需求。根据引用中提到的信息,可以先确定登录界面需要有用户名和密码的输入框,以及一个登录按钮。另外,在登录过程中可能涉及到一些异步操作,例如发送请求验证密码,这时可以使用引用中的代码来实现登录按钮的点击事件,并在登录成功后显示一个弹窗。 具体来说,可以按照以下步骤来开发uni-app登录页面: 1. 首先,在页面中添加用户名和密码的输入框,以及一个登录按钮。可以使用uni-app提供的组件来实现,例如u-input和u-button。 2. 在登录按钮的点击事件中,可以调用一个login()方法来处理登录逻辑。在该方法中,可以通过发送请求验证密码的方式来进行登录验证。当密码正确时,可以设置一个isLogining的变量为true,表示正在登录。 3. 然后,使用setTimeout来模拟一个登录请求的延迟,通过设置一个定时器,在一定时间后将isLogining变量重新设置为false,表示登录完成。 4. 在登录成功后,可以使用uni-app提供的u-toast组件来显示一个登录成功的弹窗。可以通过调用$refs来获取到u-toast组件的实例,然后使用show方法来显示弹窗,可以在show方法的参数中配置弹窗的标题和类型等信息。 5. 可以通过设置url参数来指定登录成功后跳转到哪个页面。如果需要跳转到tabBar页面,则还需配置isTab参数为true。 综上所述,以上就是开发uni-app登录页面的基本步骤,可以根据引用和引用中的信息来进行开发。在开发过程中,还可以参考引用提供的uni-app官方API文档来获取更多相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【uni-appuni-app移动端开发 - 登录界面](https://blog.youkuaiyun.com/weixin_42678675/article/details/108797427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [HBuilderX uni-app简单实现静态登录页面(实例)](https://blog.youkuaiyun.com/qq_45609680/article/details/129067987)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值