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页面里，先做一个简单的列表请求

vueimport cloudbase from '@cloudbase/js-sdk'// 引入 SDKconst 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里查询到数据，当然也可以添加数据到数据库

vue<script setup>import {onMounted } from 'vue'// 引入 SDKimport 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，删除数据

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

vue<template> <div> <el-button type="danger" @click="deleteApple">删除苹果商品</el-button> </div></template><script setup>import {onMounted } from 'vue'// 引入 SDKimport 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代码贴给大家

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'// 引入 SDKimport 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: db.command.in(ids) }).remove(); fetchProducts(); selectedProducts.value = []; } catch (err) { console.error('批量删除失败', err); }};</script><style scoped>/* 页面样式 */</style>