微信小程序——登录注册的简单实现

首先在微信开发者工具中创建一个登录注册界面，代码如下：

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")
    @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;
        }
    }
}