【小程序开发】开发一个短信登录验证（后端采用springboot）

迷南。 2022-11-13 05:29 184阅读 0赞

一、前言

> 前两天发布了一篇关于大创项目的一个小程序开发（[vant组件引入][vant]），然后有一位粉丝（仅有的）询问能帮忙开发一个小程序吗？于是我又开始了小程序的学习（记得上次还是半年前了）。这次来一起使用小程序实现一个短信登录验证。希望大家多多支持，不足之处望见谅。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]  
> 参考：[微信公众号开发文档][Link 1]、[vant组件库][vant 1]

二、开发步骤

1.  设计页面  
    采用vant组件库进行组件的搭配。由于前端写的比较少，所以页面有点不怎么好看。如下图左侧部分：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]  
    部分代码：

<view class="van-hairline--surround">
    <image src="/images/logo2.png" style="width:100%">
    
    </image>
      
    <van-row>
      <van-col span="23" offset="0.5">
        <van-cell-group>
          
         <van-field value="{ { phone }}" bind:blur="setPhone" center clearable label="手机号" placeholder="请输入手机号" border="{ { false }}" use-button-slot >
        </van-field>
        <van-field value="{ { sms }}" bind:blur="setSms" center clearable label="短信验证码" placeholder="请输入验证码" border="{ { false }}" use-button-slot >
      <van-button slot="button" size="small" type="primary" bindtap="sendSms">
        发送验证码
      </van-button>
    
    </van-field>
    </van-cell-group>
      </van-col>
    </van-row>
    
    <van-row>
      <van-col span="18" offset="3">
        <van-button bindtap="reqLogin" custom-style="margin-top:10px" round type="primary" size="large">登                录</van-button>    
      </van-col>
    </van-row>
    
    </view>

1.  JS获取值  
    首先vant组件上进行事件绑定，然后再在js文件里面进行值的设定，看vant官网可以进行数据双向绑定，但是暂时还不会，下次改进。  
    再然后进行console.log进行测试打印看是否能够获取输入框的值。测试如下
2.  POSTMAN测试短信登录验证接口  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]
3.  进行交互(需要进行域名配置）  
    分为两次请求，获取验证码以及登录（当点击获取验证码和登录分别获取）。通过bindtap进行绑定事件。

wx.request({ 
          dataType:'json',
          url: '../loginBySMS',
          // data:{ 
          // number:this.data.phone
          // },
          data:{ 
            number:this.data.phone
          },
          header:
          { 
            'content-type': 'application/json' // 默认值
          },
          method:'POST',
          success(res){ 
            console.log("登录成功结果为",res);
          }
    
        })

1.  调试测试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 4]  
最后，很开心能够有粉丝主动找我聊天，嘿嘿！！当然了，由于考研时间越来越紧，学技术的时间也相对较少，然后还蹭这个夜深人静的时候发一下CSDN，还是挺不容易的，希望大家多多支持！

[vant]: https://blog.csdn.net/qq_44654974/article/details/115118087
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/19067e85133746458774c03c3391d1c2.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
[vant 1]: https://youzan.github.io/vant-weapp/#/field
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/c0f97c6b22844307b3b96fd9a9538b2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/41764406752f436585ff41eb792ab8e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/97c5b1d6ea0e487b98f2458aead34fef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/da660fe1942d4db68618ec3bf2acad3d.png