这篇文章主要介绍了有了ChatGPT编程是否还需要那么多库的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇有了ChatGPT编程是否还需要那么多库文章都会有所收获，下面我们一起来看看吧。瀑布流展示图片的新需求我已
这篇文章主要介绍了有了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编程是否还需要那么多库”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。
--结束END--
本文标题: 有了ChatGPT编程是否还需要那么多库
本文链接: https://lsjlt.com/news/352831.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0