Using VUE to implement a website with functions such as login and registration [detailed steps]
- Use VUE to implement a website with functions such as login and registration [detailed steps]
-
- 1. Main functions
- 2. Implementation ideas
-
- 1. Page design
- 2. Functional design
- 3. Key points and difficulties
- 3. Code implementation
-
- 1. Project structure
- 2. Page layout – html part (take the login interface as an example)
- 3. Page beautification – css part (take the login interface as an example)
- 4. Functional design
- 4. Effect display
-
- 1. Landing page
- 2. Registration page
- 3. Homepage
- V. Summary
Use VUE to implement a website with functions such as login and registration [detailed steps]
1. Main functions
This task is mainly to use VUE to implement a beautiful website with functions such as login and registration [detailed steps]
The main functions are:
1. Three pages are required: login, registration, and home page (as beautiful as possible).
2. Records store the list of registered user information.
3. Realize the jump between each page.
2. Implementation ideas
1. Page design
Register.vue Registration page, including user name input, password input, registration button, etc.
Login.vue login page, including user name input, password input, login button, keep login option, jump registration page button, etc.
Homepage.vue homepage, with the function of logging out.
2. Functional design
Because it involves mutual jumps between multiple pages, you must first set up the corresponding routing in index.js in the VUE project. In addition, we need to use a json array to store the registered user information list (virtual data).
For example, after the user completes the registration, he needs to update the user list, and pass the updated list to the login page by passing parameters, and jump to the login page;
When logging in, it is necessary to judge whether the entered user exists according to the user list, and whether the entered password matches the user name.
3. Key points and difficulties
(1) Box model layout, css beautification.
(2) Jump between pages and parameter passing.
(3) Business logic for login and registration.
3. Code implementation
1. Project structure
Because we involve multiple pages this time, it is very important to figure out the project structure and configure the corresponding routing.
If you don’t know how to create a project with VUE, you can refer to the following steps.
(1) First you need to install Node and configure npm
Please go to the node official website to download: http://nodejs.cn/download/
After the installation is complete, you can use node -v
to view the installation result of Node. If the version number appears, it means that the node installation is successful. Similarly, use npm -v
to view the npm installation result. If the version number appears, it means that the npm installation is successful.
(2) Download vue scaffolding: @vue/cli
npm install @vue/cli -g
(3) Install webpack
$ sudo npm install webpack -g
(4) Install vue-cli
$ sudo cnpm install --global vue-cli
(5) Create a vue project named test
$ vue init webpack test
(6) Run:
$ cd test $ npm run dev
You can refer to the following blogs (introducing the environment with VUE and the initial project structure in more detail):
https://blog.csdn.net/iiiiliuyang/article/details/104185384
https://www.cnblogs.com/hellman/p/10985377.html
Taking this project as an example, we can store our three pages in the view folder, (login, registration, home page)
Configure related routes in index.js.
Relevant code in index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Homepage from '@/views/Homepage' //home page import Login from "@/views/Login" //login import Register from "@/views/Register"; //register Vue. use(VueRouter) const routes = [{<!-- --> path: '/', name: 'login', component: Login }, {<!-- --> path: '/Register', name: 'Register', component: Register }, {<!-- --> path: '/Homepage', name: 'Homepage', component: Homepage }, ] const router = new VueRouter({<!-- --> mode: 'history', base: process.env.BASE_URL, routes }) export default router
2. Page layout – html part (take the login interface as an example)
Since we want our page to be as beautiful as possible, the initial page design is essential. When you are a beginner, you can refer to the page layout and design of other websites. I refer to the interface layout of the figure below.
Then let’s analyze the layout of this page. First, there is a large login box located in the center of the entire page. The large login box is divided into left and right parts. The left side is the login function, including the account input box, password input box, and login button, etc. Looking at the right side, it is a background image with website information or “Welcome”, etc. typeface. (Analyzing other people’s good-looking page layout is helpful when we design website pages)
According to this idea, we can also design our page~ The picture below shows the page designed for this task.
html code (landing page)
<template> <div class="container"> <div class="main"> <!-- Entire registry box --> <div class="loginbox"> <!-- Registration box on the left --> <div class="loginbox-in"> <div class="userbox"> <span class="iconfont"> </span> <input class="user" id="user" v-model="name" placeholder="username"> </div> <br> <div class="pwdbox"> <span class="iconfont"> </span> <input class="pwd" id="password" v-model="pwd" type="password" placeholder="password"> </div> <br> <div class="pwdbox"> <span class="iconfont"> </span> <input class="pwd" id="re_password" v-model="repwd" type="password" placeholder="confirm password"> </div> <br> <button type="primary" class="register_btn" @click="register">Register</button> </div> <!-- Registration box on the right --> <div class="background"> <div class="title">Welcome to WH System Management Center</div> </div> </div> </div> </div> </template>
3. Page beautification – css part (take the login interface as an example)
There are actually many details about the css beautification of the page.
(1) The first difficulty is how to make our login card always be located in the center of the page no matter how the window is resized? Here we can useposition.
.loginbox{<!-- --> position:absolute; width:800px; height:400px; top: 40%; left: 50%; transform:translate(-50%,-50%); }
Among them, top:40%;left:50%; refers to the position of the left vertex of the div (our landing card) on the page, not the center point of the div~ and what we want is that the center point of the div is at the position we want of.
So use tannsform to move on the X Y axis. You can refer to the reference blog to learn more about position https://www.cnblogs.com/gxsweb/p/5395243.html
(2) How to use iconfont
We have used some small icons for this task, which can be loaded in the form of images in png, or loaded in our page in the form of iconfont (font icon).
Compared with ordinary pictures, using iconfont can freely change the size without blurring, and it takes up less memory, and can also change the color arbitrarily.
First of all, we need to find a suitable icon in https://www.iconfont.cn/ Ali Vector Graphics Library
Click to download the code:
We can see that there are mainly these items in the downloaded compressed package:
This experiment is mainly unicode references, so the only files we will really use are these
Our first step is to copy the @font-face (in iconfont.css) generated under the project to the css of our own page
@font-face {<!-- --> font-family: "iconfont"; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2 + */ url('./font/iconfont.svg#iconfont') format('svg'); }
Note: The url here must be changed according to your own file directory! ! !
Step 2: Define the style using iconfont (color, font size, etc. can be changed as you like~)
.iconfont {<!-- --> font-family: "iconfont" !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 22px; color:#4E655D; margin-right: 10px; margin-top: 3px; }
Step 3: Select the corresponding icon and obtain the font code, and apply it to the page
<span class="iconfont"> & amp;#xe775;</span>
(3) How to modify the default style of automatic filling of the input input box
Because we have an input account and password input box, chrome will automatically fill in the input input box according to the account and password that have been logged in in history, but there is a problem, although the content is automatically filled, but! ! Even the style is filled in, that is, it will overwrite the style of the input input box I originally wrote.
For example: This is the style of the input input box written by myself
But this is the style after chrome autofill
It is very inconsistent with the style of the entire page. The solution is as follows (I searched the entire Internet, pieced together things, and it really worked!)
input:-webkit-autofill {<!-- --> /* Modify the color of the default background frame */ box-shadow: 0 0 0px 1000px #89AB9E inset !important; /* Modify the default font color */ -webkit-text-fill-color: #445b53; } input:-webkit-autofill::first-line {<!-- --> /* Modify the default font size */ font-size: 15px; /* Modify the style of the default font */ font-weight: bold; }
(4) In order to make the page more beautiful and have dynamic effects, we can use hover, etc., and add shadows to cards, etc.
** css code (landing page) **
.loginbox{ display: flex; position:absolute; width:800px; height:400px; top: 40%; left: 50%; transform:translate(-50%,-50%); box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D; } .loginbox-in{ background-color:#89AB9E; width:240px; } .userbox{ margin-top:120px; height:30px; width:230px; display: flex; margin-left: 25px; } .pwdbox{ height:30px; width:225px; display: flex; margin-left: 25px; } .background{ width:570px; background-image:url('./img/Christmas_Trees.png'); background-size: cover; font-family: sans-serif; } .title{ margin-top: 320px; font-weight: bold; font-size: 20px; color:#4E655D; } .title:hover{ font-size: 21px; transition: all 0.4s ease-in-out; cursor: pointer; } .uesr-text{ position: left; } input{ outline-style: none ; border: 0; border-bottom: 1px solid #E9E9E9; background-color:transparent; height:20px; font-family:sans-serif; font-size: 15px; color:#445b53; font-weight: bold; } /* input::-webkit-input-placeholder{ color:#E9E9E9; } */ input:focus{ border-bottom: 2px solid #445b53; background-color:transparent; transition: all 0.2s ease-in; font-family:sans-serif; font-size: 15px; color:#445b53; font-weight: bold; } input:hover{ border-bottom: 2px solid #445b53; background-color:transparent; transition: all 0.2s ease-in; font-family:sans-serif; font-size: 15px; color:#445b53; font-weight: bold; } input:-webkit-autofill {<!-- --> /* Modify the color of the default background frame */ box-shadow: 0 0 0px 1000px #89AB9E inset !important; /* Modify the default font color */ -webkit-text-fill-color: #445b53; } input:-webkit-autofill::first-line {<!-- --> /* Modify the default font size */ font-size: 15px; /* Modify the style of the default font */ font-weight: bold; } .log-box{ font-size: 12px; display: flex; justify-content: space-between; width:190px; margin-left: 30px; color:#4E655D; margin-top:-5px; align-items: center; } .log-box-text{ color:#4E655D; font-size: 12px; text-decoration:underline; } .login_btn{ background-color: #5f8276; /* Green */ border: none; color: #FAFAFA; padding: 5px 22px; text-align: center; text-decoration: none; font-size: 13px; border-radius: 20px; outline: none; } .login_btn:hover{ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); cursor: pointer; background-color: #0b5137; transition: all 0.2s ease-in; } .warn{ margin-top: 60px; /* margin-right: 120px; */ margin-left:-120px; margin-bottom: 5px; font-weight: bold; font-size: 17px; } .register_btn{ background-color: transparent; /* Green */ border: none; text-decoration: none; font-size: 12px; /* border-radius: 20px; */ color:#4E655D; font-size: 12px; text-decoration:underline; display: flex; margin-left: 25px; outline: none; } .register_btn:hover{ font-weight: bold; cursor: pointer; } @font-face {<!-- --> font-family: "iconfont"; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2 + */ url('./font/iconfont.svg#iconfont') format('svg'); } .iconfont {<!-- --> font-family: "iconfont" !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 22px; color:#4E655D; margin-right: 10px; margin-top: 3px; } .icon-key:before { content: "\e775"; } .icon-account:before { content: "\e817"; }
4. Functional design
(1) Jump between login, registration, home page and other pages.
Use v-model monitoring to get the value in the input box. (Not used in the previous issue, corrected in this issue)
If the username and password are correct, you can jump.
The way to jump is as follows
If there are parameters: (this time the method of query is used)
this.$router.push({<!-- --> path: '/', query: {<!-- --> list: this. user_list, } })
If no arguments:
this.$router.push "Homepage");//homepage is the page to be redirected
(2) Business logic of the registration page
Use a json array to store the registered user information list. (emulated database)
When using a certain website, according to the general operation logic: when we log in to a certain website, if we do not have an account, we must apply for registration.
Similarly, our project is the same, we have to register without an account. When we enter the registration page and register successfully, our user name and password will be saved.
Of course, when we register an account, we must also pay attention to the fact that the account name cannot be the same, and the passwords we entered twice cannot be inconsistent. This requires us to judge in js.
How to implement it, please refer to the code and related comments
Register.vue judges whether the registration is successful
var flag=1; //If the username already exists, you need to change it this.user_list.forEach((item) => {<!-- --> if(item.username==this.name){<!-- --> alert('The user already exists, please change the username'); flag=0;} }) //If the username does not exist, continue to judge if(flag){<!-- --> //Judge whether the passwords entered twice are consistent, if the passwords are inconsistent, you need to re-enter if(this.pwd!=this.repwd){<!-- --> alert('The passwords entered twice are inconsistent, please re-enter'); }
When the value we input meets the registration conditions, the project will record our account number and password, and update the user list user_list. At this time, the registration is successful. We also need to use the updated user_list as a parameter to jump to the login page. At this time We directly enter the account number and password we just registered to log in successfully.
Of course, the reason why we require that the user name registered by the user cannot be consistent with the existing user name is because here we use the user name as the unique identifier of our user list, so that we can judge whether the user and the password match.
Register.vue updates the user list and passes parameters to Login.vue
else {<!-- --> var item ={<!-- -->}; // get username item.username=this.name; //Get the password item.password=this.pwd; // store in user list this.user_list.push(item); alert('registration successful'); // this.user_list.forEach((item) => {<!-- --> // console. log( item. username); // }) this.$router.push({<!-- --> path: '/', query: {<!-- --> list: this. user_list,} }) }
Login.vue receives parameters
var routerParams = this. $route. query. list; this.user_list = routerParams;
(3) Business logic of the landing page
When we log in, we also use a loop to determine whether there is a user, and to determine whether the user’s password matches the entered password. If all matches are successful, jump to the home page. (Pay attention to the details: you need to distinguish whether you directly enter the account password to log in, or register first and then log in, otherwise an error will be reported)
login(){<!-- --> var flag=0; //If there are parameters passed if(!this.$route.query.list){<!-- --> this.user_list.forEach((item) => {<!-- --> if(item.username==this.name){<!-- --> if(item.password==this.pwd){<!-- --> flag=1;//The user exists and the password is correct } } } ) if(flag==1){<!-- --> //You can jump to the home page this.$router.push("Homepage"); } else{<!-- --> alert("Username or password is incorrect, please re-enter"); } } else{<!-- --> // Get the parameters brought by the route var routerParams = this. $route. query. list; this.user_list = routerParams; this.user_list.forEach((item) => {<!-- --> if(item.username==this.name){<!-- --> if(item.password==this.pwd){<!-- --> flag=1;//The user exists and the password is correct } } } ) if(flag==1){<!-- --> //You can jump to the home page // this. $router. push("Homepage"); this.$router.push({<!-- --> path: '"Homepage', } ) } else{<!-- --> alert("Incorrect username or password, please re-enter");} } },
4. Effect display
1. Landing page
2. Registration page
3. Homepage
5. Summary
Although it is only a small demo, it involves quite a lot of knowledge points. However, while gaining a lot of new knowledge, it also deepens the understanding of the knowledge learned before, and is more familiar with how to apply it. Although there are many unfinished functions and points that need to be improved, I hope that in each task, I will continue to summarize, improve and grow rapidly!