So implementieren Sie Dateninteraktion in Vue.js ohne Verwendung einer Datenbank

Mit der Weiterentwicklung der Internet-Technologie und der zunehmenden Anzahl von Anwendungsszenarien entwickelt sich auch die Front-End-Technologie von Tag zu Tag weiter. In den letzten Jahren haben sich Frontend-Frameworks zu einer unverzichtbaren Waffe für Entwickler entwickelt. Eines der beliebtesten Open-Source-JavaScript-Frameworks ist Vue.js, ein fortschrittliches Framework zum Erstellen von Web-Benutzeroberflächen. Es ermöglicht eine schnelle Entwicklung durch einfache Datenbindung, komponentenbasierte Architektur und umfangreiche APIs.

Vue verwendet jedoch Ajax-Anfragen und Back-End-Datenbanken für die Dateninteraktion. Diese Methode ist während der Entwicklung sehr verbreitet. Einige kleine Projekte benötigen jedoch keine Datenbank für die Dateninteraktion. Sie müssen beispielsweise nur lokale Daten abrufen und müssen dann keine Datenbank verwenden. Wie kann man also die Dateninteraktion in Vue.js implementieren, ohne eine Datenbank zu verwenden?

1. JSON-Daten verwenden

JSON-Daten sind ein einfaches Datenaustauschformat und die Datenstruktur ist klar. Es eignet sich für kleine Projekte, die keine komplexen relationalen Datenbanken erfordern. Es ist sehr einfach, JSON-Daten für die Dateninteraktion in Vue zu verwenden. Wir können die JSON-Datei im öffentlichen Ordner des Projekts ablegen und dann Datenanforderungen über Axios oder Fetch stellen.

// 在 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. Scheindaten verwenden

Scheindaten beziehen sich auf simulierte Daten, also die Daten, die wir selbst erstellen und die zur Simulation realer Daten verwendet werden. Es kann verwendet werden, um Front-End-Entwicklern bei der Entwicklung ohne Back-End-Schnittstellen zu helfen. Aufgrund der geringen Datenmenge werden Scheindaten im Allgemeinen lokal im Front-End-Projekt abgelegt (normalerweise im Verzeichnis src/mock). Die Integration von Mock.js in Vue ist ebenfalls relativ einfach. Wir können Mock.js in main.js einführen und dann Express verwenden, um die Backend-Schnittstelle zu simulieren.

// 安装 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. Lokalen Speicher verwenden

localStorage ist eine Methode des Webspeichers. Es kann einige einfache Schlüsselwertdaten in Form von Zeichenfolgen speichern, sodass Objekte und Arrays gespeichert werden müssen serialisiert und deserialisiert werden. Es ist auch sehr einfach, localStorage zum Speichern von Daten in Vue zu verwenden. Wir können die Daten beim Hinzufügen, Löschen, Ändern und Überprüfen der Daten mit localStorage synchronisieren, sodass die zuvor gespeicherten Daten beim nächsten Öffnen der Seite von localStorage abgerufen werden können .

<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>

Zusammenfassend lässt sich sagen, dass die Verwendung von JSON-Daten, Scheindaten und lokaler Speicherung für kleine Projekte eine gute Wahl ist. Bei großen Anwendungen ist die Verwendung einer Back-End-Datenbank für die Dateninteraktion natürlich immer noch die bevorzugte Lösung. In diesem Artikel wird hauptsächlich die Implementierung der Dateninteraktion ohne Verwendung einer Datenbank in Vue.js vorgestellt, was für Anfänger in der Vue-Entwicklung einen gewissen Referenzwert hat.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Dateninteraktion in Vue.js ohne Verwendung einer Datenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!