uniApp注册登录与PHP交互,uni.request POST 请求后台接收不到参数

uniphp 表单部分

uniApp注册登录与PHP交互,uni.request POST 请求后台接收不到参数


<template>
	<view>
		<view style="width: 90%; margin: 200rpx auto;">
			<view style="margin-bottom: 50rpx;font-size: 60rpx;color: royalblue;text-align: center;">登 录</view>
			
			<uni-forms ref="form":modelValue="form":rules="rules">
				
				<uni-forms-item  label="姓名:" name="username">
					<uni-easyinput  v-model="form.username" prefix-icon="person" focus placeholder="请输入登录用户名"></uni-easyinput>
				</uni-forms-item>
				
				
				<uni-forms-item label="密码:" name="password">
					<uni-easyinput type="password" v-model="form.password" prefix-icon="locked" focus placeholder="请输入登录密码"></uni-easyinput>
				</uni-forms-item>
				
			</uni-forms>
			<view>
				<button type="primary" @click="login">登 录</button>
			</view>
			<navigator url="/pages/reg/reg" style="margin: 40rpx 0;color: deepskyblue;" >前往注册</navigator>
		</view>
	</view>

	
</template>

需要注意 这里使用 uni-forms 验证表单数据!需要引入组件!具体方法看我上一篇博客!!
直接复制代码过去,而不引入组件!没有效果!

在这里插入图片描述
在这里插入图片描述

uniphp js部分

下面是验证表单的代码!和发送网络请求代码!后端 get和post 请求接收数据自行修改!!

<script>
	export default {
		data() {
			return {
				form:{username:'',password:''},
				
				rules: {
					// 对name字段进行必填验证
					username: {
						// name 字段的校验规则
						rules:[{required: true,errorMessage: '请填写姓名'}],
						// 当前表单域的字段中文名,可不填写
						// validateTrigger:'bind'
						 validateTrigger:'submit'
					},
					password: {
						// name 字段的校验规则
						rules:[{required: true,errorMessage: '请填写密码'}],
						// 当前表单域的字段中文名,可不填写
						// validateTrigger:'bind'
						 validateTrigger:'submit'
					},
				}
				
			}
		},
		methods: {
			
			login(){
				//console.log(this.form)
				
					this.$refs.form.validate().then(res=>{
					const baseUrl = ""//这里写网址
					uni.request({
						header: {
							// 'Content-Typee': 'application/x-www-form-urlencoded',
						   'content-type': 'application/x-www-form-urlencoded;charset=utf-8'  
						
						//'Content-Type': 'application/json'
						},
						
						url:baseUrl+'“',//这里写网址下面的链接
						method:'POST',
						// data:this.form,
						data: {
						        username: '2',
						        password: '2'
							},
						
						
						
						success:(res) => {
							
							const datas = res.data
								console.log('数据')
								console.log(res.data.code)
					
							if(datas.code !== 200){
									console.log('失败了')
									//跳转页面
									// uni.navigateTo({
									// 	url:'/pages/index/index'
									// })
							
							}else{
								console.log('成功了')
								//存储
								uni.setStorageSync('user',datas.data)
								//跳转页面
								uni.navigateTo({
									url:'/pages/index/index'
								})
								// uni.switchTab({
								// 	url:'/pages/index/index'
								// })
							}
						}
					})
					//
					
				}).catch(err =>{
					console.log('表单错误信息',err);
				})
				
			
				
			}
		}
	}
</script>





uni.request 发送的json数据!而我们后台如果不是接收JSONS数据一定要配置 header 并且要设置UTF-8 否则数据发送不过去!

	header: {
							// 'Content-Typee': 'application/x-www-form-urlencoded',
						   'content-type': 'application/x-www-form-urlencoded;charset=utf-8'  
						
						//'Content-Type': 'application/json'
						},

成功后跳转主页
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值