SPARK`极客笔录

SPARK`极客笔录

路漫漫其修远兮，吾将上下而求索

服务器上安装 Ghost博客系统

本文要解决的问题：在服务器上安装 Ghost 博客软件，并通过 Web Server 设置反向代理的方式进行发布，涉及的系统环境和工具有： * CentOS 7.1 * Ghost 0.7 * Nginx 1 安装 1.1安装 Nginx 更新 CentOS 软件，安装开发工具包、Vim 和 wget： yum update -y yum groupinstall -y "Development Tools" yum install -y vim wget 首先我们安装Nginx启动HTTP服务器,安装成功后输入你的网站IP就可以看到“Welcome to Nginx!”。 编辑Nginx的仓储地址。输入：
4 min read

全站HTTPS

目前已经全部搞妥了，有了泛域名证书之后我把之前所有的域名证书全部替换了一下，现在更方便管理了。 既然要开启全站HTTPS肯定离不开SSL证书这个话题。 我以前一直使用的腾讯的TrustAsia，也就是诚信亚洲的证书。但是腾讯的这个证书有个毛病就是不支持泛域名（不能说不支持，是要花钱，而且死贵），而且只能一年一年申请。上次我笔记服务Trilium的证书过期了就要重新申请并再次上传到服务器上替换掉旧的证书，那个时候觉的超级麻烦，这也是我一直没弄HTTPS的主要原因。 这次在给又拍云弄SSL证书的时候忽然就想着要不要查查看有没有免费的泛域名证书用，这一搜果然有—— acme.sh ，他可以支持自动化的从Let’s Encrypt获取免费的泛域名证书，而且还支持自动更新。我之前有一次想给Ghost博客搞全站HTTPS时还用过这个服务，当时Ghost支持一键调用acme.sh生成证书并启用HTTPS，不过当时没研究这个东西所以不太懂，后来出了些配置问题弄不懂我也就弃用了。 acme.sh介绍 acme.sh是个开源的shell证书生成脚本，他可以自动生成
9 min read
web技术

React国际化实践指南

示例项目是由vite创建的react + ts模板 输入以下命令后输入项目名->React->Typescript即可创建 npm create vite@latest 安装所需工具包 npm i i18next react-i18next --save src目录下新建locales目录 新建语言文件,目录结构如下 src ├── locales | ├── en-US │ └── resources.json | └── zh-CN └── resources.json zh-CN/translation.json { "title": "标题", "common": { "confirm": "确认", "cancel": "
8 min read
关于如何科学上网
黑科技 Featured

关于如何科学上网

如果您想要科学上网，访问被屏蔽或限制的网站，使用VPN可能是您的最佳选择。在众多的VPN提供商中，Flyingbird VPN是一个不错的选择。 首先，Flyingbird VPN拥有遍布全球的服务器，覆盖多个国家和地区。这意味着您可以随时连接到全球各地的服务器，获得更好的上网体验和更高的网络速度。 其次，Flyingbird VPN采用了高级加密技术，确保您的网络连接和数据传输安全可靠。这是非常重要的，因为在使用VPN的过程中，您的个人信息和隐私需要得到保护。 此外，Flyingbird VPN的使用非常简单，只需要几步操作即可连接到VPN服务器。这使得它非常适合不懂技术的用户使用。同时，Flyingbird VPN还提供了24/7的客户服务支持，如果您有任何问题或疑虑，可以随时联系他们的客服团队获得帮助。 最后，Flyingbird VPN的价格也非常实惠。他们提供了多种不同的套餐选择，以满足不同用户的需求和预算。无论您是个人用户还是企业用户，都可以在Flyingbird VPN找到适合自己的方案。 总之，如果您想要一个安全、可靠、简单易用且价格实惠的VPN服务
2 min read
web技术

前端SKU实现

一、 效果图 二、 前言 公司项目做商品模块 本人实现了商品sku生成部分 在sku生成后可以选择禁用其中部分sku ( 实际场景部分商品没有sku中的一些规格的时候需要禁用部分sku ) 所以在前台选择sku的时候会出现部分sku无法选中的情况 最开始也抱着百度的方案写这一块功能 但是目前百度的大部分都是 矩形阵图算法 但是亲测都有bug 所以最后只能自己写了 无奈自己愚笨 写不出来 最后求助公司其他大佬 和在大佬的帮助下完成此功能 三、 总体实现思路 根据选中的规格和当前需要被验证的规格组成一个对象 然后在循环skuList判断 只要有一条sku中的规格满足这个对象中的每一项即可 具体实现过程看下面代码实现过程 四、 实现代码 1、 先看数据 （这里是全数据 虽然有点长但是方便调试 测试） const specList = [ { title: "颜色", list: ["红色", "紫色", "白色", "黑色"
10 min read

Webpack中Loader与Plugin的区别

Loader（加载器） Loader用于对模块的源代码进行转换。loader 可以使你在加载模块时预处理文件 。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。 因为 webpack只能处理 JavaScript，如果要处理其他类型的文件，就需要使用 loader 进行转换，loader 本身就是一个函数，接受源文件为参数，返回转换的结果。 Plugin（插件） Plugin 是用来扩展 Webpack 功能的。使用 plugin 丰富的自定义功能扩展以及生命周期事件，可以控制打包流程的每个环节。 通过plugin，webpack可以实 loader 所不能完成的复杂功能。作用于整个构建周期，实现对 webpack 的自定义功能扩展。 Loader和Plugin的区别 1. loader是一个转换器，将a文件进行编译输出b文件，这里是操作文件。单纯的文件转换。 2.
1 min read
web技术

javascript中的深拷贝与浅拷贝

js有五种基本数据类型，string,number,boolean,null,undefind。这五种类型的赋值，就是值传递。特殊类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值，会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象，而不是复制对象的引用，就要用到对象的深拷贝。 当一个变量存放基本数据类型时与复杂的数据类型时分别存在以下的特点： * 基本数据类型的特点：变量直接将基本数据类型的值存储在栈(stack)内存中 * 引用数据类型的特点：变量将引用数据类型的引用（可以看作是地址）存储在栈(stack)内存，而对象本身存放在堆内存里，在栈中引用指向堆中的对象。 其实当解释器寻找引用值时，会首先检索其在栈中的地址引用，取得地址后从堆中获得对象。 首先我们来看一个例子： var num = 666; var numCopy = num; var obj = {name:"张三"}; var objCopy = obj; 对于以上的代码，变量的内存分配是在栈中，所以变量不可以存放堆中的对象，所以赋值就会出现两种情况
4 min read
NodeJS

用Puppeteer做一个简单的数据爬虫

用Puppeteer做一个简单的数据爬虫 本项目仅做参考，提供给新手的一个入门示例。此项目是利用puppeteer来爬取本人一个博客系统的数据 * 先看演示 因为禁用了headless，所以会弹出浏览器窗口，也是为了容易调试看效果 注意：因为是我自己的个人博客，服务器又是在国外，在国内访问较慢。如运行本demo出现超时，属于正常现象，这种情况下建议开启科学上网（搞技术的这就不多说了吧），开启全局代理试下 目录结构 * /data: 抓取数据存储位置（有条件的可以直接存在数据库中） * /utils: 工具类 * index.js: 入口文件（核心代码） * config.js: 配置文件（抓取地址与抓取页面数配置） 项目启动 * 安装依赖(进入项目目录) npm install * 普通启动 npm start * 调试启动 npm run dev 核心代码
5 min read
黑科技

借壳分享微信

调研某款 App Android 版微信分享来源动态原理以及实现方式 第一时间，当然是看看网上有没有前辈开源，借鉴（CV 大法）一波。 查询结果真的是悲喜交加： * 开森的是，有人研究过这个东西，也封装好了对应的 SDK。 * 悲剧的是收费，目前已了解的情况最低 100。 对于本身在帝都讨生活的落魄小 Android 而言，无疑是一笔巨款 （手动滑稽～勿喷～）。 都说穷人家的孩子早当家，不得已开始了逆向、分析之路 😂😂😂 相关代码已上传 GitHub，当然为了不给自己找事儿，本地命中库就不提供了，自己逆向去拿吧，地址如下： * github.com/HLQ-Struggl… 效果图 空谈无用，来个实际效果图最棒，这里就以我梦想殿堂 App 为例进行测试咯。 准备工具 基于个人了解简单概述： * ApkTools： 一般就是为了改包、回包，捎带脚拿个资源文件。 * ClassyShark： 一款贼方便分析
16 min read
web技术

用nodejs写一个alfred workflow

前言：工作中很多时候都要讲究效率，把一些繁琐重复的事精简化。能使你的工作都事半功倍～ 我用的环境node v10.19.0, npm 6.13.4, alfred 4.0.9 如果你还不了解alfred, 点此进入 废话不多说, 就用nodejs做个alfred的workflow工具, 功能需求： * 获取局域网的IP地址 * 获取公网的IP地址 * 输入IP地址查询归属地 因为我本人是从事前端开发的，nodejs对我来说并不陌生，所以今天就讲讲ndoejs开发workflow插件 制作初衷：我做的移动端项目很多，常常需要手机与电脑连接一个局域网下进行调试，每次都要查询一下自己的网卡IP。很容易就把自己给累死（哈哈） 先上效果图 * 直接输入ip * 直接输入ipp * 输入ip + IP地址 搞起来 开始前需要了解一下alfy 1.
4 min read
web技术

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

早在 HTTP 建立之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说，我们所写的HTML页面将要放在我们的 web 服务器上，用户端通过浏览器访问url地址来获取网页的显示内容，但是到了 WEB2.0 以来，我们的页面变得复杂，不仅仅单纯的是一些简单的文字和图片，同时我们的 HTML 页面有了 CSS，Javascript，来丰富我们的页面展示，当 ajax 的出现，我们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP 协议的
12 min read
编程技术

Linux Crontab 定时任务

cron介绍 我们经常使用的是crontab命令是cron table的简写，它是cron的配置文件，也可以叫它作业列表，我们可以在以下文件夹内找到相关配置文件。 * /var/spool/cron/ 目录下存放的是每个用户包括root的crontab任务，每个任务以创建者的名字命名 * /etc/crontab 这个文件负责调度各种管理和维护任务。 * /etc/cron.d/ 这个目录用来存放任何要执行的crontab文件或脚本。 我们还可以把脚本放在/etc/cron.hourly、/etc/cron.daily、/etc/cron.weekly、/etc/cron.monthly目录中，让它每小时/天/星期、月执行一次。 crontab 使用命令如下 crontab [-u username]　　　　//省略用户表表示操作当前用户的crontab -e (编辑工作表) -l (列出工作表里的命令) -r (删除工作作) 我们用crontab -e进入当前用户的工作表编辑，是常见
2 min read
web技术

详解window.performance

为了得到脚本运行的精确耗时，需要一个高精度时间戳，传统的做法是使用Date对象的getTime方法，其不足之处在于： * getTime方法及Date对象的其他方法只能精确到毫秒级别，无法得到更小的时间精度； * getTime方法只能获取脚本运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页。 为了解决这两个不足之处，ES 5引入高精度时间戳——Performance API。Performance是浏览器对象，精度可以达到1毫秒的千分之一。即1秒的百万分之一，这不仅能衡量程序的细微差别，提高程序的运行速度，还可以获取后台事件的时间进度。 Performance API用于精确度量、控制、增强浏览器的性能表现，使测量网站性能达到前所未有的精度。目前，所有主要浏览器都已经支持performance对象，，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。 performance.timing对象的属性： 属性 含义 navigationStart
6 min read
web技术 Featured

使用Mockjs模拟数据请求

用mockjs生成数据,不需要等待接口即可调试 一、安装 * 用npm包管理工具安装 npm install mockjs * 标签引入 <script src="http://mockjs.com/dist/mock.js"></script> 二、生成随机数据 Mock.js 的语法规范包括两部分： * 数据模板定义（Data Temaplte Definition，DTD） * 数据占位符定义（Data Placeholder Definition，DPD） 1. 将字符串随机重复1遍-10遍 Mock.mock({ "string|1-10": "★" }) // { // "
4 min read
web技术

FormData 对象之文件上传

writeHeader: 表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。 用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。 <input type="file" id="file" name="myFile"> 选择文件之后，将文件放入formData file.onchange = function (e) { console.log(e.target.files) let formData = new FormData(); formData.append(
2 min read
web技术 Featured

前端图片canvas，file，blob，DataURL等格式转换

将file转化成blob * 利用URL.createObjectURL() let $img = document.getElementById('img') file.onchange = function (e) { let file = e.target.files[0] let fileUrl = window.URL.createObjectURL(file) $img.src = fileUrl img.onload = function () { // 手动回收 URL.revokeObjectURL(fileUrl) } } 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。 将file转化为DataURL * 利用FileReader.readAsDataURL() l
1 min read
相关技术 Featured

Mongo shell指南（CRUD）

MongoDB 概念解析 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。 | MongoDB术语/概念 | 说明 | | :---: | :---: | :---: | | database | 数据库 | | collection | 集合 | | document | 文档 | | field | 域 | | index | 索引 | | primary key | 主键，MongoDB自动将_id字段设置为主键 | 安装MongoDB 安装MongoDB请参考之前文章MongoDB安装与基本使用 创建文档 1. insertOne命令（用于创建单个文档） db.<collection>.insertOne(<document>, { writeConcern:
15 min read