第一步:在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();
}

}

vue配置 请求本地json数据的更多相关文章

  1. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  2. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  3. vue开发请求本地模拟数据的配置方法(转)

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  5. vue+axios访问本地json数据踩坑点

    当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地的json数据. 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请 ...

  6. vue请求本地json数据

    1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...

  7. 如何在vue中请求本地json文件

    1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...

  8. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  9. vue中请求本地的json数据

    为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...

随机推荐

  1. java根据#号截取字符串,使用Pattern的方法

    public class Regex1 { public static void main(String[] args) { String s = "神秘的海洋出现了一只#话题#海怪阿拉斯加 ...

  2. 生成不同尺寸dimen的xml文件以及文件夹

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  3. websocket session共享

    单机运行 用户a通过服务器进入房间room,用户b也通过房间进入room,用户之间是通过session来通话的,所以session直接存储在集合中就可以了. 因为session存储在一台服务器的集合中 ...

  4. iptables介绍

    iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables. iptables的结构:iptables-->Tables-->Chai ...

  5. Class的 getSuperclass与getGenericSuperclass区别

    一.getSuperclass   返回直接继承的父类(由于编译擦除,没有显示泛型参数)  Class<? super T> getSuperclass()           返回表示此 ...

  6. js缓存问题的解决

  7. 微信小程序 画布drawImage实现图片截取

    大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...

  8. clickhouse在Linux上的安装部署

    $ sudo apt-get install clustershell #输入你的管理员密码 $ cd /etc/clustershell $ sudo gedit groups #在文件中添加如下内 ...

  9. Big Txt File(一)

    对于当今的数据集来说,动不动就上G的大小,市面的软件大多不支持,所以需要自己写一个. 常见的txt文本行形式存储的时候也不过是行数多些而已,可以考虑只观测部分行的方式,基于这个思路可以搞一个大数据的浏 ...

  10. dede织梦系统接入熊掌号推送api,完整详细教程

    第一步:     根据熊掌号要求完成校验页面,官方文档很详细,照着弄就行了 第二步: 开始后台改造 1.进入后台文件夹dede(自己实际的文件夹),然后进入templets目录,打开body_inde ...