【小程序实战代码】小程序登录前后端代码实现

小程序登录代码

1、小程序登录的wxml代码

<view>
    <view class='login-icon'>
       <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view>
      <form bindsubmit = 'doLogin'>
      <!--账号 -->
          <view class="inputView">
             <image class="nameImage" src="../resource/images/username.png"></image>
             <label class="loginLabel">账号</label>
             <input name="username" class="inputText" placeholder='请输入账号'></input>
          </view>
           <view class="line"></view>
        <!--密码-->
          <view class="inputView">
            <image class="keyImage" src="../resource/images/password.png"></image>
            <label class="loginLabel">密码</label>
            <input name="password"  class="inputText" placeholder='请输入密码'/>
          </view>
            
          <!--按钮 -->
           <view>
              <button class="loginBtn" type="primary" form-type='submit'>登录</button>
           </view>
           <view>
              <button class="goRegistBtn" type="warn" bindtap='goRegistPage'>没有账号？点击注册</button>
           </view>
       </form>
    </view>
</view>

2、小程序登录的wxss代码

page{
  background-color: whitesmoke;
}
.login-img{
  width: 500px;
}
/*表单内容 */
.inputView {
  background-color: white;
  line-height: 45px;
}

/*输入框*/
.nameImage,.keyImage{
   margin-left: 22px;
   width: 20px;
   height: 20px;
}
.loginLabel{
   margin: 15px 15px 15px 10px;
   color: gray;
   font-size: 15px;
}

.inputText {
   float: right;
   text-align: right;
   margin-right: 22px;
   margin-top: 11px;
   font-size: 15px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: gainsboro;
  margin-top: 1px;
}
/*按钮*/
.loginBtn {
   width: 80%;
   margin-top:  35px;
}
.goRegistBtn {
  width: 80%;
  margin-top: 15px;
}

3、小程序js代码

const app = getApp();
Page({
    data:{

    },
  doLogin: function (e) {
      var fromObject = e.detail.value;
      var username = fromObject.username;
      var password = fromObject.password;
      console.log(username+password);
      if(username.length == 0 || password.length == 0){
        wx.showToast({
          title: '用户名和密码不能为空',
          icon: 'none',
          duration: 500
        })
      } else {
        var serverUrl = app.serverUrl;
 //在发起请求前，如果后端接口卡住，在此添加loading...
        wx.showLoading({
          title: '请等待'
        })
         wx.request({
           url: serverUrl+'/login',
           method: "POST",
           data:{
             username: username,
             password: password
           },
           header:{
             'content-type': 'application/json' //默认值
           },
           success:function(res){
             wx.hideLoading();
             var status = res.data.status;
             if(status == 500){
               //失败弹出框
               wx.showToast({
                 title: res.data.msg,
                 icon: 'none',
                 duration: 5000,
               })
             } else if(status == 200){
                //登录成功跳转
                wx.showToast({
                  title: '登录成功',
                  icon: 'success',
                  duration: 2000
                });
                app.userInfo = res.data.data;
                //TODD页面跳转
             }
           }
         })
      }

    }，
       //注册页面跳转
  goRegistPage:function(){
    //页面跳转api
   wx.navigateTo({
     url:'../userRegist/regist'
   })
    }
})

注册后端代码

因为我们之前通过代码生成mybatis的mapper配置文件和mapper映射类。
对于一些简单的数据库插入、删除、修改，就不需要我们再进行重写了

1、UserService的登录接口

 /**
     * 根据用户名 和 密码进行查询
     * @param username
     * @param password
     * @return
     */
     public Users queryUserForLogin(String username ,String password );

2、UserServiceImpl实现类

@Transactional 是管理事务的注解，通常默认情况下，只有RunTimeException时，才会回滚，为了保证数据一致性，我们需要声所有异常都会回滚（rollbackFor = Exception.class）

  // Propagation.SUPPORTS 其他bean调用该方法时，如果该bean有事务，就使用该事务，如果该Bean没有事务就不用事务。
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public Users queryUserForLogin(String username, String password) {

        Example userExample = new Example(Users.class);
        Criteria criteria = userExample.createCriteria();
        criteria.andEqualTo("username",username);
        criteria.andEqualTo("password",password);
        Users result = usersMapper.selectOneByExample(userExample);
        return result;
    }

3、controller代码

 @ApiOperation(value= "用户登陆" , notes = "用户登陆接口")
    @PostMapping("/login")
    public IMoocJSONResult login(@RequestBody Users users) throws NoSuchAlgorithmException, InterruptedException {
        Thread.sleep(3000);
           String username = users.getUsername();
           String password = users.getPassword();
           //1、判断用户名和密码不能为空
        if (StringUtils.isBlank(username) || StringUtils.isBlank(password)){
            return IMoocJSONResult.errorMsg("用户名和密码不能为空");
        }
        // 2、判断用户是否存在
        Users userResult = userService.queryUserForLogin(username,MD5Utils.getMD5Str(password));
        //3、返回
        if (userResult !=null ){
            userResult.setPassword("");
            return IMoocJSONResult.ok(userResult);
        } else {
            return IMoocJSONResult.errorMsg("用户名或密码不正确,请重试...");
        }
    }

以上就是小程序登录的前后端代码。