欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue请求本地自己编写的json文件。

程序员文章站 2022-07-02 17:20:03
1.第一步,这是目录结构 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码: //vue配置请求本地json数据const express = require('express')const app = express()const appData = requ ......

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

vue请求本地自己编写的json文件。

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

vue请求本地自己编写的json文件。

代码:

//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)

vue请求本地自己编写的json文件。

代码:

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

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

vue请求本地自己编写的json文件。

代码:

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文件。