- 博客(108)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue项目实现单点登录(SSO)的逻辑和基本流程
大致的思路就是1.判断权限2.获取用户登录信息 3.获取http请求状态4.直接访问或去登录5.保存当前页并去登录页6.登录后保存用户信息并跳转回访问页面
2024-07-19 19:30:00
796
原创 关于JSON.parse()使用报 Unterminated string in JSON的问题
JSON.parse()报错：SyntaxError: Unterminated string in JSON.url解析报错: Uncaught URIError: URI malformed at decodeURIComponent ()
2024-07-11 21:00:00
619
原创 基于antdesign封装一个react的上传组件
项目中遇到了一个上传的需求，看了一下已有的代码很粗糙，而且是直接引用andt的组件，体验不太好，自己使用FormData对象封装了一个上传组件，仅供参考。
2024-07-09 20:30:00
326
原创 replaceAll is not a function 详解
在chrome 浏览器中使用 replaceAll 报这个错误，是因为chrome 版本过低， 在chrome 85 以上版本才支持
2024-06-11 13:24:04
633
原创 react组件中的this
上面的代码中，在构造函数中可以用 this 读取到 function 声明的方法，因为构造函数是在组件实例的上下文中执行的。因此，当事件触发时，handleClick 中的 this 指向的是全局对象（在非严格模式下）或者 undefined（在严格模式下），而不是 MyComponent 的实例。简而言之，this.handleClick 是组件实例上的一个方法，而在构造函数中绑定 this 是为了确保在方法内部 this 指向组件实例，即使在它作为回调函数被传递给其他组件或方法时也是如此。
2024-06-04 21:30:00
492
1
原创 前端将DOM元素导出为图片
前端工作中经常会用到把一些元素导出，比如表格，正好项目有遇到导出为excel和导出为图片，就都封装实现了一下，以供其他需求的开发者使用：
2024-06-03 22:15:00
483
原创 vue-router之路由钩子函数应用解析
组件在创建时会触发created，但是每次进入路由时都会触发beforeRouteEnter，所以，当一个页面使用了keep-alive进行了缓存时，离开这个页面后再次进入时，不会再触发created，但是会触发beforeRouteEnter，这时候就可以使用路由钩子进行处理了。beforeEach的钩子函数，它是一个全局的before 钩子函数，beforeEach在每次每一个路由改变的时候都得执行一遍。这就是vue-router钩子函数的基础应用，当然还有很多其他的应用角度。
2024-01-17 19:45:00
1885
原创 nodejs中响应头写在createServer中和使用server实例监听‘request‘的区别和应用场景
如果你需要根据每个请求动态设置响应头，那么使用事件监听器的方式更为适合。如果你需要设置一些固定的响应头，那么直接在回调函数中设置可能更为简单。这个方法接受一个回调函数作为参数，该回调函数会在每次HTTP请求到达时被调用。在这个回调函数中，你可以处理请求并设置响应头。还有一种也是每次HTTP请求到达时被调用，也可以在回调函数中对请求和响应做出相应的处理。这种方式允许你在事件处理器中动态地设置响应头，可以根据请求的内容来决定响应头的值。这种方式比较简单，通常用于设置固定的响应头。在这个例子中，我们使用。
2024-01-11 19:29:28
632
原创 web安全之XSS攻击原理及防范
攻击者通过操纵DOM结构，诱导浏览器执行恶意脚本，这种攻击也是我们比较常见，也是比较隐蔽的，因为攻击者不需要在服务器端插入恶意脚本。：反射型XSS攻击是一种非持久性的攻击，它发生在恶意脚本从服务器端反射到客户端的过程中，通常涉及到用户通过点击一个链接或访问一个页面时，服务器端未经充分验证和转义的输入被直接输出到HTML中。：又称为持久性xss，这种攻击一般在第三方欺诈网站上，恶意脚本存储于服务器端，如数据库、消息论坛等，当用户请求一个包含恶意脚本的页面时，服务器将恶意脚本发送给用户，执行攻击。
2024-01-10 16:26:22
1243
原创 scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
2023-10-30 17:24:27
2560
原创 Vue项目使用svg之svg-sprite-loader详细使用
项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。当然你你也可以在main中引入并注册svg组件，我是为了方便维护把功能抽到了icon文件下面了。那这么好的东西怎么在前端vue项目中使用呢？组件属性的icon-file-name的值就是svg文件的名字。好的，就可以方便的使用svg了。
2023-10-17 16:55:57
1239
原创 关于echarts鼠标悬浮位置不准确的问题
当我们在为了适配一些小屏幕笔记本为了优化显示效果进行屏幕缩放后，会做一些适配性处理，比如使用transform的scale处理，亦或者使用devicePixelRatio处理自动化处理缩放，但是有时候会在项目中有echarts图表的时候会导致echarts图表上悬浮位置不准确。如何解决这个问题呢，那是因为开发者直接放大了body，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom，在使用图表的父组件也同步放大即可。
2023-07-07 16:00:00
1333
2
原创 关于Vue项目下页面自适应pc端不同分辨率尺寸的方法
翻译过来就是在package.json文件中，存在一个叫做peerDependencies（对等依赖关系）的对象，它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包（意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容）；对等依赖关系最好的例子就是React，一个声明式的创建用户界面的JS库。前面我有一篇博客说的是用动态监听body的zoom然后自己设置，或者是window.devicePixelRatio和reansform的scale来处理笔记本等小屏幕的缩放兼容。
2023-07-07 11:14:09
4596
原创 关于echarts图表文本位置修改
实际开发中，我们会经常遇到echarts图表的文本label被旁边的柱子或者其他的压住，又或者我们想调整文本位置时怎么做呢?
2023-07-06 20:45:31
1653
原创 前端适配笔记本缩放125%，150%导致页面错乱问题
window.screen.availHeight > 1000 说明缩放选择的是100%，否则是125%、150%, 还有使用媒体查询的，直接拷贝过去试了一下一点用没有，但是我说明一下，这个肯定是一种解决方式，只是我仔细去研究，其他的同理，用了一下没有效果，由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。我用的是vue，所以我把它加在了app.vue下的。
2023-07-04 15:43:35
6041
原创 vue中解决scss下::v-deep影响到子组件的问题
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)使用中发现了一个问题，就是当在父组件使用了v-deep修改样式时，会影响到子组件，修改为/deep/报。常用的有>>>、 /deep/、::v-deep。改为 >>>可以解决这个问题。
2023-05-18 16:32:27
1244
原创 vue实现基于elementui的全屏图片自定义预览
到elementUI看了一下，发现el-image是有这个功能的，而且支持旋转、放大缩小，原图，鼠标滚动，列表预览等基础功能，但是是基于小图点击预览大图的，官方api也没有提供触发预览的事件，所以手动实现了它的预览调用功能
2023-05-10 10:54:13
1766
1
原创 HTML5中关于解决video标签禁止右键和下载视频的办法
html5中的video标签类型的预览，由于原生的video标签添加了controls属性后，右下角的 …点击后 会出现‘下载’ ，‘播放速度’，‘画中画’ 的功能选项，但是由于有只读权限的问题，需要关闭掉‘下载功能
2023-03-21 15:07:30
4716
原创 vue根据环境动态打包BASE_API
项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。
2023-02-17 20:30:00
3638
原创 vue项目开发解决 Error: error:0308010C:digital envelope routines::unsupported
vue项目开发解决node版本太高导致的错误 Error: error:0308010C:digital envelope routines::unsupported
2023-02-07 16:33:23
273
原创 echarts gallery最新地址
自从echarts托管给Apache后，好多人发现原来官网上的社区不见了，echarts gallery里面的图表数据展示完善， 可用性很高， 现在找到提供给有需求的开发者。
2022-11-29 15:49:08
5027
原创 Vue组件通信之bus详解
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
2022-11-28 23:15:00
3076
原创 echarts中实现自定义legend数据
直接使用echarts中属性的格式器formatter就可以解决了，因为formatter是一个标准的function，可以在其中对数据进行一些操作，最后返回想要展现的数据即可
2022-11-28 19:49:48
5461
原创 基于vue封装一个echarts通用组件
随着项目越来越多的交互和展示， 图表类的看板也在项目中应用的越来越多， echarts作为一款优秀并开源的产品，在项目中也大规模的应用，尤其是边缘计算和大数据可视化的项目中，随处都能见它的身影，本文记录封装一个基础的echarts图表组件
2022-11-28 17:32:15
1456
原创 vue的mixin混入在项目开发中的使用
vue也提供了mixin数据混入，本质其实还是单独抽出一部分数据或者钩子、方法等，然后在有需要的组件页面中直接混入，此时当前组件便拥有了该混入的功能。
2022-11-28 16:40:32
426
原创 npm包的发布流程和常见问题与解决办法
近期我接过了之前部门内部的一个开源包的的运维工作，业余时间解决一下开发者提的问题，所以又熟悉了一遍npm包的发布流程，大致如下：去npm官网注册一个账号package的制作：1.创建项目目录2.打开命令行窗口在新建的项目目录下执行npm init 命令后， 按照要求填写package相关信息npm login遇到如下报错的话npm ERR! network request to http://registry.cnpmjs.org/-/v1/login failed, reason
2022-03-21 19:07:08
1576
原创 小程序如何实现宽度小于1rpx的边框
现在的应用UI越来越趋于扁平化，线条也越来越淡化，但是小程序的最小的宽度单位1rpx也会显得很宽，ui中的细线条怎么实现呢。其实用伪类处理就可以达到目的，在需要边框的元素上加上css伪类结合transform就可以了：.react-thin-border::after{ content: ''; width: 100%; border-top: 1rpx solid #f2f2f2; transform: scaleY(0.5); position: absolute; bott
2022-01-12 15:58:16
565
原创 关于vuepress打包部署后样式错乱的问题
组件库完成后采用的是vuepress做的单独线上文档，本地正常，但是打包部署后访问文档发现样式错乱。排查了一下发现是路径问题, 搜了一下很多相关问题也没说清楚，其实只需要设置一下config的配置就好了base: '/m-ui-doc/', // 部署的路径配置dest: './dist', // 设置输出目录这个base的配置应为域名下的层级路径，如：// https://doc.smart.com/activity/sit/xxx/doc/index.html// 配置为base:
2022-01-12 11:41:37
2721
原创 小程序自定义实现open-type
有个需求是重构小程序的某些页面，比如以下这种列表，之前都是支持copy的，导致代码比较臃肿，占用有限的空间且不好维护我把组件库写好后，准备直接使用时发现有用到分享和反馈这种小程序原生button才有的属性即：open-type='feedback'open-type='share'本来准备直接复用以前的来着，但是看代码很乱，就想着把它的功能在组件中直接实现好了，开始想着把已有的逻辑贴进去再加个if的属性就可以，臃肿得很， 最终理性战胜了我，试试其他实现方式，以下是我的ui组件库效果：试着点了
2021-12-17 18:37:46
4489
原创 小程序swiper组件autoplay为ture时不显示指示小圆点的问题
项目中需要一个轮播的banner，直接使用了小程序的swiper组件，发现没有小圆点，上代码<view wx:if="{{bannerList && bannerList.length>0}}" class="advertise-wrap"> <swiper class="advertise" indicator-dots="{{true}}" autoplay="{{true}}"> <swiper-item class="swiperI
2021-06-16 14:34:02
959
原创 小程序实现全局监听globalData数据的状态管理模式
前几天准备回去架构组来着，但是那边新来了个妹子在搞，新项目有还没启动，小程序一直有项目，又没人，一直在小程序的feature-team中，这不又来个几个需求。其中一个新需求是需要做一个协议更新的功能，即老用户登录后，接口检查一遍协议是否已更新，需要重新同意协议，否则直接退出小程序。查了一下没有全局组件的说法，问了隔壁老王，老徐有什么比较好的方法，都丢下一句话，写个component然后挨个页面引入，在每个页面做一遍标签引入，然后传值给子组件，子组件observe即可。按照常规实现我感觉这个改动还挺大的
2021-05-24 18:39:05
1247
原创 小程序实现一个循环的文本跑马灯2 (animate)
接上个博客的，文本跑马灯的animate实现上个版本是根据setinterval定时器修改位置实现动画效果，体验还行，但是太耗资源，如果想体验流畅那么频率就很小，步长也不能太长，但是会很慢，由于频率高，一秒钟执行三四十次，太耗费资源，于是我这边就使用小程序的animate做了另一种实现主要思路：根据文本的长度设定过渡时间，动画结束后再次滚动即可，直接看代码wxml<view class='marquee_container'> <view id="marquee_wrap" c
2021-04-19 17:15:16
609
原创 小程序实现一个循环的文本跑马灯
好久没来了。架构组本身已经挺多事了，手头上还有个picker的组件没做完善，但是隔壁运营活动组几十个前端忙不过来，产品和场景一口气出了十来个项目，基本都是拉新、节日、社交、小游戏、签到等互动类的活动， 应公司建设需要，领导亲自跟我说不当紧的事可以放一放，去帮同事一把，他跟上面说好了，于是乎我就到了运营活动的小程序组了（运营活动这边分了小程序端和HTML5端），说实话小程序上手虽然快，但是很久没用了，小程序端的那个妹子人也好，让我看几个页面，几个组件，都是比较小的那种，以上为背景有一个连续滚动的的跑马灯组
2021-04-08 18:26:51
1662
原创 git更新远程分支列表
由于在远程删除了分支，有时候本地不能更新到，所以再次操作已删除的分支时git会报错， 此时只需要刷新一下分支列表即可正常操作，git命令如下：git remote update origin --prune或者简写为git remote update origin --p...
2021-03-08 17:01:39
16938
1
原创 git克隆指定分支
由于我们根据git仓库地址克隆的项目都是master主分支，但是有些情况需要克隆某个分支，比如新增功能需要从别的分支克隆：git clone -b develop giturldevelop为需要拉取的分支，giturl为git仓库地址
2021-01-29 10:43:27
2040
web/小程序/公众号等代码加固工具
2022-02-21
python中wxpython做的GUI界面怎么跳转？
2015-10-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人