2301_80820432的博客

原创 前端：vue2和vue3的ElementUi的Notification的自定义组件

Vue3引入子组件的时候有个特别重要的坑，就是引入子组件的时候必须要注意引入名称，必须是驼峰命名，像vue2的popul就会导致失败。前景：当我们使用elementUI的Notification组件的时候，需要在这个浮动框内自定义内容，需要用到组件，有很多踩坑点，特此总结了一下。第三步：引入h函数，相当于vue2里面的$createElement,h是vue3的自带函数。Vue2：先引入组件，再在Notification里的message引入即可。第三步：在Notification中即可使用，需要使用。

原创 前端：CSS滚动视图动画实现：屏幕滚动时触发动画

但是要注意的是此功能是css3的新实验功能，目前仅 Chrome Canary (115以上)版本浏览器支持此特性，view()代表了进入视图窗口后的监听，scroll()代表了滑动的监听，例如scroll(root x)表示使用最外层的x轴的滚动条的滚动进度，scroll(root y)使用滚动容器的 y 轴上的滚动进度，这里使用的是view()参数。其中entry 0 表示的是进入的时候是0，cover 30%，就是视图进入30%的时候是动画结束帧。这个也是css的新特性，代表的是动画的持续范围。

原创 前端：使用animation长度变化的时候子元素先出现造成视觉从上到下的视觉障碍的bug

这样会简单实现一个折叠面板效果，但是光这样写子元素会出现这样的情况，如下图，这是我时间变慢之后的效果，当结束之后就会恢复正常。这是因为子元素本身就有宽高，当父元素执行动画的时候，子元素的宽高一下就出现了，造成视觉上的障碍。当使用animation，类似于折叠面板的效果，主要代码，场景为微信原生小程序，不过基本通用。解决方法，在父元素上面增加一个属性：overflow：hidden。超出父元素的部分就会被隐藏，解决这个bug，现在的动画效果如下。

原创 前端：this指针问题，uniapp出现Cannot read property ‘dispatch‘ of undefine

主要的报错地方在以上标红地方，主要是调用vuex的store里面的方法报的错误，使用vuex并没有错误，错误的是this指向问题。出现错误的原因是我用了微信uniapp提供的api，uni.login和uni.getIserProfile两个方法，这会导致指针已经不再指向vue实例，而是指向回调函数本身。uni.getUserProfile({ lang: 'zh_CN', desc: '用于核对员工注册资料信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写。以下是代码初始展示。

原创 前端：纯前端快速实现html导出word和pdf

原创 前端：uni-file-picker和uni-uploadFile集合使用

success: (uploadFileRes) => {//成功的回调，把返回的图片地址拼接进变量。url: 'xxxx/common/upload', //上传图片的接口。header: { //有些接口需要请求头，如果没有可以去掉，像我现在的接口是必须加上token的。deletephoto(e){ //deletephoto是把已经上传的图片叉掉之后的方法。fail:(res)=>{ //失败的回调。data：{ //这里是把返回的图片url地址做个逗号隔开拼接的参数，为了适应字段接口。

原创 前端：纯前端vue2实现登录验证码校验

placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code">v-for="(item, index) in codes" :key="index">{{ item.num }}</span>就是这样实现的验证码排列。说明：input部分是输入的框，getCodeBt部分就是图片部分，包括点击事件。this.$message.error("验证码输入有误");this.$message.error("请输入验证码");

原创 前端：uniapp手搓浮动层，简单可复用型组件。

先import，比如 import PopupComponent from '@xxx/PopupComponent';在实战中，通常是点击按钮后，弹出框，所以可以在对应的按钮事件上增加逻辑。并在 components中引入该组件 PopupComponent。类似于dialog的方式，简单很好修改。效果如下，当再次点击的时候则会关闭浮层。

原创 前端：React UseEffect无法正确获取到Ref的值

应该是我的dom元素也是要根据渲染的情况来的，而且数目有点多，useEffect已经执行了，ref标签都还没来得及打上，导致效果出不来。那么可以在刚进去的时候设置一个定时器，因为定时器肯定是最后才执行的，再配合useState，把State的值给useEffect，就可以做到进入页面后state更新，导致useEffect再执行一次。当执行定时器的时候，dom元素已经渲染好，并且ref也打上了。此时定时器执行，count发生变化，就可以再一次触发这个useEffect，实现对应的ref的功能。

原创 前端：Taro原生请求阿里云txt网址，获取文本。

url: res.data.list,//这里是个阿里云txt文件地址，重要代码：使用React开发。//以下两个参数格外重要。

原创 前端：Taro ScrollView事件无法生效

无法检测到scrollView事件，handleScroll方法获取不到监听的滚动的e事件。网上看了很多，很多都是高度的问题。也都试过了父元素设置高度，ScrollView都设置到了10000px，虽然页面可以滑动但是监测不到滑动事件。style的height用了100%也没用，最后尝试使用了style={{height:'100vh'}}成功，可以监听到滑动事件了。

原创 前端：鼠标下拉，图片由大变小动画

Bigbanner.style.height = "650rem" //要先给dom元素设置高，最好是dom元素原本的高度，之前用的是Bigbanner,style.height=Bigbanner.offsetheight+"px"，但是不知道为什么，有时候可以，有时候不可以，所以还是用固定高度吧。document.getElementById("rc-6015990465875328").remove() //当动画执行完毕，清除这个dom元素。setTimeout(()=>{//模仿宏任务。

原创 后端：springboot微服务，设置了server.port还是8080端口

然后发现原因，估计是idea缓存没清，更改其他端口号，如9528这样，就可以了，再改回之前的9527也可以了！直接上图，明明是9527端口但是启动之后显示8080端口，刷新了maven重启了idea，重启电脑都没用。

原创 后端：Springboot微服务，扫描不到xml文件

成功了之后再去浏览别人的代码，发现了一个点，在pom文件里面加上build（如图），貌似这样也可以成功，这个方法应该正规一点，可以让xml一起打包并且被扫描到，上面的方法是实在不知道怎么解决了。但是试了很多还是一直报这个错，这个报错的关键店就是显示扫描不到这个xml文件，无奈最后把文件放到这个服务的resources里面，最后成功！网上看了也试了很多方法，基本上所有解决方法大差不差，这个博客内容写的最详细。注意的是：一定要加com路径包，把xml放入这个里面，比较正规。

原创 前端:模仿gpt对话，包括实现逐字输出效果和各种注意点

思路：使用定时器来实现，页面上做个显示，但是还有个棘手的怎么定时器结束，东西还要正确显示在页面上，而且定时器的模板语法也要放进循环体里面，这样会导致后面输入回答的内容影响前面几次回答的内容，解决这几个的思路是：取一个新的dom元素，当定时器循环的时候，增加一个变量用于判断定时器是否在进行中，展示的是一个逐字输出的模板，当定时器结束的时候，新的dom元素获取到这个值并且展示在页面上，逐字输出的dom销毁，为了不影响后面的回答内容，在循环体里面要让定时器dom找最后一个循环即可。C++11的多线程编程支持；

原创 前端：获取dom元素，使用ts报红错误

类型 "null" 到类型 "HTMLInputElement" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。报错：类型 "Ref<null>" 到类型 "HTMLInputElement" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。placeholder="请输入您的问题" class="shuru" ref="inputref" /报错：类型“never”上不存在属性“focus”

原创 前端：v-html的使用

Linux 基础课程</a>。2：<a href=''>Linux 系统管理</a>。3：<a href=''>Linux 内核开发</a>。4：<a href=''>Linux 网络编程</a>。5：<a href=''>Linux 安全与防护

原创 前端：pdf预览地址打开后，直接进行下载pdf

xhr.open('GET', ' *****请求地址****** ');// 创建一个 Blob 对象，用于存储响应数据。// 创建一个 XMLHttpRequest 对象。// 创建一个隐藏的 <a> 标签。// 将 <a> 标签添加到页面中。// 设置下载文件的名称（可选）// 当请求完成时执行的回调函数。// 设置响应类型为二进制数据。// 触发点击事件进行下载。// 移除 <a> 标签。// 设置请求的 URL。