Rumah > hujung hadapan web > tutorial js > Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek

Pembelajaran praktikal nod: Pratonton penyemak imbas semua gambar projek

青灯夜游
Lepaskan: 2023-01-06 21:00:21
ke hadapan
2658 orang telah melayarinya

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"
    },
Salin selepas log masuk
    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')
    Salin selepas log masuk
  • 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"
     },
    Salin selepas log masuk

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"
 },
Salin selepas log masuk
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();
Salin selepas log masuk
: 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
        }
    Salin selepas log masuk
  • 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=&#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
   }
Salin selepas log masuk
  • 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
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan