Vue 구성에서 로컬 json 데이터를 요청하는 방법

이번에는 vue 구성으로 로컬 json 데이터를 요청하는 방법을 보여드리겠습니다. 로컬 json 데이터를 요청하기 위한 vue 구성의 주의 사항은 무엇입니까?

빌드 폴더에서 webpack.dev.conf.js 파일을 찾아 const portfinder = require('portfinder') 뒤에

const express = require('express')
const app = express()
const appData = require('../data.json') // 加载本地json文件
const seller = appData.seller // 获取对应本地数据
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api',apiRoutes)

를 추가하세요. 그런 다음 devServer를 찾아 다음 코드를 삽입하세요:

 //然后找到devSeerver，在里面添加
  before (app) {
   app.get('/api/seller',(reg,res) => {
    res.json({
     errno: 0,
     data: seller
    }) // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
   }),
   app.get('/api/goods',(reg,res) => {
    res.json({
     errno: 0,
     data: goods
    }) // 接口返回json数据，上面配置的数据goods就复制给data请求后调用
   }),
   app.get('/api/ratings',(reg,res) => {
    res.json({
     errno: 0,
     data: ratings
    }) // 接口返回json数据，上面配置的数据ratings就复制给data请求后调用
   })
  }

<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
 data () {
  return {
   seller: {}
  }
 },
 created () {
  this.$http.get('/api/seller').then((response) => {
   response = response.body; // 获取到数据
   if (response.errno === ERR_OK) {
    this.seller = response.data;
    console.log(this.seller);
   }
  })
 },
 components: {
  'v-header': header
 }
}
</script>

마지막으로 프로젝트 재시작에 대한 액세스를 요청하여 npm run dev

에 액세스하세요. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !

추천 도서:

Pandas의 데이터프레임 쿼리 방법은 무엇인가요?

Python이 Baidu 음성 인식 API를 구현하는 방법에 대한 자세한 설명

위 내용은 Vue 구성에서 로컬 json 데이터를 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!