vue2 纯前端修改本地json文件数据

在纯前端环境下，Vue 2 是无法直接修改本地 JSON 文件的，因为浏览器的安全机制限制了对本地文件系统的访问和修改。但是，你可以通过以下几种方式来模拟修改本地 JSON 文件的效果：

1. 使用浏览器的本地存储（localStorage 或 sessionStorage）：将 JSON 文件的内容读取到变量中，然后在前端修改该变量，并将修改后的内容保存到本地存储中。这样，在下次加载页面时，你可以从本地存储中读取数据并更新页面。

2. 使用浏览器的 IndexedDB：IndexedDB 是一个浏览器内置的数据库，可以在客户端存储大量结构化数据。你可以将 JSON 数据存储到 IndexedDB 中，然后在前端修改数据，并将修改后的数据保存回 IndexedDB 中。

3. 使用浏览器的 File API：File API 允许你通过文件选择器选择本地 JSON 文件，并将其读取到内存中。然后，在前端修改数据，并将修改后的数据导出为新的 JSON 文件供下载或保存到服务器。

请注意，以上方法都是在前端模拟修改本地 JSON 文件的效果，并不是直接对 JSON 文件进行实际的修改。如果需要真正修改本地 JSON 文件，你可能需要在后端（例如使用 Node.js）实现相应的接口来处理文件读取和更新操作。

希望对你有所帮助！如有其他问题，请随时提问。

相关问题

vue+vuex+vuerouter+element+axios请求本地json文件实现增删改查

好的，下面是示例代码：

1. 在 src 目录下创建一个名为 data 的文件夹，在该文件夹内创建一个名为 data.json 的文件，用于存放数据。

2. 在 main.js 中引入相关库：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.prototype.$axios = axios
Vue.config.productionTip = false

Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(ElementUI)

3. 在 store.js 中定义 Vuex 的状态管理：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: [] // 存放数据的数组
  },
  mutations: {
    setData(state, data) {
      state.data = data
    },
    addData(state, newData) {
      state.data.push(newData)
    },
    deleteData(state, id) {
      const index = state.data.findIndex(item => item.id === id)
      state.data.splice(index, 1)
    },
    updateData(state, newData) {
      const index = state.data.findIndex(item => item.id === newData.id)
      state.data.splice(index, 1, newData)
    }
  },
  actions: {
    async fetchData({ commit }) {
      const response = await axios.get('/data/data.json')
      commit('setData', response.data)
    },
    addData({ commit }, newData) {
      commit('addData', newData)
    },
    deleteData({ commit }, id) {
      commit('deleteData', id)
    },
    updateData({ commit }, newData) {
      commit('updateData', newData)
    }
  }
})

export default store

4. 在 router.js 中定义路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Data from './views/Data.vue'
import AddData from './views/AddData.vue'
import EditData from './views/EditData.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/data',
    name: 'data',
    component: Data
  },
  {
    path: '/data/add',
    name: 'addData',
    component: AddData
  },
  {
    path: '/data/edit/:id',
    name: 'editData',
    component: EditData
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5. 在 App.vue 中使用 ElementUI 组件：

<template>
  <div id="app">
    <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/data">数据</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    activeIndex() {
      return this.$route.path
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(index)
    }
  }
}
</script>

6. 在 Data.vue 中显示数据列表，并实现删除操作：

<template>
  <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleAdd">添加</el-button>
  </div>
</template>

<script>
export default {
  name: 'data',
  computed: {
    data() {
      return this.$store.state.data
    }
  },
  methods: {
    handleEdit(row) {
      this.$router.push(`/data/edit/${row.id}`)
    },
    handleDelete(id) {
      this.$confirm('确定删除该数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('deleteData', id)
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }).catch(() => {})
    },
    handleAdd() {
      this.$router.push('/data/add')
    }
  },
  created() {
    this.$store.dispatch('fetchData')
  }
}
</script>

7. 在 AddData.vue 中实现添加操作：

<template>
  <div>
    <el-form :model="formData" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'addData',
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    handleAdd() {
      const newData = { ...this.formData, id: Date.now() }
      this.$store.dispatch('addData', newData)
      this.$message({
        type: 'success',
        message: '添加成功！'
      })
      this.$router.push('/data')
    }
  }
}
</script>

8. 在 EditData.vue 中实现编辑操作：

<template>
  <div>
    <el-form :model="formData" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleUpdate">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'editData',
  data() {
    return {
      formData: {
        id: '',
        name: '',
        age: ''
      }
    }
  },
  methods: {
    handleUpdate() {
      this.$store.dispatch('updateData', this.formData)
      this.$message({
        type: 'success',
        message: '更新成功！'
      })
      this.$router.push('/data')
    }
  },
  created() {
    const id = this.$route.params.id
    const data = this.$store.state.data.find(item => item.id === Number(id))
    this.formData = data
  }
}
</script>

以上就是一个简单的 Vue 前端实现增删改查的示例。需要注意的是，以上代码仅供参考，实际应用中需要根据具体需求进行修改。

vue3药品库存管理系统json-server

Vue 3 药品库存管理系统结合了 Vue.js 的前端框架和 JSON-Server 作为后端数据模拟服务。JSON-Server是一个快速创建 RESTful API 的工具，它允许你在本地快速启动一个简单的服务器，返回预定义的 JSON 数据，非常适合在开发环境中进行数据模拟。

当你在构建 Vue 3 库时，可能会这样配置：

1. 首先安装 JSON-Server 和 Vue CLI（如果还没有的话）：

npm install json-server vue@next vite --save-dev

2. 创建一个 `data.json` 文件，用于定义药品库存的数据模型，比如：

{
  "inventory": [
    {
      "id": 1,
      "name": "药品A",
      "quantity": 100,
      "category": "处方药"
    },
    {
      "id": 2,
      "name": "药品B",
      "quantity": 50,
      "category": "非处方药"
    }
  ]
}

3. 使用 JSON-Server 运行本地服务器：

json-server --watch data.json

4. 在 Vue 项目中，使用 `axios` 或者 `vite-plugin-json-server` 来访问这些模拟的API获取或修改药品库存数据。

Vue 3 的药品库存管理系统可能会包含组件如库存列表、库存详情、添加/删除库存等功能。相关问题可能包括：