微信小程序的登录和注册-前后端交互(springboot)
作者:互联网
<form bindsubmit='loginForm'>
<input type='text' name='accountNumber' placeholder="请输入账号" value=""></input>
<input type='password' name='password' placeholder="请输入密码" value=""></input>
<view class='ligin-button'>
<button formType="submit" type='primary'>点击提交</button>
<view style="margin-top: 30px;"></view>
<button formType="reset" type='primary'>重置数据表单</button>
</view>
</form>
data: {
DataList:{
accountNumber:'',
password:''
}
},
loginForm: function(data) {
console.log(data.detail.value)
//数据的双向绑定;
this.setData({
'DataList.accountNumber':data.detail.value.accountNumber,
'DataList.password': data.detail.value.password
})
// this.data.DataList.accountNumber = data.detail.value.accountNumber;
// this.data.DataList.password = data.detail.value.password;
wx.request({
url: 'http://localhost:8080/login',
method: 'POST',
header: { 'Content-Type': 'application/x-www-form-urlencoded' },
data:this.data.DataList,
success(res){
console.log("请求成功!"+JSON.stringify(res.data));
//==='{}' 用于判断js对象是否为空;
if(JSON.stringify(res.data)==='{}'){
wx.navigateTo({
url: '/pages/login/login',
})
}
else{
wx.navigateTo({
url: '/pages/main/main',
})
}
// JSON.stringify()此方法将后端传过来的list集合对象转换成json格式。
// 若不写则将显示[object,object]
},
fail(res){
console.log("请求失败!");
}
})
},
后端的接口调用如下:
package com.aynu.handler;
import com.aynu.beans.People;
import com.aynu.service.ILoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin
public class LoginController {
@Autowired
private ILoginService iLoginService;
@RequestMapping("login")
public People JudgeLogin(People people) {
System.out.println(people.getAccountNumber()+"<----->"+people.getPassword());
// String accountNumber = people.getAccountNumber();
// String password = people.getPassword();
People people2 = iLoginService.JudgeLogin(people);
System.out.println("people2="+people2);
if(people2!=null) return people2;
else return null;
}
}
标签:springboot,accountNumber,DataList,微信,people,value,data,password,交互 来源: https://blog.csdn.net/qq_43788669/article/details/122202801