Implementation of the login page of Vue actual combat record

Implementation of the login page of Vue actual combat record

1. Preliminary preparation

1.1 Install Node.js

Official website download address: https://nodejs.org/zh-cn/

After the installation is complete, enter node -v in the terminal to query the version number

Check the npm version, npm -v

1.2 Install webpack

Terminal Input

npm install --save-dev webpack

View the version webpack -v

1.3 Install vue-cli

Because the Vue project is created using the visual tool vue-cli3 and above, the version selected here is 3 and above

npm install -g @vue/cli

Upgrade vue-cli

npm update -g @vue/cli

Uninstall vue-cli

npm uninstall vue-cli -g

2. Build a Vue project

After installing vue-cli, use the visualization tool provided by vue to create a vue project

2.1 Create a project

  Enter vue ui in the terminal to enter the visualization tool

Select the path to create the project

Create a project folder

Select Manual by default, and we manually add the configuration of the project

After selecting the function configuration, click next to create a project directly

After the project is created, open the project in WebStore

2.2 Project Directory

2.3 Import Element UI

You can see the import method directly on the ElementUI official website. Here, select the import of all modules.

Type in the console

 npm install element-ui --save

Reference in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/*Import ElementUI*/
import elementUI from 'element-ui';
/*Import ElementUI's CSS style*/
import 'element-ui/lib/theme-chalk/index.css';
/*Vue uses ElementUI*/
Vue.use(elementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3 Implementing the login page

3.1 Modify App.vue

Here we set the global settings first and delete the previous templates.

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

Modify global styles

<template>
  <div id="app">
    <!--Routing page-->
    <router-view/>
  </div>
</template>

<style>
/*Global parent class height*/
html {
  height: 100%;
}

/*Reset body attributes*/
body {
  padding: 0;
  margin: 0;
  /*Inherit html*/
  height: 100%;
}

/*#app's height also needs to be inherited*/
#app {
  height: 100%;
}

/* Remove underline from global link labels */
a {
  text-decoration: none;
}
</style>

3.2 Create Login.vue

Right click in the views directory to create a vue file named Login

Search the layout components on the ElementUI official website, select your own layout, and copy it to the vue file

<template>
  <!-- Elements of a row -->
  <el-row type="flex" class="row-bg" justify="center">
    <!--First column-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <!--Second column-->
    <el-col :span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <!--The third column-->
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>

</style>

Copy the form. Here we copy the form with verification. After copying, modify the form

<template>
  <div :xl="6" :lg="7" class="bg-login">
    <!--logo-->
    <el-image :src="require('@/assets/logo.png')" class="logo"/>
    <!--Title-->
    <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <!--Title-->
        <h1 class="title">xAdmin Management System</h1>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--form-->
    <el-row type="flex" class="row-bg card" justify="center" align="bottom">
      <el-col :span="7" class="login-card">
        <!--loginForm-->
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm">
          <el-form-item label="Account" prop="username" style="width: 380px">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="password" prop="password" style="width: 380px">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="Verification code" prop="code" style="width: 380px">
            <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input>
            <!--Verification code image-->
            <el-image :src="codeImg" class="codeImg"></el-image>
          </el-form-item>
          <el-form-item label="Remember password" prop="remember">
            <el-switch v-model="loginForm.remember"></el-switch>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click="submitForm('loginForm')">Log in now</el-button>
            <el-button @click="resetForm('loginForm')">Reset</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // Form information loginForm: {
        //Account data username: '',
        // Password data password: '',
        //Verification code data code: '',
        // Remember password remember: false,
        // The key of the verification code. Because the front-end and back-end are separated, the verification code cannot be stored in the session by the back-end, so it is handed over to the vue state management codeToken: ''
      },
      // Form validation rules: {
        // Set account verification rules username: [
          {required: true, message: 'Please enter your account', trigger: 'blur'},
          {min: 3, max: 10, message: 'Accounts with a length of 3 to 10 characters', trigger: 'blur'}
        ],
        // Set password validation rules password: [
          {required: true, message: 'Please enter your password', trigger: 'blur'},
          {min: 6, max: 15, message: 'Password between 6 and 15 characters', trigger: 'blur'}
        ],
        // Set verification code validation rules code: [
          {required: true, message: 'Please enter the verification code', trigger: 'blur'},
          {min: 5, max: 5, message: 'Length is 5 characters', trigger: 'blur'}
        ]
      },
      // Bind verification code image codeImg: null
    };
  },
  methods: {
    // Submit the form submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // Form validation success alert('submit')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // Reset the form resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>

<style scoped>
.codeImg {
  /*Let the verification code image float on the right*/
  float: right;
  /*Set some rounded borders*/
  border-radius: 3px;
  /*Set width*/
  width: 26%;
}

.bg-login {
  height: 100%;
  background-image: url("../assets/backgroud.jpg");
  background-size: 200%;

}

.btn-ground {
  text-align: center;
}

.logo {
  margin: 30px;
  height: 70px;
  width: 70px;
  position: fixed;
}

.title {
  text-shadow: -3px 3px 1px #5f565e;
  text-align: center;
  margin-top: 60%;
  color: #41b9a6;
  font-size: 40px;
}

.login-card {
  background-color: #ffffff;
  opacity: 0.9;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
}
</style>

3.3 Configuring Routes

Configure in index.js under router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  //Configure the routing of the login page {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

Effect picture:

4. Implement login function

4.1 Import axios

In vue, it is only responsible for the page, that is, view, but if we log in, we must verify it in the background, so in vue, the communication is handled by axios

Enter in the console terminal

npm install axios --save

Press Enter to automatically import the module.

Register in main.js

/*Import axios*/
import axios from "axios";
/*Global binding axios*/
Vue.prototype.$axios = axios;

4.2 Import qs and Mock

qs is a plug-in provided in vue that can help us parse strings and serialize parameters

Enter in the console terminal

 npm install qs --save

Press Enter to automatically import the module.

Register in main.js

/*Import qs*/
import qs from 'qs';
/*Global binding*/
Vue.prototype.$qs = qs;

Because there is no backend design now, we can't get the database data, so we use Mock to simulate the backend data

Enter in the console terminal

 npm install mockjs --save-dev

Press Enter to automatically import the module.

Create a mock js file, create a blank js file, name it as you like

Import mock in main.js

/*Introduce mock data*/
require('./mock/LoginService.js')

4.3 Write and submit js

Get verification code:

// Get the verification code method getVerifyCodeImg() {
  /*Get verification code*/
  this.$axios.get('/getVerifyCode').then(res => {
    // Get the verification code key
    this.loginForm.codeToken = res.data.data.codeToken;
    // Get the verification code image this.codeImg = res.data.data.codeImg;
  })
}
// Because we need to get the verification code after the page is rendered, so bind it under create created() {
  //After the page is rendered, execute the verification code method this.getVerifyCodeImg();
}

Form submission:

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // Form verification successful this.$axios.post('/login', this.loginForm).then(res => {
        // Get the result let result = JSON.parse(res.data.data);
        let message = res.data.msg;
        //Judge the resultif (result) {
          /*Login successful*/
          Element.Message.success(message);
          /* Jump to page */
          router.push('/')
        } else {
          /*Print error message*/
          Element.Message.error(message);
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}

Complete js

<script>
import Element from 'element-ui';
import router from "@/router";

export default {
  name: "Login",
  data() {
    return {
      // Form information loginForm: {
        //Account data username: '',
        // Password data password: '',
        //Verification code data code: '',
        // Remember password remember: false,
        // The key of the verification code. Because the front-end and back-end are separated, the verification code cannot be stored in the session by the back-end, so it is handed over to the vue state management codeToken: ''
      },
      // Form validation rules: {
        // Set account verification rules username: [
          {required: true, message: 'Please enter your account', trigger: 'blur'},
          {min: 3, max: 10, message: 'Accounts with a length of 3 to 10 characters', trigger: 'blur'}
        ],
        // Set password validation rules password: [
          {required: true, message: 'Please enter your password', trigger: 'blur'},
          {min: 6, max: 15, message: 'Password between 6 and 15 characters', trigger: 'blur'}
        ],
        // Set verification code validation rules code: [
          {required: true, message: 'Please enter the verification code', trigger: 'blur'},
          {min: 5, max: 5, message: 'Length is 5 characters', trigger: 'blur'}
        ]
      },
      // Bind verification code image codeImg: null
    };
  },
  methods: {
    // Submit the form submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // Form verification successful this.$axios.post('/login', this.loginForm).then(res => {
            // Get the result let result = JSON.parse(res.data.data);
            let message = res.data.msg;
            //Judge the resultif (result) {
              /*Login successful*/
              Element.Message.success(message);
              /* Jump to page */
              router.push('/')
            } else {
              /*Print error message*/
              Element.Message.error(message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // Reset the form resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // Get the verification code method getVerifyCodeImg() {
      /*Get verification code*/
      this.$axios.get('/getVerifyCode').then(res => {
        // Get the verification code key
        this.loginForm.codeToken = res.data.data.codeToken;
        // Get the verification code image this.codeImg = res.data.data.codeImg;
      })
    }
  },
  created() {
    //After the page is rendered, execute the verification code method this.getVerifyCodeImg();
  }
}
</script>

4.4 Writing Mock Test Data

Write mock data in the newly created LoginService.js

/*Bind Mock*/
const Mock = require('mockjs');
const Random = Mock.Random;

/*Set a general result that returns data*/
let result = {
  msg: '',
  data: ''
}

/*Simulation database information*/
let username = 'xiaolong';
let password = '123456';
let verityCode = 'abcde';

/**
 * Simulate verification code */
Mock.mock('/getVerifyCode', 'get', () => {
  result.data = {
    codeToken: Random.string(32),
    codeImg: Random.dataImage('75x40', verityCode)
  }
  return result;
})

/**
 *Intercept login request*/
Mock.mock('/login', 'post', (req) => {
  // Get request data let from = JSON.parse(req.body);
  //Judge the verification code if (verityCode === from.code) {
    // Verify account if (username === from.username) {
      // Verify password if (password === from.password) {
        result.msg = 'Login successful'
        result.data = 'true'
      } else {
        result.msg = 'Wrong password'
        result.data = 'false'
      }
    } else {
      result.msg = 'User does not exist'
      result.data = 'false'
    }
  } else {
    result.msg = 'Verification code error'
    result.data = 'false'
  }
  return result;
})

Summarize

This is the end of this article about the implementation of the login page of Vue practical record. For more relevant Vue login page content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Implementing the login page based on vue-cli3 and element
  • Vue implements the practice of developing a login page

<<:  Zookeeper unauthorized access test problem

>>:  MySQL 8.0.15 winx64 decompression version installation and configuration method graphic tutorial

Recommend

MYSQL Operator Summary

Table of contents 1. Arithmetic operators 2. Comp...

Centos7 installation of FFmpeg audio/video tool simple document

ffmpeg is a very powerful audio and video process...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...

Install and configure MySQL under Linux

System: Ubuntu 16.04LTS 1\Download mysql-5.7.18-l...

Spring Boot layered packaging Docker image practice and analysis (recommended)

Table of contents 1. Prepare the springboot proje...

CSS3 text animation effects

Effect html <div class="sp-container"...

Basic usage and pitfalls of JavaScript array sort() method

Preface In daily code development, there are many...

Detailed explanation of the persistence implementation principle of transactions in MySQL

Preface When it comes to database transactions, a...

Implementation of a simple login page for WeChat applet (with source code)

Table of contents 1. Picture above 2. User does n...

How to create https using nginx and Tencent Cloud free certificate

I have been studying how to get https. Recently I...

Discuss the value of Web standards from four aspects with a mind map

I have roughly listed some values ​​to stimulate ...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

Get / delete method to pass array parameters in Vue

When the front-end and back-end interact, sometim...

SQL query for users who have logged in for at least n consecutive days

Take 3 consecutive days as an example, using the ...