文章目錄

• 小程式登入程式碼
• 1、小程式登入的wxml程式碼
• 2、小程式登入的wxss程式碼
• 3、小程式js程式碼
• 註冊後端程式碼
• 1、UserService的登入介面
• 2、UserServiceImpl實現類
• 3、controller程式碼

小程式登入程式碼

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("使用者名稱或密碼不正確,請重試...");
        }
    }

以上就是小程式登入的前後端程式碼。