[Python3+Vue2]美多商城前后端分离移动web版 -- 登录与注册页面的实现

---

---

系列文章：

• [Python3+Vue2]美多商城前后端分离移动web版 – 前端项目创建与组件库的配置

1. 页面效果展示

2. 相关变量及路由的说明

组件中使用的相关变量和路由的说明：https://gitee.com/tongchaowei/meiduo_project.git

3. 组件层次结构

3.1 登录界面

• App
  • Login：登录组件
    • LoginByTelephone：通过手机号登录子组件
    • LoginByAccount：通过账号密码登录子组件

3.2 注册界面

• App
  • Register：注册组件
    • WriteTelephone：填写手机号组件
    • WriteVerificationCode：填写短信验证码组件
    • WritePassword：填写密码子组件

4. 文件目录层次结构

5. 代码实现

5.1 工具文件的准备

将和用户相关的参数和工具方法挂载到Vue的原型对象上以供所有组件使用

/**
 * 将和用户相关的参数和工具方法挂载到Vue的原型对象上以供所有组件使用
 */

import Vue from 'vue'

/**
 * 和用户信息相关的参数
 */
Vue.prototype.userAccountLength = 18 // 用户登录账号的长度
Vue.prototype.userPasswordMaxLength = 16 // 用户登录账号密码所允许的最大长度
Vue.prototype.userPasswordMinLength = 8 // 用户登录账号密码所允许的最小长度
Vue.prototype.userTelephoneLength = 11 // 用户手机号的长度
Vue.prototype.userTelephoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ // 用户手机号的正则表达式

/**
 * 检验用户输入的手机号是否合法
 * @param {*} componentObj 调用该方法的组件实例对象
 * @param {*} isCheckLengthZero 是否开启检查输入手机号的长度是否为0，默认不开启，取值true/false，不开启长度为0的检查，长度为0默认不进行任何检查
 * @returns true:合法; false:不合法
 */
Vue.prototype.checkUserTelephone = function (componentObj, isCheckLengthZero = false) {
  // 检查手机号的长度是否为0
  if (isCheckLengthZero) {
    // 如果没有输入手机号
    if (componentObj.userTelephone.length === 0) {
      componentObj.$notify('您还未输入手机号')
      return false
    }
  } else {
    // 不开启长度为0的检查，长度为0默认不进行任何检查
    if (componentObj.userTelephone.length === 0) return 
  }
  // 如果输入的手机号不符合规范
  if (!componentObj.userTelephoneReg.test(componentObj.userTelephone)) {
    componentObj.$notify('您输入的手机号格式不正确, 请重新输入')
    return false
  }
  return true
}

将和短信相关的参数和工具方法挂载到Vue的原型对象上以供所有组件使用

/**
 * 将和短信相关的参数和工具方法挂载到Vue的原型对象上以供所有组件使用
 */

import Vue from 'vue'

/**
 * 和短信相关的参数
 */
Vue.prototype.smsVerificationCodeLength = 6 // 短信验证码的长度
Vue.prototype.smsVerificationCodeReg = /\d{6}/ // 短信验证码的正则表达式
Vue.prototype.sendSmsAgainNeedWaitTime = 60 // 再次发送短信所需等待的时间

/**
 * 检验用户输入的短信验证码是否合法
 * @param {*} componentObj 调用该方法的组件实例对象
 * @param {*} isCheckLengthZero 是否开启检查输入短信验证码的长度是否为0，默认不开启，取值true/false，不开启长度为0的检查，长度为0默认不进行任何检查
 * @returns true:合法; false:不合法
 */
Vue.prototype.checkSmsVerificationCode = function (componentObj, isCheckLengthZero = false) {
  // 检查输入的短信验证码的长度是否为0
  if (isCheckLengthZero) {
    // 没有输入
    if (componentObj.smsVerificationCode.length === 0) {
      componentObj.$notify('您还未输入短信验证码')
      return false
    }
  } else {
    // 不开启长度为0的检查，长度为0默认不进行任何检查
    if (componentObj.smsVerificationCode.length === 0) return 
  }
  // 短信验证码的输入不正确
  if (!componentObj.smsVerificationCodeReg.test(componentObj.smsVerificationCode)) {
    componentObj.$notify('您未输入的短信验证码不正确，请重新输入')
    return false
  }
  return true
}

其他的一些参数

import Vue from 'vue'

/**
 * 其他的一些参数
 */
 Vue.prototype.loginByTelephone = 'loginByTelephone' // 登录方式 通过手机号登录
 Vue.prototype.loginByAccountAndPassword = 'loginByAccountAndPassword' // 登录方式 通过账号密码登录

5.2 main.js 入口文件全局挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 按需引入vant的组件
import { NavBar, Icon, Field, Button, Form, Notify,Toast } from 'vant'
// 导入手势组件
import VueTouch from 'vue-touch'
// 导入工具属性和方法
import '@/utils/utilsAboutUser.js'
import '@/utils/utilsAboutSms.js'
import '@/utils/utilsAboutOthers.js'
// 导入axios
import axios from 'axios'

// 将axios挂载到Vue原型对象上 全局挂载
Vue.prototype.$http = axios
// 全局配置axios请求根路径(axios.默认配置.请求根路径)
axios.defaults.baseURL = 'http://127.0.0.1:9999'

// vant组件注册为全局组件
Vue.use(NavBar)     // 导航栏
Vue.use(Icon)       // 图标
Vue.use(Field)       // 输入框
Vue.use(Button)       // 按钮
Vue.use(Form)       // 表单
Vue.use(Notify)       // 消息通知
Vue.use(Toast)       // 轻提示
Vue.use(VueTouch, {name: 'v-touch'}) // 手势组件

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

5.3 登录界面实现

通过手机号登录组件

<template>
  <div>
    
    <div class="tel_ipt_box">
      
      <van-field 
        v-model="userTelephone" 
        type="tel" 
        label="+86" 
        label-width="2em" 
        :maxlength="userTelephoneLength"
        clearable
        placeholder="请输入手机号"
        class="tel_ipt"
        @blur="checkUserTelephoneIsOK"
      />
    div>
    
    <div class="sms_ipt_box">
      <van-field
        v-model="smsVerificationCode"
        center
        clearable
        maxlength="6"
        placeholder="请输入短信验证码"
        class="sms_ipt"
        @blur="checkSms"
      >
        <template #button>
          <van-button 
            size="small" 
            :round="true" 
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            :disabled="!isSendSmsAgain"
            class="sms_btn"
            @click="changeBtnConnentAndTime"
          >{{ isSendSmsAgain ? '发送验证码' : sendSmsAgainNeedWaitTimeCom+'s' }}van-button>
        template>
      van-field>
    div>
    
    <div class="btn_box">
      <van-button 
        color="linear-gradient(to right, #FA489B, #E22626)" 
        block
        class="btn"
        @click="loginByTelephone"
      >
        登录
      van-button>
    div>
  div>
template>

<script>
export default {
  name: 'LoginByTelephone',
  data() {
    return {
      userTelephone: '', // 用户手机号
      smsVerificationCode: '', // 短信验证码
      isSendSmsAgain: true, // 是否可以再次发送短信
      sendSmsAgainNeedWaitTimeCom: this.sendSmsAgainNeedWaitTime, // 再次发送短信所需等待的时间
    }
  },
  watch: {
    sendSmsAgainNeedWaitTimeCom(newVal) {
      // 再次发送短信验证码的剩余时间为0，关闭计时器，还原按钮状态
      if ( newVal <= 0 ) {
        // console.log('关闭计时器')
        // 关闭计时器
        clearInterval(this.timeInterval)
        // 还原状态
        this.isSendSmsAgain = true
      }
    }
  },
  methods: {
    // 手机号输入框失去焦点时检查手机号的格式
    checkUserTelephoneIsOK() {
      this.checkUserTelephone(this)
    },
    // 检验短信验证码是否正确
    checkSms() {
      this.checkSmsVerificationCode(this)
    },
    // 点击按钮发送短信后开启计时器改变按钮的内容
    changeBtnConnentAndTime() {
      // 检查手机号，开启输入为空的检查
      if (!this.checkUserTelephone(this, true)) return
      // 修改是否可以再次发生短信验证码的状态 不可发送并禁用按钮
      this.isSendSmsAgain = false
      // 弹出短信验证码获取成功的提示
      this.$toast.success('短信验证码获取成功')
      // 开启计时器
      this.timeInterval = setInterval(()=>{
        this.sendSmsAgainNeedWaitTimeCom -= 1
      }, 1000)
    },
    // 点击登录按钮进行登录，通过判断用户的输入
    loginByTelephone() {
      // 检查手机号，开启输入为空的检查
      if (!this.checkUserTelephone(this, true)) return
      // 检查短信验证码，开启输入为空的检查
      if (!this.checkSmsVerificationCode(this, true)) return
      
    },
  }
}
script>

<style lang="less" scoped>
// 手机号码输入框样式
.tel_ipt_box {
  margin: 10% 10% 0;
  border: 1px solid #E22626;
  border-radius: 1.5rem;
  .tel_ipt {
    padding: 0.8rem 1.4rem;
    border-radius: 1.5rem;
    font-size: 1.05rem;
  }
}
// 短信验证码输入框样式
.sms_ipt_box {
  margin: 5% 10% 0;
  border: 1px solid #E22626;
  border-radius: 1.5rem;
  .sms_ipt {
    padding: 0.5rem 1.4rem;
    border-radius: 1.5rem;
    font-size: 1.05rem;
  }
}
// 发送短信验证码按钮样式
.sms_btn {
  width: 5rem;
}
// 登录按钮样式
.btn_box {
  margin: 5% 10%;
  .btn {
    height: 3.1rem;
    border-radius: 1.5em;
    font-size: 1.2rem;
  }
}
style>

6. 源码地址

源码地址：https://gitee.com/tongchaowei/meiduo_project.git