This example is based on Vue JS and mint UI implementation.
catalogue
2, Connection between back-end interface and database
3, Front end code implementation
1. Relevant codes of registration page
2. Effect of registration page
3. Relevant codes of login page
1, Creation of database
Navicat software is used here to create a new database reg_log.sql and data table reg_log；
In order to realize the registration business, we design five fields in the database: ID, user name, password, email and telephone number.
After creating and saving, you can find the database and empty table we just created in the database. So you can connect in the project.
**2, * * connection between back-end interface and database
server folder - > app js
// Load Express module
const express = require('express');
// MySQL module loading
const mysql = require('mysql');
// Load bodyParser module
const bodyParser = require('body-parser');
// Load MD5 module
const md5 = require('md5');
// Create MySQL connection pool
const pool = mysql.createPool({
host: '127.0.0.1', //MySQL server address
port: 3306, //MySQL server port number
user: 'root', //User name of the database user
password: '', //Database user password
database: 'reg_log', //Database name
connectionLimit: 20, //maximum connection
charset: 'utf8' //Encoding method of database server
});
// Create server object
const server = express();
server.use(bodyParser.urlencoded({
extended: false
}));
// Load CORS module
const cors = require('cors');
// Using CORS Middleware
server.use(cors({
origin: ['http://localhost:8080', 'http://127.0.0.1:8080']
}));
//User registration interface
server.post('/register', (req, res) => {
//console.log(md5('12345678'));
// Get user name and password information
let username = req.body.username;
let password = req.body.password;
//Search with username as the condition to ensure the uniqueness of the user name
let sql = 'SELECT COUNT(id) AS count FROM reg_log WHERE username=?';
pool.query(sql, [username], (error, results) => {
if (error) throw error;
let count = results[0].count;
if (count == 0) {
// Insert user related information into the data table
sql = 'INSERT reg_log(username,password) VALUES(?,MD5(?))';
pool.query(sql, [username, password], (error, results) => {
if (error) throw error;
res.send({
message: 'ok',
code: 200
});
})
} else {
res.send({
message: 'user exists',
code: 201
});
}
});
});
// User login interface
server.post('/login', (req, res) => {
//Get user name and password information
let username = req.body.username;
let password = req.body.password;
// SQL statement
let sql = 'SELECT id,username FROM reg_log WHERE username=? AND password=MD5(?)';
pool.query(sql, [username, password], (error, results) => {
if (error) throw error;
if (results.length == 0) { //Login failed
res.send({
message: 'login failed',
code: 201
});
} else { //Login successful
res.send({
message: 'ok',
code: 200,
result: results[0]
});
}
});
});
// Specifies the port number on which the server object listens
server.listen(3000, () => {
console.log('server is running...');
});
**3, * * front end code implementation
1. Relevant codes of registration page
Project folder - > register vue
<template>
<!-- Registration page -->
<div class="reg">
<mt-header title="User registration">
<router-link slot="left" to="/"> Return to home page </router-link>
<router-link to="/login" slot="right">Go login</router-link>
</mt-header>
<mt-field
type="text"
label="user name"
placeholder="enter one user name"
v-model="name"
:state="nameState"
@blur.native.capture="checkName"></mt-field>
<!-- @blur Out of focus, the input box is verified when the input is completed and moved to other places -->
<mt-field
type="password"
label="password"
placeholder="Please input a password"
v-model="pwd"
:state="pwdState"
@blur.native.capture="checkPwd"></mt-field>
<mt-field
type="password"
label="Confirm password"
placeholder="Enter the password again"
v-model="repwd"
:state="repwdState"
@blur.native.capture="checkrePwd"></mt-field>
<mt-field
label="mailbox"
placeholder="Please enter email address"
type="email"
v-model="email"
:state="emailState"
@blur.native.capture="checkEmail"></mt-field>
<mt-field
label="cell-phone number"
placeholder="Please enter your mobile number"
type="tel"
v-model="phone"
:state="phoneState"
@blur.native.capture="checkPhone"></mt-field>
<mt-field
label="birthday"
placeholder="Please enter birthday"
type="date"
v-model="birthday"></mt-field>
<mt-button class="btn" type="primary" size="large" @click="checkForm">register</mt-button>
</div>
</template>
<style scope>
.reg .btn {
background-color: #d86931;
width: 190px;
border-radius: 0;
border: 0;
margin: auto;
}
.reg .mint-cell-wrapper {
line-height: 80px;
}
.reg {
margin-top: 14%;
}
.reg .mint-header {
background-color: #d86931;
}
.reg .btn {
background-color: #d86931;
}
</style>
<script>
export default {
data() {
return {
name: "", //Bidirectional data binding user name input box
nameState: "", //Handle the dynamic update of user name input box
pwd: "",
pwdState: "",
repwd: "",
repwdState: "",
email: "",
emailState: "",
phone: "",
phoneState: "",
birthday: "",
};
},
methods: {
// Validation method for encapsulating each field:
// 1. Verify user name
checkName() {
//Event handler: handle the click button verification form
let reg = /^[a-zA-Z0-9 one-A]{2,6}$/;
if (reg.test(this.name)) {
this.nameState = "success";
return true;
} else {
this.nameState = "error";
return false;
}
},
// 2. Verify password
checkPwd() {
let reg = /^d{6}$/;
if (reg.test(this.pwd)) {
this.pwdState = "success";
return true;
} else {
this.pwdState = "error";
return false;
}
},
// 3. Repeat the password
checkrePwd() {
let reg = /^d{6}$/;
if (reg.test(this.repwd) && this.pwd == this.repwd) {
this.repwdState = "success";
return true;
} else {
this.repwdState = "error";
return false;
}
},
// 4. Verify email format
checkEmail() {
let reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
if (reg.test(this.email)) {
this.emailState = "success";
return true;
} else {
this.emailState = "error";
return false;
}
},
// 5. Verify mobile phone number
checkPhone() {
let reg = /^1[3|5|7|8][0-9]d{8}$/;
if (reg.test(this.phone)) {
this.phoneState = "success";
return true;
} else {
this.phoneState = "error";
return false;
}
},
checkForm() {
// After clicking the registration button, this method is called to verify that the user name, password, and two passwords are all correct, and the correct axios request is sent.
if (this.checkName() && this.checkPwd() && this.checkrePwd()) {
console.log(`The verification is successful and the registration business is executed......`);
// Send a registration (post) request
this.axios
.post("/register", `username=${this.name}&password=${this.pwd}`)
.then((result) => {
console.log(result);
if (result.data.code == 200) {
// The pop-up window indicates that the registration is successful
this.$toast({
message: "login was successful",
position: "bottom",
duration: 3000,
});
// After successful registration, directly jump to the login page
this.$router.push("/login");
} else if (result.data.code == 201) {
this.$toast({
message: "User already exists, please register again",
position: "bottom",
duration: 3000,
});
}
});
}
},
},
};
</script>
2. Effect of registration page
3. Relevant codes of login page
Project folder - > login vue
<template>
<!-- Login page -->
<div class="log">
<span class="login">Please login</span>
<span class="reg">
<router-link to="/register">Register first</router-link>
</span>
<!-- mint ui Form components for -->
<mt-field
type="text"
label="user name"
placeholder="enter one user name"
v-model="name"
:state="nameState"
@blur.native.capture="checkName"></mt-field>
<mt-field
type="password"
label="password"
placeholder="Please input a password"
v-model="pwd"
:state="pwdState"
@blur.native.capture="checkPwd"></mt-field>
<hr style="width: 85%" />
<mt-button class="btn" type="primary" size="large" @click="checkForm">Sign in</mt-button>
</div>
</template>
<style scoped>
.log .reg {
font-size: 18px;
}
.log .login {
font-size: 24px;
font-family: "Regular script";
font-weight: 700;
margin-left: 5px;
margin-right: 210px;
line-height: 80px;
}
.log {
margin-top: 20%;
}
.log .btn {
background-color: #d86931;
width: 190px;
border-radius: 0;
border: 0;
margin: auto;
}
.log .btn1 {
background-color: white;
border: 2px solid #d86931;
color: #d86931;
width: 190px;
margin: auto;
margin-top: 30px;
}
</style>>
<script>
export default {
namespaced: true,
data() {
return {
name: "", //Bidirectional data binding user name input box
nameState: "", //Handle the dynamic update of user name input box
pwd: "",
pwdState: "",
};
},
methods: {
// Packaging verification method:
// 1. Verify user name
checkName() {
//Event handler: handle the click button verification form
let reg = /^[a-zA-Z0-9 one-A]{2,6}$/; //2-6 digit numbers, letters and Chinese characters
if (reg.test(this.name)) {
this.nameState = "success";
return true;
} else {
this.nameState = "error";
return false;
}
},
// 2. Verify password
checkPwd() {
let reg = /^d{6}$/;
if (reg.test(this.pwd)) {
this.pwdState = "success";
return true;
} else {
this.pwdState = "error";
return false;
}
},
checkForm() {
// After clicking the login button, this method is called, and the user name and password are verified.
if (this.checkName() && this.checkPwd()) {
// Send a login (post) request
this.axios
.post("/login", `username=${this.name}&password=${this.pwd}`)
.then((result) => {
console.log(result);
if (result.data.code == 200) {
// Pop up prompt login successful
this.$toast({
message: `Welcome ${this.name}`,
position: "bottom",
duration: 3000,
});
// Modify user login status in vuex
this.$store.commit("loginok", this.name);
// Save islogin and username into sessionStorage
sessionStorage.setItem("islogin", true);
sessionStorage.setItem("username", this.name);
// After successful login, jump to the home page directly
this.$router.push("/club");
} else {
this.$toast({
message: "Login failed, please check your user name and password",
position: "bottom",
duration: 3000,
});
}
});
}
},
},
};
</script>
4. Landing page effect
4, Registration login demo
Enter user information as required.
After successful registration, a pop-up window will appear and jump to the login page. Log in:
Login succeeded.
5, Project file structure
Because the login registration business needs to use the interface and call the database, two folders are required. One is the project folder as the front end; One is the server folder, which serves as the back-end, and both folders need to download node_modules package and start it separately;
The loading of each module, the creation of connection pool and the interface are written in the app under the server JS file. When starting, use the command node app js；
The front-end page is normally written in your project folder. When starting, use the command npm run serve;
