vue项目调用知晓云数据

前言

什么是知晓云？
知晓云是通过 BaaS（Backend As A Service）、FaaS（Function As A Service）组合而成的 Serverless 无服务架构，集成最新的工具、组件、第三方服务 ，为小程序、Web、App 提供强大且便宜的后端云服务。它可以免去了小程序开发中服务器搭建、域名备案、数据接口实现等繁琐流程，让开发者专注于业务逻辑的实现，使得开发小程序，门槛更低，效率更高。

简单讲就是，你在开发小程序时，只需要设计好业务逻辑，通过接入知晓云封装好的 SDK ，就可以调用知晓云所提供的服务，包括数据库、云函数、消息推送等。假如你只有简单的前端开发经验，通过使用知晓云，也能上线一个功能完整的小程序。
（以上内容摘自知乎文章）

本篇文章将介绍一个前端项目如何调用知晓云中存放的数据

---

一、操作步骤

1.找到开发文档，注册知晓云

由于本文介绍的是网页开发，所以选择web入门目录
注：注册账号时填的邮箱号就是用户名

2.配置安全域名

选好要放数据表的应用，在下方写域名的地方输入要用这个应用的域名（本地开发时，就填本机的主机号和端口号；部署到服务器后就写相应的域名即可）

3.导入知晓云js sdk

控制台输入：
npm install minapp-sdk 或者 yarn add minapp-sdk

4.知晓云初始化配置

// js
// 引入知晓云SDK（软件开发工具包）
import minappSdk from 'minapp-sdk'
export default {
  install(app){
    // 知晓云初始化
    const BaaS = minappSdk
    const clientID = '请根据自己的应用填写' // 应用Id
    BaaS.init(clientID)
    BaaS.auth.login({username: '用户名', password: '密码'}).catch(err=>{
      console.log('知晓云SDK: init',err.message) //for debug
    })
  }
}

5.创建数据表

可以事先准备好数据表，再按上图步骤导入

6.写调用逻辑

以我创建的一张繁简字对照表为例

目标：我需要获取数据表中的字所对应的首字母initial、简体simple、繁体complicated三个字段对应的内容，呈现在我所准备的页面上，并且能实现分页查询全部内容和单个字查询两个基本功能

// js
// 1、查询繁简对照表的全部内容
const tableName = 'fanjianziduizhaobiao';
export async function queryDataFromFanjianziduizhaobiao(offsetNum) {
  try {
    // 实例化一个 TableObject 对象，操作该对象即相当于操作对应的数据表
    let MyTableObject = new BaaS.TableObject(tableName);

    // 实例化一个 Query 对象，在该对象上添加查询条件
    let query = new BaaS.Query();

    let queryResult = await MyTableObject.setQuery(query).limit(45).offset(offsetNum).find();

    return queryResult.data.objects;
  } catch (error) {
    console.error('查询数据出错：', error);
    throw error; // 抛出错误
  }
}

在分页查询全部数据的代码中，通过setQuery(query).limit(45).offset(offsetNum)限定了一页展示45条数据；同时，由于翻页导致每页起始读取的数据会改变，所以offset方法被传入一个参数offsetNum，以适应改变（更多方法请参考知晓云开发文档）

// 2、条件查询 根据输入的简体
export async function queryCharacterFromFanjianziduizhaobiao(character) {
  try {
    let MyTableObject = new BaaS.TableObject(tableName);

    // 实例化一个 Query 对象，在该对象上添加查询条件
    let query = new BaaS.Query();

    // 编写查询条件
    query.compare('simple', '=', character);

    let queryResult = await MyTableObject.setQuery(query).find();

    return queryResult.data.objects;
  } catch (error) {
    console.error('查询数据出错：', error);
    throw error; // 抛出错误
  }
}

单个字查询功能通过query.compare('simple', '=', character);实现输入一个简体，获取对应的数据**（查询条件的书写方法同见开发文档）**

7.调用查询逻辑

以下涉及页面的内容就不详细分析了，直接上代码

 <div style="width: 100%; height: 500px; border: 2px solid #031E5D;">

   <!-- 查询全部 -->
     <div v-if="ifShow === 0">
         <div v-for="(group, initial) in groupedData" :key="initial">
             <h3>【{{ initial }}】</h3>
             <div style="display: flex; margin-bottom: 20px; margin-left: 20px;">
                 <p v-for="(item, index) in group" :key="index" style="margin-left: 5px; margin-right: 5px; color: #101010; font-weight: bold;">{{ item.simple }}→{{ item.complicated }}</p>
             </div>
         </div>
     </div>

     <!-- 部分查询 -->
     <div v-else-if="ifShow === 1">
         <h3>【{{ queryResult1.initial }}】</h3>
         <div style="display: flex; margin-bottom: 20px; margin-left: 20px;">
             <p style="margin-left: 5px; margin-right: 5px; color: #101010; font-weight: bold;">{{ queryResult1.simple }}→{{ queryResult1.complicated }}</p>
         </div>
     </div>

     <!-- 查询不到 -->
     <div v-else>
         <div style="margin-left: 10px; margin-top: 10px;">
             <h3>对照表中暂无此内容，请重新查询</h3>
         </div>
     </div>
     
 </div>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { queryDataFromFanjianziduizhaobiao, queryCharacterFromFanjianziduizhaobiao } from '@/db/index.js';
// 初始页
const current = ref(1);
// 搜索框内容
const value = ref('');

let queryResult;
let queryResult1 = ref(null);
const offsetNum = ref(1);
const ifShow = ref(0);

// 搜索查询
const onSearch = async () => {
    try {
        if (value.value !== '') {
            const queryResult2 = await queryCharacterFromFanjianziduizhaobiao(value.value);
            if (queryResult2.length === 0) {
                ifShow.value = 2;
            } else {
                ifShow.value = 1;
                queryResult1.value = queryResult2[0];
            }
        } else {
            ifShow.value = 0;
        }
        
    } catch (error) {
      console.error('查询数据出错：', error);
    }
}


const groupedData = ref({});
// 分页查询
onMounted(async () => {
    
    const fetchDataAndProcessResult = async () => {
        try {
            queryResult = await queryDataFromFanjianziduizhaobiao(offsetNum.value);
            for (const key in queryResult) {
                const item = queryResult[key];
                const initial = item.initial;
                if (!groupedData.value[initial]) {
                groupedData.value[initial] = [];
                }
                groupedData.value[initial].push(item);
            }
        } catch (error) {
            console.error('发生错误:', error);
        }
    };

    fetchDataAndProcessResult();

    watch(offsetNum, () => {
        fetchDataAndProcessResult();
    });
});

// 翻页
const handlePageChange = () => {
    groupedData.value = {};
    offsetNum.value = (current.value - 1) * 45;
}



</script>

8.最终效果展示