04 2022 档案
摘要：概念 我们可以通过： 员工管理为用户指定角色 通过角色列表为角色指定权限 通过权限列表查看当前项目所有权限 那么换句话而言，以上三条就制定了一个用户由：用户 → 角色 → 权限 的一个分配关系。 当我们通过角色为某一个用户指定到不同的权限之后，那么该用户就会在 项目中体会到不同权限的功能 那么这样的
阅读全文
摘要：打印逻辑分为两部分： 以表格的形式展示打印的数据 打印详情表格 其中 以表格的形式展详细数据 部分我们需要使用到 el-descriptions 组件，并且想要利用该组件实现详情的表格效果还需要一些小的技巧 而 打印详情表格 的功能就是建立在展示详情页面之上的 当我们在浏览器右键时，其实可以直接看到
阅读全文
摘要：导入 对于 excel 导入 首先我们先来明确一下它的业务流程： 点击 excel 导入 按钮进入 excel 导入页面 页面提供了两种导入形式 点击按钮上传 excel 把 excel 拖入指定区域 选中文件，进行两步操作 解析 excel 数据 上传解析之后的数据 上传成功之后，返回 员工管理（
阅读全文
摘要：轮询 客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接长轮询：客户端向服务器发送请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接（或到了设定的超时时间关闭连接），客户端处理完响应信息后再向服务器发送新的请求 长连接 HTTP1.1通过使用Connect
阅读全文
摘要：keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现 利用脚手架创建项目后会生成home和about两个组
阅读全文
摘要：语法 /正则表达式主体/修饰符 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
阅读全文
摘要：有的页面只有在登录之后才能进入，所以我们需要进入该类页面时需要完成以下几件事情 1.判断当前是否登录 2.如果已经登录，跳转到想要进入的页面 3.如果未登录，则跳转到登录页 4.对于无需登录即可访问的页面（白名单中的页面），我们可以直接进入 5.每次访问非登录页时，都需要判断当前用户信息是否存在，若
阅读全文
摘要：如何使用router import router from '@/router' router.push('/') 如何使用store import { useStore } from 'vuex' const store = useStore() store .dispatch('user/log
阅读全文
摘要：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)
阅读全文
摘要：我们在开发项目和发布项目后，都需要使用到不同的环境，我们需要让vue-cli在打包时知道我们需要用到的环境，因此我们需要在项目根目录创建不同的环境文件，让vue-cli知道npm run serve与npm run build时该如何打包。 使用.env.development配置开发环境 # ju
阅读全文
摘要：我们在vue项目内难免需要对webpack配置进行修改，我们可以通过在vue.config.js中通过配置chainWebpack对webpack配置进行修改，下面演示我们如何新增一个loader const path = require('path') function resolve(dir)
阅读全文
摘要：实现一个通用的svg图标组件 1.可以使用项目内部的svg图标 2.也可以使用外部传入的svg图标 SvgIcon.vue: <template> <!-- 显示外部传入的svg --> <div v-if="isExternal" :style="styleExternalIcon" class=
阅读全文
摘要：Angular团队规范延伸出的Conventional Commits specification（约定式提交） 使用Commitizen规范化提交代码 当你使用commitizen进行代码提交时（git commit）时，commitizen会提交你在提交时填写所有必需的提交字段 全局安装Comm
阅读全文
摘要：使用ESlint配置代码规范，使用Prettier完成符合Eslint的格式化。 创建.prettierrc文件放在根目录下，使vscode知道保存时如何对代码进行格式化，.eslintrc.js，用于配置eslint的验证规则 { // 是否尾随分号 "semi": false, // 使用单引号
阅读全文
摘要：// ESLint 配置文件遵循 commonJS 的导出规则，所导出的对象就是 ESLint 的配置对象 // 文档：https://eslint.bootcss.com/docs/user-guide/configuring module.exports = { // 表示当前目录即为根目录，E
阅读全文
