首页 > web前端 > js教程 > Express.js 完整指南

Express.js 完整指南

PHPz
发布: 2024-08-16 06:27:32
原创
666 人浏览过

Express.js Full Guide

Express.js 简介

1.安装和设置

Express.js 是一个最小且灵活的 Node.js Web 应用程序框架,为 Web 和移动应用程序提供了一组强大的功能。它简化了服务器端应用程序和 API 的构建、HTTP 请求的处理以及中间件的管理。

安装和设置 Express.js 的步骤:

  1. 安装 Node.js:

    • Express.js 需要 Node.js。如果尚未安装,请从官方网站下载并安装 Node.js。
  2. 创建一个新的项目目录:

   mkdir my-express-app
   cd my-express-app
登录后复制
  1. 初始化一个新的 Node.js 项目:
   npm init -y
登录后复制

此命令创建一个具有默认设置的 package.json 文件。

  1. 安装 Express.js:
   npm install express
登录后复制

此命令安装 Express.js 并将其添加为 package.json 文件中的依赖项。

  1. 安装nodemon:
    • nodemon 是一个在检测到文件更改时自动重新启动应用程序的工具。
   npm install --save-dev nodemon
登录后复制
  1. 将nodemon添加到package.json脚本: 打开 package.json 并修改脚本部分以包括:
   "scripts": {
     "start": "nodemon app.js"
   }
登录后复制
  1. 设置 JavaScript 导入语法:

    • Node.js 默认不支持直接在文件中使用 ES6 模块语法(导入/导出)。您需要通过在 package.json 中添加 "type": "module" 来启用此功能。
    • 修改 package.json 以包含:
     "type": "module"
    
    登录后复制
  2. 创建入口点文件:
    在项目目录中创建一个名为 app.js(或 index.js)的文件。此文件将包含您的 Express 应用程序代码。

2.创建基本的 Express 应用程序

要创建基本的 Express 应用程序,请按照以下步骤操作:

  1. 在app.js中初始化Express:
   import express from 'express';
   const app = express();
   const port = 3000;

   app.get('/', (req, res) => {
     res.send('Hello, World!');
   });

   app.listen(port, () => {
     console.log(`Server is running on http://localhost:${port}`);
   });
登录后复制
  • 从“快递”进口快递;使用 ES6 导入语法导入 Express 模块。
  • express() 初始化 Express 应用程序。
  • app.get() 定义了一个针对根 URL (/) 的 GET 请求的路由处理程序。
  • app.listen() 启动服务器并监听指定端口。
  1. 运行应用程序:

    • 使用 npm start 通过 nodemon 运行应用程序:
     npm start
    
    登录后复制
  • 打开网络浏览器并导航至 http://localhost:3000。您应该看到“你好,世界!”显示。

通过这些步骤,您已经使用 ES6 导入语法设置了一个基本的 Express.js 应用程序,并将 Nodemon 配置为在开发过程中自动重新启动服务器。此设置有助于简化开发并有效处理代码更改。

Express.js 中的路由

Express.js 中的路由是定义应用程序如何响应特定端点的客户端请求的过程。可以为不同的 HTTP 方法(GET、POST、PUT、DELETE 等)定义路由,并可以组织处理复杂的 URL 结构。

基本 GET 路由

GET 路由用于从服务器检索数据。它通常用于根据查询提供静态内容或数据。

示例:

// Basic GET route
app.get('/home', (req, res) => {
  res.send('Welcome to the Home Page!');
});
登录后复制
基本邮寄路线

POST 路由用于将数据发送到服务器。它通常用于提交表单或创建新资源。

示例:

// Basic POST route
app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});
登录后复制
基本 PUT 路线

PUT 路由用于更新服务器上的现有数据。它通常用于修改资源或更新记录。

示例:

// Basic PUT route
app.put('/update', (req, res) => {
  res.send('Data updated!');
});
登录后复制
基本删除路线

DELETE 路由用于从服务器中删除数据。用于删除资源或记录。

示例:

// Basic DELETE route
app.delete('/delete', (req, res) => {
  res.send('Data deleted!');
});
登录后复制

Express.js 中的 app.use

Express.js 中的 app.use 方法用于注册处理请求的中间件函数。中间件函数按照定义的顺序执行,app.use 可用于全局应用中间件或特定路径。

1.全局应用中间件

当在没有路径的情况下使用 app.use 时,中间件功能将应用于所有传入请求。这对于设置全局功能(例如日志记录、解析请求正文或处理会话)非常有用。

示例:

// Middleware function applied globally
app.use((req, res, next) => {
  console.log(`Request URL: ${req.url}`);
  next(); // Pass control to the next handler
});

app.get('/', (req, res) => {
  res.send('Home Page');
});
登录后复制
  • Global Middleware: The middleware function logs the request URL for every request received by the server.

2. Applying Middleware to Specific Paths

You can use app.use to apply middleware only to requests that match a specific path. This allows you to target middleware to certain routes.

Example:

// Middleware function applied to /admin paths
app.use('/admin', (req, res, next) => {
  console.log('Admin route accessed');
  next(); // Pass control to the next handler
});

app.get('/admin/dashboard', (req, res) => {
  res.send('Admin Dashboard');
});

app.get('/user/profile', (req, res) => {
  res.send('User Profile');
});
登录后复制
  • Path-Specific Middleware: The middleware logs a message only for requests to paths starting with /admin.

3. Using app.use with Multiple Middleware Functions

You can chain multiple middleware functions together with app.use, allowing for sequential processing of requests.

Example:

// First middleware function
const firstMiddleware = (req, res, next) => {
  console.log('First Middleware');
  next(); // Proceed to the next middleware
};

// Second middleware function
const secondMiddleware = (req, res, next) => {
  console.log('Second Middleware');
  next(); // Proceed to the next handler
};

// Apply multiple middleware functions
app.use(firstMiddleware, secondMiddleware);

app.get('/', (req, res) => {
  res.send('Home Page');
});
登录后复制
  • Chaining Middleware: firstMiddleware and secondMiddleware are executed sequentially for all requests.

The app.use method in Express.js provides flexibility for applying middleware functions globally or to specific routes, and for processing requests in a modular fashion.

Callback Functions in Express.js

In Express.js, callback functions are crucial for handling HTTP requests. They are used in middleware and route handlers to process requests and manage responses.

1. Parameters in Callback Functions

Callback functions in Express.js receive three parameters:

  • req (Request): The request object containing details about the incoming request.
  • res (Response): The response object used to send a response to the client.
  • next (Next): A function to pass control to the next middleware or route handler.

Example:

function callback(req, res, next) {
  // Your code here
  next(); // Pass control to the next middleware or route handler
}
登录后复制

2. Middleware Callbacks

Middleware functions process requests before they reach route handlers. They utilize the req, res, and next parameters.

Example:

const logMiddleware = (req, res, next) => {
  console.log(`Request URL: ${req.url}`);
  next(); // Pass control to the next handler
};

app.use(logMiddleware); // Apply middleware globally

app.get('/', (req, res) => {
  res.send('Home Page');
});
登录后复制

3. Route Handler Callbacks

Route handlers define responses for specific routes, using callback parameters to manage requests and responses.

Example:

app.get('/example', (req, res) => {
  res.send('Hello World!');
});
登录后复制

4. Chaining Middleware Functions

Multiple middleware functions can be chained together to handle requests sequentially.

Example:

const authenticate = (req, res, next) => {
  console.log('Authentication middleware');
  next(); // Proceed to the next middleware
};

const authorize = (req, res, next) => {
  console.log('Authorization middleware');
  next(); // Proceed to the route handler
};

app.get('/profile', authenticate, authorize, (req, res) => {
  res.send('User Profile');
});
登录后复制

Route Parameters in Express.js

Route parameters are dynamic segments of a URL used to capture values from the URL path. They allow you to define routes that can handle variable input, making your routes more flexible.

1. Basic Route Parameters

Route parameters are defined in the route path by using a colon : followed by the parameter name. You can access these parameters in your route handler through the req.params object.

Example:

// Route with a route parameter
app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`User ID: ${userId}`);
});
登录后复制
  • Route Parameter: The :id in the route path is a parameter that captures the value from the URL, accessible via req.params.id.

2. Multiple Route Parameters

You can define multiple route parameters in a single route path, allowing for more complex URL structures.

Example:

// Route with multiple route parameters
app.get('/post/:year/:month/:day', (req, res) => {
  const { year, month, day } = req.params;
  res.send(`Post date: ${year}-${month}-${day}`);
});
登录后复制
  • Multiple Parameters: The :year, :month, and :day parameters capture parts of the date from the URL, accessible via req.params.year, req.params.month, and req.params.day.

3. Optional Route Parameters

Route parameters can also be optional. Use a question mark ? to indicate optional segments in the route path.

Example:

// Route with an optional route parameter
app.get('/product/:id?', (req, res) => {
  const productId = req.params.id || 'not specified';
  res.send(`Product ID: ${productId}`);
});
登录后复制
  • Optional Parameter: The :id? parameter is optional, meaning the route can be accessed with or without this parameter.

Route parameters provide a way to build dynamic and flexible routes in Express.js, allowing you to handle various input values and create more sophisticated URL patterns.

req Object

In Express.js, the req object represents the incoming HTTP request from the client. It includes details about the request such as URL, headers, and body. Properly understanding the req object is crucial for handling requests effectively.

req.body

The req.body property contains data sent in the request body, typically used in POST and PUT requests. To access req.body, you need to use middleware for parsing the request data.

Handling JSON Data:

app.use(express.json()); // Middleware to parse JSON bodies

app.post('/submit', (req, res) => {
  const { name, age } = req.body;
  res.send(`Received data - Name: ${name}, Age: ${age}`);
});
登录后复制
  • Explanation:
    • express.json(): Middleware to parse JSON data in request bodies.
    • req.body: Contains parsed JSON data.

Handling URL-encoded Data:

app.use(express.urlencoded({ extended: true })); // Middleware to parse URL-encoded bodies

app.post('/submit', (req, res) => {
  const { name, age } = req.body;
  res.send(`Received data - Name: ${name}, Age: ${age}`);
});
登录后复制
  • Explanation:
    • express.urlencoded({ extended: true }): Middleware to parse URL-encoded data from forms.
    • req.body: Contains parsed URL-encoded data.

req.cookies

The req.cookies property contains cookies sent by the client. To use req.cookies, you need the cookie-parser middleware to parse cookies in requests.

Example:

import cookieParser from 'cookie-parser';
app.use(cookieParser()); // Middleware to parse cookies

app.get('/check-cookies', (req, res) => {
  const user = req.cookies.user; // Access a cookie named 'user'
  res.send(`Cookie value - User: ${user}`);
});
登录后复制
  • Explanation:
    • cookieParser(): Middleware to parse cookies from request headers.
    • req.cookies: Contains cookies sent by the client.

req.method

The req.method property contains the HTTP method of the incoming request. This can be useful for handling different types of requests, such as GET, POST, PUT, DELETE, etc.

Example:

app.use((req, res, next) => {
  console.log(`Request Method: ${req.method}`); // Logs the HTTP method of the request
  next(); // Pass control to the next handler
});

app.get('/example', (req, res) => {
  res.send(`This is a GET request`);
});

app.post('/example', (req, res) => {
  res.send(`This is a POST request`);
});
登录后复制
  • Explanation:
    • req.method: Contains the HTTP method used for the request (e.g., GET, POST).

req.params

The req.params property contains route parameters specified in the URL path. Route parameters are used to capture values from the URL and are typically defined in routes with a colon syntax (e.g., /users/:id).

Example:

app.get('/users/:id', (req, res) => {
  const userId = req.params.id; // Access the route parameter 'id'
  res.send(`User ID: ${userId}`);
});
登录后复制
  • Explanation:
    • req.params: Contains key-value pairs of route parameters, where the key is the parameter name defined in the route, and the value is the actual value from the URL.

req.query

The req.query property contains query string parameters from the URL. These are typically used to pass data in the URL for GET requests.

Example:

app.get('/search', (req, res) => {
  const query = req.query.q; // Access the query parameter 'q'
  res.send(`Search query: ${query}`);
});
登录后复制
  • Explanation:
    • req.query: Contains key-value pairs of query string parameters. For example, for a URL like /search?q=example, req.query.q would be 'example'.

req.get()

The req.get() method is used to retrieve HTTP headers from the incoming request. It allows you to access specific headers by name. This is useful for extracting metadata about the request or for handling custom headers.

Example:

app.get('/headers', (req, res) => {
  const userAgent = req.get('User-Agent'); // Access the 'User-Agent' header
  const host = req.get('Host'); // Access the 'Host' header
  const acceptLanguage = req.get('Accept-Language'); // Access the 'Accept-Language' header
  const contentType = req.get('Content-Type'); // Access the 'Content-Type' header

  res.send(`
    User-Agent: ${userAgent}<br>
    Host: ${host}<br>
    Accept-Language: ${acceptLanguage}<br>
    Content-Type: ${contentType}
  `);
});
登录后复制
  • Explanation:
    • req.get('User-Agent'): Retrieves the User-Agent header, which provides information about the client's browser or application.
    • req.get('Host'): Retrieves the Host header, which indicates the domain name of the server and port number.
    • req.get('Accept-Language'): Retrieves the Accept-Language header, which indicates the preferred language(s) for the response.
    • req.get('Content-Type'): Retrieves the Content-Type header, which specifies the media type of the request body.

res Object

In Express.js, the res object represents the HTTP response that is sent back to the client. It is used to set response headers, status codes, and to send data or files back to the client. Understanding the res object is essential for controlling the response sent from the server.

res.append()

The res.append() method is used to add additional headers to the response. It is useful when you need to modify or add headers dynamically before sending the response.

Example:

app.get('/set-headers', (req, res) => {
  res.append('Custom-Header', 'HeaderValue'); // Add a custom header
  res.append('Another-Header', 'AnotherValue'); // Add another header
  res.send('Headers have been set!');
});
登录后复制
  • Explanation:
    • res.append(name, value): Adds a header with the specified name and value to the response. If the header already exists, the new value is appended to the existing values.

res.cookie()

The res.cookie() method is used to set cookies on the client's browser. It allows you to send cookies with specific options such as expiration, path, and secure flags.

Example:

app.get('/set-cookie', (req, res) => {
  // Set a cookie named 'username' with a value 'JohnDoe'
  res.cookie('username', 'JohnDoe', {
    maxAge: 24 * 60 * 60 * 1000, // Cookie expires after 1 day
    httpOnly: true,              // Cookie is not accessible via JavaScript
    secure: false,               // Cookie is sent over HTTP (not HTTPS)
    path: '/'                    // Cookie is valid for the entire domain
  });
  res.send('Cookie has been set');
});
登录后复制
  • Explanation:
    • res.cookie(name, value, [options]): Sets a cookie with the specified name and value. The options parameter can include:
    • maxAge: Expiration time of the cookie in milliseconds.
    • httpOnly: If true, the cookie is not accessible via JavaScript (client-side).
    • secure: If true, the cookie is sent only over HTTPS connections.
    • path: The path for which the cookie is valid.

res.end()

The res.end() method is used to end the response process and send the response to the client. It is often used to send the final output or to close the response stream when no additional data needs to be sent.

Example:

app.get('/finish', (req, res) => {
  res.end('Response has been sent and the connection is closed.');
});
登录后复制
  • Explanation:
    • res.end([data], [encoding]): Ends the response process. If data is provided, it is sent as the response body. The encoding parameter specifies the character encoding for the data. If no data is provided, an empty response is sent.

res.json()

The res.json() method is used to send a JSON response to the client. It automatically sets the Content-Type header to application/json and converts the provided data into a JSON string.

Example:

app.get('/data', (req, res) => {
  const data = {
    name: 'John Doe',
    age: 30,
    city: 'New York'
  };
  res.json(data);
});
登录后复制
  • Explanation:
    • res.json([body]): Sends a JSON response. The body parameter is an object or array that will be converted to a JSON string and sent as the response body. The Content-Type header is set to application/json automatically.

res.location()

The res.location() method sets the Location header of the response. It is commonly used to specify the URL to which a client should be redirected. However, this method does not send a response to the client by itself; it only sets the header.

Example:

app.get('/set-location', (req, res) => {
  res.location('/new-url');
  res.send('Location header has been set');
});
登录后复制
  • Explanation:
    • res.location(url): Sets the Location header to the specified URL. This is often used in conjunction with res.redirect to indicate where the client should be redirected.

res.redirect()

The res.redirect() method sends a redirect response to the client. It sets the Location header and sends a status code (default is 302) to redirect the client to a different URL.

Example:

app.get('/redirect', (req, res) => {
  res.redirect('/new-url');
});
登录后复制
  • Explanation:
    • res.redirect([status,] url): Redirects the client to the specified URL. The optional status parameter allows you to set a custom HTTP status code (e.g., 301 for permanent redirect, 302 for temporary redirect). If no status is provided, 302 is used by default.

res.send()

The res.send() method is used to send a response to the client. It can send a variety of response types, including strings, buffers, objects, or arrays. The method automatically sets the Content-Type header based on the type of the response.

Example:

app.get('/text', (req, res) => {
  res.send('This is a plain text response.');
});

app.get('/json', (req, res) => {
  const data = { message: 'This is a JSON response.' };
  res.send(data);
});

app.get('/buffer', (req, res) => {
  const buffer = Buffer.from('This is a buffer response.');
  res.send(buffer);
});
登录后复制
  • Explanation:
    • res.send([body]): Sends the response to the client. The body parameter can be a string, buffer, object, or array. If an object or array is passed, it will be automatically converted to JSON. The Content-Type header is set based on the type of the body parameter.

res.sendFile()

The res.sendFile() method is used to send a file as the response to the client. It sets the appropriate Content-Type header based on the file type and streams the file to the client.

Example:

import path from 'path';

app.get('/file', (req, res) => {
  const filePath = path.join(__dirname, 'public', 'example.txt');
  res.sendFile(filePath);
});
登录后复制
  • Explanation:
    • res.sendFile(path[, options], [callback]): Sends a file as the response. The path parameter is the absolute path to the file you want to send. The optional options parameter can be used to set additional options such as the Content-Type header or to handle errors. The optional callback parameter is a function that is called when the file has been sent.

res.sendStatus()

The res.sendStatus() method sets the HTTP status code and sends the corresponding status message as the response body. It is a shorthand for setting the status code and sending a response in one step.

Example:

app.get('/status', (req, res) => {
  res.sendStatus(404); // Sends a 404 Not Found status with the message 'Not Found'
});
登录后复制
  • Explanation:
    • res.sendStatus(statusCode): Sets the HTTP status code and sends a response with the status message corresponding to the code. For example, 404 will send 'Not Found' as the response body.

res.set()

The res.set() method sets HTTP headers for the response. It can be used to specify various headers, including custom headers.

Example:

app.get('/headers', (req, res) => {
  res.set('X-Custom-Header', 'Value');
  res.set({
    'Content-Type': 'application/json',
    'X-Another-Header': 'AnotherValue'
  });
  res.send('Headers set');
});
登录后复制
  • Explanation:
    • res.set(name, value): Sets a single HTTP header. name is the header name, and value is the header value.
    • res.set(headers): Sets multiple headers at once by passing an object where keys are header names and values are header values.

res.status()

The res.status() method sets the HTTP status code for the response. This method is used to define the status code before sending the response.

Example:

app.get('/error', (req, res) => {
  res.status(500).send('Internal Server Error'); // Sets status code to 500 and sends the message
});
登录后复制
  • Explanation:
    • res.status(statusCode): Sets the HTTP status code for the response. The status code can then be followed by other methods (like res.send, res.json, etc.) to send the response body.

以上是Express.js 完整指南的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板