Rubyのいえ

发表于2023-02-22|计算机语言

## 前提之前在阿里云上买的域名，阿里云的服务器到期了，于是换成了华为云参考资料参考资料步骤获取阿里云的转移密码然后再华为云域名转入中提交一下

发表于2023-01-06|计算机语言

背景最近阿里云的服务器到期了，但是续费实在是太贵了之前是嫌麻烦，然后续费还挺便宜的，所以就没折腾去换服务器这回续费一个月就小一百，吃不消了，不得不折腾一下，花了3块钱在华为云上抢到个服务器，于是要把之前的博客，以及几个服务迁移到这个服务器上。问题汇总hexo 每次推送 nginx 都访问不到宝塔自带的 nginx 的 config 里默认的角色是www，然而我看每次自动部署的时候都会变成 root所以直接改nginx的配置就好，这样nginx 就能够读取到文件证书无效喵的，找了半天问题，发现是电脑的时间不是最新的时间，解决办法就是更新一下电脑的时间就好了证书续费为了开启 https 啊域名配置我的域名是在阿里云上买的，所以去阿里云上配置一下域名的解析，把之前的记录值改成现在的服务器 ip，不会立即生效，得过一阵子的。网站403我开的 80 端口，通过 ip 访问我的服务器资源显示 403 forbidden 于是我百度了一下，可能是权限的问题，查看到这篇文章啊之后我通过宝塔面板查看了一下网站的错误日志，发现权限有问题于是我进入宝塔的 ngi ...

【前端61_React】脚手架

发表于2022-04-25|计算机语言

React 脚手架基础 xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目包含了所有需要的配置（语法检查、jsx 编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果 react 提供了一个用于创建 react 项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目的目录，使用命令：create-react-app hello-react第三步，进入项目文件夹：cd hello-react第四步，启动项目：npm start 目录介绍 public/index.html 文件解释123456789101112131415161718192021222324252627282930<!DOCTYPE html><html lang="en" ...

【前端60_React】组件声明周期旧 & 新、对于 UNSAFE 的理解、验证 Diff 算法、key 的作用

发表于2022-04-20|计算机语言

React 生命周期生命周期函数也叫作：生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子通过一个案例来学习首先，在 render 中不要写 setState()，不然会死循环的，因为你执行 setState 就会触发 render() 下面介绍两个生命周期函数：组件挂载完毕：componentDidMount 组件将要卸载：componentWillUnmount 在如下的例子中有使用 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<script type="text/babel"> //创建组件 //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子 class Life extends React.Component{ sta ...

【前端59_react】组件分类、state、props、refs、事件处理、非受控组件 & 受控组件、高阶函数、函数柯里化、以及 onChange 回调不用柯里化的写法

发表于2022-04-17|计算机语言

React 组件创建组件组件分为两类，分别是函数式组件，以及类组件函数式组件函数式组件中的 thisbabel 官网的试一试，可以把函数复制进来看一看类组件类中的一般方法放到了类的原型对象上 12345678910111213141516171819<script type="text/babel"> //1.创建类式组件 class MyComponent extends React.Component { render() { //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。 //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。 console.log("render中的this:", this); return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>; } } //2.渲染组件到页面 React ...

【前端58_React】Hello-React、JSX、插件

发表于2022-04-10|计算机语言

前言什么是 React用于动态构建用户界面的 JavaScript 库(只关注于视图) 为什么要学习 React 原生操作 DOM 繁琐，效率低直接操作 DOM 的话，浏览器会重绘重拍没有组件化的方案，复用率低编程方式通常的编程方法有两种：命令式编程：写明每一步都做什么声明式编程：告诉程序我最后想要什么样的效果，至于步骤，让框架去帮我们实现 React 就是一个框架，声明式编程的写法 React 特点声明式编码组件化编码 React Native 编写原生应用高效（优秀的Diffing算法） React 高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 DOM Diffing算法, 最小化页面重绘。 Hello-React引入框架 react.js：React 核心库。 react-dom.js：提供操作DOM的react扩展库。 babel.min.js：解析JSX语法代码转为JS代码的库。注意引入的顺序 123456<script src="../js/reac ...

【前端57_Angular】自学

发表于2022-03-18|计算机语言

Angular结构型指令大多数的指令都是 *ng 加上相应的指令，比方说官网上的 for 循环属性绑定点击事件在标签上用(click) 来创建点击事件父 => 子创建新的组件在新终端中，输入以下命令，创建名为 product-alerts 的组件 1ng generate component product-alerts 创建结束后，会在 src 目录下生成如下文件如果终端提示这个报错尝试安装全局的脚手架 npm install -g @angular/cli@latest 准备子组件概览一下父子组件的传递数据流：子 => 父也是通过自定义事件的方式

【前端56_Vue 3】自学

发表于2022-03-15|计算机语言

Vue3学习视频做的笔记 1. 介绍 intro什么是 DOM全程为：Document Object Model 为什么会有虚拟 DOM因为搜索和更新真实的 DOM 会很慢虚拟 DOM 是用 javascript 对象来表示 dom 的一种方式渲染函数初识我们写的 template 首先会通过 vue 处理成渲染函数，渲染函数返回虚拟 DOM当组件中的数据更新之后，会重新执行渲染函数，返回新的虚拟 DOM 然后进行新旧对比，并高效更新 DOM Vue 三大核心模块概览图如下：来分开介绍：响应式模块编译器模块渲染模块渲染阶段挂载阶段补丁阶段组件的执行过程首先，模板编辑器将 html 转化为 render 函数然后使用响应式模块，初始化响应对象然后再渲染模块中，进入渲染阶段，这将调用 render 函数，它引用了响应对象模块，观察响应对象的变化，render 函数返回一个虚拟 dom 的节点接下来，在挂载阶段，调用 mounted 函数，使用虚拟节点创建 web 页面最后，如果我们正在被监视响应对象发生任何变化，那么渲染 ...

自己写一个简单的 Vite

发表于2022-03-14|计算机语言

什么是 Vite官网上已经说明啦：下一代前端开发与构建工具，提高开发者的开发体验分析首先看一下空项目里都有些什么吧，项目的根目录下会有个 index.html ，叫宿主页，页面内会有一个 script 标签这里使用浏览器新支持的 type="module" ，这样写有一个好处，就是在 main.js 中可以以 ESModule 的方式编写，且不需要打包工具进行打包，浏览器会发送相应请求，去寻找 vue 以及 ./App.vue，如下如所示等待加载完这两个资源之后，在进行 createApp() 创建应用程序，在页面上显示这样的处理方法有以下好处在开发阶段不需要打包，这样不管我的项目有多大，加载的速度快按需加载，用到相关的模块就去加载相关的模块，不相关的不加载，提高速度需要知道的知识点浏览器只知道相对地址，它根据当前的 index.html 的地址，去发送请求，获取资源浏览器只认识 html 、js、 css，如果给我一个vue 文件，浏览器是不知道怎么处理，所以 vite 需要额外去处理 vue 文件，（也就是把 vue 转化成 ...

【前端55_React】快速上手：新建项目、JSX 语法、VSCode 插件、组件、关于 setState、生命周期

发表于2021-11-28|计算机语言

React 入门前言最近接手一个 React 项目，还是大屏展示的，似乎还挺简单的，但是也不太会 React，所以有了这篇文章，我还在努力学 vue 呢，哎突然插进来这个，哈哈哈。介绍官方介绍，似乎来源于 facebook 新建并启动项目在命令行里输入如下命令 1npx create-react-app hello-react 什么是 npx 呢? 可以看一下阮一峰的教程主要点： Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下 npx 想要解决的主要问题，就是调用项目内部安装的模块避免安装全局模块安装过程如下（我网络比较慢…）安装好后，cd 到你的项目下，然后执行 npm run start 即可启动项目。 create-react-app 项目结构创建好后的项目如下有些比较常见，下面是 react 项目比较重要的文件说明 123456789101112131415├── README.md 文档├── public 静态资源│ ├── favicon.ico│ ├── index.htm ...