데이터베이스를 사용하지 않고 Vue.js에서 데이터 상호 작용을 구현하는 방법

인터넷 기술이 발전하고 적용 시나리오가 늘어나면서 프론트엔드 기술도 나날이 발전하고 있습니다. 최근 몇 년 동안 프론트엔드 프레임워크는 개발자에게 없어서는 안 될 무기 중 하나가 되었습니다. 인기 있는 오픈 소스 JavaScript 프레임워크 중 하나는 웹 사용자 인터페이스 구축을 위한 진보적인 프레임워크인 Vue.js입니다. 경량 데이터 바인딩, 구성 요소화된 아키텍처 및 풍부한 API를 통해 신속한 개발이 가능합니다.

그러나 vue는 데이터 상호 작용을 위해 ajax 요청과 백엔드 데이터베이스를 사용합니다. 이 방법은 개발 중에 매우 일반적입니다. 그러나 일부 소규모 프로젝트에서는 데이터 상호 작용을 위해 데이터베이스를 사용할 필요가 없습니다. 예를 들어 로컬 데이터만 얻으면 데이터베이스를 사용할 필요가 없습니다. 그렇다면 데이터베이스를 사용하지 않고 Vue.js에서 데이터 상호작용을 구현하는 방법은 무엇일까요?

1. json 데이터 사용

json 데이터는 구문 규칙이 매우 간단하고 데이터 구조가 명확하므로 복잡한 관계형 데이터베이스를 사용할 필요가 없는 소규모 프로젝트에 적합합니다. vue에서 데이터 상호 작용을 위해 json 데이터를 사용하는 것은 매우 간단합니다. json 파일을 프로젝트의 공용 폴더에 넣은 다음 axios 또는 fetch를 통해 데이터를 요청할 수 있습니다.

// 在 public 文件夹下新建一个 data.json 文件
{
  "data": [
    {
      "name": "小明",
      "age": 18
    },
    {
      "name": "小红",
      "age": 20
    }
  ]
}

<!-- 在 Vue 组件中使用 axios 获取 json 数据 -->
<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index">{{item.name}}-{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      dataList:[],
    }
  },
  created () {
    axios.get('/data.json')
      .then(res => {
        console.log(res.data)
        this.dataList = res.data.data
      })
      .catch(err => {
        console.log(err)
      })
  },
}
</script>

2. 모의 데이터 사용

모의 데이터란 실제 데이터를 시뮬레이션하는 데 사용되는 시뮬레이션 데이터, 즉 우리가 직접 구성한 데이터를 말합니다. 이는 프런트엔드 개발자가 백엔드 인터페이스 없이 개발하는 데 도움이 될 수 있습니다. 데이터 양이 적기 때문에 모의 데이터는 일반적으로 프런트엔드 프로젝트(보통 src/mock 디렉터리)에 로컬로 배치됩니다. Vue에 mock.js를 통합하는 것도 상대적으로 간단합니다. main.js에 mock.js를 도입한 다음 express를 사용하여 백엔드 인터페이스를 시뮬레이션할 수 있습니다.

// 安装 express 和 mockjs
npm i express mockjs -D

// 在 src/mock/index.js 中定义接口返回的数据
import Mock from 'mockjs'
let data = Mock.mock({
  "data|10-20": [
    {
      "id|+1": 1,
      "name": '@cname',
      "age|18-25": 18,
      "city": '@city',
      "address": '@county(true)',
      "img": "@image(50x50,@color)"
    }
  ]
})
Mock.mock('/api/getData', 'get', () => {
  return data
})

// 在 main.js 中引入 express 并注册中间件
import express from 'express'
const app = express()
const port = 3000
let apiRoutes = express.Router()
import './mock'
app.use('/api', apiRoutes)
app.listen(port, () => {
  console.log(`server running @${port}`)
})

// 在具体的组件中通过 axios 请求数据
<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index">{{item.name}}-{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      dataList:[],
    }
  },
  created () {
    axios.get('/api/getData')
      .then(res => {
        console.log(res.data)
        this.dataList = res.data.data
      })
      .catch(err => {
        console.log(err)
      })
  },
}
</script>

3. 로컬 저장소 사용

localStorage는 클라이언트에 간단한 키-값 데이터를 저장할 수 있는 방법이므로 개체 및 배열을 저장할 때 필요합니다. 직렬화 및 역직렬화됩니다. localStorage를 사용하여 Vue에 데이터를 저장하는 것도 매우 간단합니다. 데이터를 추가, 삭제, 수정 및 확인하면서 데이터를 localStorage에 동기화하면 다음에 페이지를 열 때 이전에 저장된 데이터를 localStorage에서 가져올 수 있습니다. .

<template>
  <div>
    <input type="text" v-model="inputVal">
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item,index) in dataList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      inputVal: '',
      dataList:[],
    }
  },
  methods: {
    add () {
      if (!this.inputVal) return
      this.dataList.push(this.inputVal)
      window.localStorage.setItem('dataList', JSON.stringify(this.dataList))
      this.inputVal = ''
    }
  },
  created () {
    let localData = window.localStorage.getItem('dataList')
    console.log(localData)
    if (localData !== null) {
      this.dataList = JSON.parse(localData)
    }
  },
}
</script>

요약하자면 소규모 프로젝트의 경우 json 데이터, 모의 데이터 및 로컬 저장소를 사용하는 것이 모두 좋은 선택입니다. 물론 대규모 애플리케이션의 경우 데이터 상호 작용을 위해 백엔드 데이터베이스를 사용하는 것이 여전히 선호되는 솔루션입니다. 본 글에서는 Vue 개발 초보자에게 참고할만한 가치가 있는 Vue.js에서 데이터베이스를 사용하지 않고 데이터 상호작용을 구현하는 방법을 주로 소개합니다.

위 내용은 데이터베이스를 사용하지 않고 Vue.js에서 데이터 상호 작용을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!