小程序实战： wx.request 实现前端登录

<!--pages/login/login.wxml-->
<view>
  <view class="login-title">
  <image src="{{loginPhoto}}"></image>
  </view>
  <view class="body">
    <view class="weui-form__control-area">
      <view class="weui-cells__group weui-cells__group_form">
        <view class="weui-cells weui-cells_form">
          <view class="weui-cell">
            <view class="weui-cell__hd">
              <label class="weui-label">账号</label>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入账号" bindinput="userAccount"/>
            </view>
          </view>
          <view class="weui-cell">
            <view class="weui-cell__hd">
              <label class="weui-label">密码</label>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" password="true" placeholder="请输入密码" bindinput="userPassword" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="login-button" >
      
      <button type="primary" bindtap="loginTap"> 登陆 </button>
      <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp; &nbsp;</text>
      <button  type="default" bindtap="rigestTap"> 注册 </button>
  
    </view>
    
  </view>

</view>

/* pages/login/login.wxss */
.login-title{
  text-align: center;
  height: 150rpx;
  border-left: none ;
  border-right: none ;
  display: flex;
  align-items: center;
}
.login-title image{
  margin: 40%;
  margin-top: 70%;
  height: 120%;
  border-radius: 50%;
  overflow: hidden;
}
.body{
  margin-top: 30%;
}

.login-button{

  margin: 0 auto;
  width: 76%;
  display: flex;
  justify-content: space-between;

}
.login-button button{
  display: block;
  margin-top: 1vh;
  font-size: 3.5vh;
  width: 40%;

}

var app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    username:null,
    password:null,
    loginPhoto:'/images/background/6.jpg'
  },
/**
 * 从文本框中得到输入的值
 */
  userAccount:function(event){
    var userAccount = event.detail.value;
    this.setData({
      username:userAccount,
    })
    console.log(this.data.username)
  },

  userPassword:function(event){
    var userPassword = event.detail.value;
    this.setData({
      password:userPassword,
    })
    console.log(this.data.password)
  },

  loginTap:function(){
    wx.request({
      url: 'http://localhost:8088/admin/login', //仅为示例，并非真实的接口地址
      data: {
        username:this.data.username,
        password:this.data.password,
        userPhoto:"/images/background/2.jpg",
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: 'POST',
      success(res) {
        console.log(res.data)
        if(res.data.code==200){
        wx.switchTab({
          url: '/pages/menu/menu'
        })
      }
      },
      fail(res){
        console.log('----fail----')
      }
    })

  },
  rigestTap:function(){
    console.log(this.data.username +'--->'+this.data.password)
    var e = wx.getSystemInfoSync()
    console.log(e.safeArea)
    wx.request({
      url: 'http://localhost:8088/admin/insert', //仅为示例，并非真实的接口地址
      data: {
        username:this.data.username,
        password:this.data.password,
      },
      header: {
        'content-type': 'application/json' // 默认值
      
      },
      method: 'POST',
      success(res) {
        console.log(res.data)
        
        if(res.data.code==200){
          console.log('----注册successed----')
          
        }
      
      },
      fail(res){
        console.log(res.data)
        console.log('----注册fail----')
      }
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
    
})