Home > Article > Web Front-end > How to implement multiple page jumps in nodejs
How to implement multiple page jumps in nodejs
- PHPzOriginal
- 2023-04-26 09:14:58976browse
In recent years, Node.js has become a powerful tool for front-end developers with its efficient performance, rich functions and powerful ecosystem. As a server-side running environment, Node.js can be used to implement complex web applications and is also an ideal choice for implementing multi-page jumps.
This article will explain in detail how to use Node.js to achieve multi-page jumps, including request forwarding, page rendering, routing management, etc.
1. Request forwarding
In the era of separation of front-end and back-end, we usually develop front-end code and back-end code separately to achieve the purpose of decoupling. In this case, the front-end code is usually stored in a separate folder, and the back-end code is spread across multiple files. This requires us to forward the front-end request to the back-end for processing.
Node.js provides powerful web application development capabilities through core modules such as http and fs. We only need to monitor HTTP requests in the back-end application of Node.js and forward the requests to the corresponding processing logic. Just hit it. In this way, requests can be forwarded internally between the front-end and the back-end, allowing the front-end code to call the back-end API to achieve the effect of multi-page jumps.
Let’s take a look at a simple example to forward front-end requests in Node.js:
const http = require('http');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 处理请求
if (req.url === '/login') {
// 获取参数
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
const { username, password } = JSON.parse(body);
// 处理登录逻辑
if (username === 'admin' && password === '123456') {
// 登录成功
res.end(JSON.stringify({ code: 200, message: '登录成功' }));
} else {
// 登录失败
res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
}
});
} else {
// 处理其他请求
res.end('Hello World!');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});
In this example, we create an HTTP server instance through the createServer method of the http module , and listen on port 3000. When processing the request, we determine whether the requested URL is /login. If so, the login logic is processed; otherwise, "Hello World!" is output.
2. Rendering pages
There are usually many pages in our web applications. In order to improve development efficiency, we usually use a template engine to render the pages. Node.js provides numerous template engines, such as ejs, jade, handlebars, etc. Let's take ejs as an example to introduce how to render the page.
ejs is a simple template engine that can quickly generate HTML code. Using ejs, we only need to write HTML pages and data sources to quickly render the page.
Let’s first take a look at the following code, which defines a simple HTML page and uses the template syntax of ejs:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <p><%= content %></p> </body> </html>
In this page, we use the template syntax of ejs . For example, use <%= %> to output variables in the data source so that the page can be rendered.
Let's look at a complete example below, using ejs to render the page:
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 渲染页面
if (req.url === '/') {
fs.readFile('./template/index.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '首页', content: '欢迎访问首页' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else if (req.url === '/about') {
fs.readFile('./template/about.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '关于我们', content: '我们是一家IT公司' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else {
res.end('页面不存在');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});
In this example, we read two ejs template files through the fs module, and then use ejs. The render method renders the content from the data source to the page. Finally, we output the rendered HTML code to the browser.
3. Routing Management
In actual development, we need to manage routing for multiple pages so that we can quickly find the corresponding page. Node.js provides web frameworks such as express, which can help us implement routing management more conveniently and quickly.
Let’s take the express framework as an example to see how to implement routing management.
First, we need to install the express module:
npm install express --save
Then, let’s see how to use express to implement route management:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.get('/about', (req, res) => {
res.send('About Us!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
In this example, we first use # The ##require() function introduces the express module, and then calls the express() function to create a new express instance.
app.get() method to define a corresponding processing method for each route. For example, when the user requests '/', we will return "Hello World!" to the browser. When the user requests '/about', we will return "About Us!" to the browser.
app.listen() method to specify the port the service wants to listen on. In this example, we set the listening port number to 3000.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button id="loginBtn">登录</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#loginBtn').click(function() {
// 获取用户名和密码
const username = $('input[name=username]').val();
const password = $('input[name=password]').val();
// 发送请求
$.ajax({
type: 'POST',
url: 'http://localhost:3000/login',
data: JSON.stringify({ username, password }),
contentType: 'application/json',
success: function(res) {
if (res.code === 200) {
// 登录成功，跳转到首页
window.location.href = 'http://localhost:3000';
} else {
alert(res.message);
}
},
error: function() {
alert('请求出错');
}
});
});
});
</script>
</html>In Node.js, we created an HTTP server instance and listened to the 3000 port. When a request is detected, we first determine the type of request. For GET requests, we use the ejs template engine to render the page; for POST requests, we process the login logic and return the response results in JSON format. For example, when the user enters 'admin' and '123456', we will return { code: 200, message: 'Login successful' } in JSON format. When the user enters another account name or password, we will return { code: 400, message: 'Incorrect user name or password' } in JSON format. The following is the main implementation process of the back-end Node.js code:
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
http.createServer((req, res) => {
// 设置跨域
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
// 渲染页面
if (req.url === '/') {
fs.readFile('./template/index.ejs', (err, data) => {
if (err) {
console.log(err);
res.end('页面不存在');
} else {
const template = data.toString();
const content = { title: '首页', content: '欢迎访问首页' };
const html = ejs.render(template, content);
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
}
});
} else if (req.url === '/login') {
// 获取参数
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
const { username, password } = JSON.parse(body);
// 处理登录逻辑
if (username === 'admin' && password === '123456') {
// 登录成功
res.end(JSON.stringify({ code: 200, message: '登录成功' }));
} else {
// 登录失败
res.end(JSON.stringify({ code: 400, message: '用户名或密码错误' }));
}
});
} else {
res.end('页面不存在');
}
}).listen(3000, () => {
console.log('Server is running on port 3000');
});
通过以上代码，我们可以在前后端相分离的情况下，使用Node.js来实现多页面跳转的功能。本文只是对于nodejs多页面跳转的简单介绍，还有很多要学习和了解的地方，相信有了这篇文章的帮助，你在学习和实践中也会有所收获。
The above is the detailed content of How to implement multiple page jumps in nodejs. For more information, please follow other related articles on the PHP Chinese website!