本文共 4396 字，大约阅读时间需要 14 分钟。

小程序登录代码

1、小程序登录的wxml代码

       
           
         
        
          
     
      
                
                   
                    
       账号             
                 
                 
              
                
                  
                   
       密码            
                 
                            
                 
                    
       登录           
                 
                    
       没有账号？点击注册           
             
     
    
    
   

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("用户名或密码不正确,请重试...");        }    }

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

转载地址：http://cjfoi.baihongyu.com/