Practice of implementing user login through front-end and back-end interaction of Node.js
|
I have recently learned some backend knowledge of Node.js, so as a person who is studying front-end, I began to understand the backend. Without further ado, let me start the introduction. First of all, if you want to better understand this blog, you need to have the basics of html, css, javascript and Node.js as well as a little knowledge of SQL database. Next we start this little project. 1. Project RequirementsThe user is required to enter the login interface and enter the username and password. The backend obtains the form information entered by the user and searches the database. If it is correct, it jumps to the login success page. ps: The comments are quite detailed. Please read the comments if you don’t understand something. Of course, you are welcome to leave a message to ask questions, but this is not a quick solution to the problem. Second, start coding1. Create the front-end page (CSS style is omitted here)
<form method="post" action="http://localhost:8080/">
<input type="text" required="required" id="use_name" placeholder="Please enter your user name" name="user_name">
<input type="password" required="required" id="pwd" placeholder="Please enter your password" name="user_pwd">
<button type="submit" class="but">Log in</button>
</form>
Create a form, use the post submission method, and submit the address to your own host, because I am doing a local test environment. Login success page success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login success page</title>
<style>
/*Success page style*/
.success {
text-align: center;
color: #3e8e41;
}
</style>
</head>
<body>
<h1 class="success">Congratulations! Login successful! </h1>
<img src="img/keyboard_coffee.jpg">
</body>
</html>
2. Node.js backend obtains user input data(1) Import the module. You need to have Node.js installed on your computer. For installation instructions, please search Baidu.
// Import http module const http = require('http');
//Introduce the request parameter processing module const queryString = require('querystring');
const fs = require('fs');
//Introduce third-party mime module const mime = require('mime');
const path = require("path");(2) Obtaining user input data
//Create a sever website server object let sever = http.createServer();
//Bind request events to server objects, triggering sever.on('request', function (request, response) {
/* POST parameters are received via events* data is an event triggered when request parameters are passed* end is an event triggered when parameter passing is complete*/
let postParams = ''; //Define an empty string to receive post parameters //Bind data to trigger the event request.on('data', function (params) {
postParams = postParams + params; // concatenate post parameters });
//Bind data to trigger event request.on('end', function () {
// Process the postParams string into an object using the parse() method in the querystring module // console.log(queryString.parse(postParams));
//Get specific values, such as user name. Note: The user_name here must be consistent with name="user_name" in the front-end HTML code.
let username = queryString.parse(postParams).user_name;
let userpwd = queryString.parse(postParams).user_pwd;
}
So far, we have obtained the data entered by the user and stored it in the variables username and userpwd we defined, which will be used for comparison with the username and password obtained from the database below. (3) Get user information from the SQL database (I use MySQL database. The database management software I use is DBeaver because it is free hahaha) Take a look at the data tables in the database I prepared in advance. The database name is test (you can see it in the configuration items of the database package later), and the data table name is userinfo
// Database query instance. I search the database based on the username.
//Call the custom encapsulated link database module const connection = require("./mysql.js");
connection.query("select * from userinfo where userName=?", [username], function (result, filed) {
//result is the raw data returned by the MySQL query. The '? ' is a placeholder used to replace the SQL query statement with the value in '[]'.
//Process the JSON-like array returned by MySQL into JSON data let resultJson = JSON.stringify(result);
//JSON.parse() is used to parse the JSON string let dataJson = JSON.parse(resultJson);
//Get the specific value after parsing let name = dataJson[0].userName;
let pwd = dataJson[0].userPwd;
//Compare the user information obtained from the database with the user form input. If they are consistent, jump to the successful page. findPage() is a custom page jump function if (pwd === userpwd && name === username) {
console.log("The password is correct!");
findPage('/success.html', response);
} else {
console.log("Wrong password!");
response.end('<h1>Wrong password!</h1>')
}
});
/**
* Function to access local static resources */
function findPage(url, res) {
// static is the absolute path of the concatenated static resource const static = path.join(__dirname, url);
//Asynchronously read local files //Get the file type, use the getType() method of the mime module let fileType = mime.getType(static) //Get the file type, use the getType() method of the mime module //Read the file fs.readFile(static, function (err, result) {
if (!err) {
res.end(result);
}
});
}
(4) Database module encapsulation Because if you write a bunch of code for operations such as database links every time you use it, it will seem redundant, so I refer to the codes of other bloggers to encapsulate the database link operations into two files. Database configuration encapsulation file mysql.config.js
//Configure the link database parameters module.exports = {
host: 'localhost',
port: 3306, //Port number database: 'test', //Database name user: 'root', //Database username password: '123456' //Database password };
Database link encapsulation file mysql.js
let mysql = require('mysql'); //Introduce mysql module let databaseConfig = require('./mysql.config'); //Introduce data in database configuration module //Exposing method to the outside module.exports = {
query: function (sql, params, callback) {
//You need to create a connection each time you use it, and close the connection after the data operation is completed let connection = mysql.createConnection(databaseConfig);
connection.connect(function (err) {
if (err) {
console.log('Database connection failed');
throw err;
}
//Start data operation //Pass in three parameters, the first parameter is the sql statement, the second parameter is the data required in the sql statement, and the third parameter is the callback function connection.query(sql, params, function (err, results, fields) {
if (err) {
console.log('Data operation failed');
throw err;
}
//Return the queried data to the callback function callback && callback(results, fields);
//results is the result of the data operation, fields is some fields of the database connection //To stop connecting to the database, you must query the statement, otherwise, once this method is called, the connection will be stopped directly and the data operation will fail connection.end(function (err) {
if (err) {
console.log('Failed to close database connection!');
throw err;
}
});
});
});
}
};
The above two files have been called in the database query example const connection = require("./mysql.js");. So far, we have completed the function of using node.js to query the MySQL database and realize the user login function. I would like to thank the blogger who taught me the database operation encapsulation. His article link is here. This is the end of this article about the practice of implementing user login through Node.js front-end and back-end interaction. For more relevant Node.js user login 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:
|
>>: MySQL index optimization: paging exploration detailed introduction
Recommend
js method to realize shopping cart calculation
This article example shares the specific code of ...
How to set a fixed IP address for a VMware virtual machine (graphic tutorial)
1. Select Edit → Virtual Network Editor in the me...
Solve the problem of black screen when starting VMware virtual machine
# Adjust VMware hard disk boot priority Step 1: E...
How to automatically start RabbitMq software when centos starts
1. Create a new rabbitmq in the /etc/init.d direc...
Let's talk about what JavaScript's URL object is
Table of contents Overview Hash Properties Host p...
Thoughts and experience sharing on interactive design of reading lists for information products
A list is defined as a form of text or chart that...
JavaScript realizes the drag effect of modal box
Here is a case of modal box dragging. The functio...
js simple and crude publish and subscribe sample code
What is Publish/Subscribe? Let me give you an exa...
Detailed explanation of Vue components
<body> <div id="root"> <...
Installation and use of mysql on Ubuntu (general version)
Regardless of which version of Ubuntu, installing...
Using MySQL in Windows: Implementing Automatic Scheduled Backups
1. Write a backup script rem auther:www.yumi-info...
New settings for text and fonts in CSS3
Text Shadow text-shadow: horizontal offset vertic...
Solution to CSS anchor positioning being blocked by the top fixed navigation bar
Many websites have a navigation bar fixed at the ...
Collapsed table row element bug
Let's take an example: The code is very simple...
Usage of Linux userdel command
1. Command Introduction The userdel (user delete)...