ZeXu_
侠客
侠客
  • 最后登录2020-10-29
  • 发帖数12
阅读:5393回复:0

[Vue]# 前后端分离 5:后端 读取文件

楼主#
更多 发布于:2020-07-16 11:37
# 前后端分离 5:后端 读取文件


> Author: ZeXu  


> Soft:Webstrom || PostMan  
> 运行环境:node.js > express
>
> 前期准备:
> 1. __dirname
> 2. path || path.join
> 3. fs || fs.readFile
> 4. response.end() || response.json()
> 5. 以上不分先后


> 在 '前后端分离 4:前端 GET 传参' 中有写到 前端 向 后端 传参的具体过程,那么当前端将参数或没有参数的请求发给我们后端的时候后,我们如何将前端需要的数据从后端服务器中获取到呢。
#
> 比如一份 json 文件  
>
> news.json:这份文件在我新创建的文件夹 company 下面  
> myapp > company > news.json


    ``` json
    // # news.json
        { "newsData": [
            {
                "title": "2019-2020年度互联网产业生态创新优秀成果揭晓:知识视觉获“2019-2020年度互联网最佳AI应用”殊荣",
                "introduction": "6月29日,由赛迪网联合《互联网经济》杂志发起的2019-2020年度互联网产业生态创新优秀成果正式揭晓",
                "url": "http://news.163.com/20/0630/17/FGCSDIQH00019OH3.html",
                "year": "2020",
                "time": "2020.06.29",
                "color": "purple"
                }
            ]
        }
    ```


>
> company.js:myapp > routes > company.js


    ``` javascript
        // # company.js
        const express = require('express');
        const company = express.Router();
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
        fs.readFile((__dirname, '../company/news.json'), 'utf-8', (err, data) => {
                console.log('err:', err);
                console.log('data:', data);
                res.end(data)
            })
            // res.json(data)
        });


        module.exports = company;
    ```


#### 验证接口
> PostMan


    http://192.168.XXX.XXX:8000/company/news
    
    postman 结果区域 并没有任何反应
    查看 node 后台,因为写的时候使用了 console.log
    
    err: {
        [Error: ENOENT: no such file or directory, open 'D:\ht\company\news.json']
        errno: -4058,
        code: 'ENOENT',
        syscall: 'open',
        path: 'D:\\ht\\company\\news.json'
    }
    data: undefined
    GET /company/news 200 6.121 ms - -
    
发现访问路径是正确的,但是为什么没有正确的访问到文件呢,原因在于没有引入 path:


    ``` javascript
        // # company.js
        const express = require('express');
        const company = express.Router();
        
        const path = require('path') ;
        
        const fs = require('fs');
        
        company.get('/news', (req, res, next) => {
        fs.readFile(path.join(__dirname, '../company/news.json'), 'utf-8', (err, data) => {
                console.log('err:', err);
                console.log('data:', data);
                res.end(data)
            })
            res.json(data)
        });


        module.exports = company;
    ```


# 重启一次 nodejs,让刚才修改的代码生效


那么现在,我们再一次使用 postman 来验证一次,可以看到


    { "newsData": [
        {
            "title": "2019-2020年度互联网产业生态创新优秀成果揭晓:知识视觉获“2019-2020年度互联网最佳AI应用”殊荣",
            "introduction": "6月29日,由赛迪网联合《互联网经济》杂志发起的2019-2020年度互联网产业生态创新优秀成果正式揭晓",
            "url": "http://news.163.com/20/0630/17/FGCSDIQH00019OH3.html",
            "year": "2020",
            "time": "2020.06.29",
            "color": "purple"
            }
        ]
    }
    
#### 补充


##### response.end()


在上面的 company.js 中我们有用到


    res.end(data)
    
其作用是什么呢!


> res.end() 方法是用来结束请求的,否则前端会一直处于等待状态
>
> res.end() 方法也可以用来向前端返回数据


#


##### response.json()


将数据以JSON的形式输出返给前端,以这样的形式传给前端,前端接收到的是JSON字符串,记得跟前端说一下,让他拿到的时候别忘了转回JSON对象


    res.json(data)
游客


返回顶部

公众号

公众号