幻尘の屋

鸿蒙开发前言随着鸿蒙系统宣布删除 android 代码，鸿蒙系统开始进入了全新的开发模式，HarmonyOS 的版本也更新到了 3.1 版本，新的 ArkTS 是基于 TS 扩展出来的，所以对前端很友好 环境准备开发工具：DevEco Studio 首先需要去官网下载基于 IDE 的开发工具 DevEco Studio 安装之后需要对 Node 环境、Ohpm 的安装路径机型配置然后需要下载 HarmonyOS 的 SDK 整个 DevEco Studio 是基于 IntelliJ 实现的，所以熟悉 westorm 的话会如鱼得水 项目创建创建项目的时候会要求我们选择一个模版 然后需要选择我们需要的配置这里我们需要选择 Stage 模型和 ArkTS 语言以及适用设备类型，FA 是早期鸿蒙支持的模型，支持直接使用 hml、css、js 进行开发，这里更推荐使用最新的 Stage 模型 然后经过一些列的加载等待一个空的项目就已经创建好了，接下来就进入到了我们的编码阶段 目录结构 AppScope 中存放应用全局所需要的资源文件，其中 element 文件夹主要存放公共的字符串、布局文件等资源，media 存放全局公共的多媒体资源文件。 entry 是应用的主模 ...

二进制计算计算机的世界里缺少不了二进制的存在，我们总听到计算机是 0 和 1 组成的，而这两个数字恰恰就是二进制的必备元素 十进制与二进制 十进制：回到小学初识数字的时候，从小到大接触的数字中从 0 数到 9，比 9 大一个数就要进一位也就是 10，这就是十进制，即逢 10 进 1，这就是十进制 二进制：从 0 开始数，当数到 2 时就进一位，即逢 2 进一，例如： 0，1，10，11，100，101，110,111。这就是二进制 转换初次接触二进制总会觉得别扭，例如 101，这个数字在十进制中是一百零一，在二进制中他就代表了数字 5，这时候脑袋上可能会有大大的问号，怎么就知道他就是 5 呢，这里就要说一下进制转换了 当我们已知一个十进制数字的时候怎么转换成二进制呢，（余数法）方法如下： 5 ÷ 2 = 2 … 1 2 ÷ 2 = 1 … 0 1 ÷ 2 = 0 … 1 我们从上到下将余数拼接就是 5（十进制）= 101（二进制） 如果这里还是没看懂那可以看接下来的解释 我们从 0 开始数（下面示例中序号为十进制，计算为二进制） 0 0 + 1 = 1 1 + 1  ...

Stable Diffusion 体验（本地部署篇）安装 环境：python3.10.6（模型推荐版本）、CUDA、Git github 仓库：https://github.com/AUTOMATIC1111/stable-diffusion-webui 开始部署前如果 python 版本不是 3.10.6 建议卸载重装 python，因为是 stable 官方推荐使用版本，不这样的话很容易报错而且是一个接一个（血泪教训） 步骤： 首先将 clone 项目到本地，然后进入主文件夹并运行 webui-user 批处理程序此时会创建一个 venv 的虚拟运行环境（虚拟环境中的 pip 与 python 程序是系统的镜像，所有关于 Stable diffusion 的依赖都必须使用虚拟环境的 python 以及 pip 进行下载，切记使用全局环境的 pip 下载成无效）安装完成后重新运行 webui-user，出现下图时，就可以直接在 http://127.0.0.1:7860 访问可视化界面了 Docker 部署请参考：https://juejin.cn/post/7235083283133530170 异常处理首次运行建议科学上网，因为有需 ...

Nest 学习笔记前言学习 Nestjs 更多的处于兴趣，公司项目中有使用 nest，从代码结构看感觉跟 springboot 的写法类似，我也在自己的部分 demo 项目中应用了 Nestjs+express 作为框架进行开发，因此开始学习 Nest 的相关知识 介绍在学习 Nestjs 之前需要有一定的 TypeScript 的使用或学习经验，虽然 Nest 支持使用原生纯 js 进行书写，但是官方示例以及 cli 工具生成的代码都是 ts 的，笔记中的相关代码部分我也会应用 ts 进行记录。 支持版本：Node.js (>= 10.13.0, v13 版本除外) 版本查看命令如下： 1234$ node -vv14.17.3$ npm -vv7.x.x 注：如果电脑没有 node 环境，或没有 node 相关基础请移步 node 教程 安装 Nest Cli 工具及创建项目： 12npm i -g @nestjs/clinest new project-name 通过 cli 创建的项目中包含以下核心文件：src |- app.controller.spec.ts (对于基本控制器的单元测试样例) |- app.contro ...

Vue3.0 学习笔记 Vue3.0 的学习正在一点点地推进，我会在这里记录一些学习的过程与重要的知识点 该笔记仅记录 componsitionApi 的方式 基础～～ 组件组件是 vue 中最重要的内容之一，组件内部也有很多区别于基础的方法与属性 props 当我们需要将一个对象的所有属性全部当作 prop 传入的时候，可以使用 v-bind 的方式直接传入整个对象 12345//post 对象中所有的属性都要单独传入 const post = {id: 1, title: 'Hello Word'} 该情况下下面的两种使用方式完全相同 12<BlogPost v-bind="post" /><BlogPost :id="post.id" :title="post.title" /> ⚠️ 通过 prop 传入的对象 / 数组都是通过引用的形式，因此在自组件中修改对应的对象 / 数组内部的值并不会报错且会修改原值 所有的 prop 参数默认为可选的，如果需要必选则要 ...

Vue3.0 的新特性源码管理方式相对于 Vue2.x 中源码的组织方式，Vue3.0 使用了 monorepo，它将这些模块拆分到不同的 package 中，每一个 package 都有它对应的 API、类型定义和测试 这样将模块拆分的更加细化，模块更加独立、模块之间的依赖关系也更加明确，开发人员更容易阅读、理解和更改所有块源码，增加了代码的可维护性 开发语言支持 Vue2.x 使用的是原生 JavaScript 语言开发，因此对 ts 的支持并不是很好，在 Vue3.0 中，完全支持了 TypeScript 语言，使开发变得更加面向对象，增加了类型检查 性能优化 Vue3.0 在代码体积减小方面做了以下优化 移除了一些冷门的 feature 引入了 tree-shaking 技术 tree-shaking: 依赖 ES2015 模块语法的静态结构（import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记，如果在项目中没有引入 Transition、KeepAlive 等组件，那么他们对应的代码就不会被打包，这样就间接达到了减少项目引入的 Vue.js 包体积的目的 数据劫持优化数据的响应式与双向绑定，一直以来都是 ...

版本控制 - Git 的学习与应用介绍 Git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。 通俗一点来说就是一个用于控制代码存储仓库以及进行协同开发的工具，同类型的版本控制工具还有 cvs、Subversion 等 常用的远程库：github、gitee 以及 gitlab，其实还有阿里仓库、腾讯云仓库等 工作流程 克隆 Git 资源作为工作目录 在克隆的资源上添加或修改文件。 如果其他人修改了，你可以更新资源。 在提交前查看修改。 提交修改。 在修改完成后，如果发现错误，可以撤回提交并再次修改并提交。 特性 Git 会将每一次提交的所有文件保存为一个快照，如果这次提交的文件没有修改，那么 git 就会只保留一个链接指向之前存储的文件。 Git 几乎不会执行任何可能导致文件不可恢复的操作。 Git 工作区、暂存区和版本库 工作区：就是你在 ...

Flex 布局我们熟知的 css 布局有以下几种：绝对定位、相对定位、表格布局、响应式布局、浮动布局、弹性盒布局 下面我就搬运一下阮一峰老师的弹性盒布局（Flex）的基础属性与用法 传统布局布局的传统解决方案是使用盒模型，依赖 display 属性 + position 属性 + float 属性，但是这种布局方式就会出现狠不容易实现垂直居中的状况，而现在有了 flex 布局，对于响应式与简易实现布局提供了更多的可能 基本概念 flex 布局，意为弹性布局，可以为盒模型提供更加灵活的布局方式 1234567.box {display: flex;}.box { display: inline-flex; // 行内元素的弹性布局} 如果使用 Webkit 内核的浏览器，必须加上 - webkit - 前缀 设置为 flex 布局以后，float、clear、vertical-aligin 等属性都会失效。 Flex 容器默认存在两个轴：水平主轴与垂直交叉轴。项目默认沿主轴排列。 容器属性共有 6 个属性设置在容器之上： flex-direction flex-wrap flex- ...

React 学习笔记 - 基础篇首先声明在这里看到的很多内容都是官方文档中提到的，当然也加入了一些自己的总结 在 react 中一切都是 js，我们使用 jsx 来渲染组件 React 在渲染所有输入内容之前默认会进行转义，可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。 JSX 表示对象 Babel 会将 JSX 转义成一个名为 React.createElement () 函数调用。 以下写法相等： 12345678910const element = (<h1 className="greeting"> Hello, World! h1>);const element = React.createElement ( 'h1', {className: 'greeting'}, 'Hello, world!') 12345678//React.createElement () 会预先执行一些检查，以帮助你编写无错代码，实际上 ...

字节跳动 - 商业变现前端秋招一面面试时长 1 小时 8 分钟，字节的面试是经历过所有的面试中最能学到东西的 第一次面试字节的时候，面试官跟我讨论了一小时的网络优化，但是当时忘记写笔记了，也就只能存在于我的记忆中了 这是第二次面试，面试部门是商业变现团队，面试官也是非常准时的，也学到了很多东西。 面试内容 实习时的工作内容 面向对象的特点 以 “将大象放入冰箱” 为例用伪代码区分一下面向对象、面向过程和函数式编程 javaScript 的数据类型（基础类型、引用类型） 怎样判断一个变量是数组还是对象（Array.prototype.toStrring ()、Array.isArray） Array.prototype.toStrring () 与 tostring () 的区别（前者属于严格模式） 了解过 flex 布局吗，说一下 flex 的常用属性 (flex、flex-direction、flex-wrap、flex-flow、justify-content、align-items、flex-grow、flex-shrink) 处于复习考虑，之后应该会根据这次面试的问题发一篇系统复习的文章 怎样实现一个瀑布流布局（a ...