云开发【项目中使用与部署】

---

环境安装

首先在全局安装腾讯云

npm i -g @cloudbase/cli

然后检测是否安装成功

cloudbase -v

如果安装成功之后登录

tcb login

一、环境搭建

1.首先创建一个按量付费的环境

主要是一会云部署用(单单实现功能的话选那个免费的就行),当然了,花点小钱是避免不了了

2.匿名登录

创建好环境以后点击登录授权,让匿名登录保持打开状态

注意环境别选错哟

3.创建集合

点击数据库,新建shopList集合

二、在项目中使用

1.首先在项目中安装

npm install --save @cloudbase/node-sdk

2.匿名登录云开发

安装好了以后我们新建一个文件用于匿名登录云开发

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "vuetest-5gm5shnx249b44d4",//按需换成自己的
  region: "ap-shanghai",//按需换成自己的
});
app.auth({
  persistence: 'local'
}).anonymousAuthProvider().signIn()
export const db = app.database();

3.写一些基本的调用云数据库的增删改查

import { db } from ".";

const collection = db.collection("shopList");
const _ = db.command;
export interface ShopType {
  name: string;
  price: string;
  id: string | null;
}

export async function shopGetList(params: Partial<ShopType> = {}) {
  return await collection.where(params).get();
}

export async function shopAdd(params: Pick<ShopType, "name" | "price">) {
  return await collection.add(params);
}

export async function shopdel(id: string) {
  return await collection.doc(id).remove();
}

export async function shopEdit({ id, ...params }: ShopType) {
  return await collection.doc(id as string).update(params);
}

4. 页面调用写好的方法并展示数据

<template>
  <!-- 搜索 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="商品名称">
      <el-input v-model="formInline.name" placeholder="请输入商品名称" />
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input v-model="formInline.price" placeholder="请输入商品价格" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onQuery">搜索</el-button>
    </el-form-item>
  </el-form>
  <!-- 新增 -->
  <el-button type="primary" plain @click="addClick">新增</el-button>
  <!-- 表格 -->
  <el-table :data="tableData">
    <el-table-column prop="name" label="商品名称" />
    <el-table-column prop="price" label="商品价格" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="text" size="small" @click="delClick(scope)"
          >删除</el-button
        >
        <el-button type="text" size="small" @click="editClick(scope)"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="">
    <el-form :model="form">
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, Ref } from "vue";
import {
  shopGetList,
  shopAdd,
  shopdel,
  shopEdit,
  ShopType,
} from "@/components/cloud/shop";
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const formInline = reactive({
  name: "",
  price: "",
});

const form = reactive({
  id: null,
  name: "",
  price: "",
});

const tableData: any = ref([]);
/**
 * 搜索
 */
const onQuery = async () => {
  let params: any = {
    name: formInline.name,
    price: formInline.price,
  };
  if (!formInline.name) delete params.name;
  if (!formInline.price) delete params.price;
  let { data } = await shopGetList(params);
  tableData.value = data;
};
/**
 * 重置form
 */
function resetForm() {
  form.id = null;
  form.name = "";
  form.price = "";
}
/**  打开弹窗  添加 */
function addClick() {
  dialogFormVisible.value = true;
  //   一定要记得把form重置，不然会有上次修改赋值的数据
  resetForm();
}
/**  打开弹窗  修改 */
function editClick({ row }) {
  form.id = row._id;
  form.name = row.name;
  form.price = row.price;
  dialogFormVisible.value = true;
}

/**
 * 弹窗保存
 */
async function handleSubmit() {
  dialogFormVisible.value = false;
  //   修改
  if (form.id) {
    await shopEdit(form);
  } else {
    //新增
    let { id, ...data } = form;
    await shopAdd(data);
  }
  onQuery();
}
// 删除
async function delClick({ row }) {
  await shopdel(row._id);
  onQuery();
}
onMounted(async () => {
  let { data } = await shopGetList();
  tableData.value = data;
});
</script>

<style lang="less"></style>

然后运行看看效果,试试增删改查是否生效

三、云部署

项目终端输入命令tcb，会让选一些东西，直接按照图操作即可

好了接下来就静静的等待他完成就好了，看见下面的信息就说明部署成功了。

打开网址来看效果

好的，大功告成！！！