幻尘の屋

鸿蒙开发前言随着鸿蒙系统宣布删除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 ...