【收藏】用Vue.js来构建你的Web3应用,就像开发 Web2 一样熟悉

作为一名涉足去中心化网络的前端 JavaScript 开发人员,您可能遇到过许多 Web3 开发解决方案。但是,这些解决方案通常侧重于钱包集成和交易执行,这就造成了学习曲线,偏离了熟悉的 Web2 开发体验。

但不用担心!有一种解决方案可以无缝衔接 Web2 和 Web3,它就是 Juno
在这里插入图片描述
在本篇博文中,我们将探讨如何利用 Vue 和 Juno 的强大功能来开发去中心化应用程序(dApps)。加入我们的旅程,揭开 Juno 的神秘面纱,让您轻松创建非凡的去中心化体验!

文章目录

    • 导言
    • Juno如何工作
    • 构建一个 Dapp
      • 初始化
      • 身份验证
      • 存储文档
      • 检索文档列表
      • 文件上传
      • 列出资源
      • 部署 🚀
    • 资源

导言

在我之前的博文中,我讨论了 React 和 Angular 这两个流行的 JavaScript 前端框架的类似解决方案。如果这两个框架中的任何一个是您的首选,我建议您浏览这些具体的文章,以获得量身定制的见解。

Juno如何工作

如果你还不了解 Juno,它是一个功能强大的开源区块链即服务平台,旨在让去中心化应用程序开发变得更加容易。可以把它想象成一个无服务器平台,类似于谷歌Firebase或AWS Amplify等流行服务,但增加了区块链技术的优势。Juno 完全在区块链上运行您的应用程序,确保完全去中心化和安全的基础设施。

通过利用Internet Computer区块链网络和基础设施,Juno 为您创建的每个应用程序引入了一个名为 “Satellites” 的独特概念。这些 Satellites 作为强大的智能合约,封装了您的整个应用程序,包括 JavaScript、HTML 和图像文件等网络资产,以及简单的数据库、文件存储和身份验证机制。通过 Juno,您可以完全控制应用程序的功能和数据。

构建一个 Dapp

让我们开始构建我们的第一个去中心化应用程序,简称“dapp”。在这个例子中,我们将创建一个笔记应用程序,允许用户存储和检索数据条目,以及上传文件。

本教程和代码示例使用了 Vue Composition API。

初始化

在将 Juno 集成到应用程序之前,需要创建一个 satellite。该过程在文档中有详细的解释。

此外,还需要安装SDK。

npm i @junobuild/core

完成这两个步骤后,您可以在 Vue 应用程序的根目录(例如 App.vue)中使用 satellite ID 初始化 Juno。这将配置库与您的智能合约进行通信。

<script setup lang="ts">
import { onMounted } from 'vue'
import { initJuno } from '@junobuild/core'onMounted(async () =>await initJuno({satelliteId: 'pycrs-xiaaa-aaaal-ab6la-cai'})
)
</script><template>
<h1>Hello World</h1>
</template>

配置完成!现在,您的应用程序已经可以用于 Web3 了!😎

身份验证

为了确保用户身份的安全性和匿名性,需要对用户进行登录和注销。要做到这一点,可以将相关函数绑定到应用程序中任何位置的 call-to-action 按钮。

<script setup lang="ts">
import { signIn, signOut} from '@junobuild/core'
</script><button @click="signIn">Sign-in</button>
<button @click="signOut">Sign-out</button>

为了与其他服务建立无缝集成,库和 satellite 组件在用户成功登录后自动在您的智能合约中生成新条目。此功能使库能够在任何数据交换期间有效地验证权限。

为了监视并深入了解该条目,从而访问有关用户状态的信息,Juno提供了一个名为authSubscribe() 的可观察函数。您可以根据需要灵活地多次使用此函数。然而,你也可以创建一个在整个应用中有效传播用户信息的 store。

import { ref, type Ref } from 'vue'
import { defineStore } from 'pinia'
import { authSubscribe, type User } from '@junobuild/core'export const useAuthStore = defineStore('auth', () => {const user: Ref<User | null | undefined> = ref(undefined)const unsubscribe = authSubscribe((u) => (user.value = u))return { user, unsubscribe }
})

这样,在应用程序的顶层订阅它就变得非常方便。

<script setup lang="ts">
import { useAuthStore } from '../stores/auth.store'
import { storeToRefs } from 'pinia'const store = useAuthStore()
const { user } = storeToRefs(store)
</script><template><template v-if="user !== undefined && user !== null"><slot /></template><template v-else><p>Not signed in.</p></template>
</template>

存储文档

Juno提供了一个名为“Datastore”的功能,旨在将数据直接存储在区块链上。Datastore 由一组集合组成,其中每个集合保存文档,这些文档由您选择的键唯一标识。

在本教程中,我们的目标是存储笔记,因此必须按照文档中提供的说明创建一个集合。为集合选择合适的名称,例如“notes”。

一旦设置好应用程序并创建了必要的集合,就可以利用库的 setDoc 函数将数据持久化到区块链上。此功能使您能够安全且不变地存储笔记。

import { setDoc } from "@junobuild/core";// TypeScript example from the documentation
await setDoc<Example>({collection: "my_collection_key",doc: {key: "my_document_key",data: myExample,},
});

由于集合中的文档是通过唯一的密钥来标识的,因此我们使用 nanoid 来创建密钥–这是一种用于 JavaScript 的微型字符串 ID 生成器。

<script lang="ts" setup>
import { ref } from 'vue'
import { setDoc } from '@junobuild/core'
import { nanoid } from 'nanoid'const inputText = ref('')const add = async () => {const key = nanoid()await setDoc({collection: 'notes',doc: {key,data: {text: inputText.value}}})
}
</script><template><textarea rows="5" placeholder="Your diary entry" v-model="inputText"></textarea><button @click="add">Add</button>
</template>

请注意,为简单起见,本教程提供的代码片段不包括适当的错误处理,也不包括复杂的表单处理。

检索文档列表

为了检索存储在区块链上的文档集合,我们可以使用库的 listDocs 函数。这个多功能函数允许加入各种参数,以方便数据过滤、排序或分页。

出于本教程的目的,我们将保持示例的简约性。我们的目标是在挂载组件时简单地列出所有用户数据。

<script lang="ts" setup>
import { listDocs } from '@junobuild/core'
import { onMounted, ref } from 'vue'const items = ref([])const list = async () => {const { items: data } = await listDocs({collection: 'notes'})items.value = data
}onMounted(async () => await list())
</script><template><p v-for="(item, index) in items"><span>{{ index + 1 }}</span><span>{{ item.data.text }}</span></p>
</template>

文件上传

在去中心化网络上存储数据是一项复杂的任务。然而,Juno 的设计旨在为需要轻松存储和检索用户生成内容(如照片或文件)的应用程序开发人员简化这一过程。

在处理文档时,第一步是按照文档中提供的说明创建一个集合。在本教程中,我们将重点实施图片上传,因此该集合可以恰当地命名为 “images”。

为确保存储数据的唯一性和正确识别,每个文件都有唯一的文件名和路径。这一点非常重要,因为数据是在网络上提供的,每条数据都应该有一个独特的 URL。

要实现这一点,我们可以使用用户唯一ID的文本表示形式和每个上传文件的时间戳的组合来创建一个键。通过访问我们之前在存储中声明的属性,我们可以检索相应的用户键。

<script lang="ts" setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth.store'
import { storeToRefs } from 'pinia'
import { uploadFile } from '@junobuild/core'const file = ref(undefined)const store = useAuthStore()
const { user } = storeToRefs(store)const setFile = (f) => (file.value = f)const upload = async () => {// Demo purpose therefore edge case not properly handledif ([null, undefined].includes(user.value)) {return}const filename = `${user.value.key}-${file.value.name}`const { downloadUrl } = await uploadFile({collection: 'images',data: file.value,filename})console.log('Uploaded', downloadUrl)
}
</script><template><input type="file" @change="(event) => setFile(event.target.files?.[0])" /><button @click="upload">Upload</button>
</template>

一旦一个资源被上传,一个 downloadUrl 返回,它提供了一个直接的 HTTPS 链接,可以在web上访问上传的资源。

列出资源

为了检索存储在区块链上的资产集合,我们可以利用库提供的 listAssets 函数。这个函数在参数方面提供了灵活性,允许我们根据需要对文件进行过滤、排序或分页。

与前面的文档示例类似,我们将保持这个示例的简约性。

<script lang="ts" setup>
import { listAssets } from '@junobuild/core'
import { onMounted, ref } from 'vue'const assets = ref([])const list = async () => {const { assets: images } = await listAssets({collection: 'images'})assets.value = images
}onMounted(async () => await list())
</script><template><img loading="lazy" :src="asset.downloadUrl" v-for="asset in assets" />
</template>

部署 🚀

在开发和构建应用程序之后,下一步是将其部署到区块链上。为此,您需要在终端中执行以下命令来安装 Juno 命令行接口(CLI):

npm i -g @junobuild/cli

安装过程完成后,您可以按照文档中的说明并从终端登录来访问您的 satellite。这将使你的机器能够控制你的 satellite。

juno login

最后,您可以使用以下命令部署项目:

juno deploy

恭喜你!您的 Vue dapp 现在已经上线,并完全由区块链提供支持。🎉

资源

  • Juno 文档和入门:https://juno.build/docs/intro

  • 本教程的源代码可在我们的 GitHub 代码库中获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6896.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

导读页——记忆之路

记忆方法千千种&#xff0c;本栏意在梳理其中道道来&#xff0c;旦有小得&#xff0c;肥肠幸耶。从不同角度分析学习记忆。 文章目录 按方法分按有无逻辑分有逻辑用思维导图 无逻辑用记忆宫殿理论模仿借鉴 按方法分 学习方法–找书&#xff0c;背书&#xff0c;利器 按有无逻…

FastReport.Net FastReport.Core 2023.2.23 Crack

FastReport.Net & FastReport.Core 2023.2.23适用于 .NET 7、.NET Core、Blazor、ASP.NET、MVC 和 Windows 窗体的全功能报告库。它可用于 Microsoft Visual Studio 2022 和 JetBrains Rider。 利用数据呈现领域专家针对 .NET 7、.NET Core、Blazor、ASP.NET、MVC、Windo…

Jenkins从配置到实战(二) - Jenkins如何在多台机器上自动化构建

前言 jenkins除了支持在本机上进行项目构建&#xff0c;还可以将构建任务分发到其他远程服务器上去执行&#xff0c;可以实现在不同平台和架构的机器上来完成项目的自动化构建任务&#xff0c;也能减轻jenkins服务器的压力。本文章就主要介绍下此流程。 准备工作 准备两台机…

Redis—分布式系统

Redis—分布式系统 &#x1f50e;理解分布式&#x1f50e;分布式—应用服务与数据库服务分离引入更多的应用服务节点理解负载均衡 引入更多的数据库服务节点缓存分库分表 微服务 &#x1f50e;常见概念应用(Application) / 系统(System)模块(Module) / 组件(Component)分布式(D…

2023年最全OCR技术指南!预训练OCR大模型呼之欲出

OCR是一项科技革新&#xff0c;通过自动化大幅减少人工录入的过程&#xff0c;帮助用户从图像或扫描文档中提取文字&#xff0c;并将这些文字转换为计算机可读格式。这一功能在许多需要进一步处理数据的场景中&#xff0c;如身份验证、费用管理、自动报销、业务办理等都显得尤为…

【Linux】多线程概念理论

目录 1 什么是线程&#xff1f; 2 线程的优点 3 线程的缺点 4 线程异常 5 线程用途 6 Linux线程和进程对比 1 什么是线程&#xff1f; 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列…

【目标跟踪】1、基础知识

文章目录 一、卡尔曼滤波二、匈牙利匹配 一、卡尔曼滤波 什么是卡尔曼滤波&#xff1f;——状态估计器 卡尔曼滤波用于在包含不确定信息的系统中做出预测&#xff0c;对系统下一步要做什么进行推测&#xff0c;且会结合推测值和观测值来得到修正后的最优值卡尔曼滤波就是利用…

VS Code 设置大小写转换快捷键

VS Code 设置大小写转换快捷键 前言&#xff1a;VS Code 没有默认的大小写转换快捷键&#xff0c;需要我们自己添加。 一 、打开快捷键设置面板 二、添加快捷键 在搜索框输入 “转换为大写”&#xff0c;如果您的VS Code没有汉化&#xff0c;此处输入“Transform to Uppercase…

OSI七层模型和TCP/IP四层模型以及五层模型

OSI七层模型&#xff08;Open System Interconnect&#xff09;即开放系统互连参考模型&#xff0c;是由ISO&#xff08;International Organization for Standardization&#xff09;国际标准化组织提出的&#xff0c;用于计算机或通信系统间互联的标准体系。 从上到下可分为…

【目标跟踪】2、FairMOT | 平衡多目标跟踪中的目标检测和 Re-ID 任务 | IJCV2021

文章目录 一、背景二、方法2.1 Backbone2.2 检测分支2.3 Re-ID 分支2.4 训练 FairMOT2.5 Online Inference 三、效果3.1 数据集3.2 实现细节3.3 消融实验3.4 最终效果 论文&#xff1a;FairMOT: On the Fairness of Detection and Re-Identification in Multiple Object Tracki…

Mybatis单元测试,不使用spring

平时开发过程中需要对mybatis的Mapper类做单元测试&#xff0c;主要是验证语法是否正确&#xff0c;尤其是一些复杂的动态sql&#xff0c;一般项目都集成了spring或springboot&#xff0c;当项比较大时&#xff0c;每次单元测试启动相当慢&#xff0c;可能需要好几分钟&#xf…

[Linux] CentOS7 中 pip3 install 可能出现的 ssl 问题

由于解决问题之后, 才写的博客, 所以没有图片记录. 尽量描述清楚一些 今天写代码的时候, 突然发现 文件里用了#define定义宏之后, coc.nvim的coc-clangd补全就用不了 :checkhealth了一下, 发现nvim忘记支持python3了 尝试pip3 install neovim的时候, 发现会警告然后安装失败.…

linux服务器部署

文章目录 一、基本工具安装1.使用vi命令编辑文件 二、安装1.jdk2.读入数据 总结 一、基本工具安装 1.使用vi命令编辑文件 注:如果vi命令没有&#xff0c;可以使用yum -y install vim或者apt-get install vim命令安装。 Linux操作系统第二讲 二、安装 1.jdk 参考 卸载jdk…

Mybatis-Plus插入数据返回主键两种方式(注解或XML)

废话不多说&#xff0c;直接撸代码: <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace&qu…

递归排序算法快速排序的实现过程

快速排序(Insertion Sort)也是一种递归排序算法。 快速排序原理&#xff1a;先以列表中的任意一个数为基准(一般选头或尾)&#xff0c;将列表分为左、右两个子列表。 左子列表的数要比基准数小&#xff0c;右子列表的数要比基准数大。然后继续把左子列表和右子列表按同样的方…

(2)前端控制器的扩展配置, 视图解析器类型以及MVC执行流程的概述

SpringMVC入门程序的扩展说明 注册前端控制器的细节 在web.xml文件注册SpringMVC的前端控制器DispatcherServlet时使用url-pattern标签中使用/和/*的区别 /可以匹配.html或.js或.css等方式的请求路径,但不匹配*.jsp的请求路径/*可以匹配所有请求(包括.jsp请求), 例如在过滤器…

IDEA导入微服务项目后自动将微服务展示在service面板中

有时候&#xff0c;不会自动将微服务展示在service面板中。 添加service面板&#xff1a; service面板&#xff1a; 更新所有maven&#xff0c;就可以自动将微服务展示在service面板中。

Opencv 细节补充

1.分辨率的解释 •像素&#xff1a;像素是分辨率的单位。像素是构成位图图像最基本的单元&#xff0c;每个像素都有自己的颜色。 •分辨率&#xff08;解析度&#xff09;&#xff1a; a) 图像分辨率就是单位英寸内的像素点数。单位为PPI(Pixels Per Inch) b) PPI表示的是每英…

git 实操

首先有安装好的git,安装好后,会在任一目录下右键出现git bash和git gui两个选项 打开git bash,设置好全局变量,用户名和邮箱,设置方法为: git config -- global user.name "xxx" git config --global user.email "xxxxxx.com" 1.创建版本库 git init 命…

安装及配置zabbix_agent代理端(监控FTP服务器)

监控agent的linux主机我们在之前的文章里已经做好了 现在直接安装ftp服务即可 [rootagent ~]# yum install -y vsftpd[rootagent ~]# systemctl start vsftpd #启动ftp服务[rootagent ~]# systemctl enable vsftpd #设置ftp服务开机自启 Created symlink fro…