随笔分类 - demo
后台管理系统权限控制
摘要：菜单栏控制 实现思路 一般是后端返回菜单栏数组，前端根据数组动态创建菜单栏，这里以fe-backend-archive项目为例。使用elementui的 el-menu ，以及组件的递归调用，动态渲染菜单栏。 <el-menu :default-active="defaultActive" back
请求头 x-token Authorization
摘要：前言 几乎所有在用户浏览器中可见的东西都是通过HTTP传输的，所以这些网络请求在互联网通信中发挥着重要作用。HTTP请求的一个关键组成部分是标头。HTTP请求头被用来提供关于请求的额外信息。例如，关于请求的信息、发件人以及发件人希望如何与收件人建立联系的细节。 X-Token X-Token是一种自
js脚本加载失败重试
摘要：背景 当我们在运行某一个项目时，它的某些JavaScript脚本可能加载不出来，报错。 像现在单页界面应用基本上都是通过js来构建，一旦加载不出，这个项目就不能运行了，那怎么办？我们如何解决这个问题？ 解决方案 这里采用的方案是，重新加载JavaScript脚本。那么什么时候去重新加载js，如何重新
在vite环境中动态导入静态资源
摘要：背景 现在有一个场景，有很多的选项卡，点击不同选项卡实现图片的切换。 当我们动态的切换图片url时，会发现图片找不到，报404. 原因 在vite项目中，运行的时候，其实是打包后的代码，所以，图片需要的是打包后的图片路径。 vite在一些情况下会自动转喊路径 css中的静态路径 img中的src（静
H5接入飞书
摘要：开发流程 文档 https://open.feishu.cn/document/client-docs/h5/introduction 创建并配置企业自建应用。 （可选）鉴权调用 JSAPI。 （可选）配置应用的免登流程。 发布并使用应用。 开放接口（H5 JSAPI） 开放平台提供了网页应用可以调
单点登录
摘要：### 概念 单点登录 （Single Sign On），简称为 SSO，是指在同一账号平台下的多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。 举个例子，系统A 和 系统B 都属于某公司下的两个不同的应用系统，当用户登录 系统A 后，再打开 系统B ，系统便会自动帮用户登录 系
移动端适配方案
摘要：### 前置知识 #### px 像素单位 px 全称为 pixel（像素），它是相对于 屏幕显示器分辨率（桌面设定的分辨率，不是显示器的物理分辨率） 而言的，在 相同/不同 的设备上 1px 表示多个 设备像素。 当 一个像素点越大 时, 呈现的图像就会 越模糊；当一个像素点越小时, 像素点就会
自定义代码片段
摘要：### 前言 使用自定义代码片段可以快速生成代码片段，提升开发效率。 ### 使用 - 在vscode中ctrl+shift+p，新建全局代码片段。 ![image](https://img2023.cnblogs.com/blog/2615695/202306/2615695-2023062721
vue中使用vis.js制作流程图
摘要：效果 安装vis.js npm i vis.js --save 中文文档：https://ame.cool/pages/a7d858/#network-%E5%85%B3%E7%B3%BB%E5%9B%BE 示例：https://visjs.github.io/vis-network/example
axios中取消请求及阻止重复请求的方法
摘要：前言 在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况： PC端 - 用户双击搜索按钮，可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，
EL-DRAWER 父容器设置
摘要：element-ui的官网中，关于el-drawer的例子都是在body中打开，我的项目需求中，需要在某个DIV中打开。参考了网上的例子，实现了此功能，记录一下 父容器的div中，设置： style="position: relative;overflow: hidden;" el-drawer 一
前端实现搜索然后关键字变色
摘要：效果 核心实现思路 先通过input的input事件，获取到输入框里输入的关键字，根据关键字过滤一遍数据。 根据过滤后的数据，调用封装好的替换方法。就是字符串的替换，替换成html片段，在dom元素上使用v-html。 替换方法实现 // 匹配到的关键字变色 keyWordchangeColor(k
封装vue2自定义指令-滚动到底部加载更多
摘要：前置知识 1.clientHeight： （1）含义：只读属性，表示元素的内部高度（元素可见高度），单位为像素。 （2）从盒子模型角度看：包含padding，但不包含border, margin 以及水平滚动条。 （3）注意：内联元素clientHeight为0。 （4）语法：element.cli
