当前位置：首页 > 建站学院 > 其他教程 > 有了ChatGPT编程是否还需要那么多库

有了ChatGPT编程是否还需要那么多库

其他教程发布日期：2025年02月07日浏览次数：217次

这篇文章主要介绍了有了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://www.19jp.com">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编程是否还需要那么多库的资料请关注九品源码其它相关文章！

相关热词： 有了 ChatGPT 编程需要那么

上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：怎么使用vue+springboot上传大文件

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站

有了ChatGPT编程是否还需要那么多库

文章分类

最后更新

热门排行