vue3直接操作微信小程序云开发数据库，web网页对云数据库进行增删改查

我们开发好小程序以后，有时候需要编写一个管理后台网页对数据库进行管理，之前我们只能借助云开发自带的cms网页，但是cms网页设计的比较丑，工作量和代码量也不够，所以我们今天就来带大家实现用vue3编写管理后台直接管理云开发数据库

一，准备工作

自行下载vscode，配置nodejs，然后自己随便开发一个vue3网页项目。接下来我们就来教大家如何使用vue3网页管理云开发数据库

1，下载云开发依赖

我们使用npm安装对应的依赖 npm install @cloudbase/js-sdk\@beta --save

然后在需要操作云开发数据库的页面引入依赖 import cloudbase from '@cloudbase/js-sdk'

2，记得改表权限

我们要用vue3操作的数据表，记得在云开发控制台把表权限改为自定义规则，读写都为true

二，vue3直接操作数据库

1，查询数据

我这里以一个最简单的查询列表为例，好比我们的商品表如下

然后我们在vue3页面里，先做一个简单的列表请求

import cloudbase from '@cloudbase/js-sdk'
// 引入 SDK
const app = cloudbase.init({
  env: "zxcv4gle4hn500ec0c83", // 替换为你的云开发环境 ID
  clientId: "zxcv4gle4hn500ec0c83", // 替换为你的云开发环境 ID
});
const auth = app.auth({
  persistence: "local",
});
await auth.signInAnonymously(); // 或者使用其他登录方式

const db = app.database();

db.collection('test').get().then((res) => {
  console.log('查询到的商品数据-----', res.data);
});

把上面代码放入vue页面里，然后运行vue项目，就可以看到我们在浏览器里顺利的请求到了商品数据，然后我们再继续演示对数据库的增删改查

2，添加数据

我们既然可以在vue3里查询到数据，当然也可以添加数据到数据库

<script setup>
import {onMounted } from 'vue'
// 引入 SDK
import cloudbase from '@cloudbase/js-sdk'
const app = cloudbase.init({
    env: "zxcv4gle4hn500ec0c83", // 替换为你的云开发环境 ID
    clientId: "zxcv4gle4hn500ec0c83", // 替换为你的云开发环境 ID
});
const auth = app.auth({
    persistence: "local",
});
// 组件挂载完成后执行
onMounted(async () => {
    // 登录
    await auth.signInAnonymously(); // 或者使用其他登录方式

    // 获取数据库实例
    const db = app.database();
    // 添加数据到数据库
    db.collection('test').add({
        name: '商品1',
        price: 100,
        count: 10
    }).then((res) => {
        console.log('添加商品成功', res);
    })
})

</script>

可以看到添加数据成功

3，删除数据

好比我想把商品名为苹果的都删除了

<template>
    <div>
        <el-button type="danger" @click="deleteApple">删除苹果商品</el-button>
    </div>
</template>

<script setup>
import {onMounted } from 'vue'
// 引入 SDK
import cloudbase from '@cloudbase/js-sdk'
const app = cloudbase.init({
    env: "zxcv-4gle4hn500ec0c83", // 替换为你的云开发环境 ID
    clientId: "zxcv-4gle4hn500ec0c83", // 替换为你的云开发环境 ID
});
const auth = app.auth({
    persistence: "local",
});
// 组件挂载完成后执行
onMounted(async () => {
    // 登录
    await auth.signInAnonymously(); // 或者使用其他登录方式
})

const deleteApple = async () => {
    const db = app.database();
    try {
        const res = await db.collection('test').where({
            name: '苹果'
        }).remove();
        console.log('删除成功', res);
    } catch (err) {
        console.error('删除失败', err);
    }
}

</script>

<style scoped>
/* 页面样式 */
</style>

点击完删除按钮以后，可以看到成功删除一条数据

4，显示商品列表可编辑批量删除

先给大家看下效果图如下

把完整的vue代码贴给大家

<!-- 商品管理页面主模板 -->
<template>
    <div>
        <!-- 商品表格组件 -->
        <el-table :data="products" style="width: 100%" stripe border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="商品名称" width="180" />
            <el-table-column prop="price" label="价格" width="120" />
            <el-table-column prop="count" label="库存" width="120" />
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="primary" @click="showAddDialog">新增商品</el-button>
            <el-button type="danger" @click="batchDelete" :disabled="selectedProducts.length === 0">批量删除</el-button>
        </div>

        <el-dialog v-model="addDialogVisible" title="新增商品" width="30%">
            <el-form :model="addForm" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="价格">
                    <el-input-number v-model="addForm.price" :min="0" />
                </el-form-item>
                <el-form-item label="库存">
                    <el-input-number v-model="addForm.count" :min="0" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addProduct">确认</el-button>
            </template>
        </el-dialog>

        <el-dialog v-model="editDialogVisible" title="编辑商品" width="30%">
            <el-form :model="editForm" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="editForm.name" />
                </el-form-item>
                <el-form-item label="价格">
                    <el-input-number v-model="editForm.price" :min="0" />
                </el-form-item>
                <el-form-item label="库存">
                    <el-input-number v-model="editForm.count" :min="0" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateProduct">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
// Vue 组合式API引入
import { onMounted, ref } from 'vue'
// 引入 SDK
import cloudbase from '@cloudbase/js-sdk'
// 初始化腾讯云开发环境
const app = cloudbase.init({
    env: "zxcv-4gle4hn500ec0c83", // 替换为你的云开发环境 ID
    clientId: "zxcv-4gle4hn500ec0c83", // 替换为你的云开发环境 ID
});
const auth = app.auth({
    persistence: "local",
});
// 组件挂载完成后执行
onMounted(async () => {
    // 登录
    await auth.signInAnonymously(); // 或者使用其他登录方式
    fetchProducts();
})

// 商品列表数据，使用ref响应式变量
const products = ref([]);
// 已选中的商品列表，用于批量操作
const selectedProducts = ref([]);

// 从云数据库获取商品列表数据
const fetchProducts = async () => {
    const db = app.database();
    try {
        const res = await db.collection('test').get();
        products.value = res.data;
    } catch (err) {
        console.error('获取商品失败', err);
    }
};

const editDialogVisible = ref(false);
const addDialogVisible = ref(false);
const editForm = ref({
    _id: '',
    name: '',
    price: 0,
    count: 0
});
const addForm = ref({
    name: '',
    price: 0,
    count: 0
});

// 显示新增商品对话框
const showAddDialog = () => {
    addForm.value = {
        name: '',
        price: 0,
        count: 0
    };
    addDialogVisible.value = true;
};

// 处理编辑商品操作，打开编辑对话框并填充数据
const handleEdit = (row) => {
    editForm.value = {
        _id: row._id,
        name: row.name,
        price: row.price,
        count: row.count
    };
    editDialogVisible.value = true;
};

// 向云数据库添加新商品
const addProduct = async () => {
    const db = app.database();
    try {
        await db.collection('test').add({
            name: addForm.value.name,
            price: addForm.value.price,
            count: addForm.value.count
        });
        addDialogVisible.value = false;
        fetchProducts();
    } catch (err) {
        console.error('添加失败', err);
    }
};

// 更新云数据库中的商品信息
const updateProduct = async () => {
    const db = app.database();
    try {
        await db.collection('test').doc(editForm.value._id).update({
            name: editForm.value.name,
            price: editForm.value.price,
            count: editForm.value.count
        });
        editDialogVisible.value = false;
        fetchProducts();
    } catch (err) {
        console.error('更新失败', err);
    }
};

// 从云数据库删除单个商品
const handleDelete = async (row) => {
    const db = app.database();
    try {
        await db.collection('test').doc(row._id).remove();
        fetchProducts();
    } catch (err) {
        console.error('删除失败', err);
    }
};

const handleSelectionChange = (selection) => {
    selectedProducts.value = selection;
};

// 批量删除选中的商品
const batchDelete = async () => {
    const db = app.database();
    try {
        const ids = selectedProducts.value.map(item => item._id);
        await db.collection('test').where({
            _id: dbmand.in(ids)
        }).remove();
        fetchProducts();
        selectedProducts.value = [];
    } catch (err) {
        console.error('批量删除失败', err);
    }
};

</script>

<style scoped>
/* 页面样式 */
</style>