溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了有了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
