仓库管理系统-14-前端之侧边栏区域Aside的集中式状态管理菜单和动态路由

文章目录

添加菜单表,使用集中式状态管理vuex,自动生成动态路由。

在这里插入图片描述

1 获取对应权限菜单信息

先前通过手动在/router/index.js中配置路由,然后通过模拟菜单数据,使用v-for渲染菜单。

在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户的角色信息,获取对应权限菜单信息menuList,并将后台返回的menuList转换成我们需要的router数据结构,然后通过vue-router新添的router.addRouter(routes)方法,同时我们可以将转后的路由信息保存于vuex,这样我们可以在我们的Aside组件中获取我们的全部路由信息,并且渲染我们的左侧菜单栏,让动态路由实现。

1.1 数据库表(menu)

CREATE TABLE `menu`(

Read more

前端学习日记 - 前端函数防抖详解

前端学习日记 - 前端函数防抖详解

前端函数防抖详解 * 为什么使用防抖 * 函数防抖的应用场景 * 函数防抖原理与手写实现 * 原理 * 手写实现 * 使用 Lodash 的 \_.debounce * 完整示例:防抖搜索组件 * 结语 在现代 Web 应用中,函数防抖(debounce)是一种常见且高效的性能优化手段,用于限制高频事件触发下的函数调用次数,从而减少不必要的计算、网络请求或 DOM 操作。本文将从“为什么使用防抖”切入,介绍典型的应用场景,深入解析防抖原理,并给出从零实现到在实际项目中使用 Lodash 的完整代码示例,帮助你快速掌握前端防抖技术。 为什么使用防抖 函数防抖的核心思想是在连续触发的事件停止后,仅执行最后一次调用,以避免频繁触发带来的性能问题 ([MDN Web Docs][1])。 在不使用防抖的情况下,例如在 input 输入事件或 window.resize 事件中直接调用逻辑,页面可能会因短时间内大量调用而出现卡顿或请求风暴 ([GeeksforGeeks]

By Ne0inhk

pywebview

很高兴为你介绍 PyWebView。这是一个非常轻量级且强大的 Python 库,它允许你使用 Web 技术(HTML、CSS、JavaScript)来构建桌面应用程序的图形用户界面(GUI)。 简单来说,PyWebView 就像是一个**“壳”**,它将你的 Python 后端逻辑与 Web 前端界面无缝连接起来,让你可以用开发网页的方式开发桌面软件。 为了让你更全面地了解和使用它,我为你整理了以下核心信息: 🚀 核心特点 PyWebView 的设计理念是“最小化依赖,最大化兼容”。相比于 Electron(体积大、吃内存)或 PyQt(学习曲线陡峭),PyWebView 具有以下显著优势: * 轻量级与高性能:它不捆绑浏览器内核,而是直接调用系统原生的 WebView 组件。这使得它的安装包体积比 Electron 小约 90%,内存占用也大幅降低。 * 跨平台:

By Ne0inhk
微信小程序webview postmessage通信指南

微信小程序webview postmessage通信指南

需求概述 在微信小程序中使用 web-view 组件与内嵌网页进行双向通信,主要通过 postMessage 实现。以下是完整的配置和使用方法: 通信指南 微信小程序webview官方文档 1. 基础配置 小程序端配置 // app.json 或 page.json { "usingComponents": {}, "permission": { "scope.webView": { "desc": "用于网页和小程序通信" } } } 网页端配置 <!-- 内嵌网页需引入微信JS-SDK --> <script src="https://res.wx.qq.com/open/

By Ne0inhk
Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系

Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系 前言 在 OpenHarmony 鸿蒙应用全场景覆盖、特别是适配鸿蒙桌面模式(Desktop Mode)、折叠屏大屏交互及鸿蒙 Web 版推送的工程实战中,“文件拖拽(Drag and Drop)”已成为提升生产力效率的标配功能。用户希望能够像在 PC 上一样,直接将图片或文档拖入应用窗口即可完成上传。如何实现这种跨越边界的直观交互?flutter_dropzone 作为一个专注于“拖放区域感知与文件流提取”的库,旨在为鸿蒙开发者提供一套标准的拖放治理方案。本文将详述其在鸿蒙端的实战技法。 一、原原理分析 / 概念介绍 1.1 基础原理 flutter_dropzone

By Ne0inhk