Web3学习笔记(一)技术栈梳理

这两天看了Web3开发入门课程,先把我自己理解的记录一下,等以后再回过头来看,我的理解是否准确。

首先说从Web2.0转型到Web3.0开发,适合的主要岗位有哪些:

  • DApp前端开发
  • 钱包开发
  • 智能合约开发
  • Web3全栈开发
  • 区块链后端开发
  • 区块链安全开发

我在Web2.0就算是全栈开发,所以这次目标就还是全栈开发或智能合约开发,太低层的以后再说,那要学习的技术栈有哪些呢?

目前我对前端的技术栈理解逐渐清晰,这里记录一下,后面一定要回过头看理解是否准确。

  • 前端页面构建
    • React,前端开发基础,需要掌握组件、状态管理(useState/useEffect)、JSX。
    • Next.js,是一个 React 开发框架,可以理解为React的增强版。
  • 与区块链交互
    • web3.js 这个太老了,不用。
    • ethers.js,比 web3.js 更轻量、更现代,代码更简洁。
    • viem,比 ethers.js 更轻量、速度更快,TypeScript支持更好。
    • wagmi,基于 ethers.js 或 viem 的封装,目前wagmi+view组合是,Web3开发的首选。

WalletConnect,是DApp与钱包之间的桥梁,用于连接这两样。

区块链和智能合约开发,截止到目前了解有限,只知道: – Solidity, 开发语言选 – Hardhat,智能合约开发框架

但还不很清楚它们之间的关联关系,后期一定会弄清楚,目前先把前端吃透。

Promise与async/await的区别

这次,彻底搞懂Promise和async/await。

Promise已经比传统的回调函数(Callback Hell)更先进,那后来为社么又出现async/await了呢?

async/await的出现是为了让异步代码写起来更像同步代码,解决Promise在复杂场景下的嵌套问题和可读性问题,让我们能更轻松地编写和维护异步逻辑。

Notes:
* async/await 底层仍然是 Promise,只是写法更简洁。
* await 只能在 async 函数中使用,否则会报错。
* async 函数总是返回 Promise。
* await 会阻塞当前 async 函数的执行,但不会阻塞整个程序。

举例: 比如入门Web3项目开发,必须要先学会Next.js、ethers.js、Solidity、Go, 才能做智能合约开发。基础代码如下:

function learnNextJs() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("1. 已完成 Next.js 学习");
            resolve();
        }, 1000);
    });
}

function learnEthersJs() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("2. 已完成 ethers.js 学习");
            resolve();
        }, 1500);
    });
}

function learnSolidity() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("3. 已完成 Solidity 学习");
            resolve();
        }, 2000);
    });
}

function learnGo() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("4. 已完成 Go 学习(可选)");
            resolve();
        }, 500);
    });
}

然后使用 Promise 链式调用(必须按顺序学习)

learnNextJs()
.then(() => learnEthersJs())
.then(() => learnSolidity())
.then(() => learnGo())
.then(() => {
    console.log("恭喜!你现在可以开发完整的 Web3 项目了!");
})
.catch((error) => {
    console.log("学习过程中出错:", error);
});

输出结果是:
1. 已完成 Next.js 学习
2. 已完成 ethers.js 学习
3. 已完成 Solidity 学习
4. 已完成 Go 学习(可选)
恭喜!你现在可以开发完整的 Web3 项目了!

那如果换成async/await方式呢?

async function web3LearningPath() {
    try {
        // 必须按顺序学习
        await learnNextJs();       // 等待第一步完成
        await learnEthersJs();    // 然后学习第二步
        await learnSolidity();    // 接着学习第三步
        
        // Go 是可选的,可以并行学习
        const optionalLearning = learnGo(); // 不等待,继续执行后面代码
        
        console.log("正在同时学习 Solidity 和 Go...");
        
        await optionalLearning; // 如果需要确保Go也学完才继续
        
        console.log("恭喜!你现在可以开发完整的 Web3 项目了!");
        
        // 现在可以开始智能合约开发了
        await startSmartContractDevelopment();
    } catch (error) {
        console.log("学习过程中出错:", error);
    }
}

// 启动学习流程
web3LearningPath();

async function startSmartContractDevelopment() {
    console.log("开始智能合约开发...");
}

则输出结果为:
1. 已完成 Next.js 学习
2. 已完成 ethers.js 学习
3. 已完成 Solidity 学习
正在同时学习 Solidity 和 Go…
4. 已完成 Go 学习(可选)
恭喜!你现在可以开发完整的 Web3 项目了!
开始智能合约开发…

最后:
Promise是基础,所有异步操作最终都是Promise,async/await是更优雅的写法,让异步代码更易读。在 Web3 开发中,大部分情况应使用async/await。

Web3入门词条整理

这两天学习了不少Web3的知识,东西太多,还是自己整理,输出一遍会记得更牢。记不住了,来这里查也很方便,两全其美:)

  • 区块链(Blockchain),区块链就像一个公共的“数字账本”,记录所有交易信息,并且这个账本由成千上万的电脑共同维护,而不是由某个公司或机构控制。
  • 公链(Public Blockchain),公链是所有人都能参与的区块链,就像互联网一样开放,任何人都可以读取、发送交易或参与维护。
  • 以太坊(Ethereum),以太坊是一个公链,但它比比特币更强大,支持“智能合约”(自动执行的程序),让开发者可以构建去中心化应用(DApp)。
  • 智能合约(Smart Contract),一段自动执行的代码,像“数字合同”,满足条件时自动运行,不需要中间人。
  • DEX(去中心化交易所,Decentralized Exchange),没有中间商的交易所,用户直接通过智能合约交易加密货币,资产始终由自己掌控。
  • DeFi(去中心化金融,Decentralized Finance),用区块链技术重建传统金融(借贷、交易、理财),去掉银行和券商,全部由代码自动运行。
  • DID(去中心化身份,Decentralized Identity),身份信息不再由大互联网公司掌控,而是由你自己管理,通过区块链验证。
  • DAO(去中心化自治组织,Decentralized Autonomous Organization),就像没有老板的公司,成员通过投票决定事务,规则写在智能合约里。
  • ABI(应用二进制接口,Application Binary Interface),智能合约和外部程序沟通的“翻译手册”,告诉你怎么调用合约里的函数。
  • IPFS(星际文件系统,InterPlanetary File System),去中心化的“云存储”,文件以碎片形式存在多台电脑上,不怕服务器宕机或审查。
  • NFT(非同质化代币,Non-Fungible Token),区块链上的“数字证书”,证明某个东西(如图片、音乐)是独一无二的。
  • DApp(去中心化应用,Decentralized Application),运行在区块链上的App,后端是智能合约,没有公司控制。
  • GAS(燃料费),在区块链上操作(如转账、执行合约)的手续费,奖励给维护网络的矿工。

当然,我在学习的过程中,还会接触到更多的词汇,后续我也会在此进行补充的,敬请关注。

彻底弄清楚var let const的区别

今天又有小伙伴问我一个这样的问题,JavaScript中,为什么有的变量用var定义,有的用let,还有的用const呢?

先给出结果如下:

常用场景

  • const 优先使用,尤其是常量、对象、数组,(占 80% 场景)
  • let 需要修改时使用,需要重新赋值的变量(如循环、条件分支),(占 20% 场景)
  • var 永远不用

首先是作用域不一样

  • var声明的变量是全局作用域或函数作用域
  • let和const声明的变量是块级作用域

重新声明 & 值更新

  • var声明的变量,可以重新声明,也可以进行更新;
  • let声明的变量,不可以再声明,但可以进行更新;
    • 重新声明会报错 Uncaught SyntaxError: Identifier 'x' has already been declared
  • const声明的变量,声明时必须初始化,既不能再次声明,也不可以进行更新;
    • 重新声明会报错 Uncaught SyntaxError: Identifier 'x' has already been declared
    • 更新值也会报错 Uncaught TypeError: Assignment to constant variable.

变量提升和TDZ(Temporal Dead Zone)

  • 从作用域开始到变量声明的位置,这段区域就是 TDZ。
  • var声明的变量,存在变量提升,变量定义不但会被提升到作用域的顶部,而且还会初始化为undefined;
  • let和const声明的变量,不存在变量提升,存在TDZ。如果在初始化之前就使用,会报错 Uncaught ReferenceError: Cannot access 'x' before initialization

没错,那个小伙伴就是我自己:)

Gitee使用SSH配置思路

怎么样使用Git+SSH密钥,不用每次输入密码就可以提交代码到git仓库。

  1. 初始化仓库是,remote必须使用SSH协议地址,不要用HTTPS;
  2. 获取代码所在服务器的公钥;
    • Windows系统一般在C:\Users\你的用户名\.ssh目录下
    • Linux系统一般在/home/你的用户名/.ssh目录下
    • 文件名一般是id_rsa.pub或id_ed25519.pub
  3. 登录gitee,鼠标放到右上角头像,点【设置】->【安全设置】->【SSH公钥】;
  4. 把获取的公钥粘贴在公钥栏里,系统会自动生成标题,然后点击【确定】按钮保存即可。

还可以观看下面这个视频跟着操作:
【远程开发Git码云Gitee SSH公钥配置无密码提交推送】

FastAdmin踩坑记

  1. 开发环境支持使用.env配置文件,上传到云服务器.env却不生效,只有使用application目录下的database.php;
  2. 上传到服务器时,注意public目录下的.user.ini文件中的open_basedir要一致,不然会遇到”PHP message: PHP Warning: Unknown: open_basedir restriction in effect.”错误;
  3. 出现file_put_contents(/www/wwwroot/hwtl_admin/runtime/cache/4e/*.php): failed to open stream: Permission denied的错误,说明runtime文件夹权限不够,需要最大权限777;
  4. FastAdmin分类可以使用默认的,type区分就好,目标表中有category_id即可,页面加载时,如果需要显示上下级,data-params增加isTree为1即可;
data-params='{"custom[type]":"activity", "isTree":1}'

如果页面出现“你所浏览的页面暂时无法访问”,很有可能是服务器使用了.env文件配置数据库连接,请参考第一条。

VSCode+SSH密钥登录远程开发

远程开发方式有哪些?

点击查看:远程开发方式详解

推荐的有VS Code + SSH开发,目前是比较流行的方式。

那配置VS Code远程开发都需要什么?

  • VS Code安装 Remote – SSH
  • 本地生成密钥对
ssh-keygen -t rsa -b 4096
  • 上传公钥到服务器
echo "公钥内容" >> ~/.ssh/authorized_keys
  • VS Code远程配置
Host HWTL_Dev_Server_02
  HostName 192.168.31.30
  User pengcheng
  IdentityFile C:\Users\pengcheng\.ssh\id_rsa

视频地址:https://www.bilibili.com/video/BV1HrGMz6Ea8/

读《认知觉醒》笔记

人有两次生命,一次是出生,一次是觉醒。

人与人之间的本质差异,就在于认知能力的高低,认知决定了我们在生活中的各种选择,而这些选择又决定了我们的命运走向。

三重大脑:

  • 本能脑
  • 情绪脑
  • 理智脑

焦虑的五种形式:

  • 完成焦虑
  • 定位焦虑
  • 选择焦虑
  • 环境焦虑
  • 难度焦虑

焦虑的根源往往在于我们想同时处理太多事情,还希望能立刻看到结果。

我们要学会接纳自己,包括自己表现出的急躁、焦虑和不耐烦。不要因为这些情绪而自责、愧疚。其次,面对诱惑时,我们要学会延迟满足。

终身学习是消除认知模糊的必经之路,掌握的知识和工具越多,认知能力就越强,消除模糊的能力也就越强。

回避痛苦,并不会让痛苦消失,反而会让它进入潜意识,变成一种模糊的感觉。一旦具体事件变得模糊,其影响范围就会变得无限扩大,原本简单的事情也会变得难以解决。

Docker和飞牛安装WordPress 更便捷的搭建网站或个人博客

Hello 亲爱的小伙伴,你们好啊,前两天跟大家分享了怎么手动从官网下载Word Press文件,上传到服务器手动安装。

今天我再跟大伙儿分享一个更方便的方法来部署wordpress,只要是安装了docker容器的服务器都可以部署,非常方便快捷。

观看视频

大家有什么问题请私信我或者在评论区留言,我看到后会回复大家的。

快速安装WordPress 小白也能拥有自己的博客

WordPress下载地址: https://wordpress.org/download/

Steps:

  1. 下载WordPress最新版
  2. 上传到服务器并解压文件
  3. 创建数据库
  4. 修改配置文件
  5. 访问域名进行安装

观看视频: 【安装最新版WordPress 小白也能快速上手】

小伙伴有任何问题,请随时私信我或给我留言,我看到后会第一时间回复。