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 ：
rule
explain
required
necessary , For example, check whether the content is not empty
pattern
regular expression , For example, verify the format of mobile phone number , Verify mailbox format
range
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.
len
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 .
enum
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 request.post('/mp/v1_0/authorizations', data) } export {
userLogin }
code
<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="user.mobile" 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:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
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>
Technology
Daily Recommendation