如何使用 Node.js 实现基础的搜索功能

在 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 文件,在其中编写以下代码:

const mongoose = require('mongoose')

mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost/search-demo', { useMongoClient: true })

const db = mongoose.connection

db.on('error', console.error.bind(console, 'connection error: '))

db.once('open', () => {
  console.log('Connected to MongoDB successfully.')
})

接着,在 app.js 中引入 db.js,使应用程序与数据库连接。

require('./db')

创建模型

在接下来的步骤中,我们将使用搜索的关键词作为模型,存储到数据库中。在 models 目录下新建一个 keyword.js 文件,编写模型代码如下:

const mongoose = require('mongoose')

const KeywordSchema = mongoose.Schema({
  keyword: {
    type: String,
    required: true
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
})

const Keyword = module.exports = mongoose.model('Keyword', KeywordSchema)

我们定义了一个包含 keywordcreatedAt 两个属性的模型,其中 createdAt 属性在插入数据时默认为插入的时间。在之后处理搜索关键词的逻辑中,我们将利用这个属性进行排序。

创建页面

在这里,我们将创建两个页面,一个是搜索框页面(即搜索页面),另一个是搜索结果页面。

views 目录下新建以下两个文件:

搜索页面 (search.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search Demo</title>
</head>
<body>
  <h1>Search Demo</h1>
  <form method="get" action="/">
    <label>Search:</label>
    <input type="text" name="keyword">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

这个页面包含一个搜索表单,用户在表单中输入搜索关键词。当用户点击“Submit”按钮后,表单将会提交到根页面 (/)。

搜索结果页面 (result.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search Result | Search Demo</title>
</head>
<body>
  <h1>Search Result</h1>
  <ul>
    <% results.forEach(result => { %>
    <li><%= result.keyword %></li>
    <% }) %>
  </ul>
</body>
</html>

这个页面包含一个搜索结果列表,当我们在搜索框中输入关键词并成功搜索后,将会显示搜索结果在这个页面中。

完成搜索逻辑

routes 目录下新建一个 index.js 文件,在其中编写以下代码:

const express = require('express')
const router = express.Router()
const Keyword = require('../models/keyword')

router.get('/', (req, res) => {
  let query = {}
  if (req.query.keyword) {
    query = { keyword: new RegExp(req.query.keyword, 'i') }
    Keyword.create({ keyword: req.query.keyword })
  }

  Keyword.find({}, null, { sort: { createdAt: -1 } }, (err, docs) => {
    if (err) {
      console.error(err)
      return res.send('Error occurred while searching.')
    }
    res.render('result', { results: docs })
  })
})

module.exports = router

我们定义了一个根路由,在该路由响应 GET 请求时,会根据请求参数中的 keyword 值进行搜索。搜索方法使用了 RegExpi 标志以不区分大小写的方式进行查询。如果搜索到了符合条件的记录,我们将新的关键词存储到数据库中去。接着,我们在 Keyword 模型上进行查询,并根据 createdAt 属性进行倒序排列。最后,我们将查询结果展示到搜索结果页面 (result.ejs) 中。

启动应用

最后,我们使用以下命令启动我们的应用程序:

$ npm start

打开浏览器并访问 http://localhost:3000,你将会看到一个搜索框页面。在搜索框中输入关键词并点击“Submit”,就可以看到搜索结果页面。

总结

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65a533b2add4f0e0ffdabc0b


纠错反馈