[Vue]# 前后端分离 6：后端 读取某目录下的多个文件

# 前后端分离 6：后端 读取某目录下的多个文件


> Author： ZeXu  


> Soft：WebStrom || PostMan  
> 运行环境：node.js > express
>
> 前期准备：
>   1.  fs.readdir('绝对路径', 'utf-8', (err, files) => {})
>   2.  读取多文件的时候，总是会遇到==异步==和==同步==的问题，这篇文章或许能帮到你（for循环+异步操作）：[node.js在遇到“循环+异步”时的注意事项](https://www.cnblogs.com/lanker/p/9337489.html)  
>   3.  yaml 配置文件（不是前端框架 yaml）




> 在 '# 前后端分离 5：后端 读取文件'中对谋一份文件进行的了读取，可是，更多的时候是读取多个文件信息,一份文件一个接口写起来很麻烦也很奢侈。


#### fs.readdir(path, encoding, callback)
> 根据 path 获取目录下的文件信息


现在我的目录是这样的


    myapp
    |--bin
    |--company
    |--|--news
    |--|--|--news.json
    |--|--|--news.yaml
    |--node_modules
    |--public
    |--routes
    |--|--company.js
    |--|--product.js
    |--views


### 目标：获取 news.json & news.yaml 的文件信息


怎么找到 目标文件呢：


> Step 1：fs.readdir()


    ``` javascript
        // # company.js
        const express = require('express');
        const company = express.Router();
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
            fs.readdir('D:/ht/myapp/company/news', 'utf-8', (err, files) => {
                console.log('files：', files)
            })
            res.end() // # 结束请求,不然后待会儿 postman 测试接口 接口会一直请求
        }
        module.exports = company;
    ```
    
> Step 2. PostMan
    
        http://192.168.XXX.XXX:8000/company/news
        
        查看 node 控制台
        
        files： [ 'news.json', 'news.yaml' ]
        
现在我们找到了我们的目标文件，那么接下来要做的事情就是获取文件里存放的信息，可是现在我们需要获取两份文件的信息，如果参照 '# 前后端分离 5：后端 读取文件' 的做法，怎么将得到两份文件信息返给前端呢，是吧，得好好想想


> 循环，赋值，是的


> Step 3. forEach() || fs.readFile()


    ``` javascript
        // # company.js
        const express = require('express');
        const company = express.Router();
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
            fs.readdir('D:/ht/myapp/company/news', 'utf-8', (err, files) => {
                files.forEach(item => {
                    fs.readFile(path.join(__dirname, item), 'utf-8', (err, data) => {
                        console.log('err：', err)
                        console.log('data：', data)
                    })
                })
            })
            res.end() // # 结束请求,不然后待会儿 postman 测试接口 接口会一直请求
        }
        module.exports = company;
    ```
##### 记得重启 node.js 服务器


> Step 4. PostMan


    http://192.168.XXX.XXX:8000/company/news
        
    查看 node 控制台
        
    err： { [Error: ENOENT: no such file or directory, open 'D:\ht\myapp\routes\news.json']
      errno: -4058,
      code: 'ENOENT',
      syscall: 'open',
      path: 'D:\\ht\\myapp\\routes\\news.json' }
    data： undefined
    err： { [Error: ENOENT: no such file or directory, open 'D:\ht\myapp\routes\news.yaml']
      errno: -4058,
      code: 'ENOENT',
      syscall: 'open',
      path: 'D:\\ht\\myapp\\routes\\news.yaml' }
    data： undefined
    
此时发现路径是不正确的，在 '# 前后端分离 5：后端 读取文件' 中 item 是长这个样子的：


###### '../company/news.json'


现在我们的 item 是这个这样子的：


###### 'news.json'


因此我们需要构建一个路径出来



    $ npm install --save js-yaml


    // # item = '../company/news/' + item;
    
    ``` javascript
        // # company.js
        const express = require('express');
        const company = express.Router();
        
        const yaml = require('js-yaml')
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
            fs.readdir('D:/ht/myapp/company/news', 'utf-8', (err, files) => {
                files.forEach(item => {
                    item = '../company/news/' + item;
                    fs.readFile(path.join(__dirname, item), 'utf-8', (err, data) => {
                        console.log('err：', err)
                        console.log('data：', data)
                    })
                })
            })
            res.end() // # 结束请求,不然后待会儿 postman 测试接口 接口会一直请求
        }
        module.exports = company;
    ```

##### 记得重启 node.js 服务器


我们再一次使用 postman 测试接口


    err： null
    data： title: yamlXXXXX
    
    err： null
    data： [
      {
        "title": "2019-2020年度互联网产业生态创新优秀成果揭晓：知识视觉获“2019-2020年度互联网最佳AI应用”殊荣",
        "introduction": "6月29日，由赛迪网联合《互联网经济》杂志发起的2019-2020年度互联网产业生态创新优秀成果正式揭晓，本次创新优秀成果涉及的国内外企业、服务商、产品及解决方案，体现了2019-2020年度在工业互联网、智能制造、数字化转型、工业电商领域的一系列亮点，在标准、关键技术、工业互联网双跨平台、特定领域特定行业平台、工业技术软件化、智能制造、数字孪生等领域的最新进展与成就。成都知识视觉获得“年度互联网最佳AI应用”荣誉称号，为行业树立了新标杆！",
        "url": "http://news.163.com/20/0630/17/FGCSDIQH00019OH3.html",
        "year": "2020",
        "time": "2020.06.29",
        "color": "purple"
      }
    ]
现在，我们拿到了，需要的文件数据了


> Step 6. 接下来就是怎么把数据传给前端了


在这个环节我被卡住了，因为我总是获取到一个信息，第二个信息总是获取不到，起初以为是发生了 ==error== ，打印后发现第二个文件的信息是存在的，后来我不用 forEach 里的 index 作为 判定标准，以 容纳 数据的 变量长度为标准，就拿到了我需要的数据。


    ``` javascript
        // # company
        const express = require('express');
        const company = express.Router();
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
            fs.readdir('D:/ht/myapp/company/news', 'utf-8', (err, files) => {
                let result = [];


                let getValue = (err, data, file) => {
                    result.push({file: file, err: err, data: data})
                    if (result.length === files.length) {
                        res.json({data: result})
                    }
                };
                
                files.forEach(item => {
                    let file = item;
                    item = '../company/news/' + item;
                    fs.readFile(path.join(__dirname, item), 'utf-8', (err, data) => {

                        if (file.endsWith('yaml')) {
                            data = yaml.load(data)
                        }                        getValue(err, data, file)
                    })
                })
            })
            res.end() // # 结束请求,不然后待会儿 postman 测试接口 接口会一直请求
        }
        module.exports = company;
    ```
##### 记得重启 node.js 服务器


> Step 7. PostMan


    http://192.168.XXX.XXX:8000/company/news
    
    postman有数据的出现
    
    看前端是否接收到我们返回的数据了，
    
    具体的情况看前端出什么问题了
    
    到这一步时，前端是成功拿到了我返回的数据的