node.js 读取的数据库内容显示到html中
时间: 2024-06-11 08:04:07 浏览: 8
要将数据库内容显示到HTML中,您需要使用Node.js中的模板引擎和数据库查询。以下是一个简单的示例,假设您正在使用MongoDB数据库和EJS模板引擎:
1. 安装依赖项
```
npm install express ejs mongodb
```
2. 创建服务器文件
```javascript
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017';
const dbName = 'mydb';
// 设置模板引擎
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
// 路由
app.get('/', (req, res) => {
// 连接数据库
MongoClient.connect(url, function(err, client) {
console.log("Connected successfully to server");
const db = client.db(dbName);
const collection = db.collection('mycollection');
// 查询数据库
collection.find().toArray(function(err, docs) {
console.log("Found the following records");
console.log(docs);
// 渲染模板并将查询结果传递给模板
res.render('index', { docs: docs });
});
client.close();
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
3. 创建模板文件
在views文件夹中创建一个名为index.ejs的文件,并使用以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Page</h1>
<ul>
<% docs.forEach(function(doc) { %>
<li><%= doc.title %></li>
<% }); %>
</ul>
</body>
</html>
```
此模板将查询结果作为docs对象传递,并使用forEach循环将每个文档的标题显示为列表项。
4. 运行服务器
在终端中运行以下命令:
```
node server.js
```
然后在浏览器中访问http://localhost:3000即可看到查询结果在HTML页面中的显示。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)