[置顶]
图标组件的封装与管理（React/svg）
摘要：
一 概要 1.1 背景 最近在项目中使用了很多从iconfont拿到的图标。使用官网的导入方法有些繁琐，也不易管理。于是捣鼓了一下... 1.2 目的 像组件一样使用，具有规范性。比如暴露一个type属性，根据不同的type使用不同的主题色。 高自由度。直接在项目中管理图标，只关注svg。（这个图标
[置顶]
处理多文件上传：拖拽上传/上传进度/并发控制
摘要：
参考文章：https://www.cnblogs.com/goloving/p/15271258.html Web源码：https://gitee.com/chenxiangzhi/node_projects/tree/master/file-uploader/public 完整的文件上传Node服
[置顶]
Cesium常用方法封装
摘要：
Cesium常用方法封装 关于cesium的webpack配置，可查看：https://www.cnblogs.com/sanhuamao/p/18027139 源码：https://gitee.com/chenxiangzhi/cesium_webpack/tree/util/ 这里列举了三个例子
[置顶]
让多媒体元素在既定容器中自由布局
摘要：
一 功能 可添加时间、日期、星期、字幕、图片、视频和背景音乐。 可修改布局大小。画布及元素的个别属性（如x，y，width，height，fontsize）将会通过一定比例进行缩放，以此达到接近实际所看到的效果。 可通过拖拽修改元素位置、添加新元素；可对元素进行收缩以改变其尺寸等属性。 支持修改时间
[置顶]
在Canvas中用鼠标绘制多边形区域
摘要：
一 需求场景 需要在监控画面中绘制一块监测区域（多边形），最后取多边形的各个坐标点。 鼠标左键：加入路径点 鼠标右键：撤销 鼠标移动：动态绘制区域 双击鼠标左键：清除画布 回车：完成绘图 二 效果图 三 Canvas基本概念 如果你对canvas不熟悉，不妨简单过一下概念，以便理解代码。 1. 坐标
[置顶]
前端Js自定义相机取景框
摘要：
参考文章： 实现的demo：https://www.freesion.com/article/67641324321/ getUserMedia：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 一些
[置顶]
vue |通过BetterScroll创建动态菜单
摘要：
参考：https://juejin.cn/post/6844903655108280328 效果 BetterScroll //安装 npm install better-scroll --save //导入 import Bscroll from "better-scroll"; 滚动原理：需要一
[置顶]
vue |仿写一个移动端日历组件
摘要：
仿写一个日历组件，有些粗糙，需要优化的地方欢迎提出！ 参考文章： https://www.jianshu.com/p/67acaaf7d2f7 https://blog.csdn.net/zxb89757/article/details/103579415?ops_request_misc=%257
直播的剪辑工作流/工具分享
摘要：
基本流程 获取素材 粗剪 导出音频识别成字幕文件 应用字幕并校准字幕 配bgm并进行精剪 工具分享 一 获取直播素材 高时效性-即录即拿：VLC media player、录屏软件(如Screen Recorder Pro等) 中时效性解放双手-需等待其录制/编码完成，也可强制停止： biliup：
React周视图组件封装
摘要：
技术栈：React、antd 需求背景 使用周视图来显示广播信息与状态 组件特点 当多个时间块交叠时，并行显示。对于交叠时间块，最多显示3个，如果要显示全部交叠的时间块，可点击展开。 可对时间段精度进行扩展。当有多个时间段短的时间块相邻但不重叠时，方便看查。 支持跨天显示。对于跨天的广播，会将其分割
npm包发布流程
摘要：
npm 发布包流程 背景：假设你写了一些 js 方法想打包发布 参考：https://www.youtube.com/watch?v=xnfdm-s8adI、 1. 初始化环境 mkdir methodjs cd methodjs npm init -y # 安装依赖包 npm i -D tsup@
Nodejs 在实战中的校验用户信息（JWT、localStorage、Cookie）
摘要：
本文分别站在了客户端（reactjs）与服务端（nodejs）的角度，总结了整个用户校验过程各自的操作。 一 概念明晰 1.1 localStorage 和 Cookie 都是存储数据的方式 localStorage：储存在客户端（浏览器）本地 Cookie：存储在服务端，安全性更高。（是一个 HT
React性能优化手册
摘要：
此文章属于笔记总结。对应的课程地址：https://www.pluralsight.com/courses/react-performance-playbook 相关网站：https://web.developers.google.cn/?hl=zh-cn 性能审查 检测指标 Core Web vi
Cesium之Webpack配置指南
摘要：
源码：https://gitee.com/chenxiangzhi/cesium_webpack 1. 获取Token 注册 Cesium 账号，点击 Access Tokens Tab 并复制默认 token 2. 安装依赖包 npm init npm install cesium npm ins
Nginx部署网站&Docker&自动更新部署
摘要：
一 搭建web服务器 lsb_release -a # 查看Linux版本 Linux不同版本的操作方式会有所不同，注意区分。我是在阿里云买的，用的是AlibabaCloud，所以文章的大部分命令会以这个系统为准。 1.1 安装与启动Nginx # Debian/Ubuntu apt install
使用hook封装表格常用功能（react）
摘要：
实现内容 配置分页：usePagination 生成过滤项：useFilter 获取表格选择配置：useSelect 生成批量删除按钮：useDelete 生成模态框：useModal 基于react@18.2.0，antd@5.12.5 示例 render部分： <React.Fragment>
react| 封装TimeLine组件
摘要：
功能 支持居中/局左/居右布局 可自定义线条颜色 默认情况下图标是圆形，可自定义圆形颜色和大小，同时也可以自定义图标 支持自定义内容 效果 const data=[ { "title": "2022-12-05 12:03:40", "des": "茶陵县实时广播防火宣传" }, ... ] <Ti
CSS绘制无状态的音频波形图
摘要：
效果 代码 这是从codepen参考过来的一段代码，自己diy了一下。可以根据需求修改显示的条数、宽度、颜色、跳动频率及幅度。 import React from 'react'; const SoundWave = () => { return ( <div class="sound-wave">
给url的query传参时的奇妙现象
摘要：
背景 react@16.6.0 类组件 心路历程 如果你要传一个时间参数，那么要小心啦！这个问题看得我头疼。见下面例子： let start_time="23-10-10 00:00:00" let urlTo=`/syslog?start_time=${start_time}` 好的，要执行跳转了
TS中的Type和Interface
摘要：
# 基本介绍 > 学习内容来源于：https://www.youtube.com/watch?v=Idf0zh9f3qQ **Type 与 Interface的区别** 1. 编写方式 2. 继承方式 **Type 的优势** 1. Interface只能描述对象，而Type还可以描述其他类型如`s
Web Component 简单示例
摘要：
# 前言 Web Component： 创建可重用的定制元素 **学习内容来源：** - https://www.youtube.com/watch?v=2I7uX8m0Ta0 - https://developer.mozilla.org/zh-CN/docs/Web/API/Web_compon
自适应图片：根据屏幕大小选择图片内容
摘要：
# 自适应图片 根据屏幕大小选择图片内容。本文为学习笔记，主要内容为img的`srcset`与`sizes`属性，以及`picture`标签。学习内容来自于： - mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
React-DnD的简要使用方法与API文档
摘要：
前提 这是一个便于开发者操作拖拽交互的库，第一次看的时候感觉非常抽象，捣鼓半天终于懂了那么一丢丢！它的官方文档贼难进去，这篇文章主要是把一些常用的内容记下，希望能帮助到大家。本篇文章参考的是16.0.1版本 npm i react-dnd 1 简单示例 1.1 useDrag：让DOM允许拖拽 im
Echarts图表管理方式总结
摘要：
由于最近项目图表非常多，而且很多都是有共性的，于是摸索除了一套便于管理的图表配置方式。 一种是处理共性的，可参考下方的1,2,3,4 一种是处理特殊性的，可参考下方的5， 其实两种方式可以共用。 1. 基本样式模块化 把一些常用的属性一块一块写好。下面举一些例子 | 名称 | 示例 | | | |
直播流播放组件
摘要：
01 使用 <Player id="mycamera" url="xxx.flv"/> 02 封装 第三方库：flv.js 播放组件 import React, { useRef, useEffect } from 'react'; // 传入id和链接 const Player = ({ id,
vue3+TS 通用组件封装
摘要：
这是我第一次对vue3+ts进行实践，写的可能比较菜，见谅。组件的使用方式是模仿element plus的。内容有点长，会持续更新。 源码：https://gitee.com/chenxiangzhi/components 1. Input 输入框 2. Checkbox、CheckeboxGrou
自制前端脚手架工具cli与发布npm包
摘要：
前言 之前为了学习webpack和ts编译，写了几个脚手架，自制的脚手架包括vue和react框架，可选择js与ts语言，脚手架只包括最基本的依赖。为了更好的管理与使用自己的写的脚手架，就写了个cli npm包。使用方式如下： npm i @sanhuamao1/sancli // 安装 san-c
react封装可输入选择器
摘要：
前言 用React15写的，选项是静态数据，为了适应原来的代码，加了很多复杂的东西 - 。-，不过也算学了点新东西，记录一下。 效果展示 结构分析 数据结构 constructor(props) { super(props) const { value, dataList } = props //
react封装滑动分页表格
摘要：
ScrollTable基本介绍 滑动底部进行分页（用Observer实现），支持render 支持参数： columns：列属性【Array】，每列支持的属性如下： { hide:false ，// 是否隐藏该列 field:'name'，// 字段名称 headerName: '姓名',// 列名
用webpack从零搭建基于typescript的react项目
摘要：
前言 跟着油管一个教程做的笔记，看完觉得非常有帮助！这篇文章主要包括以下四个部分，源码 第一步：typescript编译 第二步：webpack解析及打包 第三步：webpack合并及相关问题 第四步：eslint 第一步 1.初始化项目 npm init 2.创建src文件夹，并在里面创建inde
IntersectionObserverAPI 应用：图片懒加载|固定导航栏|模块渐入
摘要：
参考 Udemy js教程 Intersection Observer API参考文档 概念 Intersection Observer API 通过注册观察者，可以观察目标元素与可视窗口的交叉比率，当达到某一个比例时执行回调函数。它不需要一直监听滚动事件就可以做到图片懒加载、固定导航栏、滑到某个位
简单聊天室
摘要：
演示 html <div id="firstStep"> <input type="text" placeholder="输入用户名" id="username"/> <button id="inter">进入聊天室</button> <div id="message" style="color:r
react+nodejs+mysql实现管理系统
摘要：
引言 本项目是跟着b站一个视频做的新闻管理系统，原视频没有做后端部分。我在此基础上自己构建了数据库，写了接口服务，同时对原本的页面展示进行了部分修改。另外，原视频用的是redux管理状态，本项目用的是mobx。项目的所有源码都在github中。 一 项目组成 news-app：前端 npm i np
nodejs+express+mysql实现接口服务
摘要：
跟着课程和文档写的接口服务器，稍微对重点进行了一个总结，完整的项目源码可以戳这里获取 项目结构 router：存储各个模块的路由 router_handler：存储各个模块的处理函数 schema：存储各个模块的验证规则 utils：封装一些方法 uploads：上传地点 config.js：tok
用户认证session与token中，前后端的交互方式
摘要：
之前写过一篇关于用户认证的文章，不过是在理论方面。 最近去看了两个课程，里面涉及到了用户认证实战方面，自己写的时候遇到了许多问题，所以想写篇文章记录一下。 本文涉及技术栈有nodejs、express、fetch、xhr、localstorage。前置知识可参考我的笔记，下面的实例保存在目录04用户
React的通信方式与状态管理：Redux与Mobx
摘要：
kerwin-《千锋react全家桶》笔记，部分参考了： https://www.html.cn/qa/react/17960.html https://redux-saga.js.org/ https://github.com/redux-saga/redux-saga 一整个整理下来可谓是十分酸
React新旧版本生命周期对比
摘要：
最近在学习React生命周期，笔记记了一堆，越记越乱(-.-)，于是做个图帮助自己理解，先后顺序基本都自己验证过，有错误或补充的欢迎底下评论~ 参考了：https://zhuanlan.zhihu.com/p/392532496、https://www.jianshu.com/p/b331d0e4b
Cookie/Session和Token是什么
摘要：
一 引入 HTTP是无状态（stateless）的，每次与服务器交互时，不会保留上次的状态，如用户信息。本篇文章介绍的是解决该问题的办法。该文章参考的资料有： https://www.cnblogs.com/ruoruchujian/p/11271285.html https://www.cnblo
Promise、async/await实现异步操作
摘要：
并发与并行 并发：对于单核处理器，同一时间内多个程序同时进行，这些程序在微观上是交替进行的 并行：对于多核处理器，同一时刻内有多个程序同时进行 同步与异步 同步 Synchronous ：前一个任务执行完毕后，后一个任务才能进行。 异步 Asynchronous：多个任务可同时进行——多线程编程 J
latex入门
摘要：
头部 \documentclass[属性(逗号相隔)]{类别} ：文件类型 类别： article ：科学期刊、 演示文档、 短报告、 程序文档、 邀请函等） book ：书籍排版 letter：信件书写 *report：多章节长报告、 短篇书籍、 博士论文等 proc：基于 article 的会议
408计组 |二、数据的表示和运算
摘要：
一 数制和编码(#一 数制和编码) 二 定点数(#二 定点数) 一 数制和编码 1.数制相互转换 2.BCD码 3.字符与字符串 4.校验码 奇偶校验 海明码 循环冗余校验码 1.数制相互转换 1.1 r进制到十进制 1.2 二进制到八进制、十六进制 1.3 十进制到r进制 2.BCD码 3.字符与
应用 |前端限制仅允许指定ip访问页面
摘要：
封装方法 import axios from 'axios' const allowIP = ['119.133.5.19']; //允许访问 async function getIp() { const res=await axios.get('https://api.ipify.org/')//
