后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Vue.js 和 Hamoni Sync 的实时看板
设置项目
添加 vue 看板
添加 Hamoni 同步
就这样结束了！
资源
看板是一种工作流可视化工具，可帮助您优化工作流程。在本文中，我将向您展示如何在 Vue 中构建实时看板。
要继续学习，你需要对Vue及其单文件组件有一些了解。你还需要以下工具：
- Node.js 和 npm（点击此链接下载适用于您的操作系统的安装程序）
- Vue CLI。如果您没有，请
npm install -g vue-cli在命令行中运行以安装它。
如果您对 Vue 不了解，您可以先阅读我之前的文章，然后再继续阅读本文。
设置项目
我们将使用 Vue CLI 设置项目，这是一个用于搭建 Vue.js 项目的简单命令行界面 (CLI)。打开终端并运行vue init webpack-simple realtime-kanban-board。您将收到一些提示，按 Enter 接受默认值，并y在询问是否要使用 时选择saas。在运行命令之前，您可以更改realtime-kanban-board为您喜欢的项目名称。设置完成后，运行以下命令从脚手架模板安装依赖项：
cd realtime-kanban-board
npm install
我们将使用vue-kanban作为具有拖放功能的看板组件。我们还将使用Hamoni Sync来实时存储和同步应用程序状态。它们都在 npm 上，我们将通过运行以下命令来安装它们：
npm install vue-kanban hamoni-sync
我们需要一些 Babel 的额外软件包。运行以下命令安装它们：
npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-2
添加 vue 看板
我们已经搭建好了应用程序的脚手架，现在它包含运行应用程序所需的文件。src/App.vue使用文本编辑器（或 IDE）打开该文件，并将其内容替换为以下内容：
<template>
<div id="app">
<kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock">
<div v-for="block in blocks" :slot="block.id" :key="block.id">
<div>
<strong>id:</strong> {{ block.id }}
</div>
<div>
{{ block.title }}
</div>
</div>
</kanban-board>
</div>
</template>
<script>
import Vue from "vue";
import vueKanban from "vue-kanban";
import Hamoni from "hamoni-sync";
Vue.use(vueKanban);
export default {
name: "app",
data() {
return {
stages: ["on-hold", "in-progress", "needs-review", "approved"],
blocks: [],
listPrimitive: null
};
},
methods: {
updateBlock(id, status) {
//TODO: add code to update the block
}
},
};
</script>
<style lang="scss">
@import "./assets/kanban.scss";
</style>
上面的代码使用了kanban-board带有两个 propsstages和 的组件blocks。propsstages定义了棋盘的列，并blocks包含表示放置在列上的任务项的数据。@update-block当一个方块从一个阶段移动到另一个阶段时，会触发该事件。我们将使用此事件实时更新棋盘。
添加 Hamoni 同步
我们已经添加了必要的代码，以便在页面上渲染看板。在本节中，我们将设置Hamoni Sync来存储和同步数据blocks。Hamoni Sync 是一项服务，可让您实时同步应用程序状态。
要使用 Hamoni Sync，我们需要初始化它并连接到 Hamoni 服务器。为此，我们需要一个帐户和一个应用程序 ID。请按照以下步骤在 Hamoni 中创建应用程序。
- 注册并登录 Hamoni仪表板
- 在文本字段中输入您想要的应用程序名称，然后点击“创建”按钮。这将创建应用程序并将其显示在应用程序列表部分中。
- 展开账户 ID卡以获取您的账户 ID
App.vue在第 35 行添加以下代码。
mounted: async function() {
const accountId = "YOUR_ACCOUNT_ID";
const appId = "YOUR_APP_ID";
let hamoni;
const response = await fetch("https://api.sync.hamoni.tech/v1/token", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify({ accountId, appId })
});
const token = await response.json();
hamoni = new Hamoni(token);
hamoni
.connect()
.then(() => {
hamoni
.get("board")
.then(listPrimitive => {
this.listPrimitive = listPrimitive;
this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => {
this.blocks.splice(item.index, 1, item.value);
});
})
.catch(error => {
if (error == "Error getting state from server") {
hamoni
.createList("board", blocks)
.then(listPrimitive => {
this.listPrimitive = listPrimitive;
this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => {
this.blocks.splice(item.index, 1, item.value);
});
})
.catch(console.log);
}
});
});
}
在结束</script>标记之前添加以下内容：
const blocks = [
{
id: 0,
status: "approved",
title: "Buy coffee machine"
},
{
id: 1,
status: "in-progress",
title: "Find better AirBnB options"
},
{
id: 2,
status: "on-hold",
title: "Approve Q3 budget"
},
{
id: 3,
status: "approved",
title: "Travel to Colombia"
},
{
id: 4,
status: "needs-review",
title: "Add Redux to the app"
},
{
id: 5,
status: "approved",
title: "Well, Sleep all day 👩🎤"
},
{
id: 6,
status: "in-progress",
title: "Find language exchange partner"
}
];
我们通过调用从 Sync 的 token API 获取的 token 来初始化它new Hamoni(token);。建议从后端调用 Sync token 服务器，并将响应 token 发送到客户端应用程序。在本例中，我将所有内容放在一个地方。
将字符串占位符替换为您的帐户和应用程序 ID（您将从 Hamoni 仪表板获取）。然后我们使用 连接应用程序。我们通过调用存储在 Hamoni Sync 上的应用程序状态名称来hamoni.connect()检索数据。如果它尚不存在，我们将创建它，然后添加函数以在更新项目时更新 Vue 的状态。这是通过调用代码来更新上的块来实现的。Hamoni Sync 提供了所谓的列表原语，我们在这里通过调用并传递一个数组来使用它。hamoni.get()onItemUpdated()item.indexhamoni.createList()
现在，我们需要在区块从一个阶段移动到另一个阶段时更新 Hamoni 上的状态。我们将更新updateBlock(id, status)之前添加的函数
methods: {
updateBlock(id, status) {
let block = this.blocks[id];
this.listPrimitive.update(id, { id, title: block.title, status });
}
},
此代码告诉同步更新状态，一旦完成，它将同步到所有连接的客户端/设备。
这就是所需的全部代码。现在通过npm run dev命令行运行该应用程序，这将在你的默认浏览器中启动该 Web 应用程序。
你有它🚀一个实时看板。
就这样结束了！
因此，我们使用 vue-kanban 和 Hamoni Sync 构建了一个实时看板。Hamoni Sync 可以轻松地将实时功能集成到您的应用程序中。您可以在GitHub上获取完整的代码。祝您编程愉快！👍
资源
文章来源：https://dev.to/pmbanugo/real-time-kanban-board-with-vuejs-and-hamoni-sync-52kg感谢Andrew Hedges和Gift审阅此帖子。