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.js 양식 제어를 사용하는 방법

js를 사용하여 프런트엔드와 백엔드 간에 Json을 전송하는 방법

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