微信小程序注册登录、http请求封装

移动开发 2023-07-01 17:43:34 阅读次数: 0

参考自b站青戈

uniapp框架搭建、登录注册、http请求封装_哔哩哔哩_bilibili

一、首先我们先看一下大概的页面

登录页面

注册页面

 二、大概功能介绍

开始没有用户名（账号）和密码，需要点击前往注册页面注册相关信息，在注册页面输入相关信息之后，点击注册按钮会向后端接口发起POST请求，这样我们就可以拿注册的信息去登录，登录成功后跳转到首页（也可以是其他页面），看需求

三、我们先搭建好HTML结构

登录页面

<template>
  <view>
    <view style="width: 90%; margin: 200rpx; auto"></view>
    <view style="margin-bottom: 70rpx; font-size: 60rpx; color: royalblue; text-align: center;">登录</view>
    <uni-forms ref="form" :model="form" :rules="rules">
      <uni-forms-item name="username">
        <!-- <uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput> -->
        <uni-easyinput v-model="form.username" focus placeholder="请输入登录用户名"></uni-easyinput>
        		</uni-section>

      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入登录密码"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view>
      <button type="primary" @click="login">登录</button>
    </view>
    <navigator url="../register/register" style="margin: 40rpx 0; color: deepskyblue;">前往注册</navigator>
  </view>
</template>

注册页面

<template>
  <view>
    <view style="width: 90%; margin: 200rpx; auto"></view>
    <view style="margin-bottom: 70rpx; font-size: 60rpx; color: #F0AD4E; text-align: center;">注 册</view>
    <uni-forms ref="form" :model="form" :rules="rules">
      <uni-forms-item name="username">
        <!-- <uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput> -->
        <uni-easyinput v-model="form.username" focus placeholder="请输入用户名"></uni-easyinput>
        		</uni-section>

      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入密码"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="confirm">
        <uni-easyinput type="password" v-model="form.confirm" prefixIcon="locked" placeholder="请确认密码"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view>
      <button type="primary" @click="register">注 册</button>
    </view>
  </view>
</template>

 HTML框架采用uni-app官网的扩展组件

组件使用的入门教程 | uni-app官网 (dcloud.net.cn)

相关链接;

uni-forms表单：

uni-app官网 (dcloud.net.cn)icon-default.png?t=M85Bhttps://uniapp.dcloud.net.cn/component/uniui/uni-forms.html

uni-easyinput增强输入框

uni-app官网 (dcloud.net.cn)icon-default.png?t=M85Bhttps://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html

校验规则详情：

uni-app官网 (dcloud.net.cn)icon-default.png?t=M85Bhttps://uniapp.dcloud.net.cn/component/uniui/uni-forms.html#%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C

相关的可以查阅相关文档

主要用到uni-easyinput增强输入框，uni-forms表单俩个扩展组件(因为我们要用到其表单校验功能)

表单校验规则

登录页面的

data() {
      return {
        form: {username:'',password:''},
//校验规则
        rules: {
          username: {
            rules: [{required: true,errorMessage:'请输入用户名'}],
//校验时机
            validateTrigger:'submit'
          },
          password: {
            rules: [{required: true,errorMessage:'请输入密码'}],
            validateTrigger:'submit'
          }
        }
      }
    },

注册页面的

data() {
      return {
        form: {username:'',password:''},
        rules: {
          username: {
            rules: [{required: true,errorMessage:'请输入用户名'}],
            validateTrigger:'submit'
          },
          password: {
            rules: [{required: true,errorMessage:'请输入密码'}],
            validateTrigger:'submit'
          },
          confirm: {
            rules: [{required: true,errorMessage:'请确认密码'}],
            validateTrigger:'submit'
          }
        }
      }
    },

注意： uni-forms-item后面的属性的名字要对应上data里面的规则那里

<uni-forms-item name="username">
        <!-- <uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput> -->
        <uni-easyinput v-model="form.username" focus placeholder="请输入登录用户名"></uni-easyinput>
        		</uni-section>

      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入登录密码"></uni-easyinput>
      </uni-forms-item>

四、在请求接口返回数据之前，我们先封装好一个http请求

当然这个接口是你们自己服务器的地址，或者后端人员给你的，这里只是个演示

const BASE_URL = `http://192.168.455.23:8080`
export const request = (options) => {
  return new Promise((resolve,reject) => {
    uni.request({
      url:BASE_URL + options.url,
      method:options.method || 'GET',
      header:{token:uni.getStorageSync('user')?uni.getStorageSync('user').token:''},
      data:options.data || {},
      success: (res) => {
        const data = res.data
        if(data.code === '401') {
          uni.navigateTo({
            url:'/pages/login/login.vue'
          })
          return 
        }else if(data.code!=='200') {
          uni.showToast({
            icon:'error',
            title:'操作错误'
          })
        }
        resolve(data)
      },
      fail: (error) => {
        uni.showToast({
          icon:'error',
          title:'系统错误'
        })
        reject(error)
      }
    })
  })
}

五、点击注册按钮发起POST请求（方法） 

methods: {
      register() {
        this.$refs.form.validate().then(res=> {
          if(this.form.password !== this.form.confirm) {
            uni.showToast({
              icon:"none",
              title:'俩次密码输入不一致'
            })
            return
          }
          this.request({url:'/register',method:'POST',data:this.form}).then(res=> {
            if(res.code === '200') {
              // 跳转页面
              uni.navigateTo({
                url:'/pages/login/login'
              })
              uni.showToast({
                title:'注册成功'
              })
            }
          }).catch(err=> {
            console.log('表单的错误：',err)
          })
        })
      }
    }

校验规则的效果，当你没有输入，他会提示你相关错误信息

当正常操作后（我们查看一下返回的信息）后台顺便把token给返回了

成功后我们就可以拿刚才注册的用户名和密码来登录了 

 登录成功后会跳转到首页

六、登录页面完整代码

<template>
  <view>
    <view style="width: 90%; margin: 200rpx; auto"></view>
    <view style="margin-bottom: 70rpx; font-size: 60rpx; color: royalblue; text-align: center;">登录</view>
    <uni-forms ref="form" :model="form" :rules="rules">
      <uni-forms-item name="username">
        <!-- <uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput> -->
        <uni-easyinput v-model="form.username" focus placeholder="请输入登录用户名"></uni-easyinput>
        		</uni-section>

      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入登录密码"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view>
      <button type="primary" @click="login">登录</button>
    </view>
    <navigator url="../register/register" style="margin: 40rpx 0; color: deepskyblue;">前往注册</navigator>
  </view>
</template>

<script>
  
  export default {
    data() {
      return {
        form: {username:'',password:''},
        rules: {
          username: {
            rules: [{required: true,errorMessage:'请输入用户名'}],
            validateTrigger:'submit'
          },
          password: {
            rules: [{required: true,errorMessage:'请输入密码'}],
            validateTrigger:'submit'
          }
        }
      }
    },
    methods: {
      login(){
        this.$refs.form.validate().then(res=> {
          this.request({url:'/login',method:'POST',data:this.form}).then(res=>{
            if(res.code === '200') {
              console.log(res.token)
              // 跳转页面
              uni.switchTab({
                url:'/pages/index/index'
              })
              uni.showToast({
                title:'登录成功'
              })
              // 存储用户的数据到storage
              uni.setStorageSync('user',res.data)
            }
          })
        }).catch(err=> {
          console.log("error")
          console.log('表单错误信息：',err)
        })
      }
    }
  }
</script>

<style>

</style>

七、注册页面完整代码

<template>
  <view>
    <view style="width: 90%; margin: 200rpx; auto"></view>
    <view style="margin-bottom: 70rpx; font-size: 60rpx; color: #F0AD4E; text-align: center;">注 册</view>
    <uni-forms ref="form" :model="form" :rules="rules">
      <uni-forms-item name="username">
        <!-- <uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput> -->
        <uni-easyinput v-model="form.username" focus placeholder="请输入用户名"></uni-easyinput>
        		</uni-section>

      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入密码"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="confirm">
        <uni-easyinput type="password" v-model="form.confirm" prefixIcon="locked" placeholder="请确认密码"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view>
      <button type="primary" @click="register">注 册</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {username:'',password:''},
        rules: {
          username: {
            rules: [{required: true,errorMessage:'请输入用户名'}],
            validateTrigger:'submit'
          },
          password: {
            rules: [{required: true,errorMessage:'请输入密码'}],
            validateTrigger:'submit'
          },
          confirm: {
            rules: [{required: true,errorMessage:'请确认密码'}],
            validateTrigger:'submit'
          }
        }
      }
    },
    methods: {
      register() {
        this.$refs.form.validate().then(res=> {
          if(this.form.password !== this.form.confirm) {
            uni.showToast({
              icon:"none",
              title:'俩次密码输入不一致'
            })
            return
          }
          this.request({url:'/register',method:'POST',data:this.form}).then(res=> {
            if(res.code === '200') {
              // 跳转页面
              uni.navigateTo({
                url:'/pages/login/login'
              })
              uni.showToast({
                title:'注册成功'
              })
            }
          }).catch(err=> {
            console.log('表单的错误：',err)
          })
        })
      }
    }
  }
</script>

<style>

</style>

猜你喜欢

转载自blog.csdn.net/weixin_62639453/article/details/127270293
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022