内容概述

在我的小程序基础功能日渐完善之后，我认为时机已到，可以正式为我的小程序添加上登陆功能。

界面与数据库的编写暂且不谈，今日只管梳理一下具体登陆逻辑的实现。

从咱们输入用户名，密码开始就正式进入到咱们的登陆功能。

既然输入了用户名密码，必不可少的就是获取输入信息，发送请求，访问数据库，判断用户名密码是否正确。

逻辑实现

首先展示微信开发端登陆逻辑的代码演示：

login(){
    wx.removeStorageSync('user')
    wx.request({
      url: 'http://localhost:11000/login',
      method:'POST',
      header: {
        'content-type': 'application/json', 
      },
      data:{username:this.data.username,password:this.data.password},
      success(res){
        if(res.data.code != 200 ){
          Message.error({
            context: this,
            offset: [20, 32],
            duration: 5000,
            content: res.data.message,
          });
          return;
        }

        wx.setStorageSync("user",res.data.data)
        wx.switchTab({
          url: '/pages/home/home'
        })
      }
    })
    
  },

由上到下依次是：

1.删除本地存储器里边的user数据对象。

2.微信请求（包括请求地址，请求方式，请求头，具体请求数据，请求成功返回值）。

3.若请求成功，将请求成功返回值设定进入本地存储器，然后关闭当前页面跳转到指定地址。

咱们一个一个说

\

1.删除本地存储区user对象

因为如你所见咱们每次登陆都会往后端发送请求信息，每次若请求成功都会往本地存储器里边存入请求成功返回的user对象，如果咱们每次登陆都不删除之前登陆所留下的user对象数据的话，本地存储器就会在已有user对象的前提下再次收到user对象的存储请求，这样就会报错。

\

2.微信请求

微信中发起请求使用方法wx.request()，详情请参考微信开发文档。

本次发起请求需指定请求地址，请求头（请求头包含内容后续再讲）以及请求内容。请求地址，请求头皆在后端程序中提前准备完成。

请求内容：(在登陆界面写入的用户名，密码)。切记往后端发请求将数据传入后端方式为Post。

请求方式如下：

method:'POST',
data:{username:this.data.username,password:this.data.password},

这里的格式大致解释为：通过键值对的方式传入两个数据username和password。

分别对应本页面的this.data.username和 this.data.password（即咱们输入的用户名和密码）。

请求到了后端对应的逻辑代码如下：

@PostMapping("/login")
    @ApiOperation("登录")
    public ResponseResult<UserVo> login(@RequestBody UserLogin userLogin, HttpServletRequest request) {
        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(User::getUsername, userLogin.getUsername());
        User one = userService.getOne(queryWrapper);
        if (one == null){
            throw new CustomException(ExceptionMessage.USER_NOT_EXIST);
        }
        if (!one.getPassword().equals(userLogin.getPassword())){
            throw new CustomException(ExceptionMessage.USER_PASSWORD_ERROR);
        }
        UserVo userVo = new UserVo();
        BeanUtils.copyProperties(one, userVo);
        String token = JwtUtils.getToken(one);
        userVo.setToken(token);
        return ResponseResult.success(userVo);
    }

本方法需要传入两个参数（username，password）正好为我们请求传回的两个数据。

该两个参数被我们单独创建的类对象UserLogin所包含。

将获取到的数据进入以下逻辑：

首先我们创造了一个构造器名为：queryWrapper，这个queryWrapper 可以为其设定具体内容（键值对的形式）。

我们在这里设置该构造器为从数据库里获取的user对象的username等价于咱们传入对象的username。

即只有这两个username相等的对象才能被后边的获取方法获取出来。

获取代码如下：

User one = userService.getOne(queryWrapper);

之后进入判断逻辑：

若对象one为空，则证明获取失败，数据库里并不存在和咱们输入用户名一致的用户。给出对应错误提示。

若获取到one对象，证明数据库存在该用户，之后就进入密码正确性的判断，若错误，也给出对应错误提示。

判断代码如下：

if (one == null){
            throw new CustomException(ExceptionMessage.USER_NOT_EXIST);
        }
        if (!one.getPassword().equals(userLogin.getPassword())){
            throw new CustomException(ExceptionMessage.USER_PASSWORD_ERROR);
        }

若用户名密码都没问题则将数据返回微信端待用即可。

\

3.请求成功

若请求成功，微信端会收到后端传回数据对象res（即response的缩写）

不过需要注意的是返回对象并不是一个单纯的user对象，而是包含了许多信息的一个返回体，而咱们需要的user对象就在这个大返回体中的某一部分（res下的data里边的data），

所以设定到本地存储器里的数据得是（res.data.data）如下:

wx.setStorageSync("user",res.data.data)

这样我们获取到的user数据就以user为名字存储进入了微信本地的存储器。方便后续操作使用user的某些信息。

如此登陆功能已实现。

题外话（setStorageSync/getStorageSync）

如名所见：将数据设置进入本地存储器/从本地存储器获取某项数据。

在后续的页面逻辑中，我们难免还会用到数据库中user表中的某些信息来做验证或者某些逻辑检验。

但是我们不能每次要用的时候都像登陆一样用一次就给后端发送一次请求获取user对象。这样操作既伞兵还麻烦。

所以我们就在登陆的时候将获取到的user对象放入本地存储器，这样其他界面逻辑需要使用user对象的某条信息时只需要使用wx.getStorageSync()方法将某条具体的信息取出即可。

这样做十分方便，能大大节省代码量。