- 博客(21)
- 收藏
- 关注
RSS订阅原创 Antd Form 表单实现单项自定义请求校验
Antd Form 表单实现单项自定义请求校验，与 Modal 相结合，实现用户在输入信息后立即对 其进行校验的。
2022-11-08 10:13:35
4478
1
原创 git rebase 合并提交与避免分叉合并
rebase的两种用法合并当前分支的多个commit记录避免出现分叉合并合并当前分支的多个commit记录你可能会出现过以下提交记录:$ git log --pretty=format:'%h: %s'd2399da: feat: modify c0134695: feat: modify beb63848: feat: modify b51c0bca: feat: modify b4cb600e: feat: modify ad29f331: Initial commit此时 中间的
2021-11-28 14:50:21
58378
3
原创 nodejs express中使用token验证机制
token身份认证基本概念了解Session认证的局限性什么是tokenjwt的原理jwt的组成JWT的三个部分各自代表的含义jwt的使用方式在express中使用jwt定义secret密钥在登录成功后生成 JWT 字符串解析 JWT字符串 还原为JSON对象使用req.user 获取用户信息错误中间件前端如何使用token基本概念了解Session认证的局限性Session 认证机制需要配合Cookie才能实现。由于 Cookie 默认不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候，需要做
2021-11-21 23:22:49
2610
6
原创 全面理解正则表达式
全面理解正则表达式, 摆脱百度不到的烦恼RegExp构造函数创建正则表达式的三种方式正则常用方法原义文本字符元字符语法字符类负向类(反向类)范围类预定义类边界类量词分组() 元字符| 元字符()的反向引用修饰符其他特殊字符正则是js内置对象, 用以对字符串进行逻辑匹配运算。RegExp构造函数RegExp 对象用于将文本与一个模式匹配。创建正则表达式的三种方式以下三种表达式都会创建相同的正则表达式：字面量形式/ab+c/i; 首个参数为字符串模式的构造函数new RegExp
2021-11-21 00:41:24
687
原创 npm发包与升级
发包这里先创建一个叫add-function-demo的项目, 写一个简单的求和方法// dist/index.jsfunction add(a, b) { return a + b;}module.exports = add;创建npm账号发包必须创建npm账号, 登录时需要输入账号密码和邮箱npm包大致目录结构包名├── dist/index.js├──.npmignore├── CHANGELOG.md├── README.md└── package.jsonpa
2021-10-13 01:02:27
935
原创 uploader组件配合egg node使用form-data文件上传服务
uploader + node 进行文件上传服务技术栈前端：1. 框架： vue2. UI框架： Ant Design Vue3. es6: FileReadernode端：1. 框架： egg2. 插件： form-data3. nodejs: fs模块(fs.createReadStream)文档类上传(.xlsx .xls .docx .doc .pdf)前端的处理<a-upload accept=".xlsx .xls .docx .doc .pdf" :fil
2021-09-30 20:50:03
676
原创 手写Promise (另附完整demo)
手写PromisePromise常用方法Promise结构封装resolve和reject方法核心难点——封装prototype.then()Promise.resolve和Promise.rejectPromise.allpromise.race手写Promise之前, 我们先看看Promise有哪些方法需要我们封装:Promise常用方法详情点击查看链接, 这里只是简单的说明常用方法说明executor(resolve, reject)执行器, Promise的参数, 包含
2021-09-05 22:22:39
162
原创 Promise的链式调用、异常穿透、中断promise链
关于Promise链式调用的一些注意点1. promise.then()的参数2. 链式调用3. 异常穿透与错误处理4. 中断promise链
2021-08-22 16:46:50
2046
1
原创 javascript 对象的属性描述符(descriptor)
对象的属性描述符(descriptor)是什么?我们在给对象添加属性的时候, 第一反应就是通过[key]: value 添加属性, 但其实这个value只是这个key属性的其中一种特性, 而描述当前这个对象属性特性的设置 就是属性描述符其实_属性描述符_总共有四种:configurable: 是否可删除enumerable: 是否可枚举(遍历)value: 属性值writable: 是否可修改当我们给window添加一个a属性时:a = 1;// 查看wi
2021-08-13 12:25:50
634
原创 vuei18n国际化使用 3步走快速上手
i18n面向函数的封装使用流程目录结构准备翻译文件(本地化语言环境信息)创建i18n实例挂载到vue上通过cookie获取当前语言环境入口文件main.ts中挂载使用$t目录结构准备翻译文件(本地化语言环境信息)locale/lang.js 中准备中英文对照文本: (当然 你也可以将中英文分开 分别放在zh.js / en.js中)const locale = { 'zh-CN': { web: { title: '标题', content: '内容', } }, en:
2021-08-11 12:27:53
483
原创 vue 封装一行省略 多行扩展组件 实现按钮点击展开收起功能
在实际开发中 我们经常会遇到一行省略的需求, 相信这种样式 大家早就滚瓜烂熟了, 但是有时产品会让我们在边上加个按钮, 点击按钮还要能多行显示具体内容:不好意思 放错图片了…大概是这样的:这里会涉及到两个需求:1.如何让按钮动态控制一行,多行之间的转化– 1.1 通过控制父级的高度和样式, 来实现扩展功能(一行高度固定, 多余省略 / 多行高度auto)2.屏幕大小动态变化时, 内容可能会超出 也可能不会, 此时需要动态的控制按钮的显示– 2.1 添加屏幕自适应HTML结构:&
2021-06-25 21:46:56
649
原创 vue cli3 使用vue-svg-loader 出现Invalid Component definition报错
使用vue-svg-loader插件, 可以让svg格式的文件(比如图片),当成组件在项目中引入, 十分方便。但是有时会出现"Invalid component definition"报错, 需要我们在webpack中配置一下module.exports = { //1. 需先删除默认配置中处理svg chainWebpack: (config) => { config.module.rules.delete("svg"); }, // 2.配置loader con
2021-06-20 17:11:31
3570
原创 echarts容器设置width: 100%无效 宽始终显示100px
明明给chart容器设置了 width: 100%; 为什么始终无效, 一直都是100px呢?原因: 我的echarts组件与另一个组件是相互切换的(tab切换), 并且使用的是v-show 控制组件的显示与隐藏(即 display: none;)一开始显示的不是echarts组件, 这就导致容器一开始是display: none; 隐藏状态, 此时获取不到echarts的dom元素(从页面消失, 脱离文档流), 所以echarts就默认给自己设置了100px的宽解决: 在echarts组件中 mo
2021-06-16 16:36:09
6149
3
原创 使用transition过渡动画时, 遇到不能及时获取到dom元素宽高的坑
最近在做需求的时候, 踩到了这么一个坑:目标: 图片旋转后, 重新获取图片的高度。过程: 旋转过程中使用了过渡动画。----------------我的结构↓----------------------------------------------------------------------<ul> <li class="img-container"> <img class="cover" src="..
2021-06-11 16:03:08
806
2
原创 使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法什么是滚动距离比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离.读取滚动距离<head> <title>test</title> <style> ul { width: 200px;
2021-06-10 23:22:11
45438
3
原创 vue computed中使用set和get修改数据
vue computed中使用set和get修改数据computed是计算出来的属性, 相当于计算结果, 所以我们不能直接对结果进行修改getter函数setter函数现在有个需求: 想给options里添加新的数据, 如何操作?computed是计算出来的属性, 相当于计算结果, 所以我们不能直接对结果进行修改getter函数负责使用data中的数据, 但是注意 只能用, 不能改! 使用完后 记得将结果returndata() { return { options: [{a
2021-06-10 16:08:31
5543
原创 VUE(TS)中使用echarts组件实现屏幕自适应(外加lodash防抖)
VUE(TS)中使用echarts组件实现屏幕自适应(外加lodash防抖)如何在vue中使用echarts呢?我的项目目前用的版本:"echarts": "^4.9.0",需要用到的echarts知识点:1. echarts.init // 创建ECharts 实例2. echartsInstance.setOption // 设置图表实例的配置项以及数据，万能接口3. echarts.resize // 改变图表尺寸，在容器大小发生改变时需要手动调用。
2021-02-23 00:54:57
1640
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人