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技术站