前端业务逻辑各支持模块

api模块

简介：定义每个页面的请求函数，需设置的参数有，url, methods，data，params。其中params用于get请求，附加到 URL 作为查询字符串参数。data用于post/put，并放在请求体中发送。delet用法和get类似，把参数放在url上。

 

具体内容：每个业务页面都有对应的一个脚本，brand.js, category.js, categoryBrand.js, orderInfo.js, product.js, productSpec.js, productUnit.js, sysMenu.js, sysRole.js, sysUser.js；登录/菜单/测试页面对应 login.js, menu.js, test.js

 

前置依赖：工具类模块的request.js脚本

 

工具类模块

简介：提供用于验证、加密、数据存储、数据格式化、窗口外观、平滑滚动、HTTP请求的脚本

 

具体内容：

validate.js：含了一系列的验证函数，用于检查用户名、URL、电子邮件等是否符合特定的格式要求，判断字符串类型和数组类型

encrypt.js：提供AES加密、Base64编码和MD5散列功能

storage.js：操作localStorage的API，用于数据的存储、获取和删除

index.js：包含时间解析、格式化，以及数组和对象处理等工具函数

open-window.js：用于打开新窗口并设置其大小和位置

scroll-to.js：实现平滑滚动到页面指定位置的功能

request.js：配置和管理HTTP请求，包括请求和响应拦截器处理

 

依赖

前置依赖：@/router路由管理模块，@/pinia/modules/app:应用状态管理模块

涉及的npm库：加密的js库crypto-js， 浏览器API requestAnimationFrame，HTTP客户端axios，element-plus组件库

用到的内置API：localStorage API，window.open

 

router模块

简介：配置到各个页面的路由

 

具体内容：

product.js：配置商品管理相关页面路由。

lock.js：配置屏幕锁定页面路由。

redirect.js：配置应用重定向路由。

system.js：配置系统管理相关页面路由。

test.js：配置测试功能相关页面路由。

error.js：配置错误页面路由，如403、404、500等。

order.js：配置订单管理相关页面路由。

home.js：配置主页或仪表板路由。

login.js：配置登录页面路由。

index.js：主路由器配置文件，整合所有模块路由

 

依赖

自定义组件依赖：布局容器Layout、商品管理如category，屏幕锁定页面Lock，重定向页面Redirect，系统管理如sysRole，测试功能List，订单统计orderStatistics，主页Home，登录页Login

Pinia状态管理库：获取用户信息的钩子useAccount

npm库依赖：vue-router

 

pinia模块

简介：管理标签页、用户账号、应用布局、菜单、日志、状态

具体内容

tags.js：管理标签页状态，包括标签的增删改查

account.js：管理用户账户信息，包括用户信息的获取和清除

layoutSettings.js：管理应用布局设置，保存和更新设置到localStorage

menu.js：生成和管理菜单数据，从后端获取并生成菜单项

errorLog.js：记录和管理错误日志

app.js：管理应用级别状态，包括标题、授权令牌、侧边栏状态等

index.js：创建并导出Pinia实例，用于状态管理

 

依赖

自定义组件依赖：@/router（路由组件）

npm库依赖：pinia（状态管理库）

内置API依赖：localStorage、AesEncryption

 

layout模块

简介：应用布局包含Content、Sidebar、Tagsbar、Topbar子模块和hooks，实现动态组件渲染、侧边栏、标签栏、顶栏导航等功能

 

具体内容

components:

Content子模块：根据路由信息动态渲染组件，并利用  keep-alive  对某些组件进行缓存，以提高性能

Sidebar子模块：

index.vue：包含可折叠侧边栏的 Vue 组件，侧边栏包括 Logo 和 Menus 组件。依赖于 Vue.js、Pinia 和组件 Logo.vue、Menus.vue

Item.vue：带有可选图标的菜单项组件。依赖于 Vue.js 和可能的 svg-icon 组件

Logo.vue：显示品牌标志和标题的组件，点击标志可导航到主页。依赖于 Vue.js 和 Vue Router

Menus.vue：可滚动的菜单列表组件，使用 Element UI 的 el-menu 组件。依赖于 Vue.js、Element UI、Vue Router 和 submenu 组件

Submenu.vue：子菜单组件，可递归显示子菜单项。依赖于 Vue.js、Element UI 和 Item.vue 组件

menu.module.scss：定义了SCSS 类，用于设置菜单的样式。依赖于 SCSS 预处理器

 

Tagsbar子模块：

useContextMenu.js：管理标签项的上下文菜单，提供打开、关闭及执行相关操作的功能

useScrollbar.js：处理标签列表的水平滚动

useTags.js：管理标签列表，包括添加、删除、更新和与路由集成的功能

index.vue：Vue 组件，显示带有滚动和上下文菜单的标签栏

 

Topbar子模块：

Breadcrumbs.vue: 显示页面路径的面包屑导航

ChangeLang.vue: 切换语言的弹出菜单

Hamburger.vue: 切换侧边栏折叠的汉堡按钮

index.vue: 页面头部组件，包含Logo、汉堡按钮、面包屑等

LockModal.vue: 显示锁屏对话框

 

hooks

useResizeHandler.js：定义了一个 Vue 组合式 API 函数 useResizeHandler，用于处理窗口大小调整事件。该函数用于判断设备是移动端还是桌面端，并根据判断结果在应用状态管理中设置侧边栏的折叠状态和设备类型

 

index.vue：

表示应用程序的主布局。它包含一个模板，用于整体结构，包括侧边栏、顶栏、菜单、标签栏、面包屑和主要内容区域。该组件使用了 useResizeHandler 钩子函数和来自 Pinia 存储的布局设置，根据当前的布局配置来控制这些元素的显示和行为

 

components模块

简介：组件库包含用户信息展示、错误日志管理、数据表格处理、下拉选择和树形结构展示等功能

 

具体内容

Avatar/useUserinfo.js定义了一个名为useUserinfo的函数，该函数用于获取用户信息，并返回一个包含用户信息的响应式引用。

 

index.vue：Vue组件文件，包含一个用户信息展示的模板，使用了useUserinfo函数来获取并展示用户信息。组件中包含了模板、脚本和样式，用于显示用户头像和名称

ErrorLog：Vue错误日志组件，显示和管理应用中的错误信息

ProTable：一个包含搜索、表格和分页功能的 Vue 组件，用于处理和展示数据

 

SelectTree

index.vue：包含搜索、表格和分页功能的 Vue 组件。

Select.vue：包含下拉选择输入框的 Vue 组件。

Tree.vue：涉及树形结构或层次的 Vue 组件

 

SvgIcon

用于渲染一个项目列表，并具有可自定义的选项

 

参考资料

https://github.com/huzhushan/vue3-element-admin