小程序实战/login功能

148 阅读1分钟

引用了vant的组件

<van-cell-group> <van-field model:value="{{ val }}" label="邮箱" placeholder="请输入邮箱" error-message="{{msg1}}" bindinput="bindinput1" /> <van-field model:value="{{ password }}" label="密码" placeholder="请输入密码" error-message="{{msg2}}" border="{{ false }}" bindinput="bindinput2" password /> </van-cell-group>

<view style="display: flex; justify-content: center;"> <van-button type="primary" size="normal" bindtap="login" data-val="{{val}}" data-password="{{password}}">登录</van-button> </view> <view class="bottom"> <view bindtap="phoneLogin">手机号登录 |</view> <view bindtap="findPsd">找回密码 |</view> <view bindtap="login" bindtap="reg">账号注册 |</view> </view>

对接口请求进行封装 image.png

image.png

在login.js界面引用封装

image.png

页面的初始数据

image.png

登录功能,需要通过接口对账号/密码进行校验,通过则成功登录并跳转页面,不通过在输入框跳出提示

image.png