博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue请求本地自己编写的json文件。
阅读量:6648 次
发布时间:2019-06-25

本文共 935 字,大约阅读时间需要 3 分钟。

1.第一步,这是目录结构

2.接下来是build/webpack.dev.conf.js文件需要配置的内容

代码:

//vue配置请求本地json数据

const express = require('express')
const app = express()
const appData = require('../static/major_info.json')//加载本地json文件
const majorlist = appData.contents;//获取本地对应数据
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

代码:

before (app) {

  app.get('/api/majorlist',(req, res) => {
    res.json({
      erron:0,
      data: majorlist
    })//接口返回json数据,上面配置的数据majorlist就赋值给data请求后调用
  })
}

3.接下来就是vue文件的请求写法:

代码:

created(){

  let _this = this;
  this.$http.get("/api/majorlist").then(function(response){
    // console.log(response.data.data);
    let data = response.data.data;
    for(let i = 0; i < data.length; i++){
      if(this.majorIndex == data[i].type){
        this.dataList = data[i];
      }
    }
  })
  .catch(function(error){
    console.log("出错喽:"+error);
  });
}

 4.这是我的json文件数据格式

 

转载于:https://www.cnblogs.com/web-aqin/p/10768345.html

你可能感兴趣的文章
Java的新项目学成在线笔记-day1(七)
查看>>
160个CRACK_ME系列 第一弹
查看>>
什么是记录型数字压力表?被应用在哪些领域?
查看>>
零基础学习Python的4个方法
查看>>
Clouds
查看>>
好程序员带你认识HTML5中的WebSocket
查看>>
PDA是什么功能有哪些
查看>>
一文了解 SaCa DataViz 企业版和标准版的区别
查看>>
CentOS 5的KVM安装使用说明
查看>>
php warning: php startup: in unknown on line 0
查看>>
【CentOS 7.1】配置防火墙 iptables
查看>>
二十七、单张图片上传预览
查看>>
一例千万级pv高性能高并发网站架构
查看>>
Android平台通用安全问题分析及策略(一)
查看>>
Oracle面向对象的应用实例
查看>>
总结-计划
查看>>
POJ 2506 Tiling dp+大数 水题
查看>>
EasyCHM - 电子书制作软件
查看>>
电脑组装图文教程电子书
查看>>
U盘安全工具箱 V 1.0 修正版
查看>>