How to implement login function in vue

Vue is an open source JavaScript framework that is widely used in front-end development. With the popularity of the Internet and more and more website functions, user needs are getting higher and higher. The website login function has become an essential function of every website. This article will introduce the steps and methods to implement the login function in Vue.

1. Prerequisite knowledge

Knowledge points that need to be used in this article:

Use Vue-cli3 to build the project

Vue-router, used Page routing management

Vuex, used for state management

Axios, used for asynchronous request data in the page

2. Project initialization

1. Installation Vue-cli3

Vue-cli3 is the official scaffolding tool of Vue.js, which can help us quickly initialize a Vue project. Enter the following command in the command line window:

npm install -g @vue/cli

2. Create a project

Enter the following command in the command line window:

vue create login

where login is the project name, modify it as needed . You will then be asked to select some configuration items, such as plug-ins required for the project, preset configurations, etc., which will not be explained here.

3. Start the project

Enter the following command in the command line window:

cd login
npm run serve

4. Create routes and pages

In the src directory, create a new one router directory, and then create the index.js file in the router directory. Write the configuration and routing rules of the VueRouter instance in the index.js file, and export the routing instance.

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

The above code defines a Vue Component of the login page, and the path is /login. Then we need to create a new Login.vue file in the src/views directory. This file is the actual component of the login page.

<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. Implement the login function

In the login page Login.vue, we need to bind the submission event of the form, obtain the user name and password entered by the user, and then send an Ajax request to the background , complete the login process. Axios is a powerful JavaScript HTTP client library that we can use to send Ajax requests.

1. Install Axios

Enter the following command in the command line window:

npm install axios

2. Write login logic

Submit in the Login.vue file Add the following code to the method:

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

Among them, we send a post request to the /api/login interface through Axios. The address here needs to be modified according to the actual situation. The data sent to the background is the username and password entered by the user in the input box, and then the logic of login success and failure is processed. Among them, if the login is successful, we can save the user information in Vuex for state management.

3. Use Vuex for state management

In the src directory, create a new store directory, and create an index.js file in the store directory for Vuex functional configuration.

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

Among them, the initial value of user is set to null. The setUser method of mutations is used to modify the user in state. The setUser method of actions is used to submit the setUser method in mutations.

In the submit method in Login.vue, when the login is successful, we need to call the setUser method in actions to save the user information in Vuex.

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. Summary

So far, we have completed the development of Vue’s login function. Using Vue to develop pages can make the entire code more elegant and easier to maintain. In addition, using Vuex for state management can make data more convenient to use and manage by components, and the code will be more readable and maintainable. Since this function is relatively simple, the back-end related processing is omitted, and readers can implement the process of back-end login and front-end and back-end interaction by themselves.

The above is the detailed content of How to implement login function in vue. For more information, please follow other related articles on the PHP Chinese website!