微信小程序登陆/注册界面及接口开发实战（二）

项目预览

登陆界面

注册界面

功能分析

登陆模块：
     Login按钮：点击Login按钮，将文本框内容通过http协议的POST方法传递至后端服务器,成功则提示登陆成功，失败则提示登陆失败
     Register按钮：点击Register按钮，跳转至注册界面
     Reset按钮：点击Reset按钮，清空表单内容
注册模块：
     Login按钮：点击Login按钮，跳转至登陆界面
     Register按钮：点击Register按钮，将文本框内容通过http协议的POST方法传递至后端服务器，成功则提示注册成功，失败则提示注册失败
     Reset按钮：点击Reset按钮，清空表单内容

目录结构

代码部分（附详细注释）

login.wxml

<view class="container">
  <view class="page-body">
  <view>这是一个登陆界面view>
    <form catchsubmit="formSubmit" catchreset="formReset">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="name" placeholder="用户名" />
            view>
          view>
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" password type="text" name="pwd" placeholder="密码" />
            view>
          view>
  

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit" >Loginbutton>
        <button style="margin: 30rpx 0" type="primary" bindtap="register" plain="true">Registerbutton>
        <button style="margin: 30rpx 0" formType="reset">Resetbutton>
      view>
    form>
  view>

view>

login.js

Page({


  data: {
    //表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->js
    chosen: ''
  },
  //登陆方法
  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value), //小程序表单自带API，e.detail.value即为表单值
    //触发登陆请求
      wx.request({
        method:"POST", //指定为http协议中的POST方法
      url: 'http://localhost:9000/user/login', //后端接口完整URL
        data: {
          name: e.detail.value.name, //将表单中name的值绑定给对象的name属性
          pwd: e.detail.value.pwd  //将表单中pwd的值绑定给对象的pwd属性
        },
        header: {
          'content-type': 'application/json' // 设置传输格式为json格式，默认如此
        },
        success(res) {
          console.log(res.data)
          //如果返回值的code为0 提示登陆成功，否则提示登陆失败
          if(res.data.code == 0)
          { 
            wx.showToast({
              title: '登陆成功',

              duration: 1000
            })

          }
          else
          {
            wx.showToast({
              title: '账号名或密码错误',
              duration: 1000
            })
          }
     
        }
      })
  
    
  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    //通过setData方法清空表单
    this.setData({
      chosen: ''
    })

  },
  register()
  {
    console.log("register"),
    //通过小程序自带路由跳转API进行页面跳转
      wx.redirectTo({
      url: '../register/register', //注意url为相对路径
      })


  }
})

register.wxml

<view class="container">
  <view class="page-body">
  <view>这是一个注册界面view>
    <form catchsubmit="formSubmit" catchreset="formReset">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="name" placeholder="用户名" />
            view>
          view>
                    <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" password type="text" name="pwd" placeholder="密码" />
            view>
          view>
  

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" bindtap="login" plain="true">Loginbutton>
        <button style="margin: 30rpx 0" type="primary" formType="submit" >Registerbutton>
        <button style="margin: 30rpx 0" formType="reset">Resetbutton>
      view>
    form>
  view>

view>

register.js

Page({


  data: {
   //表单绑定值，小程序为单向数据绑定 只可js->wxml,不可wxml->js
    chosen: ''
  },




//注册方法
  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value),//小程序表单自带API，e.detail.value即为表单值

      wx.request({
        method: "POST", //指定为http协议中的POST方法
        url: 'http://localhost:9000/user/register', //后端接口完整URL
        data: {
          name: e.detail.value.name, //将表单中name的值绑定给对象的name属性
          pwd: e.detail.value.pwd  //将表单中pwd的值绑定给对象的pwd属性
        },
        header: {
          'content-type': 'application/json' // 设置传输格式为json格式，默认如此
        },
        success(res) {
          console.log(res.data)
  //如果返回值的code为0 提示登陆成功，否则提示登陆失败
          if (res.data.code == 0) {
            wx.showToast({
              title: '注册成功',

              duration: 1000
            })

          }
          else {
            wx.showToast({
              title: '注册失败',
              duration: 1000
            })
          }

        }
      })
    
  

  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
     //通过setData方法清空表单
    this.setData({
      chosen: ''
    })

  },
  login() {
    console.log("login"),
  //通过小程序自带路由跳转API进行页面跳转
      wx.redirectTo({
      url: '../login/login',//注意url为相对路径
      })


  }
})