成都网站建设设计

将想法与焦点和您一起共享

Node怎么实现浏览器预览项目所有图片

本文小编为大家详细介绍“Node怎么实现浏览器预览项目所有图片”,内容详细,步骤清晰,细节处理妥当,希望这篇“Node怎么实现浏览器预览项目所有图片”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

10年积累的成都做网站、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有都昌免费网站建设让你可以放心的选择与我们合作。

在前端实际项目开发中,会有这样一种场景。每次引入新的图片,并不知道这个资源是否被引用过,所以会点开存放图片的资源一个个去看。实际问题是:

  • 1.图片并不是放到一个目录下的,可能存在任何的地方,不好查找

  • 2.费时间,费力

  • 3.可能会重复引入图片资源

如果有个能力,将项目图片资源罗列到一起查看,并方便看到引入路径的话,就会大大节约开发的体力活。

需求分析

  • 可以集成到任何前端项目中,那就要求是个npm包

  • 读取文件,分析哪些是图片,将图片资源通过img标签写入到html文件中

  • 创建一个服务器,将html渲染出来

这就需要借助Node来实现,需要用到的 fs path http 模块。

实现

1 实现可发布npm包

  • 创建一个项目 npm init

    包名字是  test-read-img

  • 在package.json 中加入如下代码

    "bin": {
      "readimg": "./index.js"
    },

  • 在入口文件index.js 中加入测试代码

    含义是这个文件是可执行的node文件

      #!/usr/bin/env node
     
     console.log('111')

  • 将当前模块链接到全局node_modules模块内,方便调试

    执行 npm link

    执行 readimg

    就看到输出111 了

    到此就实现了通过命令使用npm包的使用了,当项目安装了这个包,并配置执行命令,就可以在别的项目执行设计的npm包了,后面就实现这个

      "scripts": {
      "test": "readimg"
    },

2 集成到别的项目

  • 创建一个测试项目 ,执行 npm init

  • 将测试包集成到当前项目, 执行 npm link test-read-img

  • 配置执行命令

  "scripts": {  
   "test": "readimg"
 },

执行npm run test

就能看到当前项目执行了读取文件的包的代码了。 现在只输出了 111距离读取文件还很远,下面来实现读取文件

3 读取文件

  • test-read-img 项目中,声明一个执行函数,并执行.

  #!/usr/bin/env node
  const init = async () => {
      const readFiles = await getFileFun();
      const html =  await handleHtml(readFiles);
      createServer(html);
  }

  init();

这里解释一下 ,各函数作用

getFileFun: 读取项目文件,并将读取的图片文件路径返回,这里不需要图片资源,后面解释为什么。

handleHtml: 读取模版html文件, 将图片资源通过 img 承载 生成新的html文件。

createServer : 将生成的html ,放到服务器下去渲染出来。

主流程就是这样。

  • 实现getFileFun 功能

    分析一下这个文件具体要做什么

    循环读取文件,直到将所有文件查找完,将图片资源过滤出来,读取文件要异步执行,如何知道何时读取完文件呢,这里用promise实现,这里仅仅实现了单层文件的读取 ,因为发布到公司内部的npm,请见谅。 聪明的你这里想想如何递归实现呢?

    getFileFun: 应该先读取完文件,才能将图片返回,所以异步收集器应该在后面执行。

    具体代码如下:

        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       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
       }

  • 实现 handleHtml

这里读取 test-read-img 的html文件,并替换。

    const fs = require('fs').promises;
   const path = require('path');

   const createImgs = (images=[]) => {
       return images.map(i => {
           return ` 
                 
              文件路径 ${i}
            
`        }).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    }

  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
}

效果

以上就是实现过程,执行一下 npm run test就可以看到浏览器执行在http://localhost:3004/, 效果如下:

Node怎么实现浏览器预览项目所有图片

发布

npm login

npm publish

思考

读到这里,这篇“Node怎么实现浏览器预览项目所有图片”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。


分享文章:Node怎么实现浏览器预览项目所有图片
网页网址:http://chengdu.cdxwcx.cn/article/pissdo.html

其他资讯