首先在微信开发者工具中创建一个登录注册界面，代码如下：
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("注册失败");}},})}
后端部分：
需在navicat中创建user表，在idea中创建User类
@Controller@ResponseBody@RequestMapping("/user")public class jiemian {//登录@PostMapping("/list")@ResponseBodypublic 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")@ResponseBodypublic 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;}}}
如果觉得《微信小程序——登录注册的简单实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
