![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
通用功能
神奇大叔
这个作者很懒,什么都没留下…
展开
-
JSON 中序列化和反序列化 Function
JSON 中序列化和反序列化 Function。原创 2024-07-29 12:48:03 · 249 阅读 · 0 评论 -
循环依赖解决方案
创建公共依赖原创 2024-07-26 16:51:26 · 268 阅读 · 0 评论 -
埋点 埋点方案和原理
埋点 埋点方案。原创 2024-07-25 11:00:03 · 293 阅读 · 0 评论 -
JavaScript、图片防盗链
js、图片防盗链原创 2023-08-08 15:45:56 · 378 阅读 · 0 评论 -
OAuth2.0 授权 & OpenID Connect 身份认证
【代码】OAuth2.0 授权 & OpenID Connect 身份认证。原创 2023-06-06 17:40:56 · 1491 阅读 · 0 评论 -
前端 保存登陆态方式
存储用户登录态的传统方法—Cookie,是通过Web服务器设置在用户浏览器中的一小段文本。原创 2023-06-05 15:27:20 · 3243 阅读 · 1 评论 -
前端控制请求的几种方式
前端控制请求几种方式。原创 2022-11-03 11:26:47 · 650 阅读 · 0 评论 -
短信(短链接)跳转
短信里面通常会带上各种活动链接,然后用户点开链接可以打开浏览器到活动页面。短链接转换成长链接把短链接复制到浏览器打开,发现跳转之后立马就换了个地址// 原地址https://u.10010.cn/qAPZU// 目标地址'https://m.client.10010.com/mobileService/clickCountLogRecord/pageClickCount.htm?flag=new&title=礼包&openUrl=https://m.client.100.原创 2022-05-21 21:21:16 · 3440 阅读 · 0 评论 -
前端无感刷新token
判断Token是否过期没过期则正常处理过期则发起刷新Token的请求拿到新token保存,把刷新Token后重新发送请求的响应数据返回到对应的调用者重新发送Token过期这段时间内发起的请求,保持Token过期这段时间发起请求状态(不能进入失败回调)前端实现阻塞请求结果通过返回一个pending状态的Promise代码示例:import axios from "axios";import Store from "@/store";import Router from "@/原创 2022-05-10 14:38:15 · 860 阅读 · 2 评论 -
大文件上传(断点续传等)
【代码】大文件上传(断点续传等)原创 2022-03-21 22:40:02 · 1226 阅读 · 0 评论 -
实现点击弹框外关闭弹框功能
点击弹框外关闭弹框核心是监听全局点击事件,通过判断点击时的dom元素是否包含在弹框的dom中,即弹框dom.contains(event.target)<body> <div class="modal">Modal</div> <script> const model = document.querySelector('.modal'); function toggle(open) {原创 2022-01-26 14:54:59 · 6004 阅读 · 0 评论 -
视频文件上传、下载、回显(代码通过版)、预览
Content-Disposition这个响应头可以决定内容是预览还是下载。原创 2021-12-29 23:41:52 · 782 阅读 · 0 评论 -
文件上传方式以及回显
后端文件的保存方式:文件保存到服务器上,数据库中存文件的地址方式一:通过formData添加文件,后端通过流来读取并写入保存到服务器上前端:getFiles () { var that = this var FormDataImg = new FormData() FormDataImg.append('file', that.$refs.file.files[0]) 上传Blob axios({ url: 'http://192.168.0.177:3030/test/uplo原创 2021-12-29 17:41:31 · 3265 阅读 · 0 评论 -
文件下载方式
方式一:通过返回二进制数据blob进行下载、后端res.download返回 前端: fetch("/down") .then(res => res.blob()) fetch方式 .then(blob => { down(blob, "demo.pdf"); }); var xhr = new XMLHttpRequest(); xhr.open(method, url);原创 2021-12-29 16:58:48 · 786 阅读 · 0 评论 -
文件上传、图片视频预览、word下载
需求:选择文件后不自动上传,先预览,也可下载,最后和表单其他参数一起保存提交调接口。//上传组件<el-upload ref="upload" action="#" :on-remove="handleRemove" :http-request="submitUpload" :limit="1" :accept="acceptStr" :before-upload="beforeUpload" :on-exceed="onExceed"原创 2021-12-22 11:20:44 · 973 阅读 · 0 评论 -
前端 登录方案
账号密码登录收集用户输入的用户名和密码,发送给后端和数据库比对验证,用户是否存在,密码是否正确,都OK就返回登录成功和用户信息等有的会加一个图形验证码之类的,就是调接口,然后后端随机生成图形验证码,并存到 session 或者 token (取决于你项目采用的登录验证方式,在本文下一章节),然后发送给前端展示前端点登录的时候收集用户输入的验证码,和后端比对,都OK就返回登录成功和用户信息等手机验证码登录、邮箱登录比如手机验证码登录前端点击发送验证码,把手机号传给后端,后端生成随机数,然后把号码和原创 2021-12-15 18:38:49 · 5815 阅读 · 0 评论 -
图片根据自身宽高比进行容器自适应,以及图片上的元素根据图片变化相对位置不改变
当图片根据宽高比进行伸缩时,图片是最清晰的代码示例:import React, { useState, useCallback, useEffect, useMemo } from 'react';import { Intl } from '@/components/Intl/index';import style from './index.less';import { MyIcon } from '../IconFont';import { IStep } from '../../conf原创 2021-12-08 11:16:42 · 452 阅读 · 0 评论 -
文件拖拽上传等
dragover - 被拖动的对象进入目标容器时触发dragleave - 被拖动的对象离开目标容器时触发drop - 被拖动的对象进入目标容器,释放鼠标键时触发代码示例:<template> <div ref="drag" class="drag"> <div class="drag-icon-box"> <!-- 采用的是 element-ui 的图标 --> <i class="el-icon-uplo原创 2021-12-03 16:17:31 · 136 阅读 · 0 评论 -
中奖概率简易算法
100里面单个数字的概率是百分之1,得1或2的概率为百分之2,通过或将概率累加随机数公式:function rand(m,n){ m为起始数字,n为结束数字 return Math.ceil(Math.random()* (n-m+1)) +m-1;}if(n<=30){ 百分之30概率}else{ 百分之70概率}...原创 2021-03-22 10:47:31 · 3629 阅读 · 0 评论 -
vue 使用axios在跳转下一页面前取消所有请求
const CANCEL_TOKEN = axios.CancelToken;Vue.prototype.$httpRequestList = []; //管理所有请求中断方法的集合axios({ url: url, methods: 'POST', data: options, cancelToken: new CANCEL_TOKEN(c => { Vue.prototype.$httpRequestList.push(c); //中断原创 2021-03-20 16:02:04 · 534 阅读 · 0 评论 -
npm 发布
1、发布前准备: 对项目做 冒烟测试 单元测试和测试覆盖率 持续集成如TravisCL2、发布 (1)package.json的name字段即为包名 (2)npm login 若无注册npm账号 (2)npm publish 3、版本更新 运行更新命令后 git push origin master npm publish...原创 2021-01-31 17:04:16 · 142 阅读 · 0 评论 -
通过Math.min/Math.max进行边界判断
Math.min(最大值,val); 使得返回值一直小于等于最大值Math.max(最小值,val); 使得返回值一直大于最小值当二者结合即可实现左右边界判断代码示例:值在0-1之间 Math.max(0,Math.min(1,val));原创 2020-11-27 17:44:21 · 410 阅读 · 0 评论 -
16进制转换成rgba方法
hexToRgba(hex, opacity) { let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return `rgba(${parseInt(result[1], 16)},${parseInt( result[2], 16 )},${parseInt(result[3], 16)},${opacity})`; ...原创 2020-11-20 15:31:31 · 3003 阅读 · 0 评论 -
滑动视频到中央视频播放,滑出暂停逻辑
(1)固定视频高度,计算好当滑动到距离顶部多少距离时,使得视频在中央(2)监听滑动,计算滑动距离/计算好的距离整除,获得当前对应视频的索引(3)当前索引的视频播放,其余暂停原创 2020-11-18 13:58:53 · 351 阅读 · 0 评论 -
通过定时器将单机事件变成双击事件
主要思路:单/双击事件结果延迟触发,通过触发时的标志,执行单/双击事件,然后将标志还原 clickFlag原始值是false; if(this.timer){clearTimeout(this.timer)} this.clickFlag=!this.clickFlag; this.timer=setTimeout(()=>{ //通过延迟300毫秒执行的时候flag的值来判断单双击 if(this.clickFlag) { 执行单机 }else{ 执行双击 } thi原创 2020-11-16 16:19:30 · 183 阅读 · 0 评论 -
webpack 自动化导入文件require.context
const xx=require.context('要检索的相对路径',是否检索子目录,/正则匹配规则/) xx.keys(); 匹配到的文件路径 xx.resolve('检索路径下的文件的相对路径') 返回绝对路径 xx.id 上下文模块的id xx('匹配到的文件路径'); 和导入文件功能相同 文件中的export 导出结果为{x:xx,...} 文件中的export default 导出结果为{default:xx} 使用Object.assign(指定对象,被合并对象)原创 2020-11-04 15:39:04 · 354 阅读 · 0 评论 -
固定定位顶部组件,自适应效果以及解决定位脱离文档流布局
解决定位脱离文档流布局 在产生了固定定位的组件中,再添加未脱离文档流的容器,高度为定位内容的高度,则后续元素布局并不会受定位影响代码示例:<template> <view class='n-c'> <!-- <view :style="{height: statusBarHeight+'px'}"></view> --> <view class='n-n'> <view :style="{height: s原创 2020-11-03 23:11:05 · 1189 阅读 · 0 评论 -
利用递归实现监听数据改变
fn(){ if(flag) { ...; return ; }else{ setTimeout(()=>{ this.fn(); },n) }}原创 2020-10-23 16:58:57 · 159 阅读 · 0 评论 -
网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮
当前播放歌词高亮: 根据当前播放时间,和歌词时间对比,获得当前歌词行数索引正常居中滚动、点击/滑动进度条对应滚动: (1)因为这几种方式都是改变当前播放时间,所以只需要根据当前播放时间操作即可 (2)根据当前播放时间,得到当前歌词行数,因为设置歌词和空白高度都是一定的,所以可以根据行数确定居中位置 (3)当行数小于指定行或大于指定行时,滚动顶部/底部,在其中居中 居中方式:将滚动条移动=当前行到顶部的距离(-90是因为父元素到滑动区域的距离有90)-行高度*在多少(n)行就可居中原创 2020-09-19 21:11:36 · 2883 阅读 · 1 评论 -
网易云音乐接口
1、根据关键词搜素 http://musicapi.leanapp.cn/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA2、根据搜素结果中的id获取歌词信息 https://api.imjad.cn/cloudmusic/?type=lyric&id=3472303、获取评论 https://api.imjad.cn/cloudmusic/?type=comments&id=327856744、获取歌曲详情 htt原创 2020-09-17 10:07:26 · 1143 阅读 · 0 评论 -
计算属性和正则检验手机号格式满足发送验证码
computed:{ //验证手机号格式 phoneRight() { return /^[1][3,4,5,7,8][0,9]{9}$/.test(this.phone); } },原创 2020-08-16 21:30:27 · 173 阅读 · 0 评论 -
点击可移动/滑动栏(Vue)
1、安装 cnpm install -S ly-tab2、注册 import Vue from 'vue'; import LyTab from 'ly-tab'; Vue.use(LyTab); 3、使用 <ly-tab v-model="selectedId" 选中的id :items="items" 栏目内容,数组,items:[{label:'内容'},...] :options="options" op原创 2020-08-13 17:10:25 · 792 阅读 · 1 评论 -
b站评论功能(一级评论到n级)
一二级评论无@显示,所以可以直接v-for渲染,二级评论之后会有@,利用组件递归实现代码示例:数据: arr :[ {comment_id: 1, user_id: 43, comment_date: "04-23", comment_content: "蜡笔小新很好看!", parent_id: null,userinfo:{name:'jeff1'}}, { comment_id: 2, user_id: 19, comment_date: "04-24", comme原创 2020-08-10 20:48:34 · 2268 阅读 · 1 评论 -
渲染评论
1、数据改造根据评论的父评论id,将其放在父评论的child属性内原创 2020-08-10 10:36:44 · 251 阅读 · 0 评论 -
better-scroll切换栏吸顶效果
在better-scroll里使用position:sticky会无效,使用position:fixed定位会被better-scroll自身实现过程的tanslate给位移出去解决方法: 做两个切换栏,一个在better-scroll外,一个在内,当达到临界值时,通过v-if指令,让内部隐藏,外部显示,外部可以使用postion:fixed达到吸顶的效果代码示例:<template> <div class='home'> <NavBar title原创 2020-07-31 11:07:19 · 1615 阅读 · 0 评论 -
H5 真机调试
1、打开笔记本wifi,点击移动热点2、开启后,可右键转设置,查看热点密码3、手机连接热点后,命令行输入ipconfig,查找以太网/无线局域网适配器,在手机浏览器端输入ipv4地址以及程序所在端口号即可...原创 2020-07-13 22:41:42 · 200 阅读 · 0 评论 -
web端获取经纬度,并使用腾讯地图获取实时位置信息
电脑端可能无法获取,通过真机调试能获取 判断浏览器是否支持 if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(locationSuccess,locationError,{ 浏览器获取高精度的位置,默认为false enableHighAccuracy:true, 获取地理位置超时时间 ti原创 2020-07-13 22:04:19 · 2882 阅读 · 0 评论 -
用户聊天消息处理(消息分组、未读消息、已读清除等)
每条消息都要设置一个是否已读的属性消息分组: 后台返回和当前用户相关的所有消息,根据当前用户和不同用户直接的聊天标识, 返回对应的分组消息列表 未读消息: 后台返回所有的消息后,根据和不同用户的聊天标识,获取相应的聊天内容, 遍历每一条聊天内容,读取每一条的是否已读属性,来确定未读的总消息已读消息: 当进入聊天界面后,就通过后台修改所有的读取状态属性为已读的消息, 然后返回修改的条数,前台根据修改的条数和总条数来计算剩余未读的总消息代码示例:reducer.js://聊天状态原创 2020-06-16 22:00:34 · 3213 阅读 · 0 评论 -
滚动条加载后滑动到内容底部,且随内容增加而自动滑动
componentDidMount() { // 初始显示列表 window.scrollTo(0, document.body.scrollHeight) }componentDidUpdate () { // 更新显示列表 window.scrollTo(0, document.body.scrollHeight)}原创 2020-06-16 16:14:35 · 817 阅读 · 0 评论 -
利用socket.io实现用户实时聊天
聊天存入数据库需要的参数标识: 两个用户的标识 聊天消息内容 发送消息的标识 消息的标识 1、在前台的异步请求中,使用socket来发送消息 向后台发送时,应该将两个用户的标识传递,且能看出谁向谁发,还要携带聊天内容 2、在后台中,使用socket来接收,不需要路由组件,写成外部模块来接收 后台收取到后存入数据库中,并向客户端返回存入的内容 其中:因为客户端都是监听的相同名称,所以都能收到服务器返回的发送内容基于React的Redux模式下的代码示例:actions.js原创 2020-06-15 21:37:04 · 1069 阅读 · 0 评论