Node.js Web应用框架Express入门指南

Express是基于Node.js开发的Web应用框架，它提供了一组API来帮助开发者快速地创建Web应用程序。本指南将介绍如何入门使用Express，包括安装、配置、路由、模板引擎等方面的内容。

安装Express

首先需要安装Node.js和npm。安装完成后，可打开终端窗口，输入以下命令安装Express：

npm install express

配置Express应用

创建一个新的Express应用，可以在终端输入以下命令：

express myapp
cd myapp
npm install

这将创建一个名为myapp的Express应用程序。接下来，可以使用以下命令启动应用程序：

npm start

这将在默认端口3000上启动应用程序。在浏览器中打开http://localhost:3000，即可访问应用程序的主页。

路由

路由是处理HTTP请求的机制。Express提供了一组API来定义路由。例如，以下代码将处理根路径的请求，并返回Hello World：

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

app.get('/', function(req, res) {
  res.send('Hello World')
})

app.listen(3000)

在浏览器中访问http://localhost:3000，即可查看响应内容。

除了处理GET请求，还可以处理其他HTTP方法的请求，如POST、PUT、DELETE等。以下代码将处理POST请求：

app.post('/', function(req, res) {
  res.send('Hello World')
})

模板引擎

模板引擎是将动态数据呈现到Web页面上的机制。Express支持多种模板引擎，如EJS、Jade等。以下代码使用EJS模板引擎将动态数据呈现到页面上：

先安装ejs

npm install ejs

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

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

app.get('/', function(req, res) {
  res.render('index', {name: 'Express'})
})

app.listen(3000)

在views文件夹下新建一个index.ejs文件，其中可以使用<%= %>语法来插入动态数据。

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
  </head>
  <body>
    <h1>Hello <%= name %>!</h1>
  </body>
</html>

在浏览器中访问http://localhost:3000，即可看到响应内容为Hello Express。

示例1

以下代码实现了一个简单的Express应用，它处理了根路径和/about路径的请求，并返回不同的响应内容。

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

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

app.get('/', function(req, res) {
  res.send('Welcome to my homepage!')
})

app.get('/about', function(req, res) {
  let people = ['Alice', 'Bob', 'Charlie']
  res.render('about', {people: people})
})

app.listen(3000)

在views文件夹下新建一个about.ejs文件，其中可以使用<%= %>语法来插入动态数据。

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
  </head>
  <body>
    <h1>About</h1>
    <ul>
      <% people.forEach(function(person) { %>
        <li><%= person %></li>
      <% }) %>
    </ul>
  </body>
</html>

在浏览器中访问http://localhost:3000，即可看到不同的响应内容。

示例2

以下代码实现了一个简单的Express应用，它处理了根路径的请求，并返回一个表单。当表单被提交后，将显示提交的数据。

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

app.set('view engine', 'ejs')
app.use(express.urlencoded({extended: false}))

app.get('/', function(req, res) {
  res.render('form')
})

app.post('/', function(req, res) {
  let name = req.body.name
  let email = req.body.email
  res.send(`Name: ${name}, Email: ${email}`)
})

app.listen(3000)

在views文件夹下新建一个form.ejs文件，其中包含了表单内容和提交按钮。

<!DOCTYPE html>
<html>
  <head>
    <title>Form</title>
  </head>
  <body>
    <h1>Form</h1>
    <form action="/" method="POST">
      <div>
        <label>Name:</label>
        <input type="text" name="name" />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

在浏览器中访问http://localhost:3000，即可看到表单。填写表单后，点击Submit按钮，即可看到提交的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js Web应用框架Express入门指南 - Python技术站