Vue에서 로그인 기능을 구현하는 방법

Vue는 프런트 엔드 개발에 널리 사용되는 오픈 소스 JavaScript 프레임워크입니다. 인터넷의 인기와 점점 더 많은 웹사이트 기능으로 인해 웹사이트 로그인 기능은 모든 웹사이트의 필수 기능이 되었습니다. 이 글에서는 Vue에서 로그인 기능을 구현하는 단계와 방법을 소개합니다.

1. 사전 지식

이 기사에서 사용해야 할 지식 포인트:

Vue-cli3을 사용하여 프로젝트 빌드

페이지 라우팅 관리에 사용되는 Vue-router

상태 관리에 사용되는 Vuex

Axios, 페이지에서 비동기 요청 데이터를 사용하세요

2. 프로젝트 초기화

1. Vue-cli3 설치

Vue-cli3는 Vue 프로젝트를 빠르게 초기화하는 데 도움이 되는 Vue.js의 공식 스캐폴딩 도구입니다. 명령줄 창에 다음 명령을 입력하세요.

npm install -g @vue/cli

2. 프로젝트 만들기

명령줄 창에 다음 명령을 입력하세요.

vue create login

여기서 login은 프로젝트 이름이므로 필요에 따라 수정하세요. 그런 다음 프로젝트에 필요한 플러그인, 사전 설정 구성 등과 같은 일부 구성 항목을 선택하라는 메시지가 표시되지만 여기서는 설명하지 않습니다.

3. 프로젝트 시작

명령줄 창에 다음 명령을 입력하세요:

cd login
npm run serve

4. 경로 및 페이지 만들기

src 디렉터리에 새 라우터 디렉터리를 만든 다음 index.js 파일을 만듭니다. 라우터 디렉토리. index.js 파일에 VueRouter 인스턴스의 구성 및 라우팅 규칙을 작성하고 라우팅 인스턴스를 내보냅니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

위 코드는 로그인 페이지의 Vue 컴포넌트를 정의하며, 경로는 /login입니다. 그런 다음 src/views 디렉터리에 새 Login.vue 파일을 만들어야 합니다. 이 파일은 로그인 페이지의 실제 구성 요소입니다.

<template>
  <div>
    <form>
      <h2>Login Form</h2>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" v-model="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" v-model="password">
      </div>
      <button type="submit" class="btn btn-default" @click.prevent="submit">Submit</button>
    </form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    submit () {
      // 处理表单提交
    }
  }
}

</script>

3. 로그인 기능 구현

로그인 페이지 Login.vue에서 양식의 제출 이벤트를 바인딩하고 사용자가 입력한 사용자 이름과 비밀번호를 얻은 다음 Ajax 요청을 백그라운드로 보내야 합니다. 로그인 프로세스를 완료합니다. Axios는 Ajax 요청을 보내는 데 사용할 수 있는 강력한 JavaScript HTTP 클라이언트 라이브러리입니다.

1. Axios 설치

명령줄 창에 다음 명령을 입력하세요:

npm install axios

2. 로그인 로직 작성

Login.vue 파일의 submit 메소드에 다음 코드를 추가하세요:

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    // 处理登录成功逻辑
  })
  .catch(error => {
    console.log(error)
    // 处理登录失败逻辑
  })
}

/api/login 인터페이스에 게시 요청을 보냅니다. 실제 상황에 따라 여기의 주소를 수정해야 합니다. 백그라운드로 전송되는 데이터는 사용자가 입력란에 입력한 사용자 이름과 비밀번호이며, 이후 로그인 성공 및 실패 로직이 처리됩니다. 그 중 로그인에 성공하면 상태 관리를 위해 사용자 정보를 Vuex에 저장할 수 있습니다.

3. 상태 관리를 위해 Vuex를 사용하세요

src 디렉터리에 새 저장소 디렉터리를 만들고, Vuex 기능 구성을 위해 해당 저장소 디렉터리에 index.js 파일을 만듭니다.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  user: null
}

const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

const actions = {
  setUser ({ commit }, user) {
    commit('setUser', user)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

이 중 user의 초기값은 null로 설정되어 있습니다. setUser 돌연변이 메소드는 상태에서 사용자를 수정하는 데 사용됩니다. 작업의 setUser 메서드는 변형에서 setUser 메서드를 제출하는 데 사용됩니다.

Login.vue의 submit 메소드에서 로그인이 성공하면 Vuex에 사용자 정보를 저장하기 위한 액션에서 setUser 메소드를 호출해야 합니다.

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    const user = response.data.user
    if (user) {
      this.$store.dispatch('setUser', user)
      this.$router.push('/')
    }
  })
  .catch(error => {
    console.log(error)
  })
}

4. 요약

지금까지 Vue의 로그인 기능 개발을 완료했습니다. Vue를 사용하여 페이지를 개발하면 전체 코드를 더욱 우아하고 유지 관리하기 쉽게 만들 수 있습니다. 또한 상태 관리에 Vuex를 사용하면 데이터를 구성 요소별로 사용하고 관리하기가 더 편리해지며, 코드를 더 쉽게 읽고 유지 관리할 수 있습니다. 이 기능은 상대적으로 단순하기 때문에 백엔드 관련 처리는 생략하고, 백엔드 로그인 및 프런트엔드와 백엔드 상호작용 프로세스를 독자가 직접 구현할 수 있다.

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