Home >Web Front-end >Front-end Q&A >nodejs login page jump page jump
nodejs login page jump page jump
- 王林Original
- 2023-05-25 12:38:41561browse
In Web development, user login is a very critical link. In Node.js, we can use some frameworks and libraries to jump to the login page. This article will introduce how to use Express.js to jump to the login page.
- Install Express.js
First, we need to install Express.js and enter the following command through the command line:
npm install express --save
This command will install Express .js into our project and save it in the package.json file.
- Create login page
Create a new ejs file in the project directory and name it login.ejs. This file will serve as our login page. In login.ejs, we can add some HTML form elements as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h1>欢迎登录</h1>
<form action="/login" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
</body>
</html>In the above code, we have created a basic HTML page and a form containing the username and password. When the user submits the form, the "/login" route will be triggered, which will handle the request submitted by the user.
- Create an Express application
Next, we need to create an Express application. Create a new file in the project directory, named app.js, with the following content:
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.render('login');
});
app.post('/login', (req, res) => {
// 处理用户提交的请求
});
app.listen(3000, () => {
console.log('程序已启动！');
});In the above code, we created an Express application and set up the view engine and public folder. path. app.get('/') means that when the user accesses the root path, the login.ejs page will be rendered. app.post('/login') means that when the user submits the form, the login request will be processed.
- Handling login requests
Now, we need to write the code to handle login requests. In the app.post('/login') route, we can get the username and password submitted by the user:
app.post('/login', (req, res) => {
const username = req.body.username;
const password = req.body.password;
// 处理用户名和密码
});Next, we can do some processing based on the username and password. If the verification is successful, we can redirect to other pages:
app.post('/login', (req, res) => {
const username = req.body.username;
const password = req.body.password;
if (username === 'admin' && password === '123456) {
res.redirect('/dashboard');
} else {
res.render('login', {message: '用户名或密码不正确'});
}
});In the above code, if the username and password verification is successful, it will redirect to the dashboard page, otherwise the login page will be re-rendered and an error message will be displayed. . If you want to redirect to other pages, you can use statements like res.redirect('/') or res.redirect('/dashboard').
- Create Dashboard page
Finally, we need to create a new ejs file, named dashboard.ejs, and render it to the user interface. You can add some HTML elements to the dashboard.ejs page, as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎访问Dashboard</title>
</head>
<body>
<h1>欢迎访问Dashboard</h1>
</body>
</html>Now, we have completed a Node.js login page jump function. When the user successfully logs in, he will be redirected to the dashboard page.
Summary
This article introduces how to use Express.js to implement the Node.js login page jump function. We created a basic login page and a route that handles login requests. When the user successfully logs in, he will be redirected to the dashboard page. Using Node.js and Express.js for web development can help us quickly build efficient web applications and also provide a pleasant user experience.
The above is the detailed content of nodejs login page jump page jump. For more information, please follow other related articles on the PHP Chinese website!