文档在线预览（二）word、pdf文件转html以实现文档在线预览
@目录一、将文件转换成html字符串1、将word文件转成html字符串2、将pdf文件转成html字符串二、将文件转换成html，并生成html文件FileUtils类将html字符串生成html文件示例：1、将word文件转换成html文件2、将pdf文件转换成html文件
实现文档在线预...[2023/5/30]
Webpack 学习笔记
Webpack 学习笔记
这篇学习笔记将用于记录本人在学习 Webpack 打包工具过程中所编写的心得体会与代码示例。为此，我会在https: github.com/owlman tudy_note项目的Programming/Client-Server/Frameworks目录下创建一个名为的...[2023/5/30]
前端开发如何更好的避免样式冲突？级联层(CSS@layer)
作者：vivo 互联网前端团队 - Zhang Jiqi
本文主要讲述了CSS中的级联层（CSS@layer），讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突，提高代码可读性和可维护性。
一、什么是级联层(Cascade Layers)？
1.1 级联层...[2023/5/30]
现代 CSS 解决方案：CSS 原生支持的三角函数
在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 ：
calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。
min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。
clam...[2023/5/29]
发布 markdown 小功能：指定图片尺寸 团队
之前园子的 markdown 功能多年落后，这两年我们正在努力赶上。
今天发布一个 markdown 小功能，可以通过 markdown 语法指定图片尺寸。
指定宽度 =200x
.animate({scrollTop: 0}, 300);
使用这个可以到...[2023/5/17]
ChatGPT 打字机效果原理
一、背景
在初次使用 ChatGPT 时，我就被打字机的视觉效果吸引。总是感觉似曾相识，因为经常在一些科幻电影中看到，高级文明回传的信息在通讯设备的屏幕上以打字机效果逐步出现，在紧张的氛围下，输出人类可读的内容，拉动着观众的神经，一步步将故事情节拉向高潮。
在很早之前我就了解过 Server...[2023/5/15]
JS树形结构根据id获取父级节点元素的示例代码JS树形结构根据id获取父级节点元素的示例代码
目录封装函数调用函数 封装函数
传入 id、树形结构数据
export function getParentTree(id, tree) {
let arr = [] 要返回的数组
for (let i = 0; i < tree.length; i++) {
...[2023/5/15]
vue3页面跳转的两种方式
目录1、标签内 router-link跳转2、编程式路由导航 vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航
1、
<router-link to=''/testDemo''>
<button>点击跳转1</button>
&...[2023/5/15]
利用css var函数让你的组件样式输出规范样式API，可定制性更高；
我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况；
比如下列代码，我们需要把ant的分页样式进行高度自定义，就得使用deep去修改；
这种实现方式确实能够达到我们的目的，但在开发时确总觉得不太合...[2023/5/10]
Vue 前端开发团队风格指南（史上最全）
Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，本文根据项目实际情况整理了一份适用于团队开发的vue风格指南，供大家参考。
一、命名规范
常用的命名规范：
camelCase（小驼峰式命名法 —— 首字母小写）
PascalCase（大驼峰式命名法 —— 首字...[2023/5/10]
HTML中meta标签的那些属性HTML中meta标签的那些属性
<meta> 标签是 HTML 中用于描述网页元信息的元素。它位于 <head> 部分，不会显示在页面内容中，但对于浏览器、搜索引擎等具有重要作用。主要作用有：定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等，这些信息有助于搜索引擎理解和索引网页内容。
...[2023/5/10]
一篇文章搞定什么是nodeJs它和NPM关系与应用
现在前端的入门门槛越来越高了，不再是单纯 html+c +js，各种前端框架 层出不穷，各种ui组件库层出不穷。
模块化，打包化，各种工具库层出不穷，前端变成大前端 ，甚至前端可以搞定整个项目，通过node作为服务端api，
这里我们主角就是nodeJs
什么是nodejs
java...[2023/5/10]
基于.Net5+Vue+iView前后端分离通用权限开源系统
在Github上，.Net通用的权限框架非常多，功能也都比较强大，但是对于很多初学者来说，想要从零学习框架的搭建，就比较困难了。
所以，今天给大家推荐一套比较简单的前后端分离通用权限系统。
项目简介
这是一个基于.Net5+Vue+iView开发的、前后端分离通用权限系统，系统采用三层架构，...[2023/5/10]
ReactHub：我用 ChatGPT 搞了一个 React 的资源导航网站，谁有我用心啊！
大家好，我是DOM哥。
图谱年年有，今年我来盘！
之前已经盘完了 Vue 的技术图谱，今天来盘 React 的。
我用 ChatGPT 开发了一个 React 的资源导航网站。
不管你是资深 React 用户，还是刚入门想学习 React 的小白，这个网站都能帮助到你。
网站地址：ht...[2023/5/10]
Node + Express 后台开发 —— 上传、下载和发布
上传、下载和发布
前面我们已经完成了数据库的增删改查，在弄一个上传图片、下载 csv，一个最简单的后台开发就已完成，最后部署即可。
上传图片
需求
需求：做一个个人简介的表单提交，有昵称、简介和头像。后端能接收数据并保存到数据库。
接收不到数据
用 amis-editor（amis 低代码编...[2023/5/10]
可视化—gojs 超多超实用经验分享(一)可视化—gojs 超多超实用经验分享(一)
目录1. 设置分组模板，默认样式，统一最小宽度，展开收起状态监听2. 分组名称显示成员个数: 分组名称+成员个数: name(children)3. 分组成员为空时，不显示 placeholder 占位留白4. 分组第一次展开请求获取成员接口，监听展开收起状态 subGraphExpandedC...[2023/5/8]
Node.js躬行记（28）——Cypress自动化测试实践
最近在研究如何提升项目质量，提炼了许多个用于自测的测试用例，但是每次修改后，都手工测试，成本太高，于是就想到了自动化测试。
在一年前已将 Cypre 集成到管理后台的项目中，不过没有投入到实践中。今天在实践时发现，版本已经到了 12.X，当时集成的版本是 8.X。
一、准备
...[2023/5/8]
理解 React 中的 useEffect、useMemo 与 useCallback
useEffect
先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。
useEffect 是 React 中的一个很重要的 Hook，用于执行副作用操作。什么...[2023/5/8]
一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill
开始
一文搞懂 Promise 新 Api allSettled 的用法和 all 区别，以及如何在不支持新特性的环境下实现一个 Polyfill
allSettled 的用法
const runAllSettled = async () => {
const succe Prom...[2023/4/28]
HTML中script 标签中的那些属性
在HTML中， <script> 标签用于嵌入或引用JavaScript代码。
在 <script> 标签中，有两个属性可以用来控制脚本的加载和执行方式： async 和 defer 。
当然这也是常见的一道面试题， async 和 ...[2023/4/28]
Mac M1（arm 系列芯片）如何安装 Chromium | Puppeteer
最近写个脚本用到 puppeteer，然后安装 Chromium 出现一点问题，这里记录一下解决方案。
Puppeteer 自动安装失败
在 Puppeteer 安装时会自动安装 Chromium，然而却总是报错 502 导致下载失败，直接下载可以下载，命令行 wget 也可以，猜测是因为 P...[2023/4/28]
Vue3实现组件级基类的几种方法
Vue3的组件有三种代码组织方式
纯Option API （不含setup）
option API + setup
纯 setup （即composition API）
对于这三种形式，设置基类的方法也略有不同。
使用 mixins、extends
vue3提供了 mixins和exte...[2023/4/28]
Vue的生命周期的详解
Vue的生命周期
??Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。 ?? Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有?个完整的?命周期，也就是从开始创建、初始化数据、编译...[2023/4/28]
vue3如何实现?6位支付密码输入框
目录一、代码总览二、问题解析 今天要和大家分享的是关于如何实现6位支付密码输入框组件。
因为在web端不像移动端那样，它没有成熟的、已封装好的6位支付密码输入框UI组件，所以需要我们自己来进行处理，从布局、样式、功能等方面进行实现，在此做一下记录。
具体的需求： 在客户信息表格的操作栏中，点...[2023/4/28]
Vue项目的网络请求代理到封装步骤详解Vue项目的网络请求代理到封装步骤详解
目录1.创建vue项目2.安装axios3.进行config.js配置4.main.js里引入5.src目录下新建Utils文件夹,在内封装request.js6.以login路由为示例 src文件下新建api文件，在api内新建login.js7.在页面内引入方法，并使用 1.创建vue项目
...[2023/4/28]
真的只是简单了解下浏览器缓存
01、什么是HTTP缓存，如何工作的？
当我们打开一个页面时，会向服务端发起很多次请求，如下图打开百毒首页，发起了HTML、各种图片、JS、CSS等资源共72次请求。这里面很多资源并不会频繁变化，每次打开页面都重新请求下载，就很浪费了。
浏览器缓存也称为HTTP缓存，HTTP缓存简单理...[2023/4/26]
vue中watch监听对象中某个属性的方法
目录immediate 和 handlerdeep 深度监听以currentParams为例，监听selOrgId属性 immediate 和 handler
watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数...[2023/4/26]
如何使用vue实现前端导入excel数据
目录前言一、主界面先引入导入组件二、封装excel-import组件1.首先是template代码（这里用的是ant vue desgin框架的组件）2.引入接口3.js代码methods三.附加提示（后端也要写的小伙伴可以参考下边建议哈）四.总结 前言
继前边的vue的导出功能后，自己又去在网...[2023/4/26]
.Net 自定义转换器JsonConverter的使用详解
目录场景描述通过JsonSerializerOptions参数,绑定JsonConverter来实现在实体类的属性上 增加JsonConverter注解来实现 参考官方文档
场景描述
例如api返回了以下json串 (infcode的值有可能时string 也可能时number
有时候返...[2023/4/26]
vue3项目中使用tinymce的方法
目录1、安装相关依赖2、下载中文包3. 引入皮肤和汉化包4. 封装组件:在src/components下新建TEditor.vue，并写入以下代码5. 注册及使用组件 tinymce是一个功能齐全的富文本编辑器插件，但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利，tinymce...[2023/4/26]
vue3 销毁组件方法及问题解决方案
问题描述：使用elementplus的dialog,当关闭弹窗后不刷新页面，直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件，或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了，只是dialog关闭了解决方法：...[2023/4/26]
vue.js父子组件传参的原理与实现方法[原创]vue.js父子组件传参的原理与实现方法[原创]
在Vue中，父子组件之间的数据传递常常会使用props进行实现。具体原理是，当一个父组件嵌套了一个子组件时，在子组件内部使用props接收从父组件传递过来的数据，这些数据可以是基础类型如字符串、数字等，也可以是对象或者数组等复杂类型。
下面展示一个例子，通过一个简单的计数器组件Counter....[2023/4/26]
jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】[原创]
c 部分：
.dialog {
display: none; /* 初始隐藏 */
position: absolute;
width: 300px;
height: 200px;
top: 50px;
left: 50px;
background-c...[2023/4/26]
Node.js躬行记（27）——接口管理Node.js躬行记（27）——接口管理
在页面发生线上问题时，你要做的事情就是去查接口，响应数据是否正确，查接口的方法有两种：
第一种是在浏览器中打开地址，但是你必须得知道详细的 URL，并且有些页面还需要附带参数。
第二种是打开编辑器，启动本地项目，然后查看访问的接口，或者直接搜索代码，找到接口。
无论哪种方式...[2023/4/24]
JS的拖拽属性draggable详解
目录摘要1.了解draggable属性的使用2.拖动元素A的事件3.拖入元素B的事件 摘要
作为h5新增的属性draggable，它能够给与一切的html元素拖动的效果。而在这个属性之下，也有着关于拖动效果的各个方法。而这一篇文章，主要就是说一下关于draggable属性的使用以及工作场景。
...[2023/4/24]
经验首页