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'
},
成功后跳转主页