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'
// 引入 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里查询到数据，当然也可以添加数据到数据库
vue<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，删除数据
好比我想把商品名为苹果的都删除了
vue<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代码贴给大家
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: db.command.in(ids)
}).remove();
fetchProducts();
selectedProducts.value = [];
} catch (err) {
console.error('批量删除失败', err);
}
};
</script>
<style scoped>
/* 页面样式 */
</style>