Vue.js中如何实现不使用数据库的数据交互-前端问答-PHP中文网

Vue.js中如何实现不使用数据库的数据交互

PHPz

发布： 2023-04-13 10:46:09

原创

1227人浏览过

随着互联网技术的进步和应用场景的不断增加，前端技术也日益发展。近年来，前端框架已经成为了开发者必不可少的武器之一。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 中获取之前存储的数据。

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

查看详情

立即学习“前端免费学习笔记（深入）”；

<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中文网其它相关文章！