Create components and configure routes

        First, we created a login component  src/views/login/index.vue 

    Configure the login page component into the route
const routes = [ { path: '/login', name: 'login', component: () =>
import('@/views/login') } ]
Here is a little knowledge for everyone :

        stay VueCLI In the project created @ express src catalogue   

        It is src Path alias of directory

        benefit : It is not affected by the current file path

        be careful :@ namely src route , Don't forget to write that slash in the back

        Usage suggestions : If the loaded resource path is under the current directory , Then write normally

                          If you need to find the parent path, use it @

Page layout

        Implement basic page styles And structure ( Used element-ui Form component of ) To finish the structure and style of the page


Realize basic login function

thinking :

* Register the click event for the login button
* Get form data
* Request login
* Process backend response results
* Successfully processed
* Failure handling
Login message prompt

        You need to mount the method to the prototype for use
import Vue from 'vue' import {Message } from 'element-ui'
Vue.prototype.$message = Message
Logging in loading Tips

Two functions :

* Prevent slow network requests. Users click repeatedly to trigger login requests
* One way is to disable the interactive button during the request and not allow it to be clicked
* One way is to show loading Not allowed to be clicked
* Interactive feedback
1, stay data Add data to control the login button loading state

2, Bind login button loading state

Form Validation


Form Component provides the function of form verification , Just pass rules Property passed in the validation rule of the contract , And will Form-Item of prop Property is set to the field name to be verified

Here are the built-in basic validation rules :




necessary , For example, check whether the content is not empty


regular expression , For example, verify the format of mobile phone number , Verify mailbox format


use min and max Attribute definition range . For string and array types , Will be compared by length , For numeric types , The number must not be less than min, Nor greater than max.


To verify the exact length of the field , Please specify len attribute . For string and array types , yes length
Property to perform a comparison , For numeric types , This attribute indicates an exact match of numbers , Namely , It may only be strictly equal to len. If len Attribute combined with minimum and maximum range attributes , be len first .


To verify values from a list of possible values , Please use enumeration type with enumeration property , List the valid values of this field , for example :
var descriptor = { role: {type: "enum", enum: ['admin', 'user', 'guest']} }

If the built-in verification rules are not met , You can also customize the verification rules

1, to el-from Component binding model Is a form data object

2, Give the form items that need to be verified el-form-item binding prop attribute

* be careful :prop Attribute needs to specify the data name in the form object
3, adopt el-from Component rules Property configuration validation rules

4,ref Is mainly used to get form components to manually trigger validation

Encapsulation request module

For requested actions in the project :

* Interface requests may need to be reused
* In actual work , The interface is very easy to change , It's troublesome to change
Our suggestion is to encapsulate all requests into functions and organize them into modules for management , The advantage of doing this is : More convenient management and maintenance , Or reuse .

The following is the specific operation of optimizing the encapsulation request .

1, establish src/api/user.js, Encapsulate login request method
// User related interface calls import request from '@/utils/request.js' // Login function const userLogin
= data => { return'/mp/v1_0/authorizations', data) } export {
userLogin }

<template> <div class="box"> <div class="login-form-wrap"> <div
class="login-head"> <div class="logo"></div> </div> <el-form ref="userForm"
:rules="rules" :model="user"> <el-form-item prop="mobile"> <el-input
v-model="" placeholder=" Please enter your mobile number "></el-input> </el-form-item>
<el-form-item prop="code"> <el-input v-model="user.code"
placeholder=" Please input a password "></el-input> </el-form-item> <el-form-item prop="agree">
<el-checkbox v-model="user.agree" > I have read and agree to the user agreement and privacy terms </el-checkbox >
</el-form-item> <el-form-item> <!-- loading Let the button enter the login status Not clickable Increase interaction effect -->
<el-button type="primary" @click="onLogin" :loading="loginLoading"
> Sign in </el-button > </el-form-item> </el-form> </div> </div> </template> <script>
// Introduce login interface method import { userLogin } from '@/utils/user.js' export default { name:
'Login', data () { // Custom validation rule function const validateAgree = (rule, value, callback)
=> { if (value) { callback() } else { callback(new Error(' Please check the consent agreement ')) } } return
{ // Form Data user: { mobile: '13911111111', code: '246810', agree: false }, //
Check or not loginLoading: false, // loading... Not at first Only during login true // Form validation rules rules:
{ mobile: [ { required: true, message: ' Please enter your mobile number ', trigger: 'blur' }, { pattern:
message: ' Please enter the correct number format ', trigger: 'blur' } ], code: [ { required: true, message:
' Please enter the verification code ', trigger: 'blur' }, { pattern: /\d{6}$/, message: ' Please enter the correct verification code format ',
trigger: 'blur' } ], agree: [{ validator: validateAgree, trigger: 'change' }] }
} }, methods: { // Login button binding event onLogin () { this.$refs.userForm.validate(async
valid => { // If verification fails , Do not send request End function if (!valid) return false // Verification passed Yes button entry
loading... Login status this.loginLoading = true // Call login interface use await optimization Get the returned results const
data = await userLogin(this.user).catch(err => {
this.$message.error(' Login failed. The mobile number or verification code is wrong ') return err }) if (data.status !== 201)
return this.$message.success(' Login successful ') }) // Login call completed Restore button this.loginLoading =
false } } } </script> <style lang="less" scoped> .box { position: fixed; left:
0; top: 0; bottom: 0; right: 0; background: url(''); background:
url('./login_bg.jpg') no-repeat; background-size: cover; display: flex;
flex-direction: column; justify-content: center; align-items: center; }
.login-form-wrap { background: white; min-width: 400px; padding: 30px 50px
10px; background-color: #fff; } .login-head { display: flex; justify-content:
center; margin-bottom: 20px; } .logo { width: 200px; height: 57px; background:
url('./logo_index.png') no-repeat; background-size: contain; } .el-button {
width: 100%; } </style>

©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?