小程序基础页面实现登录（含后台接口安全验证）

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、wxml

<view class="login-box">
  <image src='../img/3.jpg'></image>
</view>
<view class="container">
  <form bindsubmit="formSubmit" catchreset="formReset">
    <view>
      <view class="title">账号</view>
      <input type="text" name="username" placeholder="请输入账号" placeholder-style="color: blue;" />
    </view>
    <view>
      <view class="title">密码</view>
      <input type="password" name="password" placeholder="请输入密码" placeholder-style="color: blue;" />
    </view>
    <view class="btn-area">
      <button style="margin-top: 35rpx" type="primary" form-type="submit">登陆</button>
      <button style="margin-top: 30rpx" formType="reset">重置</button>
    </view>
  </form>
</view>

二、wxss

.title{
  font-size: 20px;
  width: 500rpx;
  text-align: center;
  margin-top: 50rpx;
  color: orange;
}
input{
  margin-top: 20rpx;
  width: 500rpx;
  height: 50rpx;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 20rpx;
  color: blue;
  background: #ffffff;
  
}
image{
  /* width: 400rpx;
  height: 400rpx; */
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -999;
}
.login-box {
  height: 100%;
}

.send{
  margin-top: 20rpx;
  margin-left: 20rpx;
}

三、js

 formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    
    wx.request({
      url: 'http://www.very.com/demo/api/wxlogin',
      data:{
        username:e.detail.value.username,
        password:e.detail.value.password,
      },
      success(res){
        console.log(res.data.code);
        if(res.data.code == 200){
          wx.showToast({
            title: '登录成功',
          })
          //跳转至tabar页面
         wx.switchTab({
           url: '/pages/user/user',
         })
        }
      }

    })
  },

三、thinkphp后台（生成token）

public function wxLogin(Request $request)
    {
        //接收参数
        $data = $request->param();

        //参数验证
        $validate = \think\facade\Validate::rule([
            'username|用户名'  => 'require|max:25',
            'password|密码'=>'require',
        ]);

        //验证参数
        if (!$validate->check($data)) {
            return json(['code'=>500,'msg'=>$validate->getError()]);
        }

        $bool = User::where('username', $data['username'])->find();

        if ($bool) {

            if (md5($data['password']) == $bool['password']){
                $token = Token::make('111',['uid' => $bool['id'],'username' => $bool['username']]);
                return json(['code' => Config::get('status.api.success'),'msg' => '登录成功','token' => $token]);
            }

            return json(['code' => Config::get('status.api.error'),'msg' => '密码错误']);
        }

        return json(['code' => Config::get('status.api.error'),'msg' => '账户不存在']);
    }