js读取本地json_vue读取本地json文件

js读取本地json_vue读取本地json文件data.json文件内容{"code":0,"msg":"请求成功","data":[{"name&am

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

第一步:准备本地JSON文件

F:\nodejs\data\test.json

{ 
   
    "code": 0,
    "msg": "请求成功",
    "data": [
        { 
   
            "name": "zhangsan",
            "age": 50
        },
        { 
   
            "name": "lisi",
            "age": 32
        },
        { 
   
            "name": "wangwu",
            "age": 17
        }
    ]
}

第二步:编写nodejs服务程序

F:\nodejs\express.js

var express = require('express'); //express框架模块
var path = require('path'); //系统路径模块
var fs = require('fs'); //文件模块
var bodyParser = require('body-parser'); //对post请求的请求体进行解析模块
var app = express();
app.use(bodyParser.urlencoded({ 
    extended: false })); //bodyParser.urlencoded 用来解析request中body的 urlencoded字符,只支持utf-8的编码的字符,也支持自动的解析gzip和 zlib。返回的对象是一个键值对,当extended为false的时候,键值对中的值就为'String'或'Array'形式,为true的时候,则可为任何数据类型。

//设置允许跨域请求
app.all('*', (req, res, next) => { 
   
    res.header('Access-Control-Allow-Origin', '*'); //访问控制允许来源:所有
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); //访问控制允许报头 X-Requested-With: xhr请求
    res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); //访问控制允许方法
    res.header('X-Powered-By', 'nodejs'); //自定义头信息,表示服务端用nodejs
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

//创建get接口
app.get('/api', (req, res) => { 
   
	
	//console.log(req.body); //获取请求参数
	
    var file = path.join(__dirname, 'data/test.json'); //文件路径,__dirname为当前运行js文件的目录
    //var file = 'f:\\nodejs\\data\\test.json'; //也可以用这种方式指定路径
	
	//读取json文件
    fs.readFile(file, 'utf-8', function(err, data) { 
   
        if (err) { 
   
            res.send('文件读取失败');
        } else { 
   
            res.send(data);
        }
    });
});

var hostName = '127.0.0.1'; //ip
var port = 8888; //端口
app.listen(port, hostName, () => { 
   

    console.log(`服务器运行在http://${ 
     hostName}:${ 
     port}`);

});

第三步: 测试请求接口数据

axios.get('http://127.0.0.1:8888/api')
  .then((response) => { 
   
    console.log(response);
  })
  .catch((error) => { 
   
    console.log(error);
  });
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/182797.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux amd显卡驱动画面撕裂,从此告别画面撕裂 AMD-FreeSync技术解析

    linux amd显卡驱动画面撕裂,从此告别画面撕裂 AMD-FreeSync技术解析说到”垂直同步”技术,相信很多玩家都知道是啥意思,它可以有效解决游戏中的画面撕裂问题,让画面更平滑。然而它也有一个致命伤:会限制显卡的性能输出,进而造成卡顿。至于具体缘由,还要从显示器的工作原理说起。●为什么会有撕裂?目前几乎所有显示器的画面都是一行一行扫描上去的,刷新率通常固定为60Hz,而显卡在渲染不同画面时的速度不一样,简单画面渲染的快,复杂画面则要慢一些,当显卡输出和显示器输出不同步,…

    2022年6月7日
    39
  • LRC格式转换

    LRC格式转换[code="java"]importjava.io.BufferedReader;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.IOException;importjava.io.InputStreamReader;importjava.util.Co…

    2025年8月20日
    3
  • discuz 二次开发文章[通俗易懂]

    discuz 二次开发文章[通俗易懂]参考:Discuz!X3.2二次开发基本流程:https://blog.csdn.net/qq_35637004/article/details/81078611discuz二次开发常用技术手册代码:https://blog.csdn.net/qq_37744937/article/details/80241712DiscuzX2二次开发之数据库操作DB类:…

    2022年5月19日
    65
  • thread中join和detach的区别

    thread中join和detach的区别C++中的thread对象通常来说表达了执行的线程(threadofexecution),这是一个OS或者平台的概念。当thread::join()函数被调用,调用它的线程会被block,直到线程的执行被完成。基本上,这是一种可以用例知道一个线程已结束的机制。当thread::join()返回时,OS的执行的线程已经完成,C++线程对象可以被销毁。当thread::detach()函数

    2022年5月1日
    79
  • armv6、armv7、armv7s及arm64

    armv6、armv7、armv7s及arm64指令集:指令集是存储在CPU内部,对CPU运算进行指导和优化的硬程序。拥有这些指令集,CPU就可以更高效地运行。Intel有x86,EM64T,MMX,SSE,SSE2,SSE3,SSSE3(SuperSSE3),SSE4.1,SSE4.2,AVX。AMD主要是x86,x86-64,3D-Now!指令集。Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基

    2022年6月15日
    41
  • 前端开发博客_程序员的个人博客

    前端开发博客_程序员的个人博客国内技术团队博客,大多集中在前端,下面是这些前端技术团队的博客。还有少量非前端(或者不只是前端)的技术博客,单独整理到另一个列表中去了(点击前往)【腾讯】腾讯前端Web团队IMWEBhttp://imweb.ioIMWEB团队创立之初是负责腾讯最核心的基础业务:QQ注册、QQ登录(ptlogin)、QQ资料和关系链拓展等基础服务。后转型进行应用开发,分别投入Q+、QQ圈

    2022年8月13日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号