随笔分类 - 通用
摘要：安装： npm install json-server -d 在项目根目录下新建__json_server_mock__文件夹，在内新建db.json： { "users": [] } 在package.json中配置启动命令 "json-server": "json-server __json_s
阅读全文
摘要：相对定位实现 position: relative;/*设置相对定位*/ width:100px; height:200px; top: 50%; left: 50%; margin-top: -100px;/*值为高度的一半*/ margin-right:-50px;/*值为宽度的一半*/ 绝对定
阅读全文
摘要：分析 鼠标在某一行中按下 移动鼠标位置 产生对应的替换样式 鼠标抬起，表格行顺序发生变化 依据以上的业务，那么实现该功能的核心就在于：监听鼠标事件，完成对应的 UI 视图处理 具体来说： 监听鼠标的按下事件 监听鼠标的移动事件 生成对应的 UI 样式 监听鼠标的抬起事件 整个 拖动排序 的核心实现，
阅读全文
摘要：概念 我们可以通过： 员工管理为用户指定角色 通过角色列表为角色指定权限 通过权限列表查看当前项目所有权限 那么换句话而言，以上三条就制定了一个用户由：用户 → 角色 → 权限 的一个分配关系。 当我们通过角色为某一个用户指定到不同的权限之后，那么该用户就会在 项目中体会到不同权限的功能 那么这样的
阅读全文
摘要：打印逻辑分为两部分： 以表格的形式展示打印的数据 打印详情表格 其中 以表格的形式展详细数据 部分我们需要使用到 el-descriptions 组件，并且想要利用该组件实现详情的表格效果还需要一些小的技巧 而 打印详情表格 的功能就是建立在展示详情页面之上的 当我们在浏览器右键时，其实可以直接看到
阅读全文
摘要：导入 对于 excel 导入 首先我们先来明确一下它的业务流程： 点击 excel 导入 按钮进入 excel 导入页面 页面提供了两种导入形式 点击按钮上传 excel 把 excel 拖入指定区域 选中文件，进行两步操作 解析 excel 数据 上传解析之后的数据 上传成功之后，返回 员工管理（
阅读全文
摘要：轮询 客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接长轮询：客户端向服务器发送请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接（或到了设定的超时时间关闭连接），客户端处理完响应信息后再向服务器发送新的请求 长连接 HTTP1.1通过使用Connect
阅读全文
摘要：语法 /正则表达式主体/修饰符 search() var str = "Visit Runoob!"; var n = str.search(/Runoob/i); // n=6 replace() var str = 'Visit Microsoft!' var txt = str.replace
阅读全文
摘要：原理 对于 screenfull 而言，浏览器本身已经提供了对用的 API，点击这里即可查看，这个 API 中，主要提供了两个方法： Document.exitFullscreen()：该方法用于请求从全屏模式切换到窗口模式 Element.requestFullscreen()：该方法用于请求浏览
阅读全文
摘要：实现动态换肤的前提： 色值不能写死，需要通过一个动态的值，来进行指定。 <el-menu :default-active="activeMenu" :collapse="!$store.getters.sidebarOpened" :background-color="$store.getters.
阅读全文
摘要：在 vue 的项目中，我们不需要手写这么复杂的一些基础代码，可以直接使用 vue-i18n 进行实现（注意：vue3 下需要使用 V 9.x 的 i18n） vue-i18n 的使用可以分为四个部分： 创建 messages 数据源 创建 locale 语言变量 初始化 i18n 实例 注册 i18
阅读全文
摘要：如果我们需要创建后台管理系统的动态菜单（根据权限显示对应的选项），需要获取路由表的数据信息 想要获取路由表数据，那么有两种方式： router.options.routes：初始路由列表（无法获取到新增的路由） router.getRoutes()：获取所有 路由记录 的完整列表 因为方式1的特性有
阅读全文
摘要：当需要进行 用户权限处理，我们需要先对路由表进行一个划分： 私有路由表 privateRoutes ：权限路由，根据meta判断是否有权限进入 公有路由表 publicRoutes：无权限路由 /*eslint-disable*/ import { createRouter, createWebHa
阅读全文
摘要：动态menu菜单 根据路由表的配置，自动生成对应的menu菜单 当路由表发生变化时，menu菜单自动发生变化 实现方案 定义路由表对应menu菜单规则 根据规则制定路由表 根据规则，依据路由表，生成menu菜单 路由表对应menu菜单规则 对于单个路由规则而言（循环）： 如果meta && meta
阅读全文
摘要：退出登录触发时机一般有两种： 1.主动退出：用户点击退出登录按钮后退出 2.被动退出：token过期，或被人“顶号”退出 无论是什么退出方式，在用户退出时，所需要执行的操作都是固定的： 1.清理掉当前用户的缓存数据 2.清理掉相关权限的配置 3.返回到登录页面 用户主动退出登录功能实现 logout
阅读全文
摘要：axios用来对发送请求前进行处理与响应后进行处理，对应到请求拦截器与响应拦截器两部分，如下： import axios from 'axios' import { ElMessage } from 'element-plus' const service = axios.create({ base
阅读全文
摘要：通用缓存读写 注意： 1.写入的时候应该把引用数据类型转换为JSON字符串 2.获取的时候也应该把JSON字符串解析 /** * 存储数据 */ export const setItem = (key, value) => { // 将数组、对象类型的数据转化为 JSON 字符串进行存储 if (t
阅读全文
摘要：在项目内安装 npm install --save md5 使用： // 先引入md5 import md5 from 'md5' // 进行加密 password: md5(password)
阅读全文
摘要：实现一个通用的svg图标组件 1.可以使用项目内部的svg图标 2.也可以使用外部传入的svg图标 SvgIcon.vue: <template> <!-- 显示外部传入的svg --> <div v-if="isExternal" :style="styleExternalIcon" class=
阅读全文
