uniapp 登录功能实现

一.视图层

<view class="login">
<view class="row">
<view>邮箱：</view>
<input class="input-text" 
type="text"
placeholder="请输入邮箱" @input="onEmail">
</view>
<view class="row"><view>密码：</view>
<input class="input-text" 
type="password"
placeholder="请输入密码" @input="onPassword">
</view><button type="default" @click="login">登录</button>
</view>

2.在data 里面定义初始值

data(){
return{
onEmail:'',//邮箱的账号的初始值
onPassword:'',//密码的初始值}
}

3.输入的内容可以通过 event.target.value 获取

methods:{
onEmail:function(event){
this.onEmail=event.target.value
},
onPassword:function(event){
this.onPassword=event.target.value
},
}

4.点击登录的时候

login(){
//两个只要有一个为空的,就给提示
if(this.onEmail.tirm()==''||this.onPassword.tirm()==''){
uni.showToast({title:"用户名和密码必填"
})
return;
}
//发送请求
uni.request({
url:"/login",
data:{
email:this.onEmailpassword:this.onPassword
},
success:(res)=>{
if(res.statusCode==200){
//把解构的意义实际是res.data.access_token 的值拿出来值赋给一个变量，变量名叫access_token;
let {assess_token}=res.data;
//拿到token 进行缓存
uni.setStorageSync('token',access_token); //变量，值
uni.showToast({
title:'登录成功'
})
}else{
uni.showToast({
title:"登录失败"
})
}
}
})
}