7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)

7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)

  • 7-1 ipfs介绍
  • 7-2 IPFS-desktop使用
  • 7-3 react+ipfs-api浏览器和ipfs交互

7-1 ipfs介绍

IPFS区块链上的文件系统

https://ipfs.io/

这个网站本身是需要科学上网的

Ipfs是点对点的分布式系统

无限大的全球分布式的百度云盘

在这里储存我们的图片和视频

Ipfs上传文件后,会保留此文件的哈希值,整个文件会被打散
全球分布在各个地方

不会丢失

可以看其官网
在这里插入图片描述

Ipfs整个系统在github开源的

Ipfs的理想是取代http

一行访问未来是ipfs://

有了ipfs网络后,会将文件存储到本地挂载的一个节点
在这里插入图片描述

在github开源了

Js-ipfs是ipfs的nodejs实现

在这里插入图片描述

直接安装到全局(ipfs 的nodejs实现)
npm install ipfs -g

在这里插入图片描述

安装完后
启动jsipfs

在这里插入图片描述

Ipfs项目主目录中的js-ipfs

新建一个learn-ipfs目录,再建个html
在这里插入图片描述

内容如上

Jsipfs init
Jsipfs add index.html

完成后在
使用ipfs将html加入

在这里插入图片描述

added QmbFMke1KXqnYyBBWxB74N4c5SBnJMVAiMNRcGu6x1AwQH index.html
中间的值是哈希值

全球有N个ipfs的节点,每个节点都有ipfs的小碎片,本地获取的哈希值,来获取内容

Jsipfs add

如何查看(后面跟着哈希即可)
jsipfs cat QmPAaKh7zNeYyGbVfvP9QqbRXh2a5Jz6vz57RSLuVQ3zEg
在这里插入图片描述

就从ipfs网络上将其读取

我们也可以尝试着在公网上找我们的文件
格式如下(只有记住哈希值文件就永远不会丢)
https://ipfs.io/ipfs/QmPAaKh7zNeYyGbVfvP9QqbRXh2a5Jz6vz57RSLuVQ3zEg

现在是访问不到的,因为添加完后没有进行同步

需要执行同步到公网的操作
jsipfs daemon
如下本地网络同步完成

在这里插入图片描述

https://blog.csdn.net/weixin_30852451/article/details/96953573
关于IPFS官网ipfs.io无法访问的解决办法
https://ipfsdrop.com/practice/cloudflare-goes-interplanetary-introducing-cloudflares-ipfs-gateway/
IPFS快速入门 | 通过Cloudflare直接从浏览器访问IPFS文件
如何访问ipfs的官网
https://blog.csdn.net/weixin_30852451/article/details/96953573
209.94.90.1 ipfs.io
有时ip不是上需要查询https://www.ipaddress.com/
更改hosts文件
注意不关机重启的话要刷新DNS在cmd下
ipconfig /flushdns

上方的步骤完全可行的,访问能成功

下方的示例在7-5成功执行

https://ipfs.io/ipfs/QmYkMuFZj7tyHFJRVe7ucqMNYGEiSXrjKdudm2mu7UD7er
在这里插入图片描述

7-2 IPFS-desktop使用

将之前的上传的一个图片打开
https://ipfs.io/ipfs/QmSM1YwAo77Gt64ca16pBxQBXZ5V7Q4cfxQEvBBJXDv8hC
在这里插入图片描述

视频中的浏览器可以访问,可能是需要翻墙才能看到

文件存到哪里了,谁在存,有什么激励机制
发展过程后

现在是存储免费的,后续可能类似比特币的奖励机制,或者贡献部分硬盘带宽来进行

这是命令行的操作

若觉得操作繁琐
可以在github使用ipfs-desktop

桌面

此ipfs-desktop和之前的命令行是一一对应的,此处是以可视化的形式展现的

解决github下载缓慢的问题如下
https://www.jianshu.com/p/0493dcc15d6f

140.82.113.3 github.com
199.232.69.194 github.global.ssl.fastly.net

安装ipfsdesk之后如下
在这里插入图片描述

既然已经进入了ipfs就需要有存储和共享文件的责任
在这里插入图片描述

我们可以直接上传文件使用界面化的ipfs

节点与自己通信的节点
在这里插入图片描述

任何文件都是存在全球的CDN之上,可以加速访问节点内容

在文件可以上传本地文件

Js调用配置文件
在这里插入图片描述

这里是手动拖上去上传文件的

下面如何在js中手动拖拽上传文件

7-3 react+ipfs-api浏览器和ipfs交互

Ipfs在命令行的上传同步文件等

可以发网站,文件夹静态文件管理

此节课堂主要任务就是浏览器和ipfs的交互

Js-ipfs-api(github上,官方提供)进行上传内容,使用react搭建简单网络
在这里插入图片描述

能上传一个小文件到ipfs之上,拿到其哈希值,并通过哈希获取文件内容

Npm install -g create-react-app
之前已经安装过了就不用了

直接执行创建一个react项目
create-react-app ipfs-demo

创建完成

在这里插入图片描述

Cd ipfs-demo

Npm start 启动此react项目

主要在其App.js更改代码
在这里插入图片描述

http://localhost:3000/

在浏览器可以看到

将ipfs-api安装在创建的react项目下,而不是全局变量
npm install ipfs-api --save

在这里插入图片描述

在这里插入图片描述

在react就可以直接使用此内容了


在这里插入图片描述
在这里插入图片描述

上方有错误App.css应该导入

代码不够全,如下

import React,{Component} from 'react';
import './App.css';class App extends Component
{constructor(props){super(propos)//状态,上传内容,上传后的哈希this.state = {content:''hash:''}//绑定按钮(否则会this穿透)this.handleClick = this.handleClick.bind(this)//this.handleReadClick = this.handleReadClick.bind(this) 若不想绑定可以使用下方的箭头函数,两种方式}handleClick(){}handleReadClick(){}render(){return(<div className='App'><input type="text"/><button onClick={this.handleClick}>提交数据到ipfs</button><hr/><p>{this.state.hash}</p><button onClick={()=>this.handleReadClick()}>从ipfs读取数据</button><p>{this.state.content}</p></div>);}
}
export default App

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

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

相关文章

深入Linux:权限管理与常用命令详解

文章目录 ❤️Linux常用指令&#x1fa77;zip/unzip指令&#x1fa77;tar指令&#x1fa77;bc指令&#x1fa77;uname指令&#x1fa77;shutdown指令 ❤️shell命令以及原理❤️什么是 Shell 命令❤️Linux权限管理的概念❤️Linux权限管理&#x1fa77;文件访问者的分类&#…

【香橙派 Orange pi AIpro】| 开发板深入使用体验

目录 一. &#x1f981; 写在前面二. &#x1f981; 愉快的安装流程2.1 安装前准备2.2 流程准备2.2.1 烧录镜像2.2.2 开机2.2.3 连网2.2.4 SSH远程连接开发板 2.3 体验 AI 应用样例 三. &#x1f981; 写在最后 一. &#x1f981; 写在前面 大家好&#xff0c;我是狮子呀&…

react 组件通信 —— 父子传值 【 函数式/类式 】

1、函数式组件通信 父子间通信 —— 父传子 父组件 export default function father() {return (<div style{{width:400px,height:200px,background:pink,marginLeft:500px}}>我是父组件<hr /><Son name{"韩小刀"}/></div>) } 子组件 ex…

数据结构--二叉树相关习题5(判断二叉树是否是完全二叉树 )

1.判断二叉树是否是完全二叉树 辨别&#xff1a; 不能使用递归或者算节点个数和高度来判断。 满二叉树可以用高度和节点来判断&#xff0c;因为是完整的。 但是完全二叉树前面是满的&#xff0c;但是最后一层是从左到右连续这种 如果仍然用这种方法的话&#xff0c;如下图…

代码随想录二刷7.22|977.有序数组的平方

暴力解法&#xff1a; ——如果想暴力解决这个问题的话&#xff0c;可以像题目那样&#xff0c;先将每一个元素平方&#xff0c;然后再排序 双指针&#xff1a; ——从题目中找到的信息&#xff1a;这是一个非递减顺序的整数数组&#xff0c;从例子中&#xff0c;可以容易看…

STM32 - SPI硬件外设

配合我的上一篇SPI ​​​​​​通信 协议-CSDN博客一起理解更佳&#xff0c;本文后看 SPI 是由摩托罗拉(Motorola)公司开发的全双工同步串行总线&#xff0c;是 MCU 和外围设备之间进行通信的同步串行端口。主要应用在EEPROM、Flash、RTC、ADC、网络控制器、MCU、DSP以及数字信…

PostgreSQL 中如何处理数据的批量更新和事务日志管理?

文章目录 PostgreSQL 中数据的批量更新和事务日志管理 PostgreSQL 中数据的批量更新和事务日志管理 在数据库的世界里&#xff0c;数据的批量更新和事务日志管理就像是一场精心编排的舞蹈&#xff0c;需要精准的步伐和协调的动作。对于 PostgreSQL 而言&#xff0c;这两个方面…

数学建模美赛经验小结

图片资料来自网络所听讲座&#xff0c;感谢分享&#xff01;

用Qwt进行图表和数据可视化开发

目录 Qwt介绍 示例应用场景 典型QWT开发流程 举一些Qwt的例子&#xff0c;多绘制几种类型的图像 1. 绘制折线图 (Line Plot) 2. 绘制散点图 (Scatter Plot) 3. 绘制柱状图 (Bar Plot) 4. 绘制直方图 (Histogram) Qwt介绍 QWT开发主要涉及使用QWT库进行图表和数据可视化…

【C++】B树及其实现

写目录 一、B树的基本概念1.引入2.B树的概念 二、B树的实现1.B树的定义2.B树的查找3.B树的插入操作4.B树的删除5.B树的遍历6.B树的高度7.整体代码 三、B树和B*树1.B树2.B*树3.总结 一、B树的基本概念 1.引入 我们已经学习过二叉排序树、AVL树和红黑树三种树形查找结构&#x…

深度解读李彦宏的“不要卷模型,要卷应用”

深度解读李彦宏的“不要卷模型&#xff0c;要卷应用” —— AI技术的应用之道 引言 在2024世界人工智能大会的舞台上&#xff0c;李彦宏的“不要卷模型&#xff0c;要卷应用”言论犹如一石激起千层浪&#xff0c;引发了业界对AI技术发展路径的深思。本文将深入探讨这一观点&a…

【前端】零基础学会编写CSS

一、什么是CSS CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是一种是一种用来为结构化文档&#xff08;如 HTML 文档&#xff09;添加样式&#xff08;字体、间距和颜色等&#xff09;的计算机语言&#xff0c;能够对网页中元素位置的排版进行像素级别的精…

简单的SQL字符型注入

目录 注入类型 判断字段数 确定回显点 查找数据库名 查找数据库表名 查询字段名 获取想要的数据 以sqli-labs靶场上的简单SQL注入为例 注入类型 判断是数字类型还是字符类型 常见的闭合方式 ?id1、?id1"、?id1)、?id1")等&#xff0c;大多都是单引号…

前端Canvas入门——一些注意事项

创建渐变的三种方法&#xff1a; createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变&#xff08;放射性渐变&#xff09; createConicGradient() - 锥形渐变 这三种的核心观点都是&#xff1a; 创建一个gradient对象&#xff0c;然后调用addColorStop()方法…

Python转换PDF为PowerPoint演示文件

PDF文件以其跨平台兼容性和版面固定性成为了分享和存储文档资料的首选格式。然而&#xff0c;在需要进行生动、互动性强的演示时&#xff0c;PDF的静态特性便难以满足个性化演示需求。将PDF文件转换为PowerPoint演示文稿可以解决这一问题。PowerPoint不仅提供了丰富的动画和过渡…

亚马逊erp个人贴牌工作室贴牌,孵化贴牌,无限开子账号...

三种方式个人工作室贴牌。 系统的工作室贴牌以及个人贴牌能实现的权限。首先贴牌这一块的所有功能跟卖的铺货的全部工程不用说了都可以用&#xff0c;没有任何限制&#xff0c;也没有隐藏收费&#xff0c;这是功能板块。主要是开子账号这块&#xff0c;在会员子账号角色先设置…

【渗透测试】利用hook技术破解前端JS加解密 - JS-Forward

前言 在做渗透测试项目时&#xff0c;尤其是金融方面&#xff0c;经常会遇到前端JS加解密技术&#xff0c;看着一堆堆密密麻麻的密文&#xff0c;会给人一种无力感。Hook技术则会帮助我们无需获取加解密密钥的前提下&#xff0c;获取明文进行渗透测试 环境准备 JS-Forward Burp…

函数(实参以及形参)

实际参数&#xff08;实参&#xff09; 实际参数就是在调用函数时传递给函数的具体值。这些值可以是常量、变量、表达式或更复杂的数据结构。实参的值在函数被调用时传递给对应的形参&#xff0c;然后函数内部就可以使用这些值来执行相应的操作。 int main() {int a 0;int b …

【轻松拿捏】Java-final关键字(面试)

目录 1. 定义和基本用法 回答要点&#xff1a; 示例回答&#xff1a; 2. final 变量 回答要点&#xff1a; 示例回答&#xff1a; 3. final 方法 回答要点&#xff1a; 示例回答&#xff1a; 4. final 类 回答要点&#xff1a; 示例回答&#xff1a; 5. final 关键…

Elasticsearch:Node.js ECS 日志记录 - Morgan

这是之前系列文章&#xff1a; Elasticsearch&#xff1a;Node.js ECS 日志记录 - Pino Elasticsearch&#xff1a;Node.js ECS 日志记录 - Winston 中的第三篇文章。在今天的文章中&#xff0c;我将描述如何使用 Morgan 包针对 Node.js 应用进行日子记录。此 Morgan Node.j…