データベースを使用せずに Vue.js でデータ インタラクションを実装する方法

インターネット技術の進歩とアプリケーションシナリオの増加に伴い、フロントエンド技術も日々発展しています。近年、フロントエンドフレームワークは開発者にとって欠かせない武器の一つとなっています。人気のあるオープン ソース JavaScript フレームワークの 1 つは、Web ユーザー インターフェイスを構築するための進歩的なフレームワークである 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 へのモック.js の統合も比較的簡単で、main.js にモック.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 は、Web ストレージ メカニズムのメソッドです。クライアントに単純なキーと値のデータを保存できます。そのデータは文字列の形式です。の形式で保存されるため、オブジェクトと配列を保存する場合はシリアル化と逆シリアル化が必要です。 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 中国語 Web サイトの他の関連記事を参照してください。