Comment implémenter l'interaction de données dans Vue.js sans utiliser de base de données

Avec les progrès de la technologie Internet et le nombre croissant de scénarios d'application, la technologie front-end se développe également de jour en jour. Ces dernières années, les frameworks front-end sont devenus l’une des armes indispensables aux développeurs. L'un des frameworks JavaScript open source les plus populaires est Vue.js, un framework progressif permettant de créer des interfaces utilisateur Web. Il permet un développement rapide grâce à une liaison de données légère, une architecture composée de composants et des API riches.

Cependant, vue utilise des requêtes ajax et des bases de données back-end pour l'interaction des données. Cette méthode est très courante lors du développement. Cependant, certains petits projets n'ont pas besoin d'utiliser une base de données pour interagir avec les données. Par exemple, ils n'ont besoin que d'obtenir des données locales, et il n'est alors pas nécessaire d'utiliser une base de données. Alors, comment implémenter l’interaction des données dans Vue.js sans utiliser de base de données ?

1. Utiliser des données json

json data est un format d'échange de données léger. Ses règles de syntaxe sont très simples et la structure des données est claire. Elle convient aux petits projets qui ne nécessitent pas l'utilisation de bases de données relationnelles complexes. Il est très simple d'utiliser les données json pour l'interaction des données dans vue. Nous pouvons placer le fichier json dans le dossier public du projet, puis effectuer des requêtes de données via axios ou récupérer.

// 在 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. Utiliser des données fictives

Les données simulées font référence à des données simulées, qui sont les données que nous construisons nous-mêmes, utilisées pour simuler des données réelles. Il peut être utilisé pour aider les développeurs front-end à développer sans interfaces back-end. En raison de la petite quantité de données, les données fictives sont généralement placées localement dans le projet front-end (généralement placées dans le répertoire src/mock). L'intégration de mock.js dans Vue est également relativement simple. Nous pouvons introduire mock.js dans main.js puis utiliser express pour simuler l'interface backend.

// 安装 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. Utiliser le stockage local

localStorage est une méthode de mécanisme de stockage Web. Il peut stocker des données clé-valeur simples sur le client. Ses données sont stockées sous forme de chaînes, donc lors du stockage d'objets et de tableaux. être sérialisé et désérialisé. Il est également très simple d'utiliser localStorage pour stocker des données dans Vue. Nous pouvons synchroniser les données avec localStorage tout en ajoutant, supprimant, modifiant et vérifiant les données, afin que les données précédemment stockées puissent être obtenues à partir de localStorage lors de la prochaine ouverture de la page. .

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

En résumé, pour les petits projets, l'utilisation de données json, de données fictives et de stockage local sont tous de bons choix. Bien entendu, pour les applications volumineuses, l’utilisation d’une base de données principale pour l’interaction des données reste la solution privilégiée. Cet article présente principalement comment implémenter l'interaction de données sans utiliser de base de données dans Vue.js, qui a une certaine valeur de référence pour les débutants dans le développement de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!