- 博客(56)
- 问答 (5)
- 收藏
- 关注
原创 Echarts图表柱状图x轴数据过多,堆叠处理
图就会堆叠在一起,看起来十分难看。通常是通过配置dataZoom来解决问题,但是这不是最佳的处理方案,我们可以根据柱状图X轴数据长度并配合dataZoom来实现最佳的显示效果。会遇到这种情况,以柱状图为例子,当数据过多时,动态设置dataZoom的end属性。有更好的方案,欢迎留言补充。
2024-01-05 15:33:20
3093
原创 Vue实现免密登录跳转的方式
首先,我们要明确一个点,系统中所有的操作都要携带Token去发送请求,而登录一般是获取Token的来源,点击url实现跳转,并不意味着,不需要登录,只是我们在点击url的过程中,去帮助用户去做登录跳转的操作。通过判断isFreeLogin==1去判断是否免登录,如果免登录,则通过固定的账号、密码或者是在url中携带账号、密码(不安全)。然后抓取url中的参数,调登录接口,实现跳转。方案二:通过后端去处理。点击url的时候,给后端发一个请求,让后端返回登录账号信息,然后前端调用登录接口,实现页面跳转。
2023-07-11 17:04:48
3730
原创 Canvas、SVG实现鼠标滑过某个区域高亮显示的方案说明
方案2:用Canvas和SVG的方式实现。不规则的区域,手动取点,绘制路径,鼠标划过或鼠标点击的时候,判断鼠标坐标点是否在Path路径内,如果在某个区域内,就显示对应效果。但是要考虑一个问题,因为Path的点,我们是在某个分辨率基准下取点的,这就导致在不同屏幕分辨率下,会导致,无法取到点的问题,所以要重新计算鼠标坐标点。用户提供了某个厂区的底图(就一张静态图片),在底图中,划分了10个不规则区域,给了10个区域的高亮、开灯效果图片(切好了图),鼠标滑过每个区域的时候,要高亮显示,开灯的时候,显示开灯效果;
2023-06-30 16:26:37
2252
原创 前端搭建本地服务器的小技巧分享
2、把你要访问文件放在某个目录文件夹下,用Vscode打开这个文件夹。4、这样子就启动了一个本地服务器。3、点击右下角的Go Live。
2023-05-19 09:06:51
296
原创 Vue+Less/Scss实现主题切换功能
目前,在众多的后台管理系统中,换肤功能已是一个很常见的功能。用户可以根据自己的喜好,设置页面的主题,从而实现个性化定制。目前,我所了解到的换肤方式,也是我目前所掌握的两种换肤方式,想同大家一起分享。
2023-02-23 09:36:52
2641
原创 关于HTTP协议
然后将请求你的请求提交给具体的服务器,在由服务器返回我们要的结果(以HTML编码格式返回给浏览器),浏览器执行HTML编码,将结果显示在浏览器的正文。它依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。TCP/IP 协议族,是它是一系列网络通信协议的统称,不只是包含TCP/IP协议,还包括UDP、ICMP、ARP。它是应用层面的防火墙,专门检测 HTTP 流量,是防护 Web 应用的安全技术。
2023-02-20 23:24:55
191
1
原创 微信消息订阅功能开发流程
认证的流程:补充公司营业执照相关信息、公司对公账号打款、三方电话认证等,以及300元认证费。(2)获取要发送的用户的openId。(4)移动端查看是否接收到已发送消息。a、创建服务号类型的公众号并进行认证。(1)获取权限AccessToken。3、公众号分为:订阅号、服务号。(3)给指定用户发送消息。d、添加模板消息发送接口。b、申请模板消息功能。
2023-02-06 10:03:17
500
原创 webGL相关学习(THREE.js相关)
相机,让哪一个相机围绕目标运动。3D绘图协议,依赖于HTML5 canvas容器而展示3D模型。渲染的画布dom对象,用于监听鼠标事件控制相机的围绕运动。场景、摄像机、物体、渲染器。
2022-12-27 18:59:58
208
原创 08前端基础---JS执行机制
JS执行机制:重点有以下两点:1.JavaScript是一门单线程语言。2.Event Loop(事件循环)是JavaScript的执行机制。
2022-12-22 09:24:41
285
原创 提升代码可读性技巧
逻辑或|| 的短路运算:若左边能转成true,返回左边式子的值,反之返回右边式子的值。这里值一层的三元运算符,如果多层嵌套的三元运算符,代码可读性也很差。的短路运算有时候可以用来代替一些比较简单的if/else。
2022-12-22 09:22:59
198
原创 Vue项目通过vue-i18n实现国际化方案
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘) 页面一片空白。(具体原因目前还没排查处理,如果大家有解决方案,欢迎评论留言~)4、注意:语言包文件的数据持久化。main.js文件引入i18n。
2022-11-30 11:28:50
1117
原创 Vue中webSocket写法总结
前言:vue项目中,我们常会使用websocket实现长连接,实时更新页面数据状态,那么封装一个实用的websocekt就尤为重要,以下是本人项目过程中,针对websocket进行的封装,仅供学习参考,如果大家有更好的方案,欢迎留言分享。
2022-11-29 17:30:09
1175
原创 Node项目实战总结
一般在项目文件夹下,新建文件夹router,根据对应的业务逻辑创建不同的路由文件,例如用户相关,则创建user.js文件。通过命令npminit-y在项目文件夹下初始化项目,得到package.json包配置文件。2、配置cors跨域npmicors。3、配置解析表单数据的中间件。...
2022-07-23 19:37:25
671
原创 Node学习之Express的用法(5)
(1)Express编写GET、POST请求:引申:app.use的用法(1)加载路由 (2)加载静态资源(3)定义中间件【即拦截器】在所有请求之前(也就是所有路由之前去拦截)
2022-07-12 23:35:21
164
原创 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
220
原创 Node 之模块加载机制学习(3)
(一)Node模块的加载机制:1、优先从缓存中进行加载,模块在第一次加载后会被缓存(二)内置模块加载机制:内置模块是由Node.js官方提供,内置模块的加载优先级是最高的。(三)自定义模块的加载机制使用require()加载自定义模块时,必须指定以./或../开头的文件路径,如果没有指定,就会按内置模块或第三方模块进行加载;如果缺省文件后缀时,先会按照具体的文件路径加载,然后会自动补齐js后缀进行加载,如果还是没找到,就补齐json后缀进行加载,还是没找到,就会补上node后缀进行查找,如果还是没查到,报错
2022-07-10 19:02:34
363
原创 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
177
原创 Node.js之模块化的学习(1)
模块化是指解决一个复杂问题时,自定向下逐层把系统分成若干模块的过程。对整个系统来说,模块是可组合、分解和更换的单元。可以提高代码的复用性、可维护性、可实现按需加载定义文件如何引入、如何暴露文件模块等相关规范内置模块(官方模块。如fs/http等模块)、自定义模块(自己写的文件)、第三方模块使用强大的require()方法,可以加载需要的内置模块、用户自定义模块、第三方模块进行使用当使用require()加载其他模块时,会执行被加载模块中的代码。注意:在使用require加载自定义用户模块期间,可以省略
2022-07-05 21:51:49
67
原创 微前端qiankun使用问题汇总
使用qiankun微前端库的时候,加载的子应用使用了iconfont图标,子应用在独立运行时,字体图标可以正常显示,而在被父应用加载时,字体图标显示不出来。
2022-06-14 19:02:19
973
原创 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
9697
1
原创 webSoket的用法
说起websoket,我们先来了解一下:(一)为什么会有webSoket?HTTP协议:通信只能从客户端发起,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。【即:HTTP协议为单向请求】。这注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询"的方式获取服务器的数据变化:也就是需要每隔一段时候,就发出一个询问(请求),了解服务器有没有新的信息。轮询效率低,且非常浪费资源 【因为必须不停连接,或者 HTTP 连接始终打开)】Websoket协议:服
2022-03-29 09:31:31
217
原创 (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
78
原创 六、webpack配置详情
一、entry入口文件1、string--->'./src/index.js'打包形成一个chunk,输出一个bundle文件。2、array3、object
2022-02-15 15:22:22
329
原创 五、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
266
原创 四、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
806
原创 三、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
699
原创 二、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
255
原创 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
334
原创 一、webpack五个核心概念
一、五个核心概念:1、Entry(入口):指示webpack以哪个文件为入口起点打包。分析构建内部依赖图。2、Output(出口):指示webpack打包后的资源bundles输出到哪里去,以及如何命名。3、Loader:Loader让webpack能够去处理那些非javaScript文件【图片文件、html文件、样式文件】(webpack自身只理解javascript)4、Plugins(插件):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
2022-02-10 17:10:33
2405
原创 前端三大渲染机制
1、三大渲染机制对比:2、浏览器渲染HTML页面的过程:输入网址在通过DNS解析后得到服务器地址,浏览器向服务器发起http请求,经过TCP三次握手确认连接后,服务器将需要的代码发回给浏览器,浏览器接受到代码后进行解析,经过三大步骤,DOM构造、布局以及绘制页面,最终展示成网页;...
2022-01-19 10:52:24
943
原创 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
491
原创 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
6261
原创 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
499
转载 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
5904
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关注的人