zhichaosong的博客

原创 程序员的时间管理实用法则

时间是我们每个人最珍贵的资源，也是世界上最公平的资源。

原创 Github开源贡献者的狂欢——教你如何免费领取价值$200的Starknet空投

2024 又迎来了四年一度的 BTC 减半时刻，币圈仿佛一下又热闹了起来，这几天有一个新的基于 ETH 的项目诞生了：StarkNet，代号 STRK，凡是在前 5000 个开源项目贡献过至少 3 个 commit 的程序猿都会被空投至少 111.1 枚代币（当前价值 200+ 刀），下面我们来看下怎么领取吧。

原创 用 JavaScript 检测键盘大写锁定键的状态 - JS 判断大写锁定

用户在输入密码的时候，由于看不到输入的字母，这时如果 Caps Lock 大写锁定键打开，会给用户造成不必要的困扰。让我们看看如何使用JavaScript检测大写锁定。有更好的浏览器支持，所以我们更喜欢使用它。如果您有任何问题，请在评论中告诉我们。的方法，我们可以使用它来执行此操作。如果我们愿意的话，我们还可以使用。这段代码告诉我们如何使用。

原创 记一个React组件入参不当导致页面卡死的问题

React 组件入参处理不当导致点击按钮后页面卡死

转载 吴军 | ChatGPT七问七答

从野蛮社会到人工智能，计算机科学家吴军为你讲解ChatGDP的来龙去脉。​4月3日晚上，吴军就人工智能和ChatGPT等当下热议的话题展开了一次直播。​​谷歌中日韩搜索算法主要设计师、知名人工智能、自然语言处理专家。毕业于清华大学和约翰霍普金斯大学，计算机专业博士，前Google高级资深研究员、原腾讯副总裁、硅谷风险投资人。

原创 如何使用基于GPT-4的Cursor编辑器提升开发效率

程序员最痛恨的两件事：1是别人的代码没有文档，2是给自己的代码写文档。GPT-4的到来把这些问题都解决了，并且远不止于此，很有可能顺带把程序员也解决了。。。

原创 实验分析React编译产物

> webpack 帮我们处理了组件引用关系，将 jsx 转换成了 js 代码，这里我们通过实验看一下产物的跟预想的是否一样：> 1. 公共组件编译后是一份产物么？> 2. 能否手动控制公共组件一份还是多份产物？> 3. 如果使用 JSON 映射组件的方式，json 本身是否会打包进去？json 中未使用的组件是否会打包进去？

原创 关于前端研发质量提升的建设思路

线上无小事，出现线上事故轻则影响用户体验，重则造成资损，这都是我们不愿意看到的现象。但又有一个著名的墨菲定律：可能出错的事，就一定会出错。那么我们应该如何减少错误、降低影响呢？

原创 package-lock.json那些事

在多人开发时经常冲突，该如何解决才能保证线上质量？如何定义才能符合我们的预期？本文通过实验来探究包版本管理最佳实践。

原创 FormRender使用场景及原理简介

schema 以国际标准的 JSON schema为基础，同时能够方便使用任何 antd 的 props通过bind字段，允许数据的双向绑定使用{{...}}书写表达式来完成简单的联动

原创 【最佳实践】前端常量如何定义适用不同场景

维护常量枚举值是一个常见的场景，手工维护的成本高而且团队风格不统一，如何处理更好呢？使用常量的 4 个场景​：① 代码常量，避免魔法数字​；② 常量转中文，一般在列表展示等场景使用​；③ 下拉选项，例如 select 的 option​；④ TS 声明​；.........

原创 如何成为领域专家的6个步骤

如何成为领域专家，掌握这 6 点习惯，就可以成为时间的朋友，沉淀成行业专家

原创 天猫达尔文商品管理体系通俗简介

达尔文是一套全新的商品管理体系，它不同于淘宝原来的分类法（基于类目属性体系）的管理思路，而是以最细粒度的产品节点（CSPU）为核心，使用系统+运营机制的方式维护一套丰富、准确的产品库，通过产品实现聚合、管控商品，以确保商品信息的确定性。文章目录一、为什么要用达尔文二、单元划分三、名词释义四、参考文档一、为什么要用达尔文在实行达尔文体系之前，天猫商品管理存在以下问题：1. 最细粒度产品模型的缺失； 2. 存在大量重复SPU，SPU信息不准确；3. SKU信息混乱，且缺乏有效监管的途径；二、.

原创 互联网项目开发流程规范

文章目录1. 需求评审2. 开发3. case评审4. 联调5. 代码评审6. 提测7. 上线8. 交付效果1. 需求评审清晰了解背景和目标价值背景不写，目标不清晰，追问，不要直接进入产品方案评估产品解决方案是否合理，努力输入改进建议，风险评估产品方案敢于怀疑、优化参与技术方案设计，考虑向后向前兼容、耦合关系，连带影响评估技术方案主动参与，不要纯等待后端清晰项目紧急度、项目全生命周期的排期情况随时要，都能给到参会人评审会上至少提出1点改进意见2. 开发确保接口上mockserver

原创 Ant Design 中 resetFields 导致自定义组件销毁并重新加载问题分析

在 Form 中使用子组件的过程中发现，每次 resetFields 都会导致子组件销毁重建，而子组件由于要请求接口加载数据，所以会导致重复请求。本文记录相关 Issues 的查找过程和和相关源码分析一、现象说明如下代码所示，每次子组件 FormChild 都会打 2 次 log，分析发现是 form.resetFields() 导致子组件重新加载了，而 form.setFieldsValue() 则不会导致组件重新加载import React from "react";import React.

原创 正则表达式获取 URL 中的所有参数和值

解析 URL 参数是一个常用的场景，一般有 2 种处理方式：① 正则获取；② split 自行处理；本文写了 2 个常用的场景示例：① 获取所有参数；② 获取单个参数；一. 获取所有参数的 <key, value> 对象1. 正则方式/*** 获取当前 URL 所有 GET 查询参数* 入参：要解析的 URL，不传则默认为当前 URL* 返回：一个<key, value>参数对象*/function getUrlQueryParams(url = locatio.

原创 shell expect 脚本服务器自动输密码登录、SCP传输、解压文件

expect 脚本与 bash 脚本的语法有些差别#!/usr/bin/expectset user "xiaoju"set host "10.96.84.64"set pwd "BcjPL5C#"set path "/home/xiaoju/wujie_work/marketing_fe/test1"set build "bin"## 压缩并上传到服务器set timeout 10spawn tar czvf build.tar $buildspawn scp build.tar.

原创 纯 JS 实现复制到粘贴板

本文不借助其他库，可以兼容各大浏览器实现文字复制，原理就是利用浏览器机制，在复制的时候创建一个 textarea，复制完再销毁掉，document.execCommand("Copy") 命令只有在输入区域才能生效，而且不能隐藏，因此灵活性欠缺

原创 谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题 - 接口返回数据被翻译

背景：Chrome浏览器自带谷歌翻译，这个翻译还是挺实用的，但如果前端代码设置不当，再加上用户操作失误就容易造成很多莫名其妙问题，下面详述问题现象、排查过程及解决方案文章目录一、问题现象二、排查过程1. Table 主键2. 观察现象三、解决方案1. 方案一：手动禁用翻译2. 方案二：代码禁用翻译3. 方案三：代码设置语言一、问题现象有台客服电脑查数据怎么都查不对，地址、价格都对不上，但是别的电脑没问题、后端返回数据没问题，这个数据也不是随机的，每次查出来很固定，但是不对二、排查过程1. .

原创 ESLint 驼峰规则校验关闭

ESLint 作为一种代码规范，可以帮我们检查代码的格式和风格，大家能保持一种统一的风格有助于团队协作。ESLint 中文官网1. 驼峰校验提示因为后台接口使用下划线的方式，所以前端代码中也对应起来，但是这样驼峰校验就通过不了，场面一度十分尴尬前端代码：2. 临时解决方案：段落忽略校验根据控制台编译错误提示，查询官网说明 http://eslint.cn/docs/rules/camelcaseFailed to compile../src/pages/goodspackage/tag.

原创 工作中项目如何合理排期 - 吃盒饭悟出的道理

关于排期中午吃盒饭的时候在思考，怎么合理的安排才能把米饭和菜同时吃完，这也是一个小的排期吧。生活中这样的小排期随处可见，有时甚至不会去专门思考这类问题，但是冥冥之中每次都能同时把菜和饭吃完。仔细回想了一下，应该是每次快吃完的时候看到剩下的菜多就多吃两口，剩下的饭多也多吃两口，最终可喜的达到同时吃完的效果这是不是就可以类比前后端联调发现问题加班解决呢？怎么优化合理规划：首先饭量要匹配，不然吃不完；其次是分阶段规划，拆分目标，粒度变小后就更容易预估，极端点每口饭吃多少总知道的吧；及时跟..

原创 windows下安装包制作软件：NSIS的使用方法（以electron为例）

NSIS (Nullsoft Scriptable Install System) 是一个专业开源的制作 windows 安装程序的工具。它提供了安装、卸载、系统设置、文件解压缩等功能。这如其名字所指出的那样，NSIS 是通过它的脚本语言来描述安装程序的行为和逻辑的。NSIS 的脚本语言和通常的编程语言有类似的结构和语法，但它是为安装程序这类应用所设计的。下面以 Electron 程序安装包的制作为例，介绍NSIS的用法。文章目录一、安装 NSIS二、编辑脚本2.1 准备安装包2.2 新建脚本2.3 .

原创 Electron 开始运行及示例项目简要介绍

Electron 是基于 Chromium 和 Node.js 的开源项目, 让你可以使用 HTML, CSS 和 JavaScript 构建桌面应用程序，兼容 Mac、Windows 和 Linux。文章目录一、运行项目二、快捷键三、项目目录3.1 package.json一、运行项目Electron官网：https://www.electronjs.org/# 克隆示例项目的仓库$ git clone https://github.com/electron/electron-quick-s.

原创 Windows 下 Ejabberd 即时通讯 XMPP 聊天服务器搭建配置详解 - 图文教程（1）

Ejabberd 是基于 Jabber/XMPP 协议的即时通讯服务器，由 GPLv2 授权（免费和开放源码），采用 Erlang/OTP 开发。它的特点是，跨平台，容错，集群和模块化。 Ejabberd 是可扩展性最好的一种 Jabber/XMPP 服务器之一，支持分布多个服务器，并且具有容错处理，单台服务器失效不影响整个 cluster 运作。文章目录一、官方手册1.1 官方教程1.2 ...

原创 摄像头视频流显示报错Failed to execute 'createObjectURL' on 'URL'

研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可1. 报错信息Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. a...

原创 【教程】宝塔面板部署 ThinkPHP 项目 - 图文教程

宝塔面板有比较方便的 LNMP 环境，可以自动申请 HTTPS 证书、一键创建 FTP、执行定时任务等管控工具，大大提高服务器运维效率文章目录1. 购买服务器2. 购买域名3. 管理服务器3.1 访问服务器 8888 端口3.2 设置面板用户名和密码3.3 登录面板4. 管理面板4.1 安装环境4.2 开启监控5. 网站部署5.1 域名指向5.2 网站设置1. 购买服务器这里我们为了演示...

原创 【教程】5. 搭建并熟悉 FastAdmin 框架

FastAdmin 是一款基于 ThinkPHP5 + Bootstrap 的极速后台开发框架。在FastAdmin中默认有四个应用模块：admin、api、common、index，你也可以扩展开发自己的应用模块。> 后台模块(admin)是FastAdmin中的核心模块，后台模块又分为系统配置、附

原创 【教程】4. 搭建并熟悉 ThinkPHP 框架

ThinkPHP 作为一个整体开发解决方案，能够解决应用开发中的大多数需要，因为其自身包含了底层架构、兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、表单处理等常用的组件，并且对于跨版本、跨平台和跨数据库移植都比较方便。

原创 【教程】基于 ThinkPHP 的 FastAdmin 后台开发教程汇总索引

ThinkPHP 是一个快速、兼容而且简单的轻量级国产PHP开发框架，简洁易用。FastAdmin 是一款基于 ThinkPHP5 + Bootstrap 的极速后台开发框架，形成了一套完整的生态。本系列教程主要带领大家从零入门进行后台开发文章目录一、基础准备1. WAMP 开发环境准备2. Xampp 部署代码 - 图文教程3. 使用 Navicat 连接 MySQL 数据库 - 图文教...

原创 【教程】3. 使用 Navicat 连接 MySQL 数据库 - 图文教程

Navicat for MySQL 是一款强大的 MySQL 管理工具1. 使用 PHPstorm 打开项目1.1 打开项目1.2 找到数据库配置2. 使用 Navicat 连接 MySQL2.1 打开 Navicat2.2 新建连接连接名：随便填，相当于备注主机：数据库的服务器地址端口、用户名、密码：根据实际填写2.3 连接成功...

原创 【教程】1. WAMP 开发环境准备

WAMP 指的是 Windows下的 Apache+Mysql/MariaDB+Perl/PHP/Python，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。一、开发相关软件1. 开发工具PHPstorm官方下载：https://www.jetbrains.com/phps...

原创 【教程】2. Xampp 部署代码 - 图文教程

将 PHP 项目代码下载到本地后，在 Xampp 中启动 Apache 并配置项目目录即可运行文章目录1. 下载代码1.1 使用命令行1.2 使用 TortoiseGit2. 在 Xampp 配置代码路径2.1 配置主目录2.2 重启 Apache2.3 浏览器访问1. 下载代码代码需下载到 Xampp安装目录的 htdocs文件夹下，例如：D:\xampp\htdocs1.1 使...

原创 Xpdf 中文字体解决方案(TTF字库) - 图文教程

Xpdf是用来处理和转换 PDF 的利器。项目中需要将 PDF 转换为图片，但是发现有的 PDF 文档转换缺失字体，必须要使用 ttf格式的字体才行，直接安装到系统不管用，于是到官方文档才发现还需要配置字库，根据说明配置好后问题迎刃而解。官网地址：http://www.xpdfreader.com/文章目录一、报错提示二、官网解决方案1. 官网配置说明三、xpdfrc 完整配置五、配置...

原创 Android Studio 常用快捷键 - 英文组合键表

原创 Navicat连接MySQL数据库出现Authentication plugin 'caching_sha2_password' cannot be loaded的解决方案

原因是 MySQL8 之前的版本中加密规则是 mysql_native_password，而在MySQL8 之后，加密规则是 caching_sha2_password，解决问题方法有两种：一种是升级 Navicat 驱动，一种是把 MySQL用户登录密码加密规则还原成 mysql_native_password。本文介绍第二种方法：管理员权限运行命令提示符，登陆MySQL# 使用命令...

原创 基于容器云的SaaS服务启动顺序图

商户SaaS平台数据库容器云手机、二级域名、并发人数、截止时间创建MySQL实例返回数据库实例信息添加ConfigMap配置返回配置信息创建应用编排模板返回模板信息启动实例返回服务IP:Port根据二级域名、返回的服务地址配置Nginx转发返回二级域名商户SaaS平台数据库容器云...

原创 Nginx通过批处理一键配置域名转发规则 - 实现自定义域名指向特定端口的SaaS服务

当同一个服务需要为不同的租户提供服务，且每个租户使用不同的域名时，我们可以使用 Nginx 将不同的域名转发到不同的端口上，这样也方便使用容器云动态配置租户，本文简要说明了 Nginx 通过批处理一键配置域名转发规则文章目录一、安装 Nginx1. 下载 Nginx 并解压2. 修改 Nginx 配置3. 启动服务二、配置域名转发规则1. 配置模板2. 批处理脚本3. 执行脚本三、配置域名解...

原创 Windows下Nginx的启动、停止、重载等命令

在 Windows 下使用 Nginx，我们需要掌握一些基本的操作命令，比如：启动、停止Nginx服务，重新载入配置等，下面我就进行一些简单的介绍。启动start nginx停止stop 是快速停止 nginx，可能并不保存相关信息；quit 是完整有序的停止 nginx，并保存相关信息。nginx -s stopnginx -s quit重载配置当配置信息修改，...

原创 如何去除BootStrap栅格系统默认的15px的padding

BootStrap的栅格系统对于响应式的网页开发非常方便，在使用栅格系统的时候可以非常方便的时候row和col-*-来控制布局。但是col--*默认会带15像素的左右padding，这个会比较困扰。解决方案可以在内部标签的class上添加row，这样会去掉表格的默认padding。示例如下：<div class="col-lg-12"> <div class="row"&gt...

原创 利用JS实现禁止浏览器后退返回上一页

//防止页面后退history.pushState(null, null, document.URL);window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);});