前端css
JS添加前端水印（兼容IFrame布局）（防篡改）
将此段代码放置top页面 (function () { const watermarkTxt = '水印文本' const size = 150 //水印间隙 值越大水印数量越少 const canvas = document.createElement('canvas')//创建canvas，用于 ......
2023-9-13 总计（存储过程，数据字段超出，添加功能-前端form表单提交后端没有读取到数据）
（存储过程，数据字段超出，添加功能-前端form表单提交后端没有读取到数据） 存储过程： 1.先写好页面，理清储存过程的调用过程， 2.写sql保存储存过程，执行储存过程 3.写代码在业务中调用储存过程，得到想要的统计结果 数据字段超出，编译异常： 1.数据库中的字段长度太短，导致后端保存数据的时候 ......
微前端-qiankun（乾坤）入门（只针对vue + vue）
微前端现在主要以qiankun为主，网上有很多微前端的教学，但是很多啰嗦甚至没有讲到要点，逻辑顺序也很跳跃，对于想入门的同学来说学习时间过长，结合种种情况，我整理网上qiankun 中 vue的教学，从一个入门新生，怎么一步一步创建一个项目过程开始讲解。 一、首先什么是微前端（了解） 微前端就是将不 ......
PostCSS received undefined instead of CSS string
问题 npm run serve启动项目后，报错Syntax Error: Error: PostCSS received undefined instead of CSS string 解决 node-sass 版本兼容问题导致,按照应用使用的node-sass版本 切换（可使用nvm）到对应的n ......
CSS中的变量
前言 在 CSS 中，有很多需要反复使用的属性值，如果每个使用的地方都直接写死这个值，而没有使用变量去定义这个值的话，后期修改起来会很麻烦。有很多人忽略了在 CSS 中也可以定义变量这个事情，相信你会爱上它 ！ CSS 使用变量有很多好处: 可以减少样式代码的重复性，增加样式代码的扩展性和灵活性 声 ......
动态修改el-input样式，css变量形式外层修改input样式
背景：正常我们在修改样式的时候，直接在样式表里写死，但是如果我们想要动态的修改样式，例如el-input字体颜色时，我们需要修改的实际是.el-input__inner这个样式的color，既然是动态，我们就不能在样式表里写死了，而是使用CSS变量修改。 一、CSS变量是什么？ 1.css变量 注意 ......
前端项目npm install安装报错：code ERESOLVE ERESOLVE could not resolve
背景：使用npm 安装依赖的时候，发现报了如下的错误： npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue-admin-te ......
web前端入门到实战：HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figcaption 定义figure元素的标题 footer 底部 dialog 对话框 使用习惯： hea ......
全栈工程师必须要掌握的前端CSS技能
作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL ，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公... ......
vue前端实现分页逻辑
在前端实现分页逻辑 <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page" :page-size="size" :page-sizes="pageSizes" layo ......
前端常用函数及其方法
前端常用函数及其方法 说明：日常开发中需要关注的东西太多了，难免会有些东西容易遗忘，那么好记性不如烂笔头就体现出来了 生成一个数组 我有一个 数字，是根据计算得来的，但是现在我要把它扩展成一个数组 const count = 6 const arr = Array.from({ length: co ......
CSS之实现视频背景
1.新增<video> <video class="video-background" autoplay muted loop> <source src="../../assets/starry-sky.mp4" type="video/mp4" /> Your browser does not s ......
CSS
CSS (Cascading Style Sheets，层叠样式表） 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css 选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成 CSS声明总是以 ......
【网页开发】传统网页开发及新前端网页开发的优缺点
传统网页开发 开发流程 1、UI设计人员制作高精度图片，以供静态界面开发人员使用 2、静态界面开发人员根据图片使用HTML、CSS进行制作，生成与图片一致的网页 3、开发人员需要将静态界面中的代码改为动态界面与后台进行数据对接 优点： 1、前端耗时少 2、有利于SEO <SEO：搜索引擎优化> 缺点 ......
Long返回前端精度丢失问题
JavaScript 无法处理 Java 的长整型 Long 导致精度丢失，具体表现为主键最后两位永远为 0， 解决思路： Long 转为 String 返回 // 已添加Lombok中@Data注解 // 注解处理，这里可以配置公共 baseEntity 处理 @JsonSerialize(usi ......
为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint） 因历史遗留原因，接手的项目没有代码提醒/格式化，包括 eslint、pretttier，也没有 commit 提交校验，如 husky、commitlint、sty ......
css中文字太多显示方法
第一种方法：“溢出省略号”，即当文字超出一定宽度时，将其省略，并显示“...”。p { overflow: hidden; /* 将超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 禁止换行 */ } 第二种 ......
css基础
CSS引用 如何在html中使用css?有三种方式 外链式 通过在head标签里 使用link引入写好的css文件(推荐使用) 内嵌式 head标签里style标签 ,在style里通过 行内式 写在标签的开始位置通过style属性设置样式(不推荐使用) 选择器 选择器分为三大类: 基本选择器 复合 ......
vue中使用xlsx插件前端读取解析excel文件
问题描述 工作中一般都是后端去解析excel数据，前端使用上传组件去将excel组件丢给后端，后端使用一些插件去解析excel（比如hutool工具类） 不过有些情况下，前端也需要去做一些excel的解析，比如产品经理说，在上传excel文件之前，要做一个excel的图表化预览审核查看啥的，没问题的 ......
css3属性之 text-overflow:ellipsis
语法： text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法： text-overflow: ......
最简单的前端分页---思路就是监听分页变化，然后slice数据源
element版本的 背景 有些页面显示数据量不大，或者后端分页比较复杂；不考虑性能情况下前端分页不失为比较好的选择。 实现 技术点：VUE + Element (el-table , el-pagination) DEMO <template> <div class="app-container" ......
前端生成二进制文件并下载
// 生成十六进制数据 const hexData = '7E02000000010000000aB77E'; // 这里是示例的十六进制数据 // 将十六进制数据转换为字节数组 const data = hexToBytes(hexData); // 创建 Blob 对象 const blob = ......
直播软件搭建，css隐藏滚动条，但使超出部分任然可以滚动
直播软件搭建，css隐藏滚动条，但使超出部分任然可以滚动 /*长tabs，隐藏滚动条，保留滚动功能*/.weChat-tabs{ height: 40px; display: flex; overflow-x: scroll; padding: 0 20px; white-space: nowrap ......
纯前端也可以访问文件系统！
https://www.cnblogs.com/songyao666/p/17691691.html 前言 周末逛github的时候，发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码，比起在github仓库中查看更加方便 然后我就想网页端vscode能不能打开我本 ......
前端科普系列-Web：一路前行一路忘川
前端科普系列-Web：一路前行一路忘川 无名之辈 一个有代码洁癖的前端小开发，热爱生活，追求极致 关注他 118 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端，主要覆盖前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的与前端开发协作 ......
前端科普系列-Node.js:换个角度看世界
前端科普系列-Node.js:换个角度看世界 无名之辈 一个有代码洁癖的前端小开发，热爱生活，追求极致 关注他 55 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端，主要覆盖前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的与前端开发 ......
前端科普系列-ESlint：守住优雅的护城河
前端科普系列-ESlint：守住优雅的护城河 无名之辈 一个有代码洁癖的前端小开发，热爱生活，追求极致 关注他 47 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端，主要覆盖前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的与前端开发 ......
前端科普系列-Babel：把 ES6 送上天的通天塔
前端科普系列-Babel：把 ES6 送上天的通天塔 无名之辈 一个有代码洁癖的前端小开发，热爱生活，追求极致 关注他 108 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端，主要覆盖前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的 ......
前端科普系列-CommonJS：不是前端却革命了前端
前端科普系列-CommonJS：不是前端却革命了前端 无名之辈 一个有代码洁癖的前端小开发，热爱生活，追求极致 关注他 498 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端，主要覆盖前端的基础知识，但不深入讲解，定位为大而全并非细而精，适合非前端开发的同学对前端有一个系统的认识，能更好的 ......