Vue.js에서 로그인 양식 코드를 사용자 정의하는 방법

이번에는 Vue.js에서 로그인 폼 코드를 커스터마이징하는 방법을 보여드리겠습니다. Vue.js에서 로그인 폼 코드를 커스터마이징할 때 주의할 점은 무엇인가요?

Form은 백엔드 프로젝트 비즈니스의 일반적인 구성 요소입니다. 이번에는 구성 가능한 로그인 방법의 요구 사항을 충족하도록 재구성되었습니다.

비즈니스 시나리오

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

양식 요소를 세분화하여 휴대폰 번호, 비밀번호, 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 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.

추천 도서:

Angular 서버 측 렌더링 방법 요약

vue2는 장바구니 주소 선택을 구현합니다

위 내용은 Vue.js에서 로그인 양식 코드를 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!