vue real - login page

An inlet configuration file main.js

(First entry file is a file access to the system or when the item is accessed, all the command functions are distributed out from this file, find the corresponding module for processing, the initialization vue example, write global methods, using plug-ins )

axios.interceptors.response.use (res => {// request interceptors, before sending the request or in response to a request to do some operations or determination, in response to the request interceptor here
   if (res.data.code == 0) {// If the response status code is 0 the background, when the background receive the correct user information, the correct user name and password will return a status code 0, the data at this time to render
   return res.data
   } the else IF (res.data. code == 1) {/ / If the returned status code is 1, meaning that the rear end did not receive the correct login information, if customers bypass the login page, then forced back to the login page.
   router.push ( '/ the Login' )
   } the else {// network abnormal conditions
   the Message ({
type: 'error',
Message: res.data.msg || '. network anomalies, please try again'
   })
}
}, error => {// request error an error message
   return Promise.reject (error)
})

Second, the routing section router.js

Routing is the soul of a project, each component has a corresponding route, depending on the routing address, display different content to the user.

routes: [{
      path: '/',
      the redirect: '/ Home / login' // route redirection when the user access to the root path, re-assembly under the jump to the login Home　
   },

   {
      Path: '/ login',
      name: 'login',
Import ( './views/Login.vue') // login assembly defined route
    }
}]

Third, the component parts login.vue

Here is the most simple landing page, no registration part, account for the background generation

<! - html part ->

Notes: 1, element components used form

Two-way binding 2, v-model = "ruleForm" data, data on the data in the data and try to be consistent

3, autocomplete h5 new form properties, auto-complete function, the input box will be used to record inputs, input from memory quickly complete the entire contents, off close, on open

4, @ click.enter: Bind a click event, add a modifier enter the user clicks the button or press the enter key can trigger events

<! - script section ->

initial data data () {// page
    return {
      ruleForm: storing the user input data {//
        User: '',
        the passwd: '',
      },
      the rules: {// add some form rules can

}
}
},

methods: {

    submitForm () {
      . this.axios.post ( 'URL', this.ruleForm {...}) the then (RES => {// POST request carrying parameters expand operator = user: '', passwd: ' ',
   IF (res.code = 0!) return to false; // returns a corresponding background transmitted data according to the state of the distal end code, 0 is successful, proceed down either 0 or failure (user name or password -1 error, 1 empty) down to stop execution

. this $ message ({// prompt success message
   of the type: 'Success',
   the Message: 'Login successful'
   })
        . router.push the this $ ( '/ Home / index') // success goto
      })

}
}

vue real - login page

Guess you like