Vue.js中如何實作不使用資料庫的資料交互

隨著網路技術的進步和應用場景的不斷增加，前端技術也日益發展。近年來，前端框架已經成為了開發者必不可少的武器之一。 Vue.js 就是其中一個備受歡迎的開源 JavaScript 框架，Vue.js 是一個用於建立 Web 使用者介面的漸進式框架。它透過輕量級的資料綁定、組件化的架構以及提供豐富的 API 實現快速的開發。

但是，vue 在資料交互時使用的是 ajax 請求，以及後端資料庫來進行資料的交互，這種方式在開發時很常見。但是，有些小型專案並不需要使用資料庫來進行資料交互，例如只需要取得本地數據，這時就不需要使用資料庫。那麼，在 Vue.js 中如何實作不使用資料庫的資料互動呢？

1. 使用json 資料

json 資料是一種輕量級的資料交換格式，它的語法規則很簡單，資料結構清晰，適合於不需要使用複雜關係型資料庫的小型專案。在 vue 中使用 json 資料進行資料互動十分簡單，我們可以把 json 檔案放在專案的 public 資料夾下，然後透過 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. 使用 mock 數據

mock 數據是指模擬數據，也就是我們自己建構的數據，用來模擬真實的數據。它可以用來幫助前端開發者在沒有後端介面的情況下進行開發，由於資料量較小，所以 mock 資料一般都是放在前端專案的本地（一般放在 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 是web 存儲機制中的一種方式，它能夠在客戶端存儲一些簡單的key-value 數據，它的數據是以字符串的形式儲存的，所以在儲存物件和陣列時需要進行序列化和反序列化。在 Vue 中使用 localStorage 儲存資料也很簡單，我們可以在對資料進行增刪改查的同時，把資料同步到 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 資料、mock 資料和本地儲存都是不錯的選擇。當然，對於大型應用程式來說，使用後端資料庫進行資料互動仍然是首選的方案。本文主要介紹如何在 Vue.js 中實現不使用資料庫的資料交互，對 Vue 開發初學者來說有一定的參考價值。

以上是Vue.js中如何實作不使用資料庫的資料交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！