How to read data through json file in Vue2.5

This article gives you a detailed introduction to the method of Vue2.5 reading data through json files through example code. It is very good and has reference value. Friends who need it can refer to it

1. Preparation

1.1 webpack.dev.conf.js

Inconst portfinder = require('portfinder') # Add the following code below

##

const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件的路径
var leftMenu = appData.leftMenu //获取对应的本地数据
var 数据名称 = appData.选择项
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

Find devServer and add the code inside

before(app) {
 app.get('/api/leftmenu', (req, res) => {
  res.json({
   errno: 0,
   data: leftMenu
  })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
 }),
 app.get('/api/数据', (req, res) => {
  res.json({
   errno: 0,
   data: 数据（与上面数据名称对应）
  })
 })
}

2. Among the components used

created(){
  this.$http.get('api/leftmenu').then((response) => {
   console.log(response)
   this.leftMenu = response.body.data  //数据位置
  })
} 
data(){
  return{
    leftMenu:[];  
  }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to check the first one by default in the v-for loop checkbox through vue?

#How to implement value-passing and URL encoding conversion in JS forms?

How to use jQuery to implement the toggle method of sliding left and right?

The above is the detailed content of How to read data through json file in Vue2.5. For more information, please follow other related articles on the PHP Chinese website!