摘要: 此文章属于笔记总结。对应的课程地址:https://www.pluralsight.com/courses/react-performance-playbook 相关网站:https://web.developers.google.cn/?hl=zh-cn 性能审查 检测指标 Core Web vi 阅读全文
posted @ 2024-04-16 17:58 sanhuamao 阅读(2) 评论(0) 推荐(0) 编辑
摘要: Cesium常用方法封装 关于cesium的webpack配置,可查看:https://www.cnblogs.com/sanhuamao/p/18027139 源码:https://gitee.com/chenxiangzhi/cesium_webpack/tree/util/ 这里列举了三个例子 阅读全文
posted @ 2024-04-11 00:39 sanhuamao 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 源码:https://gitee.com/chenxiangzhi/cesium_webpack 1. 获取Token 注册 Cesium 账号,点击 Access Tokens Tab 并复制默认 token 2. 安装依赖包 npm init npm install cesium npm ins 阅读全文
posted @ 2024-02-22 13:31 sanhuamao 阅读(88) 评论(0) 推荐(0) 编辑
摘要: 一 搭建web服务器 lsb_release -a # 查看Linux版本 Linux不同版本的操作方式会有所不同,注意区分。我是在阿里云买的,用的是AlibabaCloud,所以文章的大部分命令会以这个系统为准。 1.1 安装与启动Nginx # Debian/Ubuntu apt install 阅读全文
posted @ 2024-01-09 08:37 sanhuamao 阅读(34) 评论(0) 推荐(0) 编辑
摘要: 实现内容 配置分页:usePagination 生成过滤项:useFilter 获取表格选择配置:useSelect 生成批量删除按钮:useDelete 生成模态框:useModal 基于react@18.2.0,antd@5.12.5 示例 render部分: <React.Fragment> 阅读全文
posted @ 2023-12-28 17:30 sanhuamao 阅读(65) 评论(0) 推荐(0) 编辑
摘要: 一 功能 可添加时间、日期、星期、字幕、图片、视频和背景音乐。 可修改布局大小。画布及元素的个别属性(如x,y,width,height,fontsize)将会通过一定比例进行缩放,以此达到接近实际所看到的效果。 可通过拖拽修改元素位置、添加新元素;可对元素进行收缩以改变其尺寸等属性。 支持修改时间 阅读全文
posted @ 2023-11-30 10:08 sanhuamao 阅读(14) 评论(0) 推荐(0) 编辑
摘要: 功能 支持居中/局左/居右布局 可自定义线条颜色 默认情况下图标是圆形,可自定义圆形颜色和大小,同时也可以自定义图标 支持自定义内容 效果 const data=[ { "title": "2022-12-05 12:03:40", "des": "茶陵县实时广播防火宣传" }, ... ] <Ti 阅读全文
posted @ 2023-11-14 10:17 sanhuamao 阅读(132) 评论(0) 推荐(0) 编辑
摘要: 效果 代码 这是从codepen参考过来的一段代码,自己diy了一下。可以根据需求修改显示的条数、宽度、颜色、跳动频率及幅度。 import React from 'react'; const SoundWave = () => { return ( <div class="sound-wave"> 阅读全文
posted @ 2023-11-08 10:18 sanhuamao 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 背景 react@16.6.0 类组件 心路历程 如果你要传一个时间参数,那么要小心啦!这个问题看得我头疼。见下面例子: let start_time="23-10-10 00:00:00" let urlTo=`/syslog?start_time=${start_time}` 好的,要执行跳转了 阅读全文
posted @ 2023-10-11 20:28 sanhuamao 阅读(22) 评论(0) 推荐(0) 编辑
摘要: 一 需求场景 需要在监控画面中绘制一块监测区域(多边形),最后取多边形的各个坐标点。 鼠标左键:加入路径点 鼠标右键:撤销 鼠标移动:动态绘制区域 双击鼠标左键:清除画布 回车:完成绘图 二 效果图 三 Canvas基本概念 如果你对canvas不熟悉,不妨简单过一下概念,以便理解代码。 1. 坐标 阅读全文
posted @ 2023-08-22 16:25 sanhuamao 阅读(485) 评论(0) 推荐(0) 编辑
摘要: # 基本介绍 > 学习内容来源于:https://www.youtube.com/watch?v=Idf0zh9f3qQ **Type 与 Interface的区别** 1. 编写方式 2. 继承方式 **Type 的优势** 1. Interface只能描述对象,而Type还可以描述其他类型如`s 阅读全文
posted @ 2023-08-01 15:02 sanhuamao 阅读(77) 评论(0) 推荐(0) 编辑
摘要: # 前言 Web Component: 创建可重用的定制元素 **学习内容来源:** - https://www.youtube.com/watch?v=2I7uX8m0Ta0 - https://developer.mozilla.org/zh-CN/docs/Web/API/Web_compon 阅读全文
posted @ 2023-07-28 15:01 sanhuamao 阅读(28) 评论(0) 推荐(0) 编辑
摘要: # 自适应图片 根据屏幕大小选择图片内容。本文为学习笔记,主要内容为img的`srcset`与`sizes`属性,以及`picture`标签。学习内容来自于: - mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img 阅读全文
posted @ 2023-07-27 14:12 sanhuamao 阅读(50) 评论(0) 推荐(0) 编辑
摘要: 前提 这是一个便于开发者操作拖拽交互的库,第一次看的时候感觉非常抽象,捣鼓半天终于懂了那么一丢丢!它的官方文档贼难进去,这篇文章主要是把一些常用的内容记下,希望能帮助到大家。本篇文章参考的是16.0.1版本 npm i react-dnd 1 简单示例 1.1 useDrag:让DOM允许拖拽 im 阅读全文
posted @ 2023-04-14 14:28 sanhuamao 阅读(856) 评论(0) 推荐(0) 编辑
摘要: 由于最近项目图表非常多,而且很多都是有共性的,于是摸索除了一套便于管理的图表配置方式。 一种是处理共性的,可参考下方的1,2,3,4 一种是处理特殊性的,可参考下方的5, 其实两种方式可以共用。 1. 基本样式模块化 把一些常用的属性一块一块写好。下面举一些例子 | 名称 | 示例 | | | | 阅读全文
posted @ 2023-03-31 13:29 sanhuamao 阅读(80) 评论(0) 推荐(0) 编辑
摘要: 01 使用 <Player id="mycamera" url="xxx.flv"/> 02 封装 第三方库:flv.js 播放组件 import React, { useRef, useEffect } from 'react'; // 传入id和链接 const Player = ({ id, 阅读全文
posted @ 2023-03-31 13:25 sanhuamao 阅读(42) 评论(0) 推荐(0) 编辑
摘要: 这是我第一次对vue3+ts进行实践,写的可能比较菜,见谅。组件的使用方式是模仿element plus的。内容有点长,会持续更新。 源码:https://gitee.com/chenxiangzhi/components 1. Input 输入框 2. Checkbox、CheckeboxGrou 阅读全文
posted @ 2022-10-17 15:14 sanhuamao 阅读(8907) 评论(14) 推荐(0) 编辑
摘要: 前言 之前为了学习webpack和ts编译,写了几个脚手架,自制的脚手架包括vue和react框架,可选择js与ts语言,脚手架只包括最基本的依赖。为了更好的管理与使用自己的写的脚手架,就写了个cli npm包。使用方式如下: npm i @sanhuamao1/sancli // 安装 san-c 阅读全文
posted @ 2022-08-26 10:19 sanhuamao 阅读(515) 评论(0) 推荐(0) 编辑
摘要: 前言 用React15写的,选项是静态数据,为了适应原来的代码,加了很多复杂的东西 - 。-,不过也算学了点新东西,记录一下。 效果展示 结构分析 数据结构 constructor(props) { super(props) const { value, dataList } = props // 阅读全文
posted @ 2022-08-25 10:12 sanhuamao 阅读(319) 评论(0) 推荐(0) 编辑
摘要: ScrollTable基本介绍 滑动底部进行分页(用Observer实现),支持render 支持参数: columns:列属性【Array】,每列支持的属性如下: { hide:false ,// 是否隐藏该列 field:'name',// 字段名称 headerName: '姓名',// 列名 阅读全文
posted @ 2022-08-19 15:24 sanhuamao 阅读(206) 评论(0) 推荐(0) 编辑
摘要: 前言 跟着油管一个教程做的笔记,看完觉得非常有帮助!这篇文章主要包括以下四个部分,源码 第一步:typescript编译 第二步:webpack解析及打包 第三步:webpack合并及相关问题 第四步:eslint 第一步 1.初始化项目 npm init 2.创建src文件夹,并在里面创建inde 阅读全文
posted @ 2022-07-20 10:46 sanhuamao 阅读(196) 评论(0) 推荐(0) 编辑
摘要: 参考 Udemy js教程 Intersection Observer API参考文档 概念 Intersection Observer API 通过注册观察者,可以观察目标元素与可视窗口的交叉比率,当达到某一个比例时执行回调函数。它不需要一直监听滚动事件就可以做到图片懒加载、固定导航栏、滑到某个位 阅读全文
posted @ 2022-07-08 10:58 sanhuamao 阅读(199) 评论(0) 推荐(0) 编辑
摘要: 演示 html <div id="firstStep"> <input type="text" placeholder="输入用户名" id="username"/> <button id="inter">进入聊天室</button> <div id="message" style="color:r 阅读全文
posted @ 2022-05-28 10:58 sanhuamao 阅读(56) 评论(0) 推荐(0) 编辑
摘要: 引言 本项目是跟着b站一个视频做的新闻管理系统,原视频没有做后端部分。我在此基础上自己构建了数据库,写了接口服务,同时对原本的页面展示进行了部分修改。另外,原视频用的是redux管理状态,本项目用的是mobx。项目的所有源码都在github中。 一 项目组成 news-app:前端 npm i np 阅读全文
posted @ 2022-05-19 10:28 sanhuamao 阅读(642) 评论(0) 推荐(0) 编辑
摘要: 跟着课程和文档写的接口服务器,稍微对重点进行了一个总结,完整的项目源码可以戳这里获取 项目结构 router:存储各个模块的路由 router_handler:存储各个模块的处理函数 schema:存储各个模块的验证规则 utils:封装一些方法 uploads:上传地点 config.js:tok 阅读全文
posted @ 2022-05-07 23:05 sanhuamao 阅读(158) 评论(0) 推荐(0) 编辑
摘要: 之前写过一篇关于用户认证的文章,不过是在理论方面。 最近去看了两个课程,里面涉及到了用户认证实战方面,自己写的时候遇到了许多问题,所以想写篇文章记录一下。 本文涉及技术栈有nodejs、express、fetch、xhr、localstorage。前置知识可参考我的笔记,下面的实例保存在目录04用户 阅读全文
posted @ 2022-05-06 00:57 sanhuamao 阅读(587) 评论(1) 推荐(0) 编辑
摘要: kerwin-《千锋react全家桶》笔记,部分参考了: https://www.html.cn/qa/react/17960.html https://redux-saga.js.org/ https://github.com/redux-saga/redux-saga 一整个整理下来可谓是十分酸 阅读全文
posted @ 2022-04-26 15:04 sanhuamao 阅读(158) 评论(0) 推荐(0) 编辑
摘要: 最近在学习React生命周期,笔记记了一堆,越记越乱(-.-),于是做个图帮助自己理解,先后顺序基本都自己验证过,有错误或补充的欢迎底下评论~ 参考了:https://zhuanlan.zhihu.com/p/392532496、https://www.jianshu.com/p/b331d0e4b 阅读全文
posted @ 2022-04-21 15:15 sanhuamao 阅读(164) 评论(0) 推荐(0) 编辑
摘要: 一 引入 HTTP是无状态(stateless)的,每次与服务器交互时,不会保留上次的状态,如用户信息。本篇文章介绍的是解决该问题的办法。该文章参考的资料有: https://www.cnblogs.com/ruoruchujian/p/11271285.html https://www.cnblo 阅读全文
posted @ 2022-03-19 17:41 sanhuamao 阅读(84) 评论(0) 推荐(0) 编辑
摘要: 并发与并行 并发:对于单核处理器,同一时间内多个程序同时进行,这些程序在微观上是交替进行的 并行:对于多核处理器,同一时刻内有多个程序同时进行 同步与异步 同步 Synchronous :前一个任务执行完毕后,后一个任务才能进行。 异步 Asynchronous:多个任务可同时进行——多线程编程 J 阅读全文
posted @ 2022-03-19 11:30 sanhuamao 阅读(175) 评论(0) 推荐(0) 编辑
摘要: 头部 \documentclass[属性(逗号相隔)]{类别} :文件类型 类别: article :科学期刊、 演示文档、 短报告、 程序文档、 邀请函等) book :书籍排版 letter:信件书写 *report:多章节长报告、 短篇书籍、 博士论文等 proc:基于 article 的会议 阅读全文
posted @ 2022-02-10 11:05 sanhuamao 阅读(97) 评论(0) 推荐(0) 编辑
摘要: 一 数制和编码(#一 数制和编码) 二 定点数(#二 定点数) 一 数制和编码 1.数制相互转换 2.BCD码 3.字符与字符串 4.校验码 奇偶校验 海明码 循环冗余校验码 1.数制相互转换 1.1 r进制到十进制 1.2 二进制到八进制、十六进制 1.3 十进制到r进制 2.BCD码 3.字符与 阅读全文
posted @ 2021-09-28 00:30 sanhuamao 阅读(436) 评论(0) 推荐(0) 编辑
摘要: 封装方法 import axios from 'axios' const allowIP = ['119.133.5.19']; //允许访问 async function getIp() { const res=await axios.get('https://api.ipify.org/')// 阅读全文
posted @ 2021-06-26 17:17 sanhuamao 阅读(612) 评论(0) 推荐(0) 编辑
摘要: 一开始用的是vh,而弹出键盘后屏幕变成了原来的一半,所以vh被压缩了一半。把该单位改成绝对单位就可以了。 阅读全文
posted @ 2021-06-19 17:52 sanhuamao 阅读(121) 评论(0) 推荐(0) 编辑
摘要: 一个数组内的元素是否重复 1.思路:第一个元素与后面的元素对比,无重复,则从第二个元素开始与后面的元素对比...以此类推 let isRepeat=false let arr=[1,2,3,1,3] if(arr.length>1){ for(let i=0;i<arr.length-1;i++){ 阅读全文
posted @ 2021-06-10 10:21 sanhuamao 阅读(633) 评论(0) 推荐(0) 编辑
摘要: 参考文章: 实现的demo:https://www.freesion.com/article/67641324321/ getUserMedia:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 一些 阅读全文
posted @ 2021-06-05 22:01 sanhuamao 阅读(2725) 评论(1) 推荐(0) 编辑
摘要: 引言 教程源于: 小马技术:https://www.youtube.com/watch?v=Vp_iIft0XNI&list=PLliocbKHJNwvbitOJ73M04PUoJae79kEg IT营-大地老师:https://www.bilibili.com/video/BV11t411k79h 阅读全文
posted @ 2021-05-18 17:03 sanhuamao 阅读(425) 评论(0) 推荐(0) 编辑
摘要: 引言 MongoDB笔记。教程源于小马技术,适合入门: 视频:https://www.youtube.com/watch?v=kmOzFqxcjEA&list=PLliocbKHJNwvYvA3paPKUg86qLKrwuNsd 仓库:https://gitee.com/komavideo/Lear 阅读全文
posted @ 2021-05-16 13:05 sanhuamao 阅读(125) 评论(0) 推荐(0) 编辑
摘要: 一 单线程 JavaScript是单线程的,即在同一段时间内,只能处理一个任务。 接收请求(request) 开出线程(thread)处理,用户等待 请求处理完成,线程(thread)释放 有些任务需要消耗时间(比如:上传,读取文件,下载等),如果按照以上方法(同步),会损耗大量时间。 二 什么是异 阅读全文
posted @ 2021-05-14 09:56 sanhuamao 阅读(215) 评论(0) 推荐(0) 编辑
摘要: 引入:CommonJs node应用由模块组成,CommonJS是模块化的标准。模块可分为: 核心模块:node 提供的,可直接引入。(如HTTP模块、URL模块、Fs模块) 自定义模块:自己写的,通过本地引入 第三方模块:别人发布的,通过npm安装 下面主要讲的是第三方模块: 一 npm管理包 1 阅读全文
posted @ 2021-05-12 12:27 sanhuamao 阅读(332) 评论(0) 推荐(0) 编辑