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文件数据格式

vue请求本地自己编写的json文件。的更多相关文章

  1. vue请求本地json数据

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

  2. VUE请求本地数据的配置json-server

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

  3. vue脚手架用axios请求本地数据

    首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...

  4. 从MongoDB里面取得json格式的数据,然后存为本地的json文件,然后再从json读取变为dict

    帮宣传下彩印网(www.caiyin.com) 有印刷,广告等等方面的需求就找这个网站吧,没错的. 天气预报在MongoDB中的天气预报的存储方式是: /* 1 */ { "_id" ...

  5. ios -本地存储和查看json数据

    1.代码创建json文件,并保存到本地   第一步.设置json文件的保存路径 NSString *filePath = [NSHomeDirectory() stringByAppendingStr ...

  6. jQuery访问json文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 从接口自动化测试框架设计到开发(二)操作json文件、重构json工具类

    用例模板里的请求数据多,看起来很乱,所以可以通过访问另外一个文件的方式获取请求数据 把请求数据都放在一个json文件中 取出login的内容: import json fp = open('G:/un ...

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

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

  9. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

随机推荐

  1. React—Native开发之原生模块向JavaScript发送事件

    首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript ...

  2. keras Lambda 层

    Lambda层 keras.layers.core.Lambda(function, output_shape=None, mask=None, arguments=None) 本函数用以对上一层的输 ...

  3. Android MVP Plugin,一键完成MVP结构代码编写

    推荐一个Gradle的学习系列,Gradle相关的知识一直很匮乏,难得发现一个不错的系列: http://www.cnblogs.com/davenkin/p/gradle-learning-1.ht ...

  4. Linux kernel pwn notes(内核漏洞利用学习)

    前言 对这段时间学习的 linux 内核中的一些简单的利用技术做一个记录,如有差错,请见谅. 相关的文件 https://gitee.com/hac425/kernel_ctf 相关引用已在文中进行了 ...

  5. 如何在Markdown文档中插入空格?

    简单说 在 Markdown 文档中,可以直接采用 HTML 标记插入空格(blank space),而且无需任何其他前缀或分隔符.具体如下所示: 插入一个空格 (non-breaking space ...

  6. LeetCode题解Transpose Matrix

    1.题目描述 2.题目描述 直接申请内存,转置即可. 3.代码 vector<vector<int>> transpose(vector<vector<int> ...

  7. linux 局域网探测工具nmap

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个, 一是探测一组主机是否在线: 其次是扫描主机端口,嗅探所提供的网络服务: 还可以推断主机所用的操 ...

  8. UML建模中简单消息、同步消息和异步消息

    两种消息在UML图中的表示方法如图: 1.同步方式 两个通信应用服务之间必须要进行同步,两个服务之间必须都是正常运行的.发送程序和接收程序都必须一直处于运行状态,并且随时做好相互通信的准备. 发送程序 ...

  9. 向服务器post或者get数据返回

    #region 向服务器端Get值返回 /// <summary> /// 向服务器端Get返回 /// </summary> ///<see cref="Au ...

  10. 全自动LTI部署OS

    全自动LTI部署OS:零.通过ADK制作WinPE(需包含有imagex.exe工具,用来捕获映像)一.使用WinPE中的imagex捕获映像(install.wim)二.使用MDT制作启动映像(bo ...