web3.0的简单入门与项目介绍

web3.0 是什么?

1.简介

Web3.0是通过区块链等技术实现更加智能化、去中心化、安全可靠的应用。

Web3.0的主要特点包括:

去中心化:Web3.0将数据和应用从中心化的服务器转移到分布式的节点上,实现去中心化的应用。

安全可靠:Web3.0采用了区块链等技术,实现了去中心化、不可篡改、安全可靠的应用。

Web3.0的应用场景包括智能合约、去中心化应用(DApp)、物联网、人工智能等领域。

2.需要涉及的学习内容

  1. 区块链技术:去中心化的项目一般基于区块链技术实现,需要了解区块链的概念、原理和常见的实现方式,例如以太坊、EOS 等。

以太坊区块链采用的是一种叫做“以太坊账户模型”的设计,每个账户都有一个唯一的地址,可以通过地址进行标识和访问。以太坊账户分为两种类型:外部账户和合约账户。合约账户则是智能合约的执行代码,可以接收和处理交易请求,进行复杂的业务逻辑处理。

外部账户是一种标准的以太坊账户,由 20 个字节的地址表示。外部账户的私钥保存在用户的钱包中,用户可以使用钱包软件对其进行管理,例如创建、导入、备份、转账等操作。

合约账户则是一种特殊的账户类型,包含了智能合约的执行代码。每个合约账户都有一个唯一的地址,由 20 个字节表示,但不能像外部账户一样通过私钥进行转账。相反,合约账户的代码必须定义一个或多个公开可调用的函数,用户可以通过发送交易请求来调用这些函数,合约代码会根据交易请求进行相应的处理,并将结果返回给发送方。

当用户发送交易请求时,需要指定目标地址,如果目标地址是一个外部账户,则表示进行转账操作,交易的金额会从发送方的账户中扣除,并转入目标地址的账户中;如果目标地址是一个合约账户,则表示调用合约函数,交易的数据会包含调用函数的参数和返回值,合约代码会根据参数进行处理,并返回结果给发送方。因此,合约账户的代码可以实现非常复杂的业务逻辑和交互操作,例如管理数字资产、执行投票决策等。

以太坊区块链的外部账户和合约账户是以不同的方式进行工作的,外部账户用于简单的转账操作,而合约账户则可以实现复杂的业务逻辑和交互操作。

外部账户(左),合约账户(右):

每个区块中包含了多个交易记录,通过哈希算法进行链接,形成一个不可篡改的链式结构,保证了交易记录的透明性和可追溯性。

在以太坊网络上,每个交易都会生成一个唯一的事务哈希(Transaction Hash,也简称 TX Hash)。TX Hash 是一个长字符串,通常由 64 个十六进制字符组成。它是以太坊网络中交易的唯一标识符,可以用于查询交易的状态、检查交易是否已经被打包进区块以及其他相关操作。

TX Hash 是由交易的发送者创建的,它由交易的各种细节信息计算得出,并在网络上广播。一旦 TX Hash 被广播出去,矿工节点会将其加入到内存池中等待打包进区块。

一旦交易被打包进区块,TX Hash 就成为了区块的一部分,并被永久记录在区块链上。此时,你可以使用 TX Hash 查询交易的状态、确认交易是否已经被处理以及其他相关信息。

TX Hash 是以太坊网络中交易的唯一标识符,它用于标识交易的状态、查询交易是否被处理以及其他相关操作。

  1. 智能合约:智能合约是区块链项目的核心,需要了解智能合约的概念、编写方式、安全性等。

我是使用 Remix-Ethereum这个开发工具来编写,他是基于 以太坊区块链编写Solidity

3.Solidity

Solidity由Ethereum团队开发,是web3中最常用的智能合约编程语言。 该语言是图灵完整的面向对象的。这些特点是该语言在很大程度上受到C++、Python和JavaScript的影响而产生的。

建立在EVM兼容的区块链上,开发者可以使用Solidity创建Ethereum原生的dApps,部署智能合约,用于投票、交易管理和多签名钱包等无数用途。

ACCOUNT是GAS USED的两倍

3.配合的开发工具

测试环境:Ganache

正式环境:Metamask

项目简介

本项目于2021年12月12日创立,前端框架使用 vue3+ts、 组件库使用 antd,使用Truffle 框架开发web3应用,区块链使用Solidity+web3.js

项目描述: 区块链技术,使用Web3.js+Solidity编写智能合约代替了传统的web 2.0中的接口,利用 Metamask插件进行登录去中心化账号。Web 3.0安心筹——基于区块链服务网络(BSN)的个人大病求助服务平台,推动慈善公益公开透明化。平台将患者信息上链,交易数据上链,捐助金审批上链等,通过智能合约最大程度上保障捐助资金安全和公开透明

主要工作:

前端运用Web3.js进行区块链中接口的调用替代了传统的前后端接口模式,去中心化使得开发更为便捷,所有交易记录公开透明。

项目配置(使用truffle这个web3框架)

配置顺序:

1. 首先需要配置好`node`、`npm`、`yarn`,安装`ganache`,`chrome`,`chrome`安装插件`MetaMask`
2. 安装 truffle,`yarn global add truffle`
3. 打开`ganache`软件
4. 在`ganache`软件上选择 quickstart,单击右上角齿轮图标进行设置
5. 在 workspace 标签页中 add project 选中 `./truffle-config.js`,server 标签卡将端口改为8545。
6. 单击右上角 save and restart。
7. 选中 ganache 软件中最上面 contracts 选项卡,将 crowdFunding 合约的地址复制,找到`./crowdfunding/src/api/contract.ts`文件的第7行,将 0x 开头的地址覆盖为刚刚复制的地址。
8. 切换到 finalWork 文件夹下
9. 输入:`truffle compile`
10. 输入:`truffle migrate`
11. 将`./build/contracts/CrowdFunding.json`复制到`./crowdfunding/src/api/`目录下
12. 切换到`./crowdfunding/`目录下
13. 输入:`yarn`
14. 安装完毕后输入:`yarn serve`
15. 浏览器中访问:`http://localhost:8080`
16. 在`metamask`中选择连接 localhost:8545 的本地网络,并且从 ganache 中导入几个账户进去,就可以开始测试了。
解释:
  • 1.truffle compile 是 Truffle 框架提供的命令行工具,用于编译 Solidity 智能合约。在开发以太坊 DApp 时,智能合约是 DApp 的核心,它定义了应用的业务逻辑和数据结构。在 Truffle 中,智能合约通常位于 contracts/ 目录下,使用 Solidity 语言编写。当对智能合约进行修改后,需要重新编译合约以生成 ABI(Application Binary Interface)和二进制代码,这样才能进行后续的部署、测试和交互。需要注意的是,truffle compile 命令默认使用 solc 编译器来编译合约。可以通过在 truffle-config.js 中设置 compilers 属性来更改编译器选项,例如选择使用不同版本的 solc 编译器、使用外部编译器等。

  • 2.在编写 Solidity 智能合约时,通常需要使用 Solidity 编译器将 Solidity 代码编译为字节码,然后将字节码部署到以太坊网络上。在 Solidity 编译过程中,会生成一个 JSON 文件,它包含了智能合约的元数据和 ABI(应用程序二进制接口)信息。

  • 3.truffle migrate 是 Truffle 框架提供的命令行工具,用于将 Solidity 智能合约部署到目标区块链网络上。在开发以太坊 DApp 时,智能合约是 DApp 的核心,它定义了应用的业务逻辑和数据结构。truffle migrate 命令会执行部署脚本,并将智能合约部署到目标网络上。在执行部署脚本之前,需要确保已经完成了编译工作,即已经生成了相应的 ABI 和二进制代码。部署脚本通常位于 migrations/ 目录下,使用 JavaScript 语言编写,它可以执行一些初始化操作,例如将合约地址保存到配置文件中,或者初始化合约的状态。

  • 4.这些部署文件是 JavaScript 脚本,用于执行智能合约的部署操作。在 Truffle 中,每个部署文件都对应着一个智能合约的部署过程,以数字开头的文件名来表示部署顺序,例如 1_initial_migration.js。在部署文件中,开发者需要指定要部署的智能合约名称、部署者账户地址、部署者账户的私钥、要使用的网络配置等。部署文件通常使用 Truffle 提供的 artifacts.require() 方法来加载已经编译好的智能合约,然后使用部署者账户调用 deploy() 方法来将合约部署到目标网络上。部署成功后,合约的地址会被保存到配置文件中,以便在后续的测试和交互中使用。

  • 5.artifacts.require() 方法可以接收一个参数,即智能合约的名称。在调用 artifacts.require() 方法时,它会从 build/contracts/ 目录中读取对应的 JSON 文件,并返回一个包含了智能合约 ABI 和二进制代码的 JavaScript 对象。开发者可以通过这个对象来执行智能合约的部署、测试和交互等操作。需要注意的是,artifacts.require() 方法返回的 JavaScript 对象中,包含了智能合约的 ABI 和二进制代码,但不包含合约的地址。在部署智能合约后,合约的地址会被保存到配置文件中,开发者需要手动读取该地址并将其与智能合约对象进行关联。

  • 6.build/contracts/ 目录下对应的 JSON 文件在编译时是不包含 networks 字段的,但在智能合约部署成功后,Truffle 会自动更新 networks 字段,将合约在不同网络上的部署情况记录下来

主要功能

产品首页救助列表展示

发起筹款

救助者捐助资金

在筹款成功后,被救助者发起请求使用资金

等待捐助者审核是否同意资金使用

半数捐助者审核同意通过后,资金转到患者账户

个人中心信息页面

结束

这是我的第一次web3.0分享,很开心能给各位做这次分享!github项目地址(已开源)

  • 8
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
### 回答1: Vue3.0是一款前端框架,相比于2.x版本,3.0版本提供了更好的性能和更好的类型支持。那么,如何从零入门Vue3.0呢? 首先,需要了解一些基础概念,例如Vue实例、组件、指令和计算属性等。可以通过阅读Vue官方文档或者相关书籍进行学习。另外,熟练掌握HTML、CSS以及JavaScript等基础知识也很重要。 接着,可以通过搭建一个简单的开发环境来完成Vue3.0的入门。可以搜索相关的教程或者跟着官方文档进行安装步骤,然后创建一个Vue实例,引入一些组件和指令,最后将它们渲染到页面上。 当了解了Vue3.0的基本用法后,可以通过阅读文档和实际操作来进一步提高自己的技能水平。一些高级的特性,例如Composition API、Teleport和Suspense等,可以帮助我们更加高效地开发应用程序。 最后,通过练习和写一些小项目来巩固学习成果,例如创建一个简单的To-Do-List应用或者一个博客系统等,这样可以更好地掌握Vue3.0的相关知识和技巧。 综上所述,Vue3.0的零基础入门需要掌握一些基础知识、搭建开发环境、了解基本用法、学习高级特性和练习实践等步骤,通过不断地探索和实践,可以更加深入地了解并掌握Vue3.0的技术。 ### 回答2: Vue 3.0 是一个开源的 JavaScript 框架,用于构建现代化的 Web 应用和单页面应用。如果您是一个零基础的入门者,现在学习 Vue 3.0 并不会太难,以下是一些入门技巧: 第一步,需要了解 Vue 3.0 的基础概念和语法。Vue 入门者需要了解 Vue CLI、Vue 组件、Vue 模板、指令、插件等基础概念。同时,需要使用 web 开发技术,如 HTML、CSS 等,并能够熟练使用 JavaScript。 第二步,您可以通过阅读官方文档或参加在线教学平台来进行学习。对于初学者,Vue 3.0 官方文档提供了基础特性、组件、Api、路由、状态管理、插件等信息。此外,优质的教学网站也是一个好的选择。 第三步,您可以开始进行实践项目。这些项目可以是基于 Vue 3.0 的 ToDo 应用程序、新闻客户端、简单的博客等。这些应用可以将概念与实践相结合,以加深您对 Vue 3.0 的理解。 第四步,加入开发社区并与开发者互动交流。开源社区比较活跃,您可以参与到其中,通过问答、发表评论、提出问题等方式得到帮助和学习经验。 最后,Vue 3.0 由于其易于学习和使用而受到了开发者的喜爱。只要您学习基础知识和实践经验,并成为 Vue 3.0 开发社区中的一员,那么在未来的开发实践中,您将会收获很多成果。 ### 回答3: Vue.js是一款简单易用、高效灵活的JavaScript框架。它被广泛应用于前端开发,不仅可以用于构建单页应用和复杂的Web应用程序,还可以用于构建管理面板、后台系统等。 Vue.js 3.0是Vue.js框架的最新版本,它带来了一些令人兴奋的新特性,包括更少的内存消耗、更快的运行速度和更好的类型推断。下面是一些零基础入门Vue.js 3.0的步骤: 1.准备环境 在开始使用Vue.js 3.0之前,您需要在计算机上安装Node.js和npm。然后,您可以使用npm安装Vue.js 3.0的CLI。 2.创建Vue.js应用程序 使用Vue.js CLI创建一个新的Vue.js应用程序。使用以下命令: vue create my-project 这条命令将创建一个新的Vue.js项目。 3.学习Vue.js基础知识 Vue.js是一种基于组件的框架,它允许您将复杂的应用程序拆分成多个小部件。了解Vue.js的基础知识非常重要,包括模板、组件、数据绑定和事件处理程序等。 4.编写组件 编写组件是Vue.js应用程序开发的核心。您可以使用Vue.js的组件系统来创建可重用的组件,并将它们组合成一个完成的应用程序。 5.使用Vue.js的路由器 Vue.js的路由器系统可以帮助您管理应用程序中的不同视图和组件之间的导航。学习使用Vue.js的路由器非常重要。 总之,Vue.js是一款易于学习和使用的前端开发框架。通过学习Vue.js的基础知识、编写组件、使用路由器和其他相关技术,您可以轻松地创建可重用的Vue.js应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

因忍而解

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值