Vue.js로 구성 가능한 로그인 양식을 구현하는 단계에 대한 자세한 설명

이번에는 Vue.js로 구성 가능한 로그인 양식을 구현하는 단계에 대해 자세히 설명하겠습니다. Vue.js로 구성 가능한 로그인 양식을 구현하기 위한 노트는 무엇입니까? 바라보다.

비즈니스 시나리오

과거 프로젝트에서는 휴대폰 번호 + 비밀번호 로그인만 지원했으며 나중에 프런트 엔드에서 직접 양식을 작성하여 인증 코드 로그인을 지원하기를 희망하는 고객도 있었습니다. 고객님들도 원하셨던 로그인 방법은 휴대폰번호 + 인증번호 + 비밀번호... 따라서 로그인 방법의 유연성을 위해서는 구성 가능한 양식 지원이 필요하므로 로그인 구성 요소를 분할했습니다.

양식 요소를 세분화하여 휴대폰 번호, 비밀번호, SMS 인증 코드의 구성 요소를 각각 분리하여 조합, 로그인, 등록 및 검색을 통해 고유한 양식 확인 방법을 사용할 수 있습니다. 비밀번호 등을 빠르게 완료하세요. 양식 구성 요소. 높은 응집력과 낮은 결합도, 높은 응집력과 낮은 결합도... 10번 반복하세요~

.
├ common
├ captcha.vue
|  ├ password.vue
|  └ phone.vue
├ login
|  └ index.vue
├ register
|  └ index.vue
└ resetPassword
  └ index.vue

여기서 login을 상위 컴포넌트로 사용하고, 서버에서 반환된 로그인 구성을 읽고 템플릿에서 조건부 렌더링을 수행하고, Form 검증에 로그인할 때 하위 구성 요소의 내부 기능을 수행하고 마지막으로 Vuex를 통해 데이터 호출 인터페이스를 가져옵니다. 구성 가능한 전체 로그인 양식의 논리는 Jiangzi이고 코드는 다음입니다.

Code

서버 구성 데이터 요청:

/* 参数说明：
 * 'password': 密码登录 
 * 'captcha': 短信验证码登录
 * 'password_or_captcha': 密码或短信登录 
 * 'password_with_captcha': 密码+短信登录
 */
config: {
 login_methods: 'password'
}

로그인 구성 요소의 핵심 렌더링 코드(pug):

.login-card
 .login-header
   h3 登录
 .login-content
  phone(ref="phone")
  password(
   v-if="isPasswordMode"
   ref="password"
  )
  captcha(
   v-if="isCaptchaMode"
   ref="captcha"
  )  
  template(v-if="isPasswordWithCaptchaMode")
   captcha(ref="captcha")
   password(ref="password")
  
  template(v-if="isPasswordOrCaptchaMode")
   ...
  el-button(@click="login") 登录

로그인하려면 세 단계가 필요합니다: 양식 확인, 데이터 조합, 인터페이스 호출:

async login () {
 if (!this.validate()) return
 const loginData = this.getLoginData()
 await this.postLogin(loginData)
 ...
}

로그인 양식 검증은 실제로 현재 로그인 메소드의 모든 구성요소의 verify() 메소드에 대한 논리적 판단입니다.

validate () {
 const phone = this.$refs.phone.validate()
 let isPass = false
  
 if (this.isPasswordMode) {
  if (this.$refs.password) isPass = this.$refs.password.validate()
 }
  
 if (this.isCaptchaMode) {
  if (this.$refs.captcha) isPass = this.$refs.captcha.validate()
 }
  
 if (this.isPasswordWithCaptchaMode) ...
  
 if (this.isPasswordOrCaptchaMode) ...
  
 isPass = phone && isPass
 return isPass
}

각 하위 구성요소는 완전한 형식이며, 비밀번호 구성요소 템플릿:

.login-password
 el-form(
  :model="form"
  :rules="rules"
  ref="form"
  @submit.native.prevent=""
 )
  el-form-item(prop="password")
   el-input(
    v-model="form.password"
    type="password"
    name="password"
   )

W3C에서도 검증이 완료됩니다. : 양식에 한 줄짜리 텍스트 입력 필드가 하나만 있는 경우 사용자 에이전트는 양식 제출 요청으로 해당 필드의 Enter를 수락해야 합니다.

W3C 표준에 따르면, 하나만 있는 경우 양식 요소의 입력 상자에서 이 입력 상자에 Enter를 누르면 자동으로 양식이 제출됩니다. 이 기본 동작은 에 @submit.native.prevent를 추가하여 방지할 수 있습니다.

비밀번호 구성요소의 양식 확인:

validate () {
 let res = false
 this.$refs.form.validate((valid) => {
  res = valid
 })
 return res
}

마지막으로 Vuex에서 모든 양식 데이터를 가져와서 조립합니다.

computed: {
 ...mapState('login', {
  phone: state => state.phone,
  password: state => state.password,
  captcha: state => state.captcha
 }), 
},
methods: {
 ... 
 getLoginData () {
  let mode = ''
  const phone = this.phone
  ...
  const data = { phone }
  
  if (this.isPasswordMode) {
   mode = 'password'
   data.password = password
  }
  if (this.isCaptchaMode) {
   mode = 'captcha'
   data.captcha = captcha
  } 
  if (this.isPasswordWithCaptchaMode) ...  
  if (this.isPasswordOrCaptchaMode) ...  
  data.mode = mode
  return data
 }
}

보충:

vue.js 모두 선택 및 모두 선택 취소를 위한 예제 코드

new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Runoob", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})

I 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿으십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.

추천 도서:

Vue가 html 문자열을 HTML로 변환하는 단계에 대한 자세한 설명

Koa2 파일 업로드 및 다운로드 사례에 대한 자세한 설명

위 내용은 Vue.js로 구성 가능한 로그인 양식을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!