随着互联网技术的进步和应用场景的不断增加，前端技术也日益发展。近年来，前端框架已经成为了开发者必不可少的武器之一。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 开发初学者来说有一定的参考价值。
