溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了有了ChatGPT編程是否還需要那么多庫(kù)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇有了ChatGPT編程是否還需要那么多庫(kù)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
我已經(jīng)可以生成一些圖片了，但是光看圖片我能看出什么來(lái)？我需要展示出圖片和圖片的信息。這可能就要專(zhuān)門(mén)開(kāi)發(fā)一下了。
我當(dāng)時(shí)想，這個(gè)可能有點(diǎn)難，他是個(gè)前后端都有的程序。所以我就本能的想到，要不要找找有個(gè)庫(kù)沒(méi)有，先找個(gè)瀑布流展示圖片的現(xiàn)成的庫(kù)，在上面稍微改改可能是比較簡(jiǎn)單的做法。害怕ChatGPT不行，我還去問(wèn)了new bing，我想著，newbing的知識(shí)更新一點(diǎn)，于是我問(wèn)：
指定一個(gè)path直接啟動(dòng)一個(gè)nodejs server，通過(guò)localhost訪(fǎng)問(wèn)，以瀑布流形式展示path下所有圖片的npm工具
結(jié)果他建議我使用node-static的庫(kù)，于是我就追問(wèn)了一些怎么用node-static庫(kù)的方式去寫(xiě)代碼，得到的代碼可能由于知識(shí)過(guò)時(shí)，反正是不能用的，我就不貼在這里了。
有點(diǎn)沮喪，這稍微用點(diǎn)庫(kù)你就給我撂挑子，你這果然也不行啊，一用庫(kù)就出錯(cuò)，你這果然勝任不了復(fù)雜開(kāi)發(fā)。new bing不靠譜，我就又去問(wèn)ChatGPT，一開(kāi)始我問(wèn)得有問(wèn)題，我直接問(wèn)：
用node-static庫(kù)怎么實(shí)現(xiàn)：指定一個(gè)path直接啟動(dòng)一個(gè)nodejs server，通過(guò)localhost訪(fǎng)問(wèn)，以瀑布流形式展示path下所有圖片
結(jié)果顯示的代碼果然是不能用的，我心想對(duì)啊，new bing都沒(méi)有新數(shù)據(jù)，你這個(gè)數(shù)據(jù)豈不是更糟糕？但是靈機(jī)一動(dòng)之下，我也沒(méi)退出，我就問(wèn)
上面的代碼不能運(yùn)行，有沒(méi)有別的辦法?
然后我得到了下面的回答：
可以使用Node.js的http和fs模塊來(lái)啟動(dòng)一個(gè)HTTP服務(wù)器，并且使用path模塊來(lái)獲取文件路徑，以及使用mime模塊來(lái)獲取文件的MIME類(lèi)型，然后通過(guò)HTML和CSS來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的瀑布流布局。
以下是一個(gè)示例代碼：
const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime');
const PORT = 3000;
const PATH = './path'; // 設(shè)置圖片目錄的路徑
http.createServer((req, res) => {
console.log(`Request for ${req.url}`);
// 如果請(qǐng)求的是根路徑，返回圖片列表頁(yè)面
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創(chuàng)建瀑布流布局
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 {
// 否則，返回請(qǐng)求的文件
const filePath = path.join(PATH, req.url);
const mimeType = mime.getType(filePath);
if (mimeType && mimeType.startsWith('image/')) {
// 如果請(qǐng)求的是圖片文件，則返回圖片數(shù)據(jù)
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錯(cuò)誤
res.writeHead(404);
res.end('Not found');
}
}
}).listen(PORT);
console.log(`Server running at http://localhost:${PORT}`);將上述代碼保存為app.js文件，然后在終端中進(jìn)入該文件所在的目錄，并運(yùn)行以下命令： node app.js 運(yùn)行該命令后，服務(wù)器將會(huì)在本地3000端口上啟動(dòng)。您可以在瀏覽器中輸入
http://localhost:3000/來(lái)查看圖片列表，其中/表示根路徑，這將會(huì)顯示圖片列表頁(yè)面，瀑布流形式展示path下所有圖片。如果您想直接訪(fǎng)問(wèn)某張圖片，可以通過(guò)輸入其文件名來(lái)訪(fǎng)問(wèn)，例如http://localhost:3000/example.jpg。
請(qǐng)注意，在上述示例中，我們假設(shè)所有圖片文件的MIME類(lèi)型都以image/開(kāi)頭，這通常是正確的，但如果您的圖片文件類(lèi)型不同，則可能需要修改相關(guān)代碼。
咦？可以用原生寫(xiě)法啊，我立刻修改了自己的提問(wèn)：
我需要用nodejs寫(xiě)一個(gè)后端服務(wù)，可以指定一個(gè)文件夾，按瀑布流顯示下面所有的png圖片。 要求：
可以通過(guò)傳參指定任意基于index.js的相對(duì)文件夾及子文件夾
要并排顯示png圖片和png圖片文件中的文本信息
頁(yè)面要用BootStrap布局
我有一個(gè)模塊：'./util/png_info/index'。 該模塊導(dǎo)出的對(duì)象上有一個(gè)異步函數(shù) readPng 可以讀取 PNG 圖像文件中的文本信息。不用實(shí)現(xiàn)，其簽名為：
async function readPng(filePath) {
//....
}指定index.js所在文件夾為靜態(tài)文件夾
我得到了可以執(zhí)行的代碼：
const express = require('express');
const path = require('path');
const fs = require('fs');
const { readPng } = require('./util/png_info');
const app = express();
// 設(shè)置靜態(tài)文件夾
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}`);
});關(guān)于“有了ChatGPT編程是否還需要那么多庫(kù)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“有了ChatGPT編程是否還需要那么多庫(kù)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼