How to implement multiple page jumps in Node.js-Front-end Q&A-php.cn

How to implement multiple page jumps in Node.js

PHPz

Release： 2023-04-06 09:37:38

Original

1015 people have browsed it

With the rapid development of front-end development, modern web applications are no longer single-page applications (SPA). Instead, they become more complex, including many pages and components. In order to support such web applications, we need a flexible and powerful web framework that can support navigation and responsiveness of multiple pages. Node.js provides many excellent frameworks for this, such as Express.js, Koa.js, etc. In this article, we will learn how to use the Node.js framework to implement multi-page jump functionality.

Create a new Node.js project

First, we need to create a new Node.js project. If you already have an existing project, you can skip this step. In the command line, enter the following command:

mkdir myproject
cd myproject
npm init

Copy after login

After running this command, a series of prompts will appear, asking you to enter the project name, version number, description and other information. Once completed, we will get a package.json file, which is a file that stores project information. In the package.json file we will see all the dependencies we installed.

Install Express.js

As mentioned earlier, Express.js is a commonly used Node.js web application framework that provides a fast and flexible way to Create web applications. We will use Express.js to implement the multi-page jump function. Installing Express.js is simple, just type the following command:

npm install express --save

Copy after login

This command will install Express.js and add it to our project dependencies.

Create a page

Now we need to create a simple page to test our multi-page jump function. In the project root directory, create a file called "index.html" and add the following content:

<!DOCTYPE html>
<html>
<head>
    <title>Express.js Multiple Pages</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to my Express.js app.</p>
</body>
</html>

Copy after login

This is a very simple page containing only a title and some text. We will use this page in the next steps.

Create an Express.js application

In the project root directory, create a file called "app.js" where we will write our s application.

First, we need to import the required Express.js modules:

const express = require('express')
const app = express()

Copy after login

Next, we need to specify our view engine. View engine will help us render HTML pages on the server side. We will use EJS (Embedded JavaScript) as our view engine. Please note that before using EJS we need to install it. EJS can be installed using the following command:

npm install ejs --save

Copy after login

Once completed, add the following code at the top of app.js:

app.set('view engine', 'ejs')

Copy after login

Now we need to tell the Express.js application how to handle static files, such as styles tables and scripts. To do this, we will use Express.js’ built-in middleware. Add the following code at the top of the app.js file:

app.use(express.static('public'))

Copy after login

This code will tell Express.js to treat the public folder as a static resource folder. All files stored in it will be accessible via HTTP server.

Now we need to create our first route. Routing will determine what will happen when we visit a specific URL. We will create a route that renders our index.html page on the server side when a user visits the root URL.

Add the following code in app.js:

app.get('/', (req, res) => {
  res.render('index')
})

Copy after login

This code will tell Express.js to create a GET route that renders the name "index" on the server side when the user accesses the root URL. view.

Add More Pages

Now we have completed our first page and first route. Next, we'll add more pages and routes.

Create a file called "about.html" that will contain information about our application. Add the following:

<!DOCTYPE html>
<html>
<head>
    <title>About</title>
</head>
<body>
    <h1>About Us</h1>
    <p>We are a team of Node.js developers.</p>
</body>
</html>

Copy after login

Then, add the following code in app.js:

app.get('/about', (req, res) => {
  res.render('about')
})

Copy after login

This code will tell Express.js to create a GET route when the user visits the "/about" URL , rendering a view named "about" on the server side.

We can also add more pages, just create an HTML file for each page and create a route for each page.

Links to other pages

Now that we have created multiple pages and routes, we need to add links so that users can navigate to other pages. In index.html, add the following code before the text:

<a href="/about">About Us</a>

Copy after login

This link will take the user to the About Us page. Continue adding additional pages.

Now we have implemented the multi-page jump function. When the user clicks the link, they will navigate to another page and the application will render the HTML page server-side.

Summary

In this article, we learned how to use the Node.js framework (especially Express.js) to implement the multi-page jump function. We created multiple pages and routes and provided links for user navigation. This is a very basic implementation, but it can help you quickly build multi-page applications. Try this code, and others, to help you better understand how to develop web applications using the Node.js framework.

The above is the detailed content of How to implement multiple page jumps in Node.js. For more information, please follow other related articles on the PHP Chinese website!