自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(112)
  • 收藏
  • 关注

原创 js数字、字母、符号等半角文本按0.5个字符计算长度

可以自定义一个指令(directive)来动态监控输入内容,并结合上面提供的。组件时,应用这个自定义指令,并设置期望的最大有效长度。封装 getEffectiveLength 方法。

2024-04-15 17:13:35 244

原创 浏览器唯一标识(浏览器指纹)fingerprintjs

很多项目会随机生成一个UUID,并持久化存储在localStorage,但是localStorage也有被清除的风险,就需要一个不会变也不会被清掉的值作为游客身份的唯一标识。通过浏览器canvas绘画出一张指定的图,将绘画出来的图片转为base64格式,然后再将base64内容通过指定编码方式转化为fingerprintID。因为不同浏览器,由于浏览器api、版本、系统等原因,绘画出来的图片会存在非常细微的差异,人眼很难辨别,所以转换出来的base64会不一样。

2024-02-01 15:57:34 997

原创 Vue自定义指令校验按钮权限

在类似运营平台的项目中,经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 v-if 判断非常的繁琐和冗余,为此可以通过自定义指令的方式来处理按钮权限

2024-01-25 15:55:04 473

原创 解决js计算精度问题

由于浮点数存在计算精度问题,常用的办法是四舍五入保留2位小数来解决。但是在向上、向下保留小数的时候,比如:0.1+0.2=0.30000000000000004,向上保留2位小数就变成了0.31。

2024-01-18 13:44:17 501

原创 el-form表单项自定义校验规则

官网的表单项都是写死在代码里面的,但是实际我们的表单大多是通过json配置出来的,就需要动态的根据配置信息做表单校验

2024-01-11 14:42:12 866

原创 element表格空数据兼容问题

element表格空数据兼容问题。表格列过多,暂无数据不居中。当左右有fixed列的时候,底部滚动条无法选中

2023-12-28 14:44:38 377

原创 nestjs日志存储到logs文件夹

项目上线后,日志如果还依赖console的方式显示在控制台的话,无法方便查看。需要将日志存储到/logs文件夹中,根据访问时间进行查询

2023-12-26 17:53:33 624

原创 nestjs swagger文档调用需要鉴权的接口

nestjs经常需要设置一些鉴权(登录后)才能访问的接口,但是生成的swagger文档可以发起接口请求,文档发起的请求默认是不携带登录token的,所以需要移除swagger文档发起请求的守卫拦截。接口添加 jwt 鉴权后,接口文档调用接口请求头没有添加 authorization,请求会返回403。为此,需要给文档需要鉴权的接口请求头也添加 authorization。注意:可以设置默认请求参数,参数用一个swagger测试账号,就不用每次调用再改参数了。

2023-12-25 11:20:43 531

原创 nestjs调用第三方接口

后端服务经常要调用第三方接口,比如微信授权登录、支付、OSS文件上传等。

2023-12-21 14:01:52 934

原创 nestjs守卫/全局守卫校验jwt

部分接口需要用户登录后才可以访问,用户登录后可以颁发 jwt_token 给前端,前端在调用需要鉴权的接口,需要在请求头添加 jwt_token,后端校验通过才能继续访问,否则返回403无权访问

2023-12-13 13:52:41 1265

原创 nestjs使用redis

服务端复杂的数据库查询会严重降低访问速度,我们需要将一些常用的接口数据进行存储,用户在获取数据的时候,直接将数据从内存中读取,不进行数据库查询,可以大大提高服务器性能。

2023-12-12 17:14:28 717

原创 nestjs上传文件

前端调用接口上传文件,将文件存储到服务端 /public/upload/ 目录中,接口返回文件路径。

2023-12-12 13:41:09 253

原创 webpack编译微信小程序

微信小程序开发目前主要还是依赖小程序原生开发者工具,但开发者工具目前还不支持常用的less、sass样式编译,以及环境变量配置等功能。使用webpack就可以弥补这些问题。

2023-06-27 12:53:08 2292

原创 从0开始搭建react项目(函数组件)

从0开始搭建react函数组件项目

2023-06-13 11:06:25 848

原创 从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 1940 2

原创 vue路由中间件

在访问vue系统时,经常需要在进入路由前做一些全局处理或者登录状态校验,如果全部写在beforeEach函数中,内容会特别多,难以维护。需要将beforeEach中的内容拆分成多个中间件方法,按顺序执行。3、在路由配置文件router/index.ts添加中间件。注册需要的中间件文件,以修改页面标题和登录校验为例。

2023-06-02 16:34:56 700

原创 pinia使用和持久化存储

1、安装持久化存储插件 pinia-plugin-persistedstate。项目构建时选择安装pinia,下面是使用方法以及持久化存储配置。3、在/src/store/目录下新建user.ts。

2023-05-16 11:42:29 536

原创 vue3全局api组件

vue3全局api组件,类似UI组件的Dialog、alert

2023-05-15 17:42:28 1222

原创 postcss-pxtorem设置最小转换值

一般移动端的UI都是二倍图,对于边框常设置为border: 1px solid;这样在转换的时候,1px在真机渲染的时候就只有0.5px,在真机上会出现边框过细、显示不完整的问题。配置postcss-pxtorem的minPixelValue属性。

2023-04-27 11:13:33 667

原创 解决fixed定位z-index层级无效问题

当fixed定位元素的DOM层级较深时,z-index会受到层叠上下文的影响,无论z-index设置多大,都无法超过父元素的层级。使用UI组件提供的指定挂载位置配置,修改fixed元素在DOM结构中的位置。如果是自定义组件,以vue为例,可以在组件加载时修改组件的挂载位置。将fixed元素放到外层,避免受到层叠上下文的影响。例如vant的popup组件。

2023-04-19 11:15:20 1316

原创 git提交自动触发jenkins任务

git提交自动触发jenkins任务

2023-04-13 17:36:10 670

原创 jenkins流水线部署H5项目

jenkins流水线部署H5项目

2023-04-13 17:09:21 574

原创 vue-virtual-scroll-list虚拟列表

虚拟列表

2023-03-09 15:53:25 2649

原创 TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题

TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题

2022-06-07 15:49:12 1894 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 6133

原创 获取本地外网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 4744

原创 接口响应拦截器ajax-interceptor

背景当开发过程中,遇到以下场景时,前端需要对应场景的报文,可以通过谷歌浏览器的ajax-interceptor插件自己篡改接口报文,作为一个响应拦截器来使用1、后端不愿意造数据2、接口返回的数据不理想3、测试边界值4、复现 bug5、写mock数据插件安装方法一:在chrome应用商店搜索ajax-interceptor直接安装方法二:无法访问chrome应用商店的话,访问:百度网盘 请输入提取码,提取码:3gb5使用1、打开谷歌扩展程序,建议将该插件置顶

2022-03-03 14:42:15 1521

原创 一次说清px、rpx、em、rem、%、vw、vh、vm

一、背景介绍随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。网页设计单位是涉及到我们布局的效果,不同的页面布局和设备需要采用不同的单位。而且现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发,设计。二、知识剖析1、px1)px就是pixel的缩写,意为像素。2)px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是...

2022-02-28 17:07:13 1634

原创 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 605

原创 前端公祭日黑白风格

背景每年12月13日是国家公祭日,当天不少应用都会切换应用主题为黑白色,以悼念南京大屠杀的受难者实现方案通过css过滤器,切换页面风格,给需要修改黑白风格的区域添加filterfilter: grayscale()注意:当filter不为none的时候,该元素或者其子元素具有absolute或fixed属性,那么它会为其创建一个新的包含块/容器,会造成该absolute或fixed元素的定位发生变化(就是改变了absolute或fixed元素的...

2021-12-24 16:40:26 1059

原创 纯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 383

原创 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 1266

原创 修改浏览器url

手动修改浏览器urllet _url = window.location.protocol + '//' + window.location.host + '/index';window.history.pushState({},0, _url);

2021-07-28 13:42:05 1236

原创 常用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 387

原创 编写README

1、标题#越多,标题字体越小,例:# 一级标题## 二级标题### 三级标题#### 四级标题2、表格参数 | 描述 | 必填 | default----|----|----|----text | 文本 | 是 | fontSize | 字体大小 | 否 | 14width | 宽度 | 否 | 200height | 高度 | 否 | 等于widthcolor | 文字的颜色 | 否 | #000background | 背景颜色 |否 | deepskyblue.

2021-06-30 15:53:50 557

原创 redux持久化

1、安装持久化插件npm i redux-persist -S2、配置redux-persist

2021-06-04 13:31:48 1313

原创 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 1311

原创 react使用less

1、安装依赖使用create-react-app 创建的项目默认是看不到webpack配置文件的,需要先暴露出来,然后才能修改里面的配置信息。

2021-06-03 10:21:49 926

原创 解决依赖包在TS环境不可用问题

在TS项目中,经常会出现已经安装了依赖包,但是引入依赖包还是报错处

2021-06-03 10:11:51 2344

原创 react配置路由

1、安装依赖npm i react-router react-dom react-router-dom react-router-config -S2、配置路由文件

2021-06-02 17:54:48 868

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除