小知识点
关注
分享
扫一扫
桐溪漂流
一个web前端小菜鸟
展开
-
使用frp工具实现内网穿透
本文使用frp的docker镜像 + JSON格式配置，以http服务为例。原创 2024-11-14 16:08:59 · 435 阅读 · 0 评论 -
umijs中实现keep-alive功能
利用umi-plugin-keep-alive实现keep-alive效果，在h5页面中实现返回的时候不刷新返回页面的效果。原创 2022-08-30 10:41:03 · 3402 阅读 · 0 评论 -
根据指定区域内容生成图片并进行分享总结
根据指定区域内容生成图片并进行分享总结。原创 2022-07-27 16:48:17 · 906 阅读 · 0 评论 -
currentColor的使用场景记录
效果常规<div class="test-box"> box-content <div class="test-item">item-1</div></div>.test-box { width: 200px; height: 200px; padding: 16px; color: orange; border: 1px solid orange;}.test-box .test-ite原创 2022-04-13 17:41:35 · 322 阅读 · 0 评论 -
angular中observers.length使用场景记录
场景模拟angular步骤条的时候，有一个场景是这样的，如果步骤条设置了监听事件，则悬浮鼠标样式为pointer，否则为default。部分代码import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';import { Step } from './steps.interfaces';@Component({ selector: 'yby-steps', templateUrl: './s原创 2022-04-13 14:48:15 · 791 阅读 · 0 评论 -
原生slider组件input[type=range]使用记录
原生slider滑块标签input[type=range]的效果展示原创 2022-03-28 17:05:31 · 877 阅读 · 0 评论 -
原生js自定义slider滑块组件
通过鼠标事件和定位模拟滑块滑动原创 2022-03-24 10:23:55 · 4946 阅读 · 3 评论 -
nvm安装使用及npm包安装失败问题记录
nvm-windows安装及使用github下载地址: nvm-windowsnvm 列出nvm的相关信息nvm arch 显示当前node运行环境是32位还是64位的nvm root <path> 设置存储不同node版本的位置nvm version nvm的版本nvm list 列出已安装的版本nvm install node 安装node最新版nvm install <version> 安装对应版本的nodenvm unin原创 2022-02-17 17:33:37 · 1406 阅读 · 1 评论 -
雪花飘落-2022虎年大吉
前言临近虎年春节，又缝下雪，简单弄个雪花飘落，全当玩耍效果图代码展示代码很简单，一些css，js，基本的html，加上图片就完事了html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co原创 2022-01-29 15:27:49 · 133 阅读 · 0 评论 -
代码编辑器CodeMirror使用总结-配置理解说明
本文的选项是根据官网的配置环境进行的理解，有些选项没有使用到和没有理解的就没做说明，有理解不对的欢迎指出来，对没有说明的也欢迎用过的友友给出自己的理解常用选项配置value编辑器的初始值 - [string | CodeMirror.Doc]// formTextArea 方法初始化编辑器时，value被textarea的值覆盖掉了CodeMirror.fromTextArea(document.getElementById('textarea'), { value: 'function ab原创 2022-01-13 15:54:33 · 18417 阅读 · 1 评论 -
代码编辑器CodeMirror使用总结-基础用法
CodeMirror的版本: 5.65.0CodeMirror 是一个web端代码编辑器组件，提供了基本的编辑器功能。通过其提供的插件或者第三方依赖，可以实现既定语言的关键词高亮显示、自动完成提示、设定标记、错误提醒等功能。生成基本编辑器模式为javascript模式-可以高亮显示关键字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ原创 2022-01-10 14:59:38 · 5643 阅读 · 0 评论 -
WebSocket认识理解及简单使用
WebSocket认识WebSocket是一种全双工的通信协议，基于TCP协议，可以满足客户端和服务端双向通信需求。默认端口也是80和443，握手阶段采用http协议，与http有良好的兼容性。可以发送文本和二进制数据。无同源限制，客户端可以与任意服务器建立通信。WebSocket属性与方法// 利用 `WebSocket` 构造函数可以创建 指定url的 WebSocket 连接。const ws = new WebSocket('ws://ip:port/api_pat原创 2021-12-22 11:59:43 · 854 阅读 · 0 评论 -
windows安装openssl
下载下载地址: http://slproweb.com/products/Win32OpenSSL.html根据提示进行安装点击脚本按照提示进行安装添加系统环境变量和path我的电脑-右键点击属性-选择高级系统设置// 新增系统变量// OPENSSL_HOME// openssl/bin的真实路径// 新增系统变量的path// %OPENSSL_HOME%检查是否安装成功openssl version 检查安装版本...原创 2021-11-18 19:08:36 · 906 阅读 · 0 评论 -
用ScreenToGif录屏并生成gif动图
下载ScreenToGif可以从本身电脑的电脑管家下载，也可以百度下载，该软件轻量，方便，可自行添加水印，免费启动软件打开录像机可以调整帧数和调整要录制的屏幕区域点击-录制点击-停止另存为有保存文件的地址和名称以及其他配置可以根据情况调整保存成功...原创 2021-11-02 11:06:06 · 461 阅读 · 0 评论 -
angular中自定义webpack配置
用到 @angular-builders/custom-webpack 依赖安装 custom-webpackangular - 8.2.14@angular-builders/custom-webpack - 8.4.1npm i -D @angular-builders/custom-webpack@8.4.1 或者 yarn add @angular-builders/custom-webpack@8.4.1 --dev调整angular.json{ // ...省略配置 "p原创 2021-08-11 19:24:44 · 1814 阅读 · 0 评论 -
angular中使用echarts地图
在angular中使用echart的时候，只需要在对应的组件生命周期中调用echart的api就可以了echart的初始化在component的ngOnInit事件中进行echarts的初始化，配置option，然后echarts图表就生成了app-base-chart组件html<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>scss// 基本的图表样式原创 2021-07-29 16:44:06 · 728 阅读 · 0 评论 -
apidoc使用简单总结及例子
当前调试都是在apidoc@0.28.1版本下执行的，有不对的地方欢迎指出安装apidocnpm i apidoc --save-dev配置apidoc可以有以下三种形式存放配置package.json{ "apidoc": { "name": "projectName", "url": "http://apiservice.com", "version": "1.0.0" // 此处省略更多apidoc配置 }}apidoc.json{原创 2021-07-29 10:57:55 · 1972 阅读 · 0 评论 -
本地调整angular8的devkit的逻辑以便于使用before方法进行api的mock
使用angular8进行项目开发，但是请求数据api的时候没找到官方给的使用webpack-devServer之before方法的api，现在找了个折中的办法，直接本地调整devkit的module配置，简单实现了。1.调整schema.json文件路径: node_modules/@angular-devkit/build-angular/src/dev-server/schema.json增加before，否则启动的时候会报错，不支持before选项{ "properties": {原创 2021-07-07 17:27:46 · 197 阅读 · 0 评论 -
git commit --amend 的使用记录
下面是我这里使用的两种情况在最近一次提交中追加修改把调整的文件内容加入到暂存区中 git add [filepath]使用 git commit --amend 进行提交，并进入提交信息描述编辑页面，不需要调整可以直接保存使用 git log 查看提交记录，已经合并成功，但是commitId已经改变修改最近一次提交的描述信息git commit --amend 会进入提交信息描述的编辑页面（vim的命令行模式）i进入编辑模式进行描述信息编辑描述信息编辑完成之后，E原创 2021-07-01 20:35:21 · 736 阅读 · 0 评论 -
用array的sort方法把已知的元素排列在数组的首位
sort排序会改变原数组的顺序，所以下面会用map进行数组浅拷贝const arr = ['a', 'f', '数字', 'd', 'man'];// 把数字排在第一位const arr_1 = arr.map(item => item).sort((a,b)=> a === '数字' ? -1 : 1);// 把数字排第一位，man排第二位const arr_2 = arr.map(item => item).sort((a,b)=> a==='数字' || a ==原创 2021-07-01 20:29:52 · 457 阅读 · 0 评论 -
构造函数定义的属性方法小结
说明构造函数构造器中的属性为每个构造实例单独所有，构造函数本身无法访问构造函数本身挂载的方法为构造函数本身所有，实例无法访问构造函数原型挂载的方法为构造实例共同所有demofunction MyList(){ // 此处的属性为每一个构造实例，单独所有。list1.obj list2.obj不相等，为两个存储地址 this.text = '123'; this.obj = { a: 1, b: 2 }}// 此处的方法只有构原创 2021-05-06 11:28:25 · 305 阅读 · 0 评论 -
css给前端页面添加水印效果体验
前言本次实现的时候只是为了体验下css的pointer-events的属性效果，所以就把水印做成了fixed的，体验上来说按照内容设定水印效果更佳，水印的个数和位置可以自己设定。还有一种感觉更好的方法是给水印元素添加水印背景图，然后repeat显示，这样不需要设定水印个数。水印元素需要根据内容而定。eg：我的例子中的class=shuiyin的水印元素。一、pointer-events该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target/* 除了指示该元素不是鼠标原创 2021-04-30 10:08:19 · 8205 阅读 · 3 评论 -
react-native-image-picker的使用简单总结
一、依赖安装依赖 react-native-camerayarn add react-native-image-pickerreact-native link react-native-image-picker二、调用相机import { launchCamera } from 'react-native-image-picker';launchCamera({ mediaType: 'photo', maxWidth: 1000,// 设置选择照片的大小，设置小的话会相应的进原创 2021-04-14 14:33:05 · 4912 阅读 · 6 评论 -
cron表达式用法整理
一、Cron表达式的结构Cron表达式是一个字符串，字符串以5或6个空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式：1. Seconds Minutes Hours DayofMonth Month DayofWeek Year2. Seconds Minutes Hours DayofMonth Month DayofWeek二、Cron表达式的格式Cron表...原创 2019-05-29 21:26:11 · 641 阅读 · 0 评论 -
git分支的创建和删除命令整理
git分支的创建和删除命令整理本文章搜索了一些资料，然后经过整理，现在做一下分享，有问题的地方欢迎指出1.代码提交代码提交的经历本地代码编辑 --> 本地代码保存 --> 把代码保存到本地仓库的缓存区 --> 把代码提交到本地仓库 --> 把本地仓库的更改推送到远程仓库保存到本地仓库缓存区git add 文件名git add . '把所有更改的文件都保存到缓存区'提交到本地仓原创 2017-12-24 12:55:20 · 320 阅读 · 0 评论