uniapp写增删改查

Uniapp 是一个跨平台的开发框架，支持使用 Vue.js 进行开发。在 Uniapp 中实现增删改查可以采用以下步骤：

1. 创建数据模型

首先需要定义数据模型，包括需要存储哪些数据，每个数据的类型等。

export default {
  id: '', // 唯一标识
  name: '', // 名称
  age: 0, // 年龄
  gender: '', // 性别
  phone: '' // 电话
}

2. 创建数据存储服务

在 uniapp 中可以使用本地存储或者后端服务来存储数据。这里以本地存储为例，创建一个 dataService.js 文件，用于进行数据的增删改查操作。

// 数据存储服务
export default {
  // 获取所有数据
  getAll() {
    const data = uni.getStorageSync('data') || []
    return data
  },

  // 新增一条数据
  add(data) {
    const dataList = this.getAll()
    dataList.push(data)
    uni.setStorageSync('data', dataList)
  },

  // 修改一条数据
  update(id, newData) {
    const dataList = this.getAll()
    const index = dataList.findIndex(item => item.id === id)
    if (index !== -1) {
      dataList.splice(index, 1, newData)
      uni.setStorageSync('data', dataList)
    }
  },

  // 删除一条数据
  remove(id) {
    const dataList = this.getAll()
    const index = dataList.findIndex(item => item.id === id)
    if (index !== -1) {
      dataList.splice(index, 1)
      uni.setStorageSync('data', dataList)
    }
  }
}

3. 创建页面

在页面中可以调用数据存储服务中的方法进行增删改查操作。

<template>
  <view>
    <button @click="add">新增</button>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
        <span>{{ item.gender }}</span>
        <span>{{ item.phone }}</span>
        <button @click="edit(item)">编辑</button>
        <button @click="remove(item.id)">删除</button>
      </li>
    </ul>
  </view>
</template>

<script>
import dataService from '@/services/dataService'

export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.dataList = dataService.getAll()
    },

    // 新增数据
    add() {
      const newData = { id: Date.now(), name: '新用户', age: 0, gender: '', phone: '' }
      dataService.add(newData)
      this.loadData()
    },

    // 编辑数据
    edit(data) {
      // 跳转到编辑页面
      uni.navigateTo({
        url: `/pages/edit?id=${data.id}`
      })
    },

    // 删除数据
    remove(id) {
      dataService.remove(id)
      this.loadData()
    }
  }
}
</script>

4. 创建编辑页面

在编辑页面中可以修改一条数据并保存。

<template>
  <view>
    <input v-model="name" placeholder="名称" />
    <input v-model.number="age" placeholder="年龄" />
    <input v-model="gender" placeholder="性别" />
    <input v-model="phone" placeholder="电话" />
    <button @click="save">保存</button>
  </view>
</template>

<script>
import dataService from '@/services/dataService'

export default {
  data() {
    return {
      id: '',
      name: '',
      age: 0,
      gender: '',
      phone: ''
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.id = this.$route.query.id
      const dataList = dataService.getAll()
      const data = dataList.find(item => item.id === this.id)
      if (data) {
        this.name = data.name
        this.age = data.age
        this.gender = data.gender
        this.phone = data.phone
      }
    },

    // 保存数据
    save() {
      const newData = { id: this.id, name: this.name, age: this.age, gender: this.gender, phone: this.phone }
      dataService.update(this.id, newData)
      uni.navigateBack()
    }
  }
}
</script>

以上就是在 uniapp 中实现增删改查的基本步骤，可以根据实际需求进行修改和扩展。