- 博客(56)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 Echarts图表柱状图x轴数据过多，堆叠处理
图就会堆叠在一起，看起来十分难看。通常是通过配置dataZoom来解决问题，但是这不是最佳的处理方案，我们可以根据柱状图X轴数据长度并配合dataZoom来实现最佳的显示效果。会遇到这种情况，以柱状图为例子，当数据过多时，动态设置dataZoom的end属性。有更好的方案，欢迎留言补充。
2024-01-05 15:33:20
1329
原创 Vue实现免密登录跳转的方式
首先，我们要明确一个点，系统中所有的操作都要携带Token去发送请求，而登录一般是获取Token的来源，点击url实现跳转，并不意味着，不需要登录，只是我们在点击url的过程中，去帮助用户去做登录跳转的操作。通过判断isFreeLogin==1去判断是否免登录，如果免登录，则通过固定的账号、密码或者是在url中携带账号、密码（不安全）。然后抓取url中的参数，调登录接口，实现跳转。方案二：通过后端去处理。点击url的时候，给后端发一个请求，让后端返回登录账号信息，然后前端调用登录接口，实现页面跳转。
2023-07-11 17:04:48
3139
原创 Canvas、SVG实现鼠标滑过某个区域高亮显示的方案说明
方案2：用Canvas和SVG的方式实现。不规则的区域，手动取点，绘制路径，鼠标划过或鼠标点击的时候，判断鼠标坐标点是否在Path路径内，如果在某个区域内，就显示对应效果。但是要考虑一个问题，因为Path的点，我们是在某个分辨率基准下取点的，这就导致在不同屏幕分辨率下，会导致，无法取到点的问题，所以要重新计算鼠标坐标点。用户提供了某个厂区的底图（就一张静态图片），在底图中，划分了10个不规则区域，给了10个区域的高亮、开灯效果图片（切好了图），鼠标滑过每个区域的时候，要高亮显示，开灯的时候，显示开灯效果；
2023-06-30 16:26:37
1806
原创 前端搭建本地服务器的小技巧分享
2、把你要访问文件放在某个目录文件夹下，用Vscode打开这个文件夹。4、这样子就启动了一个本地服务器。3、点击右下角的Go Live。
2023-05-19 09:06:51
270
原创 Vue+Less/Scss实现主题切换功能
目前，在众多的后台管理系统中，换肤功能已是一个很常见的功能。用户可以根据自己的喜好，设置页面的主题，从而实现个性化定制。目前，我所了解到的换肤方式，也是我目前所掌握的两种换肤方式，想同大家一起分享。
2023-02-23 09:36:52
2341
原创 关于HTTP协议
然后将请求你的请求提交给具体的服务器，在由服务器返回我们要的结果（以HTML编码格式返回给浏览器），浏览器执行HTML编码，将结果显示在浏览器的正文。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。TCP/IP 协议族，是它是一系列网络通信协议的统称，不只是包含TCP/IP协议，还包括UDP、ICMP、ARP。它是应用层面的防火墙，专门检测 HTTP 流量，是防护 Web 应用的安全技术。
2023-02-20 23:24:55
181
1
原创 微信消息订阅功能开发流程
认证的流程：补充公司营业执照相关信息、公司对公账号打款、三方电话认证等，以及300元认证费。(2）获取要发送的用户的openId。（4）移动端查看是否接收到已发送消息。a、创建服务号类型的公众号并进行认证。（1）获取权限AccessToken。3、公众号分为：订阅号、服务号。(3)给指定用户发送消息。d、添加模板消息发送接口。b、申请模板消息功能。
2023-02-06 10:03:17
465
原创 webGL相关学习（THREE.js相关）
相机，让哪一个相机围绕目标运动。3D绘图协议，依赖于HTML5 canvas容器而展示3D模型。渲染的画布dom对象，用于监听鼠标事件控制相机的围绕运动。场景、摄像机、物体、渲染器。
2022-12-27 18:59:58
189
原创 08前端基础---JS执行机制
JS执行机制：重点有以下两点：1.JavaScript是一门单线程语言。2.Event Loop(事件循环)是JavaScript的执行机制。
2022-12-22 09:24:41
264
原创 提升代码可读性技巧
逻辑或|| 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。这里值一层的三元运算符，如果多层嵌套的三元运算符，代码可读性也很差。的短路运算有时候可以用来代替一些比较简单的if/else。
2022-12-22 09:22:59
170
原创 Vue项目通过vue-i18n实现国际化方案
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘) 页面一片空白。（具体原因目前还没排查处理，如果大家有解决方案，欢迎评论留言~）4、注意：语言包文件的数据持久化。main.js文件引入i18n。
2022-11-30 11:28:50
1091
原创 Vue中webSocket写法总结
前言：vue项目中，我们常会使用websocket实现长连接，实时更新页面数据状态，那么封装一个实用的websocekt就尤为重要，以下是本人项目过程中，针对websocket进行的封装，仅供学习参考，如果大家有更好的方案，欢迎留言分享。
2022-11-29 17:30:09
1099
原创 Node项目实战总结
一般在项目文件夹下，新建文件夹router，根据对应的业务逻辑创建不同的路由文件，例如用户相关，则创建user.js文件。通过命令npminit-y在项目文件夹下初始化项目，得到package.json包配置文件。2、配置cors跨域npmicors。3、配置解析表单数据的中间件。...
2022-07-23 19:37:25
628
原创 Node学习之Express的用法（5）
（1）Express编写GET、POST请求：引申：app.use的用法（1）加载路由 (2)加载静态资源(3)定义中间件【即拦截器】在所有请求之前（也就是所有路由之前去拦截）
2022-07-12 23:35:21
149
原创 Node之Express学习（4）
（一）Express基础知识：1、Express是基于内置http模块进一步封装出来的一个web开发框架，能够快速的创建web服务器，提高开发效率。2、Express能做什么？（1）web网站服务器 （2）api接口服务器3、通过Express创建web服务器：4、监听GET请求：通过app.get（）方法，可以监听客户端的GET请求，如：5、对外提供静态资源,如将clock文件夹中的资源对外暴露6、如需托管多个资源文件，只需多次调用express.static()函数即可，如：
2022-07-10 23:29:11
201
原创 Node 之模块加载机制学习（3）
（一）Node模块的加载机制：1、优先从缓存中进行加载，模块在第一次加载后会被缓存（二）内置模块加载机制：内置模块是由Node.js官方提供，内置模块的加载优先级是最高的。（三）自定义模块的加载机制使用require（）加载自定义模块时，必须指定以./或../开头的文件路径，如果没有指定，就会按内置模块或第三方模块进行加载；如果缺省文件后缀时，先会按照具体的文件路径加载，然后会自动补齐js后缀进行加载，如果还是没找到，就补齐json后缀进行加载，还是没找到，就会补上node后缀进行查找，如果还是没查到，报错
2022-07-10 19:02:34
353
原创 Node.js之模块化学习（2）
对模块的访问限制，可以防止全局变量污染 1、module对象：在每个.js自定义的模块中都有一个module对象，它里边存储了和当前模块有关的信息。 module.exports={} ，空对象，可以将模块内部的属性暴露出去，供外部使用module.export.username='aaa' //在module.export对象上挂载username属性导出的内容是：{username:'aaa'}共享成员时的注意点：使用require（）方法导入模块时，导入的结果，永远以module.exports指向
2022-07-07 22:58:32
159
原创 Node.js之模块化的学习（1）
模块化是指解决一个复杂问题时，自定向下逐层把系统分成若干模块的过程。对整个系统来说，模块是可组合、分解和更换的单元。可以提高代码的复用性、可维护性、可实现按需加载定义文件如何引入、如何暴露文件模块等相关规范内置模块（官方模块。如fs/http等模块）、自定义模块（自己写的文件）、第三方模块使用强大的require()方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用当使用require()加载其他模块时，会执行被加载模块中的代码。注意：在使用require加载自定义用户模块期间，可以省略
2022-07-05 21:51:49
58
原创 微前端qiankun使用问题汇总
使用qiankun微前端库的时候，加载的子应用使用了iconfont图标，子应用在独立运行时，字体图标可以正常显示，而在被父应用加载时，字体图标显示不出来。
2022-06-14 19:02:19
854
原创 redux数据持久化（redux-persist的使用）
一、数据持久化：一般是指页面刷新后，数据仍然能够保持原来的状态。一般在前端当中，数据持久化，可以通过将数据存储到localstorage或Cookie中存起来，用到的时候直接从本地存储中获取数据。而redux-persist是把redux中的数据在localstorage中存起来，起到持久化的效果。二、使用：安装：npm i redux-persist --save在store.js中使用//引入createStore，专门用于创建redux中最为核心的store对象i.
2022-04-14 23:20:52
9413
1
原创 webSoket的用法
说起websoket，我们先来了解一下：（一）为什么会有webSoket？HTTP协议：通信只能从客户端发起，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。【即：HTTP协议为单向请求】。这注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"的方式获取服务器的数据变化：也就是需要每隔一段时候，就发出一个询问（请求），了解服务器有没有新的信息。轮询效率低，且非常浪费资源 【因为必须不停连接，或者 HTTP 连接始终打开）】Websoket协议：服
2022-03-29 09:31:31
204
原创 （1）React之Redux相关
## 1.求和案例_redux精简版 (1).去除Count组件自身的状态 (2).src下建立: -redux -store.js -count_reducer.js (3).store.js： 1).引入redux中的createStore函数，创建一个store 2).createStore调用时要传入一个为其服务的reducer ...
2022-02-28 22:24:16
65
原创 六、webpack配置详情
一、entry入口文件1、string--->'./src/index.js'打包形成一个chunk，输出一个bundle文件。2、array3、object
2022-02-15 15:22:22
321
原创 五、webpack其他问题小记
1、压缩CSS后，会使得CSS被压缩成一行，文件大小也会变小2、JS兼容性问题的处理：babel-loader @babel/core @babel/preset-env a、基本js兼容性处理 -->babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换 b、全部js兼容性处理-->@babel/polyfill 问题：我只要解决部分兼容性问题，但是将所有的兼容性代码全部引入，体积太大...
2022-02-14 09:38:50
248
原创 四、webpack优化配置
webpack性能优化1、开发环境性能优化优化打包构建速度（1）HMR：hot module replacement 热模块替换作用：一个模块发生变化，只会重打包这个模块（而不是打包所有模块），极大提升构建速度样式文件：可以使用HMR功能，因为style-loader内部实现了JS文件：默认不能使用HMR功能 --->需要修改js代码，添加支持HMR功能的代码,例如if(module.hot){ //一旦module.hot为true,说明开启了HMR功能，-..
2022-02-14 09:37:42
786
原创 三、webpack学习过程中遇到的一些问题以及解决方法
1、使用devServer开发服务器实现自动化时，发现如果项目构建后路径写成 contentBase: resolve(__dirname, 'build'), 会出错，换了以下的写法后，就不会再报错了 static:resolve(__dirname, 'build')关于devServer的配置： devServer:{ static:resolve(__dirname, 'build'), compress: true, po...
2022-02-14 09:37:02
681
原创 二、webpack开发环境配置总结
二、开发环境配置总结：less/css 文件的完整处理过程： 1.通过less-loader编译为css 2.通过post-css做css代码的兼容 3.通过css-loader将css代码编译到js文件中4.通过style-loader【创建 style 标签， 将 js 中的样式资源插入进行， 添加到 head 中生效】将css代码插入在html标签中5.或通过MiniCssExtractPlugin插件和MiniCssExtractPlugin.load...
2022-02-14 09:36:12
246
原创 Git的使用
一、Git的常用操作：查看当前仓库的所有分支：git branch查看远程所有分支：git branch –r新建分支，并停留在该分支 git branch 【branch name】，如：git branch dev新建分支，并切换到该分支 git checkout –b 【branch name】删除分支 git branch -d 【branch】删除远程分支 git push origin --delete [branch -name] ......
2022-02-11 11:54:17
320
原创 一、webpack五个核心概念
一、五个核心概念：1、Entry（入口）：指示webpack以哪个文件为入口起点打包。分析构建内部依赖图。2、Output（出口）：指示webpack打包后的资源bundles输出到哪里去，以及如何命名。3、Loader：Loader让webpack能够去处理那些非javaScript文件【图片文件、html文件、样式文件】（webpack自身只理解javascript）4、Plugins（插件）：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
2022-02-10 17:10:33
2365
原创 前端三大渲染机制
1、三大渲染机制对比：2、浏览器渲染HTML页面的过程：输入网址在通过DNS解析后得到服务器地址，浏览器向服务器发起http请求，经过TCP三次握手确认连接后，服务器将需要的代码发回给浏览器，浏览器接受到代码后进行解析，经过三大步骤，DOM构造、布局以及绘制页面，最终展示成网页；...
2022-01-19 10:52:24
927
原创 JS原型对象和JS原型链
1、类型与对象：基本类型：string、number、boolean、object、null、undefined引用类型：String、Number、Boolean、Object、Function、Array、Date、RegExp、Error【对象】2、创建引用类型对象，一般采用构造函数创建如：以上我们分别创建了三种不同类型的对象在控制台打印，展开结果，看到有个内置属性[[Prototype]]，有些浏览器是__proto__【两者是一样的意思，这个是对象的一个属性，在创建
2022-01-06 16:28:15
475
原创 vue项目权限管理实现
1、整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。2、具体实现a、创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。b、当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。c、调用router.addRoutes(store.getters.addR
2022-01-06 11:35:07
6139
原创 ES6模块化
1、什么是模块化？模块化是指将一个大的程序文件，拆分成许多个小的文件，然后将小文件组合起来。2、模块化的好处：（1）防止命名冲突（2）代码复用（3）高维护性3、模块化语法：模块功能主要有两个命令构成：export和importexport命令用于规定模块的对外接口import命令用于输入其他模块提供的功能4、举例：1、使用export命令导出模块：方式一、(分别暴露)//m1.jsexport let name="hbm" //导出name变量e
2022-01-05 23:19:27
483
转载 vue页面或者网页全屏后，modal 弹框或者下拉框无法显示
版权声明：本文为CSDN博主「时光荏苒、、、、、、、、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/woyaojinali/article/details/110958317 说明：遇到了这个问题，仅为了记录~原因：页面主体部分全屏后，页面中的所有弹窗和下拉框不能显示，退出全屏后，弹窗正常。原因：**项目主体全屏后，层级最高，弹出会被盖在app层级下面，不管怎么设置z-index都无济于...
2021-12-01 17:03:52
5622
1
空空如也
vue全局引用sass时，报错
2021-11-23
element-ui复合型输入框需要按2次Tab键才会聚焦？
2021-11-15
vue树视图，同层级再同一行显示
2021-09-18
Vue项目，页面相同，渲染数据不同的问题
2021-09-14
1、窗口大小改变时，el-table的宽度会超出，刷新后宽度正常？
2021-08-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人