


Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek
Dalam pembangunan projek hadapan sebenar, akan ada senario sedemikian. Setiap kali gambar baharu diperkenalkan, saya tidak tahu sama ada sumber ini telah dirujuk, jadi saya akan klik pada sumber yang menyimpan gambar untuk melihatnya satu persatu. Masalah sebenar ialah:
1. Gambar-gambar itu mungkin wujud di mana-mana dan sukar dicari 2 . Memakan masa dan susah payah
3 Sumber imej mungkin diperkenalkan berulang kali
Jika anda mempunyai kebolehan, senaraikan sumber imej projek. bersama-sama untuk melihat , dan memudahkan untuk melihat laluan pengenalan akan sangat menjimatkan kerja fizikal pembangunan.
Jika anda ingin memiliki kebolehan sedemikian, apakah yang perlu anda pertimbangkan?
boleh diintegrasikan ke dalam mana-mana projek front-end, maka keperluannya ialah
npm包
Baca fail, analisis imej mana yang merupakan imej dan tulis sumber imej ke dalam fail html melalui-
img标签
Buat pelayan untuk memaparkan html -
Ini perlu dicapai dengan bantuan Node, yang memerlukan penggunaan modul
tutorial video nodejsfs
, path
Pengajaran pengaturcaraan http
]Pelaksanaan
1 实现可发布npm包
Buat projek
- Nama pakej ialah
npm init
test-read-img
dan tambahkannya pada pakej .json Kod berikut
"bin": { "readimg": "./index.js" },
- Maksudnya ialah fail ini adalah fail nod boleh laku
-
Pautkan modul semasa ke dalam modul node_modules global untuk memudahkan penyahpepijatan
#!/usr/bin/env node console.log('111')
Laksanakan -
Laksanakan
npm link
readimg
Sekarang anda telah menyedari penggunaan pakej npm melalui arahan Apabila projek memasang pakej ini dan mengkonfigurasi arahan pelaksanaan, anda boleh melaksanakan npm yang direka dalam lain. projek. Itu sahaja, kami akan melaksanakannya kemudian"scripts": { "test": "readimg" },
2 集成到别的项目
Buat projek ujian dan laksanakan
- Sepadukan pakej ujian ke dalam projek semasa dan laksanakan
npm init
arahan pelaksanaan konfigurasi npm link test-read-img
- laksanakan
"scripts": { "test": "readimg" },Lihat bahawa projek semasa melaksanakan kod pakej yang membaca fail. Kini hanya 111 output, yang masih jauh daripada membaca fail Mari kita laksanakan membaca fail
npm run test
3 读取文件
dalam projek . , Isytihar fungsi pelaksanaan dan laksanakannya
-
test-read-img
Berikut ialah penjelasan fungsi setiap fungsi
#!/usr/bin/env node const init = async () => { const readFiles = await getFileFun(); const html = await handleHtml(readFiles); createServer(html); } init();: Baca fail projek dan baca fail imej. path Return, tiada sumber imej diperlukan di sini, mengapa akan dijelaskan kemudian.
: Baca fail html templat dan jana fail html baharu dengan membawa sumber imej melalui getFileFun
.
handleHtml
: Letakkan html yang dijana pada pelayan dan berikannya. img
createServer
Laksanakan fungsi
- Analisis apa sebenarnya yang patut dilakukan oleh fail ini
Di sini, hanyagetFileFun
Gelung fail sehingga semua fail dicari, dan kemudian Imej sumber ditapis, dan pembacaan fail mesti dilaksanakan secara tidak segerak Bagaimana anda tahu apabila fail telah dibaca Ini dilaksanakan menggunakandilaksanakan kerana ia diterbitkan kepada npm dalam syarikat. maafkan saya. Jika anda bijak, fikirkan bagaimana untuk melaksanakannya secara rekursif?
Kod khusus adalah seperti berikut:promise
: Fail hendaklah dibaca dahulu sebelum imej boleh dikembalikan, jadi pengumpul tak segerak hendaklah dilaksanakan kemudian.单层文件的读取
PelaksanaangetFileFun
const fs = require('fs').promises; const path = require('path'); const excludeDir = ['node_modules','package.json','index.html']; const excludeImg = ['png','jpg','svg','webp']; let imgPromiseArr = []; // 收集读取图片,作为一个异步收集器 async function readAllFile(filePath) { // 循环读文件 const data = await fs.readdir(filePath) await dirEach(data,filePath); } async function handleIsImgFile(filePath,file) { const fileExt = file.split('.'); const fileTypeName = fileExt[fileExt.length-1]; if(excludeImg.includes(fileTypeName)) { // 将图片丢入异步收集器 imgPromiseArr.push(new Promise((resolve,reject) => { resolve(`${filePath}${file}`) })) } } async function dirEach(arr=[],filePath) { // 循环判断文件 for(let i=0;i<arr.length;i++) { let fileItem = arr[i]; const basePath = `${filePath}${fileItem}`; const fileInfo = await fs.stat(basePath) if(fileInfo.isFile()) { await handleIsImgFile(filePath,fileItem) } } } async function getFileFun() { // 将资源返回给调用使用 await readAllFile('./'); return await Promise.all(imgPromiseArr); } module.exports = { getFileFun }
-
di sini , dan gantikan.handleHtml
Baca fail html bagi
test-read-img
const fs = require('fs').promises; const path = require('path'); const createImgs = (images=[]) => { return images.map(i => { return `<div class='img-warp'> <div class='img-item'> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/2bbaed968e5cea05cb549ca3b7d46b6d-0.png?x-oss-process=image/resize,p_40" class="lazy" src='${i}' / alt="Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek" > </div> <div class='img-path'>文件路径 <span class='path'>${i}</span></div> </div>` }).join(''); } async function handleHtml(images=[]) { const template = await fs.readFile(path.join(__dirname,'template.html'),'utf-8') const targetHtml = template.replace('%--%',` ${createImgs(images)} `); return targetHtml; } module.exports = { handleHtml }
- Baca fail html di sini dan kembalikan ke pelayan.
Di sini kami hanya menyedari paparan
fail Bagaimana untuk menyokong jenis gambar yang lain. Berikut adalah beberapa petua untuk memproses
createServer
.png
content-type
Kesan
const http = require('http'); const fs = require('fs').promises; const path = require('path'); const open = require('open'); const createServer =(html) => { http.createServer( async (req,res) => { const fileType = path.extname(req.url); let pathName = req.url; if(pathName === '/favicon.ico') { return; } let type = '' if(fileType === '.html') { type=`text/html` } if(fileType === '.png') { type='image/png' } if(pathName === '/') { res.writeHead(200,{ 'content-type':`text/html;charset=utf-8`, 'access-control-allow-origin':"*" }) res.write(html); res.end(); return } const data = await fs.readFile('./' + pathName ); res.writeHead(200,{ 'content-type':`${type};charset=utf-8`, 'access-control-allow-origin':"*" }) res.write(data); res.end(); }).listen(3004,() => { console.log('project is run: http://localhost:3004/') open('http://localhost:3004/') }); } module.exports = { createServer }
Di atas ialah proses pelaksanaan dan anda boleh melihat bahawa penyemak imbas melaksanakan http ://localhost:3004/
, kesannya adalah seperti berikut:Terbitkan
npm publish
Berfikir
-
Mengapa membaca fail secara tidak segerak?
Oleh kerana js adalah satu-benang, jika anda membaca fail secara serentak, ia akan tersekat di sana dan tidak boleh melaksanakan apa-apa lagi.
-
Mengapa menggunakan Promise untuk mengumpul imej
Kerana kami tidak tahu bila fail telah dibaca Apabila bacaan tak segerak selesai, gunakan
Promise.all
pemprosesan keseluruhan -
Mengapa tidak membaca fail html baharu dan mengembalikan hasilnya terus ke penyemak imbas?
Jika anda menukar fail
html放到
test-read-img
, sumber imej mesti juga dijana dalam direktori semasa, jika tidak, sumber laluan setara yang dibaca oleh html tidak akan ditemui kerana sumber sedang digunakan projek. Pada akhirnya, sumber imej mesti dipadamkan, yang juga meningkatkan kerumitan; jikadisertakan dalam
html 写入放到使用项目
yang ditukar, laluan imej boleh digunakan secara langsung dan dimuatkan dengan betul, tetapi ini akan menjadi satu lebih banyak fail html, yang perlu dipadamkan apabila program keluar Jika anda terlupa untuk memadamnya, ia mungkin diserahkan ke lokasi terpencil oleh pembangun, menyebabkan pencemaran yang diberikan. Kedua-dua pendekatan tidak digalakkan. Oleh itu, mengembalikan sumber html secara langsung dan membiarkannya memuatkan laluan projek sasaran relatif tidak akan memberi kesan.
Untuk lebih banyak pengetahuan berkaitan nod, sila lawati: tutorial nodejs!
Atas ialah kandungan terperinci Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Dreamweaver Mac版
Alat pembangunan web visual

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.