在 Web 开发中,搜索功能是一个必不可少的功能。Node.js 作为一个强大的后端开发语言,可以很方便实现基础的搜索功能。在本文中,我们将介绍如何使用 Node.js 实现基础的搜索功能,包括搜索框的实现以及搜索结果的显示。
准备工作
在开始之前,我们需要准备好以下工具和环境:
- Node.js
- Express 框架
- MongoDB 数据库
- 模板引擎(我们使用 ejs)
如果你还没有安装上述工具和环境,可以参考官方文档进行安装。
编写代码
创建 Express 项目
我们使用 Express 框架来搭建我们的应用程序。在命令行中输入以下代码,创建一个新的 Express 项目。
$ express search-demo
接着进入项目文件夹并安装对应的依赖包。
$ cd search-demo $ npm i
配置 MongoDB 数据库
在我们进行搜索功能的实现时,需要将搜索关键词存储到数据库中进行筛选。在这里,我们使用 MongoDB 数据库作为我们的搜索关键词的存储基地。在项目根目录中新建一个 db.js
文件,在其中编写以下代码:
-- -------------------- ---- ------- ----- -------- - ------------------- ---------------- - -------------- --------------------------------------------------- - --------------- ---- -- ----- -- - ------------------- -------------- --------------------------- ----------- ------ --- --------------- -- -- - ---------------------- -- ------- --------------- --展开代码
接着,在 app.js
中引入 db.js
,使应用程序与数据库连接。
require('./db')
创建模型
在接下来的步骤中,我们将使用搜索的关键词作为模型,存储到数据库中。在 models
目录下新建一个 keyword.js
文件,编写模型代码如下:
-- -------------------- ---- ------- ----- -------- - ------------------- ----- ------------- - ----------------- -------- - ----- ------- --------- ---- -- ---------- - ----- ----- -------- -------- - -- ----- ------- - -------------- - ------------------------- --------------展开代码
我们定义了一个包含 keyword
和 createdAt
两个属性的模型,其中 createdAt
属性在插入数据时默认为插入的时间。在之后处理搜索关键词的逻辑中,我们将利用这个属性进行排序。
创建页面
在这里,我们将创建两个页面,一个是搜索框页面(即搜索页面),另一个是搜索结果页面。
在 views
目录下新建以下两个文件:
搜索页面 (search.ejs
)
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ------------ ------- ------ ---------- --------- ----- ------------ ----------- ---------------------- ------ ----------- --------------- ------ ------------- --------------- ------- ------- -------展开代码
这个页面包含一个搜索表单,用户在表单中输入搜索关键词。当用户点击“Submit”按钮后,表单将会提交到根页面 (/
)。
搜索结果页面 (result.ejs
)
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ------ - ------ ------------ ------- ------ ---------- ----------- ---- -- ---------------------- -- - -- ------- -------------- ------- -- -- -- ----- ------- -------展开代码
这个页面包含一个搜索结果列表,当我们在搜索框中输入关键词并成功搜索后,将会显示搜索结果在这个页面中。
完成搜索逻辑
在 routes
目录下新建一个 index.js
文件,在其中编写以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- ----- ------- - ---------------------------- --------------- ----- ---- -- - --- ----- - -- -- ------------------- - ----- - - -------- --- ------------------------- ---- - ---------------- -------- ----------------- -- - ---------------- ----- - ----- - ---------- -- - -- ----- ----- -- - -- ----- - ------------------ ------ --------------- -------- ----- ------------ - -------------------- - -------- ---- -- -- -- -------------- - ------展开代码
我们定义了一个根路由,在该路由响应 GET 请求时,会根据请求参数中的 keyword
值进行搜索。搜索方法使用了 RegExp
和 i
标志以不区分大小写的方式进行查询。如果搜索到了符合条件的记录,我们将新的关键词存储到数据库中去。接着,我们在 Keyword
模型上进行查询,并根据 createdAt
属性进行倒序排列。最后,我们将查询结果展示到搜索结果页面 (result.ejs
) 中。
启动应用
最后,我们使用以下命令启动我们的应用程序:
$ npm start
打开浏览器并访问 http://localhost:3000
,你将会看到一个搜索框页面。在搜索框中输入关键词并点击“Submit”,就可以看到搜索结果页面。
总结
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65a533b2add4f0e0ffdabc0b