通过 Hexo 和 Travis 构建一个属于自己的博客
最近开启了大前端学习的道路，从事前端行业两年多了，想要一个自己的 Blog，不管是学习记录还是生活记录，都可以使用起来，而不是繁杂难选的三方平台，乘着学习过程中看到过的 Hexo＋Travis 的方式搭建自己的博客，我也兴致勃勃的想试试，此时你看到的就是搭建结果，这也是第一篇博客！ 前置准备 流浪在大前端的今天怎么能没有 node 呢，node 是必备的，大家自行安装即可=。=； 在自己的 git 仓库新建一个 xxx.github.io 仓库名的仓库，注意此处的 xxx 为你的 git 账号名，我的就是 seachan0117,细心的你可能已经发现，就是浏览器域名中的前一部分，我新建的仓库就是 SeaChan0117.github.io；此时通过浏览器尝试访问 seachan0117.github.io，页面报404，原因是我们项目还是空的，将代码clone到本地，新建一个 index.html，其中可简单填写部分内容测试，提交至远程仓库后，再次访问 seachan0117.github.io，我们的页面就能访问了。其实到这我们的 Blog 就算基本搭建完成，自己 ...
gridsome 安裝
Gridsome 初始化安装，参照官网 安装全局安装 gridsome 的脚手架工具，yarn global add @gridsome/cli 创建项目sharp官方给出在上一步安装脚手架后，可直接使用脚手架命令 gridsome create my-gridsome-site 创建一个名为 my-gridsome-site 的初始化项目，但是这样创建很难成功，因为 gridsome 依赖第三方的包 sharp，用于处理图片，它包含很多 C++ 文件，安装时需要编译，即需要 C++ 编译环境；sharp 还依赖一个 libvips 包，该包文件较大，在国内下载容易失败，即导致 sharp 难以安装成功；sharp官网 提供了一个中国镜像解决该问题； 执行命令配置 sharp 镜像： 12npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"npm config set sharp_libvips_binary_host "https://npm.taobao.or ...
图片懒加载
注本文针对不理解懒加载实现或者没实践过懒加载实现的开发人员，老手可忽略=。= 前言懒加载对于稍微有点开发经验的开发人员来说，多多少少都用过，至少听过，也都大概知道是为了用户体验优化性能而做的，说起来今天为什么突然想记录图片懒加载呢？ 主要原因是，目前太多的插件或类库有现成的懒加载供开发者使用，越来越多的年轻开发者对懒加载的实现不是很在意，毕竟很多拿来就用了，正好自己最近在面试（还没被问过），顺带记录一下。 什么是图片懒加载懒加载，即按需加载，需要的时候再加载，最常见的就是图片懒加载，树的懒加载，包括目前前端框架的一些组件或页面懒加载等； 图片懒加载，就是在用户打开一个有很多图片的页面时，初始化只加载用户可视区域的图片，当用户滚动时再将接下来 要展示 的图片加载，通过减少或者延迟请求次数，缓解浏览器压力，增强用户体验。 本文后续使用 懒加载 统一表示本文主题 图片懒加载 实现原理没有懒加载 代码 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en">&l ...
Plop 使用
什么是 Plop创建项目中特定文件类型的小工具，类似于Yeoman中的sub generator，一般不会独立使用。一般会把Plop集成到项目中，用来自动化的创建同类型的项目文件。 Plop 使用以 Vue 为例，通过 Plop 生成对应页面； 安装1yarn add plop -D 配置 项目根目录下创建 plopfile.js 的入口文件； Plop 入口文件，需要导出一个函数，此函数接收一个 plop 对象，用于创建生成器任务 12345678910111213141516171819202122// Plop 入口文件，需要导出一个函数// 此函数接收一个 plop 对象，用于创建生成器任务module.exports = plop => { plop.setGenerator('component', { description: 'create a component', prompts: [ // 命令行交互问题 { ...
钉子问题-动态规划
问题描述小明装修需要 n(1<=n<=200) 颗钉子，但是五金店没有散装钉子卖，只有两种盒装包装的，一种包装 4 颗，一种包装有 9 颗，请问小明最少需要买多少盒钉子才能刚好买够 n 颗，无答案时输出 -1？ 递归1234567891011121314151617function boxesFn(n) { if (n === 0) return 0 let res = Infinity if (n >= 4) { res = Math.min(boxesFn(n - 4) + 1, res) } if (n >= 9) { res = Math.min(boxesFn(n - 9) + 1, res) } return res || -1}console.time('boxes')console.log(boxesFn(100))console.timeEnd('boxes') 动态规划12 ...
鸿蒙OS JS UI
鸿蒙OS JS UI 框架什么是鸿蒙 鸿蒙（HarmonyOS）是一款由华为开发的，面向全场景的分布式操作系统，其开源项目为 OpenHarmony。 超级小程序 H5 -> 小程序（可使用移动端功能，离不开微信等超集 APP） -> 超级小程序（脱离了 APP 的限制，依旧能使用移动端功能，且可跨设备使用移动端功能，eg: 手机端操作其他设备） 可剪裁的系统 128 KB - 128 MB - 4 GB （根据硬件的大小或强弱，选择性地运行整个操作系统的某些部分） 模改的通讯协议 类似普通话统一方言，鸿蒙成为 IOT(Internet Of Things) 互联互通的标准语言 发展历史 2012年，华为开始规划自有操作系统 “鸿蒙” 2019年8月9日，华为发布鸿蒙 1.0 2020年9月10日，华为发布鸿蒙 2.0 2021年6月2日，鸿蒙正式商用 华为正式发布 HarmonyOS 2.0 及多款搭载 HarmonyOS 2.0 的新产品 相关网站 鸿蒙官网：https://www.harmonyos.com/ 鸿蒙系统开发者：https://dev ...
mongodb
Linux 下安装 MongoDB下载安装包官方下载：https://www.mongodb.com/try/download/community 可以下载到本地上传至服务器； 也可以 Copy Link 后到服务器命令下载 1wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-5.0.3.tgz 安装解压安装包1tar -zxvf mongodb-linux-x86_64-rhel80-5.0.3.tgz 将解压后的目录移动到 /usr/local 目录下，并改名为 mongodb1mv mongodb-linux-x86_64-rhel80-5.0.3 /usr/local/mongodb 进入 mongodb 目录，并创建文件夹 data，在 data 文件夹下再创建 db 文件夹（用于存放数据库数据）和 log 文件夹（存放 mongo 日志），然后为其设置可读写权限12345678# 进入目录cd /usr/local/mongodb/# 创建三个文件夹mkdir data data/db ...
远程服务器 Linux 常用操作
About 本文用于记录平时开发常用的远程操作命令，不定期更新； 安装 node / pm2 / 配置相关路径脚本安装123456789101112131415161718192021222324252627# 命令1 && 命令2 命令1执行完成后，再执行命令2nver='v14.16.1' #定义版本变量 nverndir="node-${nver}-linux-x64" #定义目录变量 ndir nfile="${ndir}.tar.xz" #定义压缩文件名变量 nfilecd /usr/local #切换目录wget https://nodejs.org/dist/$nver/$nfile $下载文件tar xvf $nfile #文件拆包解压mv $ndir nodejs #对目录重命名rm -rf $nfile #删除压缩包文件cd nodejs ...
NodeJS + Redis 实现漂流瓶接口
NodeJS + Redis 实现漂流瓶接口 界面：http://117.50.1.138/api:扔瓶子：post http://117.50.1.138:3000 time：漂流瓶扔出的时间戳，默认时设置为 Date.now()，后台生成，前台不用传； owner：漂流瓶主人； type：漂流瓶类型，为 male 或 female 之一； content：漂流瓶内容； 捞瓶子：get http://117.50.1.138:3000?user=xxx[&type=xxx] user：捡漂流瓶的人的用户名或用户id； type：漂流瓶类型，这里我们设置三种类型：all 代表全部，male 代表男性，female 代表女性，默认时为 all；
NodeJS 基础学习
NodeJS 基础学习相关问题记录 简单题简述 Node.js 的特点以及适用的场景Node.js 特点： I/O 异步： 在 Node.js 中，文件读写和网络请求等，大多操作都是异步方式进行调用，异步 I/O 即意味着在 I/O 操作时无需等待之前的操作结束，在编程模型上可以提升效率； 事件与回调： 在 Node.js 中，很多功能是继承自 events 模块实现的，所以事件得到了广泛的应用，而事件的处理基本都是依赖回调函数完成的，正因如此，Node 中的回调也就无处不在；由于异步代码的广泛应用，其中又有一套完整的事件循环机制负责处理事件的循环和调度； 单线程： Node.js 保持了JavaScript在浏览器中单线程的特点，而且在 Node 中，JavaScript 与其余线程是无法共享任何状态的；所以 Node 无法体现多核 CPU 的优势，处理 CUP 密集型任务时会占用过多的CPU Node.js 适用场景：基于以上 Node.js 的特点得出，非阻塞的异步 I/O 操作让 Node.js 适用于 I/O 密集型的高并发请求应用，比如大型应用中前后端之间 ...