- 博客(77)
- 收藏
- 关注
RSS订阅
原创 富文本编辑器 从 Prosemirror 再到 Tiptap
笔者在日常的需求迭代中，已经在编辑器集成了AI写作、AI绘画等AIGC相关功能以及一些通用编辑功能。并且对该编辑器的灵活性、可扩展性、文档规范性等方面给予了很高的认可。通过使用Tiptap编辑器的扩展继承、自定义扩展等功能，可以让我们构建出更为更为丰富的富文本编辑器。Tiptap富文本编辑器的功能远不止这些，还有很多编辑器的方法没有介绍。不过笔者希望通过此篇文章可以帮助你更好的认识Prosemirror 和 Tiptap富文本编辑器。
2024-08-01 16:37:51
651
原创 大三实训，我用Nodejs和Vue3以及Typescript做了一个关于医院的后台管理系统 ❥(^_-)
已经大概有一个多月没有写博客了，最近一直在准备考研，所以时间有些紧张，今天特意拿出一下午时间来回忆回忆前端知识。今天就拿我在6月份所实训的后台管理项目来说一说。毕竟离上次写前端代码已经有很长时间了，有点想念啊~~~哈哈哈。还请各位允许我在这里吹个小小的牛逼，毕竟这是我人生中的第一个小小的全栈小项目。废话不多说——始于前端，而不局限于前端，开搞！项目：医院CMS（前后端分离）项目简述：此项目为我的一个实训项目，是关于医院的一个后台管理系统，当时实训老师用到的后端技术是Java、JDBC、jsp、ser
2021-08-13 18:27:34
5299
35
原创 深入React中的state，不要再说setState是同步异步了
React中组件自身的state改变或者父组件props改变都会造成视图层面的更新。React中setState的"同步和异步"本质上就是状态单个/批量执行，和js中的同步异步是完全没有关系的。
2024-08-19 10:43:19
605
原创 浅谈 React组件设计之受控和非受控组件
在开发一个React组件时，可以创建一个灵活的组件，能够在受控和非受控两种模式下工作。这样可以在不同的使用场景中提供更大的灵活性。理解受控和非受控组件的区别有助于你在设计和使用 React 组件时做出更好的选择。希望这些示例和解释对你有所帮助！
2024-08-13 14:25:42
480
原创 微前端场景下如何做样式隔离？
样式隔离实现起来不复杂，各种方案都有其局限性。目前比较稳定的方案还是使用 css Modules 之类的工具配合团队之间协商好样式前缀，从样式命名和优先级上解决问题。主应用的样式依然可以影响到子应用，优先级也可能会被 !important 等操作被破坏，不过大多数场景下足够了
2024-08-06 10:30:13
638
原创 聊一聊 webpack5性能优化有哪些？
webpack性能优化较多，可以对其进行分类大多数情况下，我们会更侧重于优化打包后的结果，这对于线上产品的影响更大。
2024-07-30 09:45:22
1252
原创 ⚡️ 聊一聊Nextjs的渲染策略，以及如何选择合适的渲染策略
SSR：Server-Side Rendering，服务器端渲染；SSG ：Server-Static Generation，服务端静态生成，也叫编译生成ISR ：Incremental Static Regeneration 静态增量生成CSR：Client-Side Rendering，客户端渲染默认情况，Next.js 会预渲染每个页面。这意味着 Next.js 会将网站的所有页面提前生成静态 HTML 文件并保存下来。
2024-07-25 11:32:05
800
原创 聊一聊前端动画的种类，以及动画的触发方式有哪些?
动画在前端开发中扮演着重要的角色。它不仅可以提升用户体验，还可以使界面更加生动和有趣。在这篇文章中，我们将深入探讨前端动画的各种实现方式，包括 CSS 动画、JavaScript 动画、SVG 动画等。我们还将讨论一些触发动画的方式和动画在用户体验中的最佳实践。
2024-07-22 17:48:13
897
原创 聊一聊前后端权限控制 RBAC（完整流程）
前端需要把所需要的路由定义好，分为两部分：一部分是静态路由，可以随意访问；另一部分是权限路由，需要做权限控制。我们的页面结构通常是左侧有一个侧边栏，然后页面在中间的内容区域显示。所以这部分需要定义成嵌套路由。内容区为路由出口，React里边的，Vue中的；然后还可以把一些页面通过懒加载的方式引入。/*** 静态路由 可随意访问*/path: '/',name: '首页',title: '首页',},name: '登陆页',title: '登陆页',},
2024-07-15 10:18:17
838
原创 前端用Canvas绘制一个高可配置的圆形进度条
绘制入口，用来调用绘制函数，绘制前需要清除画布，通过重新绘制来达到动画效果。然后根据条件值来决定是否渲染其它元素。因为深橘色圆环、小圆球、百分比文字是具有动画的，所以需要根据percent数值动态生成弧度值来绘制深橘色进度条（即）和小圆球，根据百分比来绘制百分比文字。// 绘制圆形进度条const {textFont,// 背景的圆环// 有色的圆环// 处理渐变色// 从-90度的地方开始画,把起始点改成数学里的12点方向},_endAngle。
2024-07-09 12:45:23
623
原创 Nginx Http缓存的必要性！启发式缓存有什么弊端？
我们在使用React或者Vue开发项目中会使用hash、chunkhash、contenthash来给静态资源文件进行命名。这带来的好处便是当我们部署完项目后，用户刷新页面后会重新获取html资源，html资源中的js或者css文件由于文件名发生变化会重新发起请求来获取新的资源。当然我们有时候为了项目优化，我们还会对一些页面模块进行分包进行懒加载，有时候还会把一些模块通过webpack魔法注释chunkName拆到一个包中。http缓存种类：我目前总结了三类，分别为强缓存、协商缓存、启发式缓存。
2024-07-02 12:41:24
503
原创 webpack 之 splitChunks分包策略
将满足拆分规则的构建内容抽出来单独打包，从而达到抽离公共模块，减少重复打包的目的。中的配置项用来确定具体的拆分规则，其中的 cacheGroups 配置项必须同时满足其下的所有条件才能生效。// 生成的 chunk 的最小体积，单位为字节（bytes）。内容超过了minSize的值，才会进行打包// 在拆分之前，必须共享的模块的最小 chunk 数。// 在按需加载时，允许的最大并行请求数。// 入口点允许的最大并行请求数。
2024-06-27 16:27:07
1364
原创 AIGC 在前端流式获取内容SSE
在 OpenAI 的 API 中，SSE 通常用于实现实时数据传输。例如，在聊天模型（如 ChatGPT）中，使用 SSE 可以让客户端实时接收到生成的对话内容，而不需要等待整个响应完成。SSE即Server-Sent是HTML5提出一个标准。由客户端发起与服务器之间创建TCP连接，然后并维持这个连接，直到客户端或服务器中的任何一方断开。HTTP响应内容有一种特殊的，该响应头标识了响应内容为事件流，客户端不会关闭连接，而是等待服务端不断得发送响应结果。事件类型（可选）：指定事件的类型。
2024-06-25 17:00:53
568
原创 前端的拖拽和缩放（缩放以鼠标为中心）
后，所有的位移和缩放都是基于左上角进行的，这使得计算变换的位移量更加直观和简单。只需要考虑从左上角开始的平移和缩放，而不需要考虑元素的中心点。例如，如果 scale 增加了10%，那么 scale / prevScale 会是1.1，减去1后得到0.1，表示增加的10%。这意味着需要手动计算缩放过程中元素的位移，以确保缩放是以鼠标为中心的。，在缩放和位移时需要考虑变换原点的位置，这会增加计算的复杂性。在缩放过程中需要计算新的平移值，使得缩放以鼠标为中心。，缩放和位移的计算将变得更加复杂。
2024-06-24 12:05:56
1012
原创 手撕Promise和Async await原理
Promise原理：const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';class MyPromise { status = PENDING; // 状态一经改变就不可变 value = null; reason = null; successCallback = null; failCallback = null; constru
2022-01-16 16:37:08
406
原创 手撕Vue2和Vue3响应式原理
object.defineProperty缺陷：1、通过数组下标添加元素，无法触发setter。2、监听数组的push,pop,shift,unshift,splice,sort,reverse方法或者改变length无法触发setter。—>重写数组方法3、无法检测到对象属性的新增或删除 —>Vue.$set4、不管data中的对象层级有多深，都需要遍历每个属性，为每一个属性添加object.defineProperty。—>性能问题Vue2响应式：// 获取数组的原型
2021-11-14 20:36:10
675
1
转载 关于Vue中main.js通常定义的东西、项目中的全局配置等等
main.js:// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './App';// import router from './router';// import Element
2021-09-10 11:55:02
790
原创 Vue3警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component
在Vue3中组件通信中（子传父）报出如下警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a compon
2021-07-06 22:02:28
15839
5
原创 React生命周期钩子函数（图示）
（旧）（新）1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）3.React16并没有删除这三个钩子函数，但是不能和新增
2021-06-12 22:10:53
352
2
原创 Vue3中axios如何使用路由（useRouter）以及自定义hooks中使用useRouter报错问题（已踩坑）
随着vue3的更新,vue-router也更新到了4.xuseRouter相当于vue2的this.$router全局的路由实例，是router构造方法的实例useRoute相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录但是在一次使用中发现useRoute, useRouter必须写到setup中,详见Vue路由强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法那么想要在
2021-06-05 22:59:31
5459
7
转载 JWT---Token身份令牌验证
什么是Token？ 在计算机身份认证中是令牌（临时）的意思，在词法分析中是标记的意思。一般我们所说的的token大多是指用于身份验证的token 为什么使用token? 我们需要每次都知道当前请求的人是谁，但是又不想每次都让他提交用户名和密码，这时就需要有一个等同于用户名密码也...
2021-06-02 09:31:15
1204
原创 Vue3警告[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.
在Vue3中使用watch监听useRoute()的时候，控制台报出警告：[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.watch（route）是隐式的deep:true，它遍历任意深度的属性。所以从技术上来说，这是预期的行为。另外，当您只
2021-05-24 13:07:02
24067
1
转载 TypeScript泛型及其一些写法
Vue3拥抱Typescript之泛型// 平常写ts可能会这样注解类型，但是这样有些麻烦，能不能简洁点呢//function joi(first: string | number,second: string | number){// return first + second//}// JJ是泛型，在最简单的泛型用法中可以类比形参理解，所以它可以是任意值// 但一般用T表示function joi<JJ>(first: JJ,second: JJ){ return first
2021-05-16 09:07:00
223
原创 通过Vuex实现Input双向绑定
store.js:store = new Vuex.store({ state:{ inputVal: '' }, mutations:{ setInput (state, newVal) { state.inputVal = newVal } } }) 页面中绑定：<template> <div> <input v-model = 'storeVal'> &.
2021-04-16 15:01:35
472
原创 vue中keep-alive，include的缓存问题（玩好keep-alive）
前提：有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面)，B是订单列表页，C是订单详情页，D是费用详情页需求：顺序是A->B->C->D,每次都刷新页面，D->C->B时走缓存，但是每次从A到B都要刷新B页面，从B到C需要刷新C页面，从C到D要刷新D页面在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存。在这里主要用include结合vuex来实现（四个页面组件都有自己的name才会生效，这里name就叫A,B,C,D）从D-
2021-03-25 12:11:08
1012
原创 Vue报错[Vue warn]: Error in render: “TypeError: “checkedCount“ is read-only“
写vue时报出这样一个错误，某个东西是只读的；报错原因：我在用一个变量的时候，我居然是用const声明的，真不细心。声明变量用let，常量用const；复习一下let和const：1.let（1）不存在变量提升（必须先声明后使用），声明的变量只在所处的块级内有效（2）暂时性死区（3）变量不能重复声明（4）不影响作用域链2.const（1）声明常量（一般大写），并且一定要赋初始值（2）同一个作用域内常量值不可以修改（3）块级作用域（4）对于数组和对象的元素修改，不算作对常量的修改..
2021-03-17 17:28:40
4148
原创 Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题
不得不说better-scroll是个很好用的第三方框架，但是使用恰当才能发挥它强大的功能哦！具体使用步骤请移步→better-scroll链接Github但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况具体问题：1.使用的时候为什么滚动不起作用首先在在你引入better-scroll成功之后，你的html结构应该如下：<div ref="wrapper" class="wrapper"> <div class="content"></di
2021-03-10 22:11:59
2777
原创 Vue报错：NavigationDuplicated: Avoided redundant navigation to current location（提示这是到当前位置的冗余导航）
今天在做电影app时，需求是：有一个长列表，当我们滑动后，进入了另外一个页面之后在返回列表页时，会依旧保持我们第一次滑动的位置。看图：解决方法：在router.js（由于配置不同，或许有些人需写在router/index.js）中写入以下代码：import Router from 'vue-router';const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {
2021-03-02 14:45:48
772
1
原创 Vue中作用域插槽的妙用
昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽为什么scope.row可以获得本行的数据，说明这个大神在封装组件的时候，用了一个插槽<slot :row=data></slot>话又说回来，什么是作用域插槽：当我们在封装组件的时候，要使用作用域插槽，必然会往里面传个slot，通过这个插槽往外面传递数据，我们只需要在此插槽上绑定一个动态属性，然后把数据赋值给这个动态属性（我这里是:data=“PLanguage”），之后我们在使用组件是，或使用其他人封装好的组件
2021-02-19 11:20:05
481
原创 Vue购物车（全选和全不选）
效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table {
2021-02-17 10:14:23
738
原创 前端js-----vue中的key
在官方文档中是这样解释的：key的特殊属性主要用在vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不能使用key，Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时，它会基于key的变化重新排列元素顺序，并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到（1）完整的触发组件的生命周期钩子（2）触发过度。
2021-02-02 11:21:13
567
原创 前端js-----轮播图（焦点图）实现原理
轮播，无论是文字轮播还是图片轮播，他们的原理都是一样的，都是通过定时器setInterval执行循环展示和隐藏。原理：一系列的图片平铺，一般是放在li里面，只显示一张图片，其余图片隐藏over-follow:hidden。通过计算偏移量利用定时器实现自动播放，或通过点击事件切换图片。无缝滚动（优化）：当你从最后一张图片切换回第一张图时，有很大空白，这个时候需要把第一张图片所在li克隆一份放到ul的最后面，当图片滚动到克隆的最后的一张图片时，让ul快速的、不做动画的跳到最左侧，让left=0即可。
2021-02-01 19:40:18
2264
1
原创 前端js-----三级联动
效果如下（原生js）：------HTML：<body> 请选择省份 <select name="" id="province"> <option value="请选择省份">请选择省份</option> </select> 请选择市 <select name="" id="cities"> <option value="请选择市">请选择市</option> </
2021-01-17 10:19:09
728
1
原创 前端js-----模糊搜索（indexOf）
效果：原生js实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { overflow: hidden; width: 400px; h
2021-01-16 10:51:53
742
转载 JS中的数组，对象，字符串常用的方法
JS中的数组，对象，字符串常用的方法数组的常用方法：var arr =[1,2,3,4,5];arr[0] arr[arr.length-1]//通过下标找到数组中指定的元素，访问数组的元素arr.join("-") //数组转成字符串arr.toString() //数组转成字符串arr.push(6); //向后添加，返回新数组个数 ,原数组是添加后的数组arr.pop(); //从后删除，返回删除的元素arr.unshift(); //向前添加，返回个数arr.shift(); //
2021-01-14 21:55:48
229
原创 前端js-----抽奖功能（异步）
效果如下：代码如下：HTML：<body> <div id="father"> <div class="option">抱抱</div> <div class="option">亲亲</div> <div class="option">举高高</div> <div class="option">按摩</div> <div id="start"
2021-01-12 09:52:05
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人