📅 最后修改于: 2023-12-03 15:07:16.841000 🧑 作者: Mango
在这篇文章中，我们将学习如何使用 MongoDB 和 Node.js 制作搜索框并从数据库中获取数据。
在开始编写代码之前，我们需要确保已经安装以下工具：
在终端中打开我们的项目，然后运行以下命令安装所需的依赖项：
npm install express mongoose body-parser
我们将使用 Express 框架来创建我们的应用。在项目的根目录下创建一个名为 app.js 的文件，然后在其中添加以下代码：
const express = require('express');
const app = express();
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});
这将创建一个 Express 应用并启动服务器。可以通过 http://localhost:3000 访问我们的应用。
我们需要使用 Mongoose 库来连接 MongoDB 数据库。在 app.js 文件中添加以下代码：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/myapp', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
console.log('Connected to MongoDB.');
});
这将连接到 MongoDB 数据库。在这里，我们连接到本地数据库 myapp。
我们需要创建一个名为 Product 的模型来与 MongoDB 中的集合进行交互。
在 app.js 文件中添加以下代码：
const productSchema = new mongoose.Schema({
name: String,
category: String,
price: Number,
description: String
});
const Product = mongoose.model('Product', productSchema);
这将创建名为 Product 的模型。
我们将编写一个路由来获取与搜索关键字匹配的所有 Product 数据。
在 app.js 文件中添加以下代码：
app.get('/search', (req, res) => {
const { keyword } = req.query;
Product.find({ name: new RegExp(keyword, 'i') }, (err, products) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
} else {
res.json(products);
}
});
});
这将创建一个名为 /search 的路由，它将获取查询字符串参数 keyword 并搜索与 name 属性匹配的所有 Product 数据。
RegExp 构造函数用于构造一个正则表达式对象，以便我们可以进行不区分大小写的文本匹配。
我们需要在前端创建一个搜索框，让用户输入关键字并提交搜索请求。在项目根目录下创建一个名为 index.html 的文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Search Example</title>
</head>
<body>
<form>
<input type="text" name="keyword">
<button type="submit">Search</button>
</form>
<ul id="products"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const form = document.querySelector('form');
const products = document.querySelector('#products');
form.addEventListener('submit', (e) => {
e.preventDefault();
const keyword = form.keyword.value;
axios.get(`/search?keyword=${keyword}`)
.then(res => {
products.innerHTML = '';
res.data.forEach(product => {
const li = document.createElement('li');
li.textContent = product.name;
products.appendChild(li);
});
});
});
</script>
</body>
</html>
这将创建一个带有搜索框和空列表的 HTML 页面。当用户提交搜索请求时，我们将使用 Axios 库向服务器发送 GET 请求以获取数据，并将数据渲染为 HTML 列表。
现在，我们已经完成了所有代码的编写。在终端中，进入项目根目录并运行以下命令以启动我们的应用程序：
node app.js
现在打开浏览器并访问 http://localhost:3000 查看我们刚刚编写的搜索页面。
在本文中，我们学习了如何使用 MongoDB 和 Node.js 创建一个带有搜索框的应用程序。我们编写了代码来连接到 MongoDB 数据库、创建模型、获取数据以及在前端创建搜索框。希望这篇文章能够帮助你了解如何创建一个简单的搜索应用程序！