구성 가능한 로그인 양식 코드의 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를 누르면 자동으로 양식이 제출됩니다. 이 기본 동작은 7d427e22129094dbbdee82a7e6c7d93a에 @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
      }
    }
  }
})

위의 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

캐싱 알고리즘의 JS 구현 예

반응 네이티브 패키징 플러그인 swiper 사용 방법

vue 프로젝트에서 sass를 사용하기 위한 구성 방법

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