JavaEE-Web前台
文章平均质量分 66
QC班长
CSDN程序员学院讲师,CSDN内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
浏览器如何捕获元素的hover事件弹出的内容,并进行样式调整修改
最近前端需要重写antd的tab卡片的更多内容弹框,默认的背景色和文本颜色不合适,需要更改。只有鼠标指针放上去后才会显示弹出的内容 直接用审查元素还无法进行获取。如何用浏览器的开发者工具去捕获这些浮框内容或其他节点元素来调试其样式呢?原创 2023-06-29 13:42:54 · 1591 阅读 · 0 评论 -
用纯CSS和DIV绘制播放按钮样式
最近在做前端的视屏监控播放对接,前端弄了个播放按钮,记录下,效果如图所示:CSS代码:因为是大屏的项目,所以像素单位是vh的,对应的是1920x1080px的设计稿,请根据需要换成px或者其他单位。原创 2023-06-29 11:00:30 · 875 阅读 · 0 评论 -
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。原创 2023-06-13 16:58:07 · 8633 阅读 · 4 评论 -
前端样式排版布局技巧汇总杂记
最近在做前端的可视化大屏展示,记录一下相关的知识点。1、布局display属性根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。display常用属性值1. none:隐藏对象1.1 不用none前:1.2 用了none的时候:...原创 2022-05-29 16:08:35 · 1155 阅读 · 1 评论 -
Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)
最近项目发布到公网服务器,发现首次打开加载时太慢了,查看js文件发现chunk-vendors.js太大了,于是想着优化,发现了其中一种方案是使用压缩插件compression-webpack-plugin,压缩打包编译后的代码。将文件打包成 .gz 文件,然后通过 nginx 的配置,让浏览器直接解析 .gz 文件,可以大大提升文件加载的速度,浏览器可以直接解析 .gz 文件并解压。压缩文件格式介绍.gz:浏览器可以直接解析并解压。.br:BR 文件是使用 Brotli(一种开源数据压缩算原创 2022-04-28 22:37:32 · 3323 阅读 · 0 评论 -
React中为className添加多样式名的几种方式
问题需求,我需要在jsx中的className中同时引用SCSS文件中的.top .A这两个CSS样式类,如何实现呢? .top { width: 250px; height: 250px; font-size: 3rem; z-index: 0; position: absolute; } .top:hover { box-shadow: 0 0 10px #ccc; z-index: 999; } .A {原创 2022-02-25 19:28:42 · 2041 阅读 · 0 评论 -
什么是语法糖(Syntactic sugar)?
大学时没选修编译原理这门课,不知道什么是语法糖,最近看React的官方文档才接触语法糖的概念,简单查了下资料记录下,以下是来自百度百科的解释:语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。简单理解就是在不改变其功能的情况下,通过改变代码的写法,让代码原创 2022-02-24 13:00:27 · 18914 阅读 · 0 评论 -
Vue3.0.0、VueCLI4.5.0启动运行时报错Cannot read properties of undefined (reading ‘NormalModule‘)解决方法
最近升级前端框架尝鲜,用VueCLI4.5.0脚手架工具创建项目,然后在开发工具中把项目的node_modules文件夹删除,package-lock.json文件删除后,重新npm install,没什么问题。然后启动就报错了ERRORTypeError: Cannot read properties of undefined (reading 'NormalModule')NormalModule属性未定义,缺少了某些了依赖然后只能用排除法逐个排出问题,我又用了vue脚手架vue c..原创 2022-01-25 16:35:27 · 18566 阅读 · 7 评论 -
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时,图标组件刚好是Menu时报错,菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标。而我的图标是全局导入的,默认使用官方的命名。在菜单栏使用图标,并且是动态渲染的,刚好用到图标组件名称是Menu时,点击带有这个图标名称的菜单,就出问题了,导致其他菜单不显示。下面是在main.js中全局引入图标的方法:import {createApp} from 'vue'import App from './App..原创 2022-01-25 15:39:59 · 8296 阅读 · 4 评论 -
Vue3使用element-plusUI解决菜单高度自动自适应的问题,使用CSS3的vh单位
最近在升级Vue的前端项目,把所有的框架升级到较新稳定版,前端UI用的elementUI,也升级到了element-plus,菜单组件的高度设置了height:100%也无效,于是设置了min-height:800px可以用,但我想让它占满屏幕高度,于是查询到了css3的单位属性:vw 、vh。vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实原创 2022-01-20 18:07:23 · 11251 阅读 · 4 评论 -
Vue3安装最新版sass-loader node-sass报错解决方法
最近在升级前端项目框架,之前的前端框架是Vue2.0构建的,最近打算全部都升级到最新版的,nodejs升级到了目前最新版v16.13.2,Vue ^3.0.0,VueCLI~4.5.0,然后在升级SASS预处理器时执行安装命令报错了执行vue-loder官网的安装命令npm install -D sass-loader node-sass报错如下:大概意思是依赖包冲突了,VueCLI4版本用的webpack版本依赖和sass-loader用的webpack依赖冲突,需要更新依赖或者降原创 2022-01-18 15:08:42 · 3709 阅读 · 0 评论 -
VueJS如何使用axios.post()或者axios.get()请求下载文件、音频、视频?并且显示下载进度,后端是SpringBoot
前端如何使用axios下载文件呢?最近遇到了前端下载音频及文件的功能,记录下,因为通过传统的window.location.href=xxx链接下载不能携带Token参数,后端无法验证请求放行,所以就用了axios。前端下载需要注意的是axios.interceptors.request的拦截器不要设置响应超时设置,不然由于网速慢,文件还没下载完就中断了。下面是axios的HTTP请求的统一封...原创 2019-12-08 22:52:48 · 3093 阅读 · 2 评论 -
js字符串数组转数字数组,并去掉最后一个元素
js把字符串数组转数字数组let menuIds=["1,2,3","3,6,7,4,2"2,5,3"]//测试数据let newArr = [];//初始化数组if (Array.isArray(menuIds)) { for (let o of menuIds) {//循环数组 let menuId = o.split(",").map(Number...原创 2019-11-19 23:48:04 · 1075 阅读 · 0 评论 -
freemarker特殊字符用noparse标签转义
使用MyBatis-Plus生成自定义的mapper时候遇到特殊字符${}需要转义。如:${ew.customSqlSegment}应该写成<#noparse>${ew.customSqlSegment}</#noparse><#noparse>的作用:FreeMarker 不会在这个指令体中间寻找FTL标签, 插值和其他特殊的字符序...原创 2019-11-17 15:10:12 · 2490 阅读 · 0 评论 -
VueJS Element UI自定义控件:Cascader级联下拉框,解决查看时树形数据回显
下拉框在业务开发中还是很常用的,比如下拉菜单,上级组织机构选择,各种分类等等。在用到Element UI的Cascader 级联选择器下拉框组件时,不能满足我的需求,就在此基础上自定义了控件。存在的问题:1、Element UI官方的级联下拉控件el-cascader选择数据后,被选中的数据是数组形式的,例如:[7,6,1],但在数据库中保存时,一般只保存ID,不保存数组。所以就需要我们...原创 2019-11-16 13:10:33 · 5500 阅读 · 0 评论 -
marquee实现通知公告例子
红色划线部分就是marquee div style="text-align: left;margin-top: 35px;margin-bottom: 5px;"> table style="padding-bottom: 3px;"> tbody> tr> td style="width: 60px;">span> 公 告s原创 2017-06-08 10:52:05 · 1213 阅读 · 0 评论 -
举例说明了十大ES6功能
虽然ES6规范不是最近才发布,但我认为很多开发人员仍然不太熟悉。 主要原因是在规范发布之后,Web浏览器的支持可能很差。 目前,规范发布已经超过2年了,现在很多浏览器对ES6支持良好。 即使您(或您的客户)不使用最新版本的Web浏览器,也可以使用转换器(如Babel),在应用程序的构建过程中将ES6转换为ES5。 这意味着要向前迈出一步,学习ES6。在本文中,我将尽量简单地介绍最有用的功能原创 2017-10-23 16:40:55 · 555 阅读 · 0 评论 -
一劳永逸的搞定 flex 布局
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、verticle-align:原创 2017-10-23 16:30:12 · 567 阅读 · 0 评论 -
npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)解决方法
npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_modules\dashdash\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm原创 2017-10-30 14:57:55 · 124000 阅读 · 34 评论 -
Axure RP 8.1最新激活码
Licensee: University of Science and Technology of China (CLASSROOM)Key: DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0X9XBEUhM4QxY0DRFJxYEmgh4nyh7RtL目前亲测可用原创 2017-11-07 13:47:53 · 6121 阅读 · 1 评论 -
使用js动态绘制报表
使用js动态绘制报表只要惠灵活运用JQuery的.find().each().attr().filter().remove().indexOf().after().append()的方法就好弄HTMLtr> td> table id="servertab" width="100%" border="1" cellpadding="1" cellspacing="0"原创 2017-09-21 14:23:53 · 2472 阅读 · 0 评论 -
npm常用命令总结
npm是什么NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm的原理??每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。因此,只要是 Shell(一般是 Bash)可以运行的命令原创 2017-09-28 10:36:11 · 4481 阅读 · 0 评论 -
Vue项目目录说明
.|-- config // 项目开发环境配置| |-- index.js // 项目打包部署配置|-- src // 源码目录| |-- components // 公共组件| |-原创 2017-09-26 11:27:53 · 527 阅读 · 0 评论 -
搭建Vue开发环境的过程(通过控制台启动)
说明由于不想按照vue文档上说的,起步学习。决定首先学习vue环境的搭建。按文档上说的命令行的操作,相对简单一点,但是这样操作下去对环境搭建的原理是不清楚的。于是就开始研究node等相关知识了。研究node研究webpack在IntelliJ IDEA里面搭建环境安装nodejs,安装完成后再控制台输入node -v显示版本信息,成功。原创 2017-09-26 10:23:05 · 2881 阅读 · 0 评论 -
js代码 设为首页 加入收藏
li>a href="javascript:setHome(this,window.location)"> span class="glyphicon glyphicon-home">span> b>设为首页b>a>li> li>a href="javascript:addFavorite()"> span class="glyphicon glyphicon-heart">s原创 2017-07-24 14:21:28 · 9526 阅读 · 0 评论 -
bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
固定FooterBootstrap框架提供了两种固定导航条的方式: ☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可: 实现原理:实现原理很简单,就是在navbar-原创 2017-07-21 22:37:24 · 8419 阅读 · 0 评论 -
JS判断客户端类型(含微信)
由于DOM对象是从上到下是顺序加载的,使用时请放在body内下方处。script type="text/javascript"> window.onload = browserRedirect(); function browserRedirect() {//判断客户端类型 var sUserAgent = navigator.userAgent.toLow原创 2017-07-15 11:42:38 · 989 阅读 · 0 评论 -
Java将二进制流转Base64字符串并在页面显示(附Base64转二进制流)
Java将二进制流转Base64字符串并在页面显示(附Base64转二进制流) java代码如下: /** * 二进制流转Base64字符串 * * @param data 二进制流 * @return data * @throws IOException 异常 */ public static Stri原创 2016-08-12 17:35:50 · 35618 阅读 · 3 评论 -
360监测显示:cookie没有httponly标志解决方法
在介绍HttpOnly之前,我想跟大家聊聊Cookie及XSS。随着B/S的普及,我们平时上网都是依赖于http协议完成,而Http是无状态的,即同一个会话的连续两个请求互相不了解,他们由最新实例化的环境进行解析,除了应用本身可能已经存储在全局对象中的所有信息外,该环境不保存与会话有关的任何信息,http是不会为了下一次连接而维护这次连接所传输的信息的。所以为了在每次会话之间传递信息,就需原创 2017-06-10 11:01:23 · 19540 阅读 · 0 评论 -
freemarker字符串替换操作
例子;item.userIP!="">text=item.userIP> ${text ?replace((text ?substring(text?index_of(".")+1,text?index_of(".")+2)),"*")}Freemarker操作字符串1、substring(start,end)从一个字符串中截取子串start:截取子串开始的索引,start必原创 2017-06-08 16:49:35 · 26833 阅读 · 0 评论 -
前端编码规范及 SASS、SCSS和CSS的关系
最近在做的新项目用到了nodejs、ECMAScript 6 、Vue.js、SCSS、element-UI的一些东西,这里记录下SASS、SCSS和CSS的关系;SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。 SCSS即是SASS的新语法,是Sassy CSS的简写原创 2017-10-15 13:22:45 · 2054 阅读 · 0 评论 -
vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
使用cli构建项目后,在根目录下有个index.html文件,其中有一行代码为:// index.htmlbody> div id="app">div> body>而src目录下的App.vue中也有id="app"的代码// APP.vue div id="app"> h1 class="title">头部h1> router-view原创 2017-10-15 20:08:37 · 15224 阅读 · 8 评论 -
JS打开新窗口的2种方式
JS打开新窗口的2种方式JS打开新窗口的2种方式,需要的朋友可以参考一下1.超链接Welcome等效于js代码window.location.href="http://blog.csdn.net/qq_35624642"; //在同当前窗口中打开窗口 2.超链接QC班长" target="_blank">Welcome原创 2016-07-30 17:59:13 · 2684 阅读 · 0 评论 -
最新Vue2.0+组件开源项目库集合
是最新的由OpenDigg整理并维护的Vue相关开源项目库集合。原文地址:https://github.com/opendigg/awesome-github-vue内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vu...原创 2018-07-16 09:55:10 · 5065 阅读 · 0 评论 -
nodejs 前端项目编译时内存溢出问题的原因及解决方案
现象描述昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢,估计项目过大了。解决方案一:通过 package.json 中的 "build" 加大内存/* ...原创 2018-07-17 16:52:16 · 41814 阅读 · 5 评论 -
最近帮其他项目组搭建的一个VueJS前端综合框架,把它开源了,有兴趣的可以看看
最近半年都在做VueJS的前端开发,搭了几个框架,今天开源个还算不错的,分享出来下,如果你觉得不错就点个赞!效果图如下:项目地址:https://gitee.com/QCBZ/vwnUI用的是elementUI2.2.0版本的,VueJS 2.5.0,webpack3.9的。vwn-综合后台框架vwn-基于vuejs2.5-elementUI2.2-webpack3....原创 2018-03-22 13:53:05 · 6410 阅读 · 5 评论 -
VueJS2.0 生命周期和钩子函数的一些理解
所谓“生命周期”,是指对象从构造函数开始执行(被创建)到被gc回收销毁的整个存在的时期。“钩子”就是在某个阶段给你一个做某些处理的机会。vuejs2.0的生命周期可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁...原创 2018-02-24 10:57:46 · 677 阅读 · 0 评论 -
nodejs更新package.json中的dependencies依赖到最新版本
如果手动去修改dependencies中各个包的版本号,那就太麻烦了,借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。1、安装:npm install -g npm-check-updates使用:2、检查package.json中dependencies的最新版本:ncu3、更新dependencies到新版本:ncu -u更新全部...原创 2018-03-02 09:55:24 · 8293 阅读 · 1 评论 -
JS根据指定日期获取该日期所在的周一和周日,获取任意一天0点和24点时间戳,计算两个时间点的间隔,获取当天、最近七天、最近一月、最近 一季度起止时间戳,修改时间
【代码】JS根据指定日期获取该日期所在的周一和周日,获取任意一天0点和24点时间戳,计算两个时间点的间隔,获取当天、最近七天、最近一月、最近 一季度起止时间戳,修改时间。原创 2018-03-15 16:01:06 · 4945 阅读 · 2 评论 -
npm 安装vue 报错Failed at the chromedriver@2.37.0 install script 'node install.js'
原因一般是下载源被封了,我们连接淘宝的下载源下载:npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver原创 2018-04-03 14:00:47 · 14892 阅读 · 0 评论