三、新增、修改、删除数据库数据

1，准备工作

drop table if exists book;

create table book (
  "id" bigint generated by default as identity primary key,
  "name" character varying,
  "price" numeric
);

INSERT INTO book ("name", "price") VALUES
  ('我与地坛', 29.00),
  ('失败者的春秋', 38.00),
  ('南北战争三百年', 35.00);

2，样例代码

<script setup>
// 引入Vue 3的响应式引用（ref）和生命周期钩子（onMounted）
import { ref, onMounted } from 'vue'
 
// 引入Supabase客户端实例
import { supabase } from './lib/supabaseClient'
 
// 创建一个响应式的引用（ref）用于存储书籍数据
const books = ref([])
 
// 查询书籍
async function getBooks() {
  // 使用Supabase实例的select方法从'book'表中获取所有数据
  const { data } = await supabase.from('book').select()
 
  // 将查询结果更新到books引用中
  books.value = data
}

// 新增一本书籍
async function addOneBook() {
  await supabase.from('book').insert({ name: `新书籍${getRandNum()}`, price: getRandNum()})
  await getBooks()
}

// 新增三本书籍
async function addThreeBooks() {
  await supabase.from('book').insert([
   { name: `新书籍${getRandNum()}`, price: getRandNum()},
   { name: `新书籍${getRandNum()}`, price: getRandNum()},
   { name: `新书籍${getRandNum()}`, price: getRandNum()}
  ])
  await getBooks()
}

// 更新书籍
async function updateBook() {
  // 更新最后一条数据
  if (books.value.length > 0) {
    const lastBook = books.value[books.value.length - 1];
    await supabase.from('book')
      .update({ name: `新书籍${getRandNum()}`, price: getRandNum()}).eq('id', lastBook.id)
    await getBooks()
  }
}

// 删除书籍
async function deleteBook() {
  // 删除最后一条数据
  if (books.value.length > 0) {
    const lastBook = books.value[books.value.length - 1];
    await supabase.from('book').delete().eq('id', lastBook.id)
    await getBooks()
  }
}

// 插入或更新书籍
async function upsertBook() {
  await supabase.from('book')
    .upsert({ id: 100, name: `新书籍${getRandNum()}`, price: getRandNum()})
  await getBooks()
}

// 生成一个介于10（包含）和 100（不包含）之间的随机整数
function getRandNum() {
  return Math.floor(Math.random() * 90) + 10;
}
 
// 在组件被挂载后（mounted）执行getBooks函数，获取并更新书籍数据
onMounted(() => {
  getBooks()
})
</script>
 
<template>
  <div>
    <button class="action-button" @click="addOneBook">新增一本书籍</button>
    <button class="action-button" @click="addThreeBooks">新增三本书籍</button>
    <button class="action-button" @click="updateBook">更新最后一本书</button>
    <button class="action-button" @click="deleteBook">删除最后一本书</button>
    <button class="action-button" @click="upsertBook">插入或更新书籍</button>
  </div>
  <!-- 展示书籍数据的无序列表 -->
  <ul class="book-list">
    <li v-for="book in books" :key="book.id">
      {{ book.name }} （编号:{{ book.id }}，价格:{{ book.price }}）
    </li>
  </ul>
</template>

<style scoped>
  .action-button {
    margin-right: 5px; /* 设置按钮之间的外边距 */
  }

  .book-list {
    margin-top: 20px; /* 设置书籍列表上方的外边距 */
    padding: 0; /* 移除列表的内边距 */
  }

  .book-list li {
    margin-bottom: 8px; /* 设置每本书之间的外边距 */
  }
</style>

3，运行测试

附：CORS policy 跨域问题解决