您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了有了ChatGPT编程是否还需要那么多库的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇有了ChatGPT编程是否还需要那么多库文章都会有所收获，下面我们一起来看看吧。
我已经可以生成一些图片了，但是光看图片我能看出什么来？我需要展示出图片和图片的信息。这可能就要专门开发一下了。
我当时想，这个可能有点难，他是个前后端都有的程序。所以我就本能的想到，要不要找找有个库没有，先找个瀑布流展示图片的现成的库，在上面稍微改改可能是比较简单的做法。害怕ChatGPT不行，我还去问了new bing，我想着，newbing的知识更新一点，于是我问：
指定一个path直接启动一个nodejs server，通过localhost访问，以瀑布流形式展示path下所有图片的npm工具
结果他建议我使用node-static的库，于是我就追问了一些怎么用node-static库的方式去写代码，得到的代码可能由于知识过时，反正是不能用的，我就不贴在这里了。
有点沮丧，这稍微用点库你就给我撂挑子，你这果然也不行啊，一用库就出错，你这果然胜任不了复杂开发。new bing不靠谱，我就又去问ChatGPT，一开始我问得有问题，我直接问：
用node-static库怎么实现：指定一个path直接启动一个nodejs server，通过localhost访问，以瀑布流形式展示path下所有图片
结果显示的代码果然是不能用的，我心想对啊，new bing都没有新数据，你这个数据岂不是更糟糕？但是灵机一动之下，我也没退出，我就问
上面的代码不能运行，有没有别的办法?
然后我得到了下面的回答：
可以使用Node.js的http和fs模块来启动一个HTTP服务器，并且使用path模块来获取文件路径，以及使用mime模块来获取文件的MIME类型，然后通过HTML和CSS来创建一个简单的瀑布流布局。
以下是一个示例代码：
const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime');
const PORT = 3000;
const PATH = './path'; // 设置图片目录的路径
http.createServer((req, res) => {
console.log(`Request for ${req.url}`);
// 如果请求的是根路径，返回图片列表页面
if (req.url === '/') {
res.writeHead(200, { 'Content-Type': 'text/html' });
// 读取图片目录下的所有文件
fs.readdir(PATH, (err, files) => {
if (err) {
console.error(err);
res.end('Error reading directory');
return;
}
// 使用HTML和CSS创建瀑布流布局
res.write(`
<html>
<head>
<title>Image Gallery</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
.item {
position: relative;
}
.item img {
width: 100%;
height: auto;
}
.item .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
`);
// 遍历所有文件，并在瀑布流布局中展示图片和文件名
files.forEach((file) => {
const filePath = path.join(PATH, file);
const mimeType = mime.getType(filePath);
if (mimeType && mimeType.startsWith('image/')) {
res.write(`
<div class="item">
<img src="${filePath}" alt="${file}">
<div class="caption">${file}</div>
</div>
`);
}
});
res.write(`
</div>
</body>
</html>
`);
res.end();
});
} else {
// 否则，返回请求的文件
const filePath = path.join(PATH, req.url);
const mimeType = mime.getType(filePath);
if (mimeType && mimeType.startsWith('image/')) {
// 如果请求的是图片文件，则返回图片数据
fs.readFile(filePath, (err, data) => {
if (err) {
console.error(err);
res.writeHead(404);
res.end('Not found');
return;
}
res.writeHead(200, { 'Content-Type': mimeType });
res.end(data);
});
} else {
// 否则，返回404错误
res.writeHead(404);
res.end('Not found');
}
}
}).listen(PORT);
console.log(`Server running at http://localhost:${PORT}`);将上述代码保存为app.js文件，然后在终端中进入该文件所在的目录，并运行以下命令： node app.js 运行该命令后，服务器将会在本地3000端口上启动。您可以在浏览器中输入
http://localhost:3000/来查看图片列表，其中/表示根路径，这将会显示图片列表页面，瀑布流形式展示path下所有图片。如果您想直接访问某张图片，可以通过输入其文件名来访问，例如http://localhost:3000/example.jpg。
请注意，在上述示例中，我们假设所有图片文件的MIME类型都以image/开头，这通常是正确的，但如果您的图片文件类型不同，则可能需要修改相关代码。
咦？可以用原生写法啊，我立刻修改了自己的提问：
我需要用nodejs写一个后端服务，可以指定一个文件夹，按瀑布流显示下面所有的png图片。 要求：
可以通过传参指定任意基于index.js的相对文件夹及子文件夹
要并排显示png图片和png图片文件中的文本信息
页面要用BootStrap布局
我有一个模块：'./util/png_info/index'。 该模块导出的对象上有一个异步函数 readPng 可以读取 PNG 图像文件中的文本信息。不用实现，其签名为：
async function readPng(filePath) {
//....
}指定index.js所在文件夹为静态文件夹
我得到了可以执行的代码：
const express = require('express');
const path = require('path');
const fs = require('fs');
const { readPng } = require('./util/png_info');
const app = express();
// 设置静态文件夹
app.use(express.static(path.join(__dirname)));
app.get('/images', async (req, res) => {
try {
const folderPath = req.query.folder;
const images = await getImages(folderPath);
const imagesHTML = await Promise.all(
images.map(async (image) => {
const info = await readPng(image.path);
return `
<div class="col-md-3">
<img src="${image.url}" class="img-thumbnail" alt="${image.name}">
<div class="text-muted">${info}</div>
</div>
`;
})
);
const html = `
<html>
<head>
<title>Image Gallery</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
${imagesHTML.join('')}
</div>
</div>
</body>
</html>
`;
res.send(html);
} catch (error) {
console.error(error);
res.status(500).send('Internal Server Error');
}
});
async function getImages(folderPath) {
const images = [];
const files = await fs.promises.readdir(folderPath, { withFileTypes: true });
for (const file of files) {
if (file.isDirectory()) {
const subfolderPath = path.join(folderPath, file.name);
const subfolderImages = await getImages(subfolderPath);
images.push(...subfolderImages);
} else if (file.name.endsWith('.png')) {
const url = path.join('/', path.relative(__dirname, folderPath), file.name).replace(/\\/g, '/');
images.push({ name: file.name, path: path.join(folderPath, file.name), url });
}
}
return images;
}
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});关于“有了ChatGPT编程是否还需要那么多库”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“有了ChatGPT编程是否还需要那么多库”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。