首先在微信开发者工具中创建一个登录注册界面，代码如下：
longin.wxml部分：
<view class="box">
<view class="title">
<text bindtap="" class="denglu" style="color: pink;">登录</text>
<navigator url="/pages/register/register" style="position: absolute; left: 150px; top: 0;">注册</navigator>
</view>
<view class="longin">
<input type="text" bindinput="usernameInput" placeholder="请输入用户名"/>
<input type="password" bindinput="passwordInput" placeholder="请输入密码"/>
<button disabled="{{jin}}" bindtap="post">登录</button>
</view>
</view>longin.wxss部分：
.box{
position:absolute;
left: 35px;
top: 50px;
width: 250px;
height: 250px;
}
.title text{
margin-left: 60px;
}
input{
margin-top: 40px;
}
button{
margin-top: 40px;
background-color: pink;
}longin.js部分：
data: {
jin:true,
usernamel:'',
passwordl:'',
longin:true
},
//以下是监听输入框的数据并获取，和对登录按钮的设置：只有当输入框中都有数据时才能点击
usernameInput:function(e){
console.log(e)
var val = e.detail.value;
this.setData({
usernamel:val
})
if(val!='' && this.data.passwordl!=''){
this.setData({
jin:false
})
}
else{
this.setData({
jin:true
})
}
},
passwordInput:function(e){
var val = e.detail.value;
this.setData({
passwordl:val
})
if(val!='' && this.data.usernamel!=''){
this.setData({
jin:false
})
}
else{
this.setData({
jin:true
})
}
},
post:function(){
wx.request({
url: 'http://127.0.0.1:8080/user/list', //请求与后端连接
method:"POST",
data:{
username:this.data.usernamel, //将数据传给后端
password:this.data.passwordl
},
success:function(res){
console.log(res);
if(res.data!=0){ //后端对比数据后，判断正误
console.log("登录成功")
wx.navigateTo({ //跳转界面
url: '',
})
}
else{
console.log("登录失败")
}
}
})
}接下来是注册界面
register.wxml部分：
<view class="box">
<view class="title">
<text bindtap="" class="denglu">登录</text>
<text bindtap="click" class="zhuce" style="color: pink;">注册</text>
</view>
<view class="register">
<input type="text" bindinput="usernameInput" placeholder="创建用户名"/>
<input type="text" bindinput="nameInput" placeholder="输入姓名"/>
<input type="password" bindinput="passwordInput" placeholder="设置密码"/>
<button disabled="{{jin}}" bindtap="post">注册并登录</button>
</view>
</view>register.wxss部分：
.box{
position:absolute;
left: 35px;
top: 50px;
width: 250px;
height: 250px;
}
.title text{
margin-left: 60px;
}
input{
margin-top: 40px;
}
button{
margin-top: 40px;
background-color: pink;
}register.js部分：
data: {
jin:true,
username:'',
name:'',
password:'',
time:''
},
//以下同样是监听，和对注册按钮的设置
usernameInput:function(e){
var val = e.detail.value;
this.setData({
username:val
})
if(val!='' && this.data.password!='' && this.data.name!=''){
this.setData({
jin:false
})
}
else{
this.setData({
jin:true
})
}
},
nameInput:function(e){
var val = e.detail.value;
this.setData({
name:val
})
if(val!='' && this.data.username!='' && this.data.password!=''){
this.setData({
jin:false
})
}
else{
this.setData({
jin:true
})
}
},
passwordInput:function(e){
var val = e.detail.value;
this.setData({
password:val
})
if(val!='' && this.data.username!='' && this.data.name!=''){
this.setData({
jin:false
})
}
else{
this.setData({
jin:true
})
}
},
//同登录类似
post:function(){
wx.request({
url: 'http://127.0.0.1:8080/user/register',
method:"POST",
data:{
username:this.data.username,
name:this.data.name,
password:this.data.password,
time:this.data.time
},
success:function(res){
console.log(res);
if(res.data){
console.log("注册成功");
wx.navigateTo({
url: '',
})
}
else{
console.log("注册失败");
}
},
})
}后端部分：文章来源：https://www.toymoban.com/news/detail-504714.html
需在navicat中创建user表，在idea中创建User类文章来源地址https://www.toymoban.com/news/detail-504714.html
@Controller
@ResponseBody
@RequestMapping("/user")
public class jiemian {
//登录
@PostMapping("/list")
@ResponseBody
public static int list(@RequestBody User user) throws ClassNotFoundException, SQLException {
Class.forName("com.mysql.cj.jdbc.Driver");//加载mysql驱动程序 ***一定要导入驱动包
Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", "123456"); //获取连接
//对数据库进行操作
PreparedStatement pre = conn.prepareStatement("select id from user where username='" + user.getUsername() + "' and password='" + user.getPassword() + "'");
ResultSet set = pre.executeQuery(); //获取查询结果
if (set.next()) { //获取查询条数
return 1;
} else {
return 0;
}
}
//注册
@PostMapping("/register")
@ResponseBody
public static boolean register(@RequestBody User user) throws ClassNotFoundException, SQLException {
Class.forName("com.mysql.cj.jdbc.Driver");//加载mysql驱动程序
Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", "123456");
PreparedStatement pre = conn.prepareStatement("insert into user(username,name,password) values(?,?,?)");
//赋值
pre.setString(1, user.getUsername());
pre.setString(2, user.getName());
pre.setString(3, user.getPassword());
int rs = pre.executeUpdate(); //获取插入条数
if (rs > 0) {
return true;
} else {
return false;
}
}
}到了这里，关于微信小程序——登录注册的简单实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
