请求本地文件夹中json文件的数据

Posted 2023-05-16

参考技术A 记录下请求本地文件夹public中的json文件的数据，记住一定是放在public文件夹的

然后启动服务，因为我是create-react-app创建的项目，所以直接yarn start或者npm run start
可以直接在网页中输入 localhost:3000/mock/data.json 然后数据就显示在网页中啦，如下图

这么模拟数据是因为数据后端已经设计好了，直接找后端拿到数据，而不用每次后端都开启服务才能取到数据
数据请求方式直接fetch就可以了 或者axios，我是觉得fetch直接用比较方便

vue配置 请求本地json数据

第一步：在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require(‘portfinder‘)后添加

//第一步
const express = require(‘express‘)
const app = express()
const appData = require(‘../test.json‘) // 加载本地json文件
const user=appData.user // 获取对应本地user数据
const login=appData.login;// 获取对应本地login数据
const notice=appData.notice;// 获取对应本地notice数据

然后找到devServer，插入以下代码：

before (app) {
app.get(‘/api/user‘,(reg,res) => {
res.json({
errno: 0,
data:user
}) // 接口返回json数据，上面配置的数据user就复制给data请求后调用

}),

app.post(‘/api/login‘,(reg,res) => {
res.json({
errno: 0,
data: login
}) // 接口返回json数据，上面配置的数据login就复制给data请求后调用
}),
app.get(‘/api/notice‘,(reg,res) => {
res.json({
errno: 0,
data:notice
}) // 接口返回json数据，上面配置的数据notice就复制给data请求后调用
})
}

 

以下是我的本地json数据结构

{
"user":[
{
"pageNum": "1",
"block_title": "1.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"1-50",
"id": "1"
},
{
"pageNum": "2",
"block_title": "2.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"51-100",
"id": "2"
},
{
"pageNum": "3",
"block_title": "3.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"101-150",
"id": "3"
},
{
"pageNum": "4",
"block_title": "4.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"151-200",
"id": "4"
},
{
"pageNum": "5",
"block_title": "5.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"201-250",
"id": "5"
},
{
"pageNum": "6",
"block_title": "6.下列物质中不属于外源性致热原的为（）",
"option": [
{
"item": "A.紧固件毒素"
},
{
"item": "B.方法梵蒂冈毒素"
},
{
"item": "C.方法梵蒂冈毒素"
},
{
"item": "D.方法梵蒂冈毒素"
}
],
"no":"251-300",
"id": "6"
}

],
"login": {
"username": "李易峰",
"surname": "lyf",
"sex": "男",
"QQ": "99999999991",
"tel": "6666666661",
"id": "1",
"password": "1234561"
},
"notice": {
"notice": [
{
"id": "1",
"title1": "2018年万国教育真题解析班已开课1"
},
{
"id": "2",
"title1": "2018年万国教育真题解析班已开课2"
},
{
"id": "3",
"title1": "2018年万国教育真题解析班已开课3"
}
],
"news": [
{
"id": "1",
"title1": "新闻万国教育真题解析班已开课1"
},
{
"id": "2",
"title1": "新闻万国教育真题解析班已开课2"
},
{
"id": "3",
"title1": "新闻万国教育真题解析班已开课3"
}
]

}
}

请求访问本地json数据：

const ERR_OK=0
export default{
data(){
return{
userinfo:[],
}
},
methods:{
info:function(){
this.$http.get(‘/api/notice‘).then((res)=>{
res=res.body; // 获取到数据
if (res.errno === ERR_OK) {
this.userinfo=res.data;
console.log(this.userinfo);
}
})
}

},

mounted(){
this.info();
}

}