一、发起请求
发起网络请求
官方文档: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>
三、跳转页面
基本用法
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>
修改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>
后端接口
这里使用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)
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'})),
]
注意:这是测试代码仅供测试使用。
启动django项目,使用Pycharm编辑器启动即可。
启动uView项目,效果如下:
所有评论(0)