基于Node.js-http模块的Express框架

已于 2022-12-19 19:19:53 修改
阅读量530 收藏
点赞数
分类专栏： 前端 文章标签： node.js http express
于 2022-12-11 12:15:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NOfighting/article/details/128273433
版权

初识Express

Express简介

官方给出的概念: Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架

通俗的理解: Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的

Express的本质:就是一个npm 上的第三方包，提供了快速创建Web 服务器的便捷方法

Express 的中文官网

Express 能做什么

对于前端程序员来说，最常见的两种服务器，分别是:

  • Web 网站服务器:专门对外提供 Web 网页资源的服务器
  • API 接口服务器:专门对外提供API 接口的服务器

使用Express，我们可以方便、快速的创建 Web 网站的服务器或API 接口的服务器

Express 基本使用

Express 安装

  1. 初始化根目录 npm init -y
  2. 安装express npm i express@4.17.1

创建基本的服务器

app.listen(端口号, 启动成功后的回调), 启动服务器

// 导入express
const express = require('express')

// 创建web服务器
const app = express()

// 调用app.listen(端口号, 启动成功后的回调), 启动服务器
app.listen(8099, function () {
    console.log('express server running at http://127.0.0.1:8099')
})

监听 get 请求

  1. 参数1: 客户端请的 URL 地址
  2. 参数2: 请求对应的处理函数
    • req: 请求对象(包含了与请求相关的属性与方法)
    • resp: 响应对象(包含了与响应相关的属性与方法)
app.get('请求URL', function(req, resp) { /*处理函数*/ })

监听 post 请求(和 get 请求类似)

把内容响应给客户端

通过 resp.send() 方法，法处理好的内容发送给客户端：

app.get('/user', (req, resp) => {
    
    //向客户端发送json对象
    resp.send({name: 'xxx', age: 19})
})

app.post('/login', (req, resp) => {
    
    //向客户端发送文本内容
    resp.send('请求成功！')
})

获取 url 中携带的请求参数

通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数：

req.query 默认是一个空对象

客户端使用 ?name=zs&age=20 这种查询字符串形式，发送到服务器的参数

可以通过 req.query 对象访问到，例如:

req.query.name, req.query.age

app.get('/', (req,resp) => {
    console.log(req.query)
    resp.send('请求成功')
})

获取 url 中的动态参数

通过 req.params 对象，可以访问到url中通过 :匹配到的动态参数：

req.params 默认为一个空对象，里面存放着通过:动态匹配到的参数值

// URL 地址中，可以通过:参数名 的形式，匹配动态参数值
app.get('/user/:id', (req, resp) => {
    console.log(req.params)
    resp.send('请求成功')
})

托管静态资源

express 提供了一个非常好用的函数，叫做 express.static(资源路径)

通过它，我们可以非常方便地创建一个静态资源服务器

例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了

//调用express.static()方法，快速对外提供静态资源
app.use(express.static('../../public'))

注意：
Express在指定的静态目录中查找文件，并对外提供资源的访问路径

因此，存放静态文件的目录名不会出现在 URL 中。

托管多个静态资源文件夹，就调用多个express.static(资源路径)
查找资源时，会根据文件夹的调用顺序，顺序查找

挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式:

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

现在，你就可以通过带有 /public 前缀地址来访问 public 目录中的文件了

安装 nodemon

在编写调试 Node.s 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉

然后再重新启动，非常繁琐现在，我们可以使用 nodemon (https://www.npmis.com/package/nodemon) 这个具

它能够监听项目文件的变动，当代码被修改后，nodemon 会自动帮我们重启项目，极大方便了开发和调试

安装：

npm i nodemon -g

使用：

//之前：node app.js
//现在：
nodemon app.js

Express 路由

路由的简单介绍和安装

一个路由分为三部分：请求方式、请求路径、请求的回调函数
app.method('路径', function() {......})
简单举例：

app.get('/user', (req, resp) => {
    
    //向客户端发送json对象
    resp.send({name: 'xxx', age: 19})
})

app.post('/login', (req, resp) => {
    
    //向客户端发送文本内容
    resp.send('登录请求成功！')
})

路由的匹配过程

每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。

在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的 URL 同时匹配成功，则 Express 会将这次请求，转交给对应的function函数进行处理

路由匹配的注意点:

  1. 按照定义的先后顺序进行匹配
  2. 请求类型和请求的 URL 同时匹配成功，才会调用对应的处理函数

路由的使用

创建路由模块
//这是路由模块
let express = require('express')  //导入express
let user = express.Router()  //创建路由对象

user.get('/user', (req, resp) => {
    resp.send('user')
})

user.get('/login', (req, resp) => {
    resp.send({username: 'jsl', password: '123'})
})

module.exports = user
注册路由模块

app.use() 函数的作用，就是用来注册全局中间件

//导入express
const express = require('express')
//创建APP对象
const app = express()
//导入user路由模块
const userRouter = require('./router/user')
//app.use()函数的作用，就是用来注册全局中间件
//使用user路由模块
app.use(userRouter)

app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})
为路由模块添加前缀

类似于托管静态资源时，为静态资源统一挂载访问前缀一样，路由模块添加前缀的方式也非常简单

const userRouter = require('./router/user')

app.use('/user', userRouter)

Express 中间件

中间件的概念

中间件的调用流程

当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理
在这里插入图片描述

Express 中间件的格式

Express 的中间件，本质上就是一个 function 处理函数，Express 中间件的格式如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWTTfcwU-1670731370283)(img_1.png)]

注意:中间件函数的形参列表中，必须包含 next 参数。而路由处理函数中只包含 req 和res

中间件初体验

定义一个中间件函数

可以通过如下的方式，定义一个最简单的中间件函数

//常量mw所指向的，就是一个中间件
const mw = function (req, resp, next) {
    console.log('这是最简单的一个中间件')
    //注意：中间件业务逻辑处理完毕后，必须调用next()函数
    //表示把流转关系转交给下一个中间件或路由
    next()
}
全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件

通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件，示例代码如下:

//常量mw所指向的，就是一个中间件
const mw = function (req, resp, next) {
    console.log('这是最简单的一个中间件')
    //注意：中间件业务逻辑处理完毕后，必须调用next()函数
    //表示把流转关系转交给下一个中间件或路由
    next()
}

// 将 mw 注册为全局生效的中间件
app.use(mw)

'......'
中间件的作用

多个中间件之间，共享同一份 req 和 res。基于这样的特性，我们可以在上游的中间件中，统一为 reg 或 res 对象添加自定义的属性或方法，供下游的中间件或路由进行使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbGpEq0B-1670731370284)(img_2.png)]

const express = require('express')
const moment = require('moment')
//创建APP对象
const app = express()


//简化的中间件函数
app.use((req, resp, next) => {
    //获取到请求到达服务器的时间
    const time = moment().format('YYYY-MM-DD HH:mm:ss')
    //为req对象，挂载一个自定义属性，把时间共享给后面的所有路由
    req.startTime = time
    console.log('简化的一个中间件函数')
    next()
})

app.get('/user', (req, resp) => {
    console.log('user')
    console.log(req.startTime)
    resp.send('请求成功')
})

app.get('/login', (req, resp) => {
    console.log('login')
    console.log(req.startTime)
    resp.send({username: 'jsl', password: '123'})
})

app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})
局部中间件

不使用 app.use() 定义的中间件，叫做局部生效的中间件，示例代码如下:

const express = require('express')

const app = express()

const mw = (req, resp, next) => {
    console.log('局部中间件')
    next()
}

app.get('/', mw, (req, resp) => {
    resp.send('请求成功')
})

app. get('/01', (req, resp) => {
    resp.send('请求成功01')
})

app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})
定义多个局部中间件

可以在路由中，通过如下两种等价的方式，使用多个局部中间件:

//写法1
app.get('/', mw1, mw2, (req, resp) => {
    resp.send('请求成功')
})
//写法2
app.get('/', [mw1, mw2], (req, resp) => {
    resp.send('请求成功')
})
了解中间件的5个使用注意事项
  1. 一定要在路由之前注册中间件
  2. 客户端发送过来的请求，可以连续调用多个中间件进行处理
  3. 执行完中间件的业务代码之后，不要忘记调用 next() 函数
  4. 为了防止代码逻辑混乱，调用 next() 函数后不要再写额外的代码
  5. 连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象

中间件的分类

为了方便大家理解和记忆中间件的使用，Express 官方把常见的中间件用法，分成了 5 大类，分别是:

  1. 应用级别的中间件
  2. 路由级别的中间件
  3. 错误级别的中间件
  4. Express 内置的中间件
  5. 第三方的中间件
应用级别的中间件

通过 app.use() 或 app.get() 或 app.post() ，绑定到 app 实例上的中间件，叫做应用级别的中间件，代码示例如下:

// 应用级别的中间件(全局中间件)
app.use((req, res, next) => {
    next()
})
// 应用级别的中间件(局部中间件)
app.get('/', mw1, (req, res) => {
    res.send('Home page')
})
路由级别的中间件

绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。
只不过，应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上，代码示例如下:

//这是路由模块
let express = require('express')  //导入express
let user = express.Router()  //创建路由对象

user.get('/user', (req, resp) => {
    console.log('user')
    console.log(req.startTime)
    resp.send('请求成功')
})

user.get('/login', (req, resp) => {
    console.log('login')
    console.log(req.startTime)
    resp.send({username: 'jsl', password: '123'})
})

//对外暴露
module.exports = user
错误级别的中间件

错误级别中间件的作用:专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题

格式:错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是(err, req, res, next).

const express = require('express')

const app = express()

app.get('/', (req, resp) => {//路由
    throw new Error('服务器内发生了错误')//抛出一个自定义的错误
    resp.send('home page')
})

app.use(function (err, req, resp, next) {//错误级别的中间件
    console.log(err.message)
    resp.send(err.message)//向客户端响应错误内容
})

app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})

注意:错误级别的中间件必须注册在所有路由之后!

Express内置的中间件

自Express 4.16.0 版本开始，Express 内置了3 个常用的中间件，极大地提高了 Express 项目的开发效率和体验:

  1. express.static 快速托管静态资源的内置中间件，例如: HTML 文件、图片、CSS 样式等(无兼容性)
  2. express.json 解析 JSON 格式的请求体数据 (有兼容性，仅在 4.16.0+ 版本中可用)
  3. express.urlencoded 解析 URL-encoded 格式的请求体数据(有兼容性，仅在 4.16.0+ 版本中可用)
// 配置解析 application/json 格式数据的内置中间件
app.use(express.json())

// 配置解析 application/x-ww-form-urlencoded 格式数据的内置中间件
app.use(express.urlencoded({ extended: false }))
第三方的中间件

非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。
在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率

例如:在 express@4.16.0 之前的版本中，经常使用 body-parser 这个第三方中间件，来解析请求体数据。使用步骤如下:

  1. 运行 npm install body-parser 安装中间件
  2. 使用 require 导入中间件
  3. 用 app.use() 注册并使用中间件
const express = require('express')

const app = express()

// app.use(express.urlencoded({ extended: false }))
const body_parser = require('body-parser')
app.use(body_parser.urlencoded({extended: false}))

app.post('/user', (req,resp) => {
    //如果没有配置任何解析表单数据的中间件，则 req.body 默认为 undefined
    console.log(req.body)
    resp.send('ok')
})

app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})

Express内置的 express.urlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。

使用 Express 写接口

编写get接口

const express = require('express')
const router = express.Router()

router.get('/get', (req, resp) => {
    // 1.获取到客户端通过查询字符串，发送到服务器的数据
    const query = req.query
    // 2.调用 res.send() 方法，把数据响应给客户端
    resp.send({
        status: 0,  // 状态，0 表示成功，1 表示失败
        msg: 'get请求成功',  // 状态描述
        data: query  // 需要响应给客户端的具体数据
    })
})

module.exports = router


/*----------*/

// 导入 express
const express = require('express')
// 创建服务器实例
const app = express()

const apiRouter = require('./apiRouter')
app.use('/api', apiRouter)

// 启动服务器
app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})

编写post接口

router.post('/post', (req, resp) => {
    // 1.获取客户端通过请求体，发送到服务器的 URL-encoded 数据
    const body = req.body
    // 2.调用 res.send() 方法，把数据响应给客户端
    resp.send({
        status: 0,  // 状态，0 表示成功，1 表示失败
        msg: 'post请求成功',  // 状态描述
        data: body  // 需要响应给客户端的具体数据
    })
})

/*----------*/

// 导入 express
const express = require('express')
// 创建服务器实例
const app = express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

const apiRouter = require('./apiRouter')
app.use('/api', apiRouter)

// 启动服务器
app.listen(8099, () => {
    console.log('express server running at http://127.0.0.1:8099')
})

CORS 跨域资源共享

接口的跨域问题:

上面编写的GET和POST接口，存在一个很严重的问题: 不支持跨域请求

解决接口跨域问题的方案主要有两种:

  1. CORS (主流的解决方案，推荐使用)
  2. JSONP(有缺陷的解决方案:只支持 GET 请求)
什么是 CORS

CORS (Cross-Origin Resource Sharing, 跨域资源共享)由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源

浏览器的同源安全策略默认会阻止网页"跨域"获取源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头就可以解除浏览器端的跨域访问限制
在这里插入图片描述

使用 cors 中间件解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置cors 中间件，可以很方便地解决跨域问题使用步骤分为如下3步:

  1. 运行 npm install cors 安装中间件
  2. 使用 const cors = require(cors) 导入中间件
  3. 在路由之前调用 app.use(cors()) 配置中间件
cors 跨域简单请求

同时满足以下两大条件的请求，就属于简单请求：

  1. 请求方式: GET 、 POST 、 HEAD 三者之一
  2. HTTP 头部信息不超过以下几种字段: 无自定义头部字段、Accept、Accept-Language、 Content-Language、DPR、Downlink、Save-Data Viewport-Width、 Width、Content-Type (只有三个值：application/x-www-form-urlencoded、multipart/form-data、 text/plain)
cors 跨域预检请求

只要符合以下任何一个条件的请求，都需要进行预检请求:

  1. 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
  2. 请求头中包含自定义头部字段
  3. 向服务器发送了 application/json 格式的数据

在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION 请求称为" 预检请求 "服务器成功响应预检请求后，才会发送真正请求，并且携带真实数据

简单请求和预检请求的区别
  • 简单请求的特点: 客户端与服务器之间只会发生一次请求
  • 预检请求的特点: 客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求
JSONP 的概念与特点

概念:浏览器端通过

  1. JSONP不属于真正的Ajax 请求，因为它没有使用XMLHttpRequest 这个对象
  2. JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求
多喝热水，重启试试
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
express-context:上下文化中间件
05-24
表达上下文 用于中间件，用于无缝地关联特定属性。 它允许其他中间件忽略它们正在操纵的属性封装在特定上下文中。 例如，基于每个中间件req.foo的属性“ foo”意味着每次中间件尝试访问req.foo它都会操纵特定于该中间件的变量。 然后，您可以稍后恢复所有不同版本的foo ，每个版本特定于一个特定的中间件。 var express = require ( 'express' ) , contextualize = require ( 'express-context' ) , app = express ( ) ; function mw1 ( req , res , next ) { req . foo = 5 ; req . bar = 10 ; next ( ) ; } function mw2 ( req , res , next ) { req . foo =
Nodejs--Express框架使用
可爱的鸡仔的博客
11-19 1218
我们可以写一个类似springmvc那样的拦截器，来判断是否登录//导入会话管理next();}else{//如果不是白名单，那么就需要验证了console.log("黑名单拦截...");//黑名单= null){//比较二者值//相等，放行，跟新session时间console.log("放行...");//遍历完没有找到seesionID,说明回话过期return res.status(401).json({message:'会话过期!,请重新登录'})
node.js的Express框架的介绍 与 安装详细教程
最新发布
2301_76669854的博客
05-15 1681
node.js的Express框架介绍与安装详细教程
09-Node.js—express框架
Zhang_wang_yun的博客
04-25 2945
express 是一个基于 Node.js 平台的极简、灵活的 WEB应用开发框架，简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）
八、Express框架 安装
灵魂学者的博客
12-23 5932
本篇时关于Express框架安装的过程，有全局安装和局部安装，对于Express框架的就不进行过多介绍，Express官方对该框架的定位是："基于Node.js平台，快速、开放、极简的 Web 开发框架"，本篇开始记录关于 Node.js 轻量级Web开发框架。
nodejs---Express架构
weixin_48675760的博客
02-04 498
express是nodejs最常见的web server框架。
Node.js Express框架
上庸者-不服周
06-12 2719
中间件Express
Node.js-基于node.jsMongodb构建的后台系统
08-10
这些功能通常涉及到前端技术如HTML、CSS和JavaScript，配合Node.js的Express框架可以快速构建RESTful API，提供数据接口给前端应用。 后台管理接口则更多地关注于系统的维护和运营，可能包括管理员登录、商品管理...
Node.js-Tiny-Express框架从需求到实现
08-10
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让开发者可以在服务器端使用JavaScript编写代码。其非阻塞I/O模型和事件驱动特性使其在处理高并发场景下表现出色。 **二、Express框架** Express是Node.js...
Node.js-基于nodeexpress的聊天室
08-09
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够在服务器端使用 JavaScript 进行编程。Express 是一个简洁而灵活的 Node.js Web 应用框架，它提供了一系列强大的功能，帮助开发者快速搭建...
Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发
08-10
标题中的“Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发”揭示了我们讨论的主题：一个使用Node.js和Express框架构建的MongoDB Web管理界面，名为“mongo-express”。这个工具提供了图形...
Node.js-Back2Front基于Express和XTemplate的模块化开发框架
08-10
Back2Front是一个利用Node.js的强大特性，结合Express框架和XTemplate模板引擎的模块化开发框架，旨在提升开发效率并实现清晰的前后端分离。 **Express框架详解** Express是Node.js领域中最受欢迎的Web应用程序框架...
nodeJs中的http、url模块及express框架
wangJun
06-18 1105
NodeJS 一、nodeJS的概念 nodeJS是一个基于Chrome V8引擎（编译成原生机器码）的让JavaScript运行在服务器端的运行环境，它让JavaScript的触角伸到了服务器端。 二、nodeJS特性 单线程：NodeJS不会为每个连接客户客户创造一个新的线程，仅用一个线程 非阻塞IO：NodeJS在访问高IO操作后不会等待其完成，而是立即去执行其他代码，操作完成后会使用回调...
Express框架的安装和使用
前端卷王小白的博客
05-05 2999
express框架的安装,express框架的使用,包文件的描述
Node.js创建服务 (利用http和express两种写法)
qq_59599812的博客
09-13 943
服务来喽！
前端Node.js实战--使用express搭建后端服务
黑马程序员官方博客
07-04 3550
作为前端开发，Nodejs已经成了很多公司对我们这一岗位的硬性要求，而 Express 框架则是其中知名度最高、也是最受欢迎的Nodejs开发框架，它帮助我们封装了Nodejs底层的API，屏蔽了大量的繁琐的细节，让我们只需要关注业务开发就行了，极大的降低了学习的成本。路由中间件静态文件服务模板引擎。
express上下文中间件express-http-context
蛐蛐的博客
02-03 966
地址：https://github.com/skonves/express-http-context 1.简介 在任何地方获取并设置请求范围的上下文。这只是cls-hooked（由continuation-local-storage派生）的不受限制的，惯用的ExpressJS实现。 这是存储用户状态，JWT声明，请求/关联ID以及任何其他请求范围数据的好地方。即使在async/await时（在Node 8+中），上下文也得以保留。 2.安装 npm install --s...
Node.js - 使用 Express 和 http-proxy 进行反向代理
anleng6817的博客
01-27 509
安装 Express 和 http-proxy npm install --save express http-proxy 反向代理代码 proxy.js var express = require('express'); var app = express(); var httpProxy = require('http-proxy'); var apiProxy = httpProx...
nodejs + express + multiparty处理上传文件接口：踩坑及总结
weixin_41935198的博客
07-08 2219
在平时工作和自己写小项目时会遇到需要上传文件的场景，这里使用nodejs搭建服务端接口。 模块 const express = require('express'); const app = express(); const cors = require('cors'); const multer = require('multer'); const fs = require('fs'); multer是用于处理文件上传的nodejs中间件，主要跟express框架搭配使用，只支持表单MIME编码为mu
基于 Node.js 和 Express 框架的实现以上方法。
06-03
好的，基于Node.js和Express框架实现上述方法，您可以按照以下步骤进行： 1. 创建Express应用程序：首先，您需要在Node.js环境下安装Express框架，然后创建一个Express应用程序。可以通过以下命令来创建： ``` mkdir myapp cd myapp npm init npm install express --save ``` 2. 设计搜索窗口：在Express应用程序中，可以通过定义路由和模板引擎等方式来设计搜索窗口。可以使用EJS、Handlebars等模板引擎，将搜索窗口的HTML代码与后台逻辑进行分离。例如，可以在`views`目录下创建一个`search.ejs`文件，用于显示搜索窗口的HTML代码。可以使用以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Search Window</title> </head> <body> <form action="/search" method="get"> <input type="text" name="keyword"> <button type="submit">Search</button> </form> </body> </html> ``` 3. 实现搜索功能：在Express应用程序中，可以通过定义路由和控制器等方式来实现搜索功能。例如，在`routes`目录下创建一个`search.js`文件，用于处理搜索请求。可以使用以下代码： ``` const express = require("express"); const router = express.Router(); const db = require("../models/db"); router.get("/", (req, res) => { res.render("search"); }); router.get("/search", (req, res) => { const keyword = req.query.keyword; const results = db.search(keyword); res.render("results", { results }); }); module.exports = router; ``` 其中，`db`代表数据库模块，`search`方法用于在数据库中进行搜索，`results`表示搜索结果。 4. 显示搜索结果：在Express应用程序中，可以通过定义路由和模板引擎等方式来显示搜索结果。例如，在`views`目录下创建一个`results.ejs`文件，用于显示搜索结果的HTML代码。可以使用以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Search Results</title> </head> <body> <% if (results.length === 0) { %> <p>No results found.</p> <% } else { %> <ul> <% for (let i = 0; results[i]; i++) { %> <li><%= results[i].name %></li> <% } %> </ul> <% } %> </body> </html> ``` 其中，`results`代表搜索结果。 5. 启动Express应用程序：最后，您需要在Node.js环境下启动Express应用程序，以便用户可以访问搜索窗口。可以使用以下命令来启动： ``` node app.js ``` 综上所述，基于Node.js和Express框架实现上述方法，需要创建Express应用程序，设计搜索窗口，实现搜索功能，以及显示搜索结果。在实现过程中，需要注意路由、控制器和模板引擎等方面的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多喝热水，重启试试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值