Express.js使用详解

Express.js 是一款基于 Node.js 平台的开源，极简，灵活的web应用开发框架。本文将详细介绍如何在 Node.js 中使用 Express.js。

安装和初始化项目

在使用 Express.js 前，需要在本地环境中安装 Node.js 和 npm。安装完毕后，可以使用以下命令全局安装 Express.js：

npm install -g express

全局安装完成后，在项目目录中初始化一个 Node.js 项目：

npm init

在操作过程中，可以根据自己需要的选项进行配置，最终会生成 package.json 文件。

基本用法

创建应用

在项目目录中创建一个名为 app.js 的 JavaScript 文件，在文件中引入 Express.js 并创建一个 Express 应用实例：

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

定义路由

可以通过 HTTP 请求方式来定义路由，例如：

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

// POST 请求
app.post('/', (req, res) => {
  res.send('Got a POST request')
})

// PUT 请求
app.put('/user', (req, res) => {
  res.send('Got a PUT request at /user')
})

// DELETE 请求
app.delete('/user', (req, res) => {
  res.send('Got a DELETE request at /user')
})

以上代码中，我们定义了四个 HTTP 请求路由，分别是 GET、POST、PUT 和 DELETE。其中 app.get()、app.post()、app.put() 和 app.delete() 为 Express.js 中定义 HTTP 请求路由的方法，第一个参数为路由路径，第二个参数为路由处理函数。

启动服务器

在路由定义完毕后，需要启动服务器：

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

以上代码中，app.listen() 方法启动服务器，第一个参数指定监听端口，第二个参数为一个回调函数。当服务器启动后，控制台会输出 "Example app listening on port 3000!"。

处理静态文件

使用 Express.js 可以处理静态文件，例如 CSS 文件、JavaScript 文件和图像等。可以使用内置的 express.static() 中间件来处理，例如：

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

以上代码中，express.static() 中间件可以设置根目录为 'public'，当使用静态资源时，只需在相应的 HTML 文件中引入静态资源即可，例如：

<!-- 引入 public 目录下的一个 css 文件 -->
<link rel="stylesheet" type="text/css" href="/css/style.css">

使用模板引擎

Express.js 可以与多种模板引擎配合使用。例如我们使用 ejs 模板引擎，可以使用以下命令安装：

npm install ejs --save

安装完毕后，在 app.js 文件中设置模板引擎：

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

以上代码中，我们设置了 ejs 作为模板引擎。

在 views 文件夹中创建一个名为 index.ejs 的文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

修改路由处理函数如下：

app.get('/', (req, res) => {
  res.render('index', { title: 'Express', message: 'Hello Express!' })
})

以上代码中，我们使用 res.render() 方法渲染模板文件，参数一为模板文件，参数二为包含在模板中需要的数据。在模板文件中，使用 <%= %> 输出变量数据。

示例说明

我们使用 Express.js 实现一个简单的注册和登录页面，并将添加的用户展示出来。具体代码如下：

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

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

const users = []

app.use(express.urlencoded({ extended: false }))
app.use(express.static('public'))

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

app.get('/register', (req, res) => {
  res.render('register', { title: 'Register' })
})

app.post('/register', (req, res) => {
  const { username, password } = req.body
  users.push({
    id: users.length + 1,
    username,
    password
  })
  res.redirect('/')
})

app.get('/login', (req, res) => {
  res.render('login', { title: 'Login' })
})

app.post('/login', (req, res) => {
  const { username, password } = req.body
  const user = users.find(u => u.username === username && u.password === password)
  if (user) {
    res.send(`Hello ${user.username}!`)
  } else {
    res.send('Invalid username or password!')
  }
})

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

在这个例子中，我们使用了 ejs 模板引擎来渲染页面，使用 express.urlencoded() 中间件来处理表单提交。在浏览器中访问 http://localhost:3000/，可以展示添加的用户。在注册页面中添加新用户信息后，在首页中可以展示出来，用户可以使用添加的信息进行登录。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Express.JS使用详解 - Python技术站

Express.JS使用详解