- 博客(112)
- 收藏
- 关注
RSS订阅原创 js数字、字母、符号等半角文本按0.5个字符计算长度
可以自定义一个指令（directive）来动态监控输入内容，并结合上面提供的。组件时，应用这个自定义指令，并设置期望的最大有效长度。封装 getEffectiveLength 方法。
2024-04-15 17:13:35
226
原创 浏览器唯一标识（浏览器指纹）fingerprintjs
很多项目会随机生成一个UUID，并持久化存储在localStorage，但是localStorage也有被清除的风险，就需要一个不会变也不会被清掉的值作为游客身份的唯一标识。通过浏览器canvas绘画出一张指定的图，将绘画出来的图片转为base64格式，然后再将base64内容通过指定编码方式转化为fingerprintID。因为不同浏览器，由于浏览器api、版本、系统等原因，绘画出来的图片会存在非常细微的差异，人眼很难辨别，所以转换出来的base64会不一样。
2024-02-01 15:57:34
842
原创 Vue自定义指令校验按钮权限
在类似运营平台的项目中，经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 v-if 判断非常的繁琐和冗余，为此可以通过自定义指令的方式来处理按钮权限
2024-01-25 15:55:04
446
原创 解决js计算精度问题
由于浮点数存在计算精度问题，常用的办法是四舍五入保留2位小数来解决。但是在向上、向下保留小数的时候，比如：0.1+0.2=0.30000000000000004，向上保留2位小数就变成了0.31。
2024-01-18 13:44:17
461
原创 el-form表单项自定义校验规则
官网的表单项都是写死在代码里面的，但是实际我们的表单大多是通过json配置出来的，就需要动态的根据配置信息做表单校验
2024-01-11 14:42:12
715
原创 nestjs日志存储到logs文件夹
项目上线后，日志如果还依赖console的方式显示在控制台的话，无法方便查看。需要将日志存储到/logs文件夹中，根据访问时间进行查询
2023-12-26 17:53:33
587
原创 nestjs swagger文档调用需要鉴权的接口
nestjs经常需要设置一些鉴权（登录后）才能访问的接口，但是生成的swagger文档可以发起接口请求，文档发起的请求默认是不携带登录token的，所以需要移除swagger文档发起请求的守卫拦截。接口添加 jwt 鉴权后，接口文档调用接口请求头没有添加 authorization，请求会返回403。为此，需要给文档需要鉴权的接口请求头也添加 authorization。注意：可以设置默认请求参数，参数用一个swagger测试账号，就不用每次调用再改参数了。
2023-12-25 11:20:43
487
原创 nestjs守卫/全局守卫校验jwt
部分接口需要用户登录后才可以访问，用户登录后可以颁发 jwt_token 给前端，前端在调用需要鉴权的接口，需要在请求头添加 jwt_token，后端校验通过才能继续访问，否则返回403无权访问
2023-12-13 13:52:41
1195
原创 nestjs使用redis
服务端复杂的数据库查询会严重降低访问速度，我们需要将一些常用的接口数据进行存储，用户在获取数据的时候，直接将数据从内存中读取，不进行数据库查询，可以大大提高服务器性能。
2023-12-12 17:14:28
590
原创 webpack编译微信小程序
微信小程序开发目前主要还是依赖小程序原生开发者工具，但开发者工具目前还不支持常用的less、sass样式编译，以及环境变量配置等功能。使用webpack就可以弥补这些问题。
2023-06-27 12:53:08
2237
原创 从0开始搭建vue3+vite+ts+pinia项目
注意：直接使用环境变量会提示变量未声明，需要在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明。，没有显示局域网ip地址，不方便局域网真机调试，需要配置启动host为0.0.0.0。配置.vscode/setting.json，自动校验eslint并修复。封装axios方法，新建/src/utils/request.ts文件。在项目代码中使用，比如main.ts / index.vue。3、在/src/store/目录下新建user.ts。打开vite.config.ts。
2023-06-05 15:08:38
1861
2
原创 vue路由中间件
在访问vue系统时，经常需要在进入路由前做一些全局处理或者登录状态校验，如果全部写在beforeEach函数中，内容会特别多，难以维护。需要将beforeEach中的内容拆分成多个中间件方法，按顺序执行。3、在路由配置文件router/index.ts添加中间件。注册需要的中间件文件，以修改页面标题和登录校验为例。
2023-06-02 16:34:56
684
原创 pinia使用和持久化存储
1、安装持久化存储插件 pinia-plugin-persistedstate。项目构建时选择安装pinia，下面是使用方法以及持久化存储配置。3、在/src/store/目录下新建user.ts。
2023-05-16 11:42:29
527
原创 postcss-pxtorem设置最小转换值
一般移动端的UI都是二倍图，对于边框常设置为border: 1px solid；这样在转换的时候，1px在真机渲染的时候就只有0.5px，在真机上会出现边框过细、显示不完整的问题。配置postcss-pxtorem的minPixelValue属性。
2023-04-27 11:13:33
633
原创 解决fixed定位z-index层级无效问题
当fixed定位元素的DOM层级较深时，z-index会受到层叠上下文的影响，无论z-index设置多大，都无法超过父元素的层级。使用UI组件提供的指定挂载位置配置，修改fixed元素在DOM结构中的位置。如果是自定义组件，以vue为例，可以在组件加载时修改组件的挂载位置。将fixed元素放到外层，避免受到层叠上下文的影响。例如vant的popup组件。
2023-04-19 11:15:20
1286
原创 TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题
TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题
2022-06-07 15:49:12
1872
2
原创 nginx重写url
背景在前端开发过程中，经常会遇到项目访问地址变更，这时就需要使用nginx的重写功能，对请求进行重写，让老链接访问到新的服务地址1）域名、服务器变更2）url变更3）参数变更nginx配置1、域名rewritelocation / { rewrite https://www.baidu.com permanent;}2、url rewritelocation /product { if ($uri ~* "b1000") { #访问/product/
2022-04-13 15:01:39
6128
原创 获取本地外网ip的api接口
开发时偶尔会需要前端传客户端的ip地址，以下方法可以获取客户端外网ip1、新增加载js方法export const loadScript = (src) => { return new Promise((resolve, reject) => { const script = document.createElement('script') const head = document.getElementsByTagName('head')[0]; scri
2022-04-10 10:56:04
4726
原创 接口响应拦截器ajax-interceptor
背景当开发过程中，遇到以下场景时，前端需要对应场景的报文，可以通过谷歌浏览器的ajax-interceptor插件自己篡改接口报文，作为一个响应拦截器来使用1、后端不愿意造数据2、接口返回的数据不理想3、测试边界值4、复现 bug5、写mock数据插件安装方法一：在chrome应用商店搜索ajax-interceptor直接安装方法二：无法访问chrome应用商店的话，访问：百度网盘 请输入提取码，提取码：3gb5使用1、打开谷歌扩展程序，建议将该插件置顶
2022-03-03 14:42:15
1508
原创 一次说清px、rpx、em、rem、%、vw、vh、vm
一、背景介绍随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，不同的页面布局和设备需要采用不同的单位。而且现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。二、知识剖析1、px1）px就是pixel的缩写，意为像素。2）px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是...
2022-02-28 17:07:13
1629
原创 react组件通信
父子组件父组件export default class PLP extends Component<any, any> { addCart = (id: any) => { console.log('父组件接收子组件事件', id) } render () { const { productList } = this.state; return ( <div> <ul> {
2021-12-29 12:32:13
604
原创 前端公祭日黑白风格
背景每年12月13日是国家公祭日，当天不少应用都会切换应用主题为黑白色，以悼念南京大屠杀的受难者实现方案通过css过滤器，切换页面风格，给需要修改黑白风格的区域添加filterfilter: grayscale()注意：当filter不为none的时候，该元素或者其子元素具有absolute或fixed属性，那么它会为其创建一个新的包含块/容器，会造成该absolute或fixed元素的定位发生变化（就是改变了absolute或fixed元素的...
2021-12-24 16:40:26
1054
原创 纯CSS轮播
列表元素的滑动，不用swiper，但是仅用overflow: auto，滑动到的位置无法控制。解决方案：父元素设置 scroll-snap-type: x mandatory; 子元素设置：scroll-snap-align: start;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-...
2021-09-09 10:17:21
380
原创 js判断身份证是否合法
function isCardID (sId) { var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 5.
2021-07-28 13:58:16
1263
原创 修改浏览器url
手动修改浏览器urllet _url = window.location.protocol + '//' + window.location.host + '/index';window.history.pushState({},0, _url);
2021-07-28 13:42:05
1226
原创 常用CSS样式
1、单行文本，超出显示...overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本，超出显示...display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //显示行数overflow: hidden;3、隐藏滚动条webkit内核浏览器.box::-webkit-scrollbar { dis
2021-07-28 11:21:16
385
原创 编写README
1、标题#越多，标题字体越小，例：# 一级标题## 二级标题### 三级标题#### 四级标题2、表格参数 | 描述 | 必填 | default----|----|----|----text | 文本 | 是 | fontSize | 字体大小 | 否 | 14width | 宽度 | 否 | 200height | 高度 | 否 | 等于widthcolor | 文字的颜色 | 否 | #000background | 背景颜色 |否 | deepskyblue.
2021-06-30 15:53:50
545
原创 web网站添加ico图标
上线的网站都会配置ico，红框位置的图标配置方法：1、选择一张正方形的图片2、打开ico在线制作网站，我推荐https://www.bitbug.net/3、上传图片，并选择ico大小4、生成好的图片浏览器会自动下载到本地，将图片命名为favicon.ico，拷贝到index.html同级目录5、在html中引入ico<link rel="icon" href="./favicon.ico" />...
2021-06-03 10:34:16
1304
原创 react使用less
1、安装依赖使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。
2021-06-03 10:21:49
922
原创 react配置路由
1、安装依赖npm i react-router react-dom react-router-dom react-router-config -S2、配置路由文件
2021-06-02 17:54:48
864
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人