cari
Rumahhujung hadapan webtutorial jsPembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek

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?

Analisis keperluan

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

. [Cadangan tutorial berkaitan:

tutorial video nodejsfs, pathPengajaran pengaturcaraan http]Pelaksanaan

1 实现可发布npm包Buat projek

  • Nama pakej ialah

    npm init

    test-read-img dan tambahkannya pada pakej .json Kod berikut

Tambah kod ujian pada fail masukan index.js
    "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

    Anda akan melihat output 111

    readimgSekarang 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-imgBerikut 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

Proses utama adalah seperti ini.

createServer

Laksanakan fungsi

  • Analisis apa sebenarnya yang patut dilakukan oleh fail ini

    getFileFun 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 menggunakan

    Di sini, hanya

    dilaksanakan kerana ia diterbitkan kepada npm dalam syarikat. maafkan saya. Jika anda bijak, fikirkan bagaimana untuk melaksanakannya secara rekursif?

    promise: Fail hendaklah dibaca dahulu sebelum imej boleh dikembalikan, jadi pengumpul tak segerak hendaklah dilaksanakan kemudian. 单层文件的读取

    Kod khusus adalah seperti berikut:

    getFileFun

    Pelaksanaan
        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(&#39;./&#39;);
            return await Promise.all(imgPromiseArr);
         }
    
        module.exports = {
            getFileFun
        }
  • handleHtmlBaca fail html bagi

    di sini , dan gantikan.

test-read-img

Laksanakan
    const fs = require(&#39;fs&#39;).promises;
   const path = require(&#39;path&#39;);

   const createImgs = (images=[]) => {
       return images.map(i => {
           return `<div class=&#39;img-warp&#39;> 
              <div class=&#39;img-item&#39;>  <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=&#39;${i}&#39; / alt="Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek" > </div>
              <div class=&#39;img-path&#39;>文件路径 <span class=&#39;path&#39;>${i}</span></div>
            </div>`
       }).join(&#39;&#39;);
   }

   async function handleHtml(images=[]) {
       const template =   await fs.readFile(path.join(__dirname,&#39;template.html&#39;),&#39;utf-8&#39;)
       const targetHtml = template.replace(&#39;%--%&#39;,`
        ${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.

    pngcontent-type

  • Kesan
  const http = require(&#39;http&#39;);
const fs = require(&#39;fs&#39;).promises;
const path = require(&#39;path&#39;);
const open = require(&#39;open&#39;);

const createServer =(html) => {
  http.createServer( async (req,res) => {
      const  fileType = path.extname(req.url);
      let pathName = req.url;
      if(pathName === &#39;/favicon.ico&#39;) {
        return;
      }
      let type = &#39;&#39;
      if(fileType === &#39;.html&#39;) {
          type=`text/html`
      }
      if(fileType === &#39;.png&#39;) {
         type=&#39;image/png&#39;
      }
      if(pathName === &#39;/&#39;) {
          res.writeHead(200,{
              &#39;content-type&#39;:`text/html;charset=utf-8`,
              &#39;access-control-allow-origin&#39;:"*"
          })
            res.write(html);
            res.end();
            return
      }
      const data = await fs.readFile(&#39;./&#39; + pathName );
      res.writeHead(200,{
          &#39;content-type&#39;:`${type};charset=utf-8`,
          &#39;access-control-allow-origin&#39;:"*"
      })
      res.write(data);
      res.end();
      
  }).listen(3004,() => {
   console.log(&#39;project is run: http://localhost:3004/&#39;)
  open(&#39;http://localhost:3004/&#39;)
  });

 
}

module.exports = {
  createServer
}

Di atas ialah proses pelaksanaan dan anda boleh melihat bahawa penyemak imbas melaksanakan http ://localhost:3004/

, kesannya adalah seperti berikut:

npm run test

TerbitkanPembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek

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.allpemprosesan 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; jika

    disertakan 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!

Kenyataan
Artikel ini dikembalikan pada:掘金社区. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Beyond the Browser: JavaScript di dunia nyataBeyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

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.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

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

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

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: meneroka serba boleh bahasa webJavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AM

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.

Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanEvolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AM

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.

Demystifying JavaScript: Apa yang berlaku dan mengapa pentingDemystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AM

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.

Adakah Python atau JavaScript lebih baik?Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AM

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.

Bagaimana saya memasang javascript?Bagaimana saya memasang javascript?Apr 05, 2025 am 12:16 AM

JavaScript tidak memerlukan pemasangan kerana ia sudah dibina dalam pelayar moden. Anda hanya memerlukan editor teks dan penyemak imbas untuk memulakan. 1) Dalam persekitaran penyemak imbas, jalankan dengan memasukkan fail HTML melalui tag. 2) Dalam persekitaran Node.js, selepas memuat turun dan memasang node.js, jalankan fail JavaScript melalui baris arahan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

MinGW - GNU Minimalis untuk Windows

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.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Pelayar Peperiksaan Selamat

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.