From b50b497f91c6ec71ce087ca4d8dc30692e9eb29a Mon Sep 17 00:00:00 2001 From: cwy <2952243518@qq.com> Date: Wed, 18 Dec 2024 18:20:02 +0800 Subject: [PATCH 1/3] 111 --- src/main.js | 38 +++- src/permission.js | 61 +++-- src/utils/date.js | 49 +++- src/views/home/index.vue | 45 +++- src/views/layout/components/Navbar.vue | 57 ++++- src/views/login/index.vue | 299 ++++++++++++++++--------- 6 files changed, 394 insertions(+), 155 deletions(-) diff --git a/src/main.js b/src/main.js index 810ccaf..3a9cfbe 100644 --- a/src/main.js +++ b/src/main.js @@ -1,30 +1,52 @@ +// 导入Vue框架 import Vue from 'vue' -import 'normalize.css/normalize.css'// A modern alternative to CSS resets +// 导入normalize.css，这是一种现代的CSS重置替代方案 +import 'normalize.css/normalize.css' -import ElementUI from 'element-ui' -import 'element-ui/lib/theme-chalk/index.css' -import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n -import VCharts from 'v-charts' +// 导入Element UI库 +import ElementUI from 'element - ui' +// 导入Element UI的样式文件，这里使用的是主题为chalk的样式 +import 'element - ui/lib/theme - chalk/index.css' +// 导入Element UI的中文语言包，用于国际化（i18n） +import locale from 'element - ui/lib/locale/lang/zh - CN' -import '@/styles/index.scss' // global css +// 导入V - Charts库，用于图表绘制 +import VCharts from 'v - charts' +// 导入项目中自定义的全局样式文件 +import '@/styles/index.scss' + +// 导入应用的根组件App import App from './App' +// 导入路由配置文件 import router from './router' +// 导入Vuex的store配置文件 import store from './store' -import '@/icons' // icon -import '@/permission' // permission control +// 导入项目中的图标相关配置（可能是注册全局图标组件等操作） +import '@/icons' +// 导入权限控制相关的配置（可能是实现路由权限、组件权限等功能） +import '@/permission' +// 使用Element UI，并传入中文语言包配置 Vue.use(ElementUI, { locale }) +// 使用V - Charts库 Vue.use(VCharts) +// 设置在生产环境下不显示Vue的提示信息 Vue.config.productionTip = false +// 创建一个Vue实例 new Vue({ + // 挂载点选择id为app的DOM元素 el: '#app', + // 使用导入的路由配置 router, + // 使用导入的store配置 store, + // 使用App组件作为模板 template: '', + // 注册App组件 components: { App } }) diff --git a/src/permission.js b/src/permission.js index 86c4623..c3caecd 100644 --- a/src/permission.js +++ b/src/permission.js @@ -1,46 +1,79 @@ +// 导入路由配置文件，这里的路由配置可能定义了应用中的各个页面路径和对应的组件等信息 import router from './router' +// 导入Vuex的store配置文件，store通常用于管理应用中的状态数据 import store from './store' -import NProgress from 'nprogress' // Progress 进度条 -import 'nprogress/nprogress.css'// Progress 进度条样式 -import { Message } from 'element-ui' -import { getToken } from '@/utils/auth' // 验权 +// 导入NProgress库，用于在页面跳转时显示进度条 +import NProgress from 'nprogress' +// 导入NProgress的样式文件，这样才能正确显示进度条样式 +import 'nprogress/nprogress.css' +// 从element - ui中导入Message组件，用于显示提示信息 +import { Message } from 'element - ui' +// 从 @/utils/auth文件中导入getToken函数，该函数可能用于获取用户的登录令牌（token），用于验证用户是否已登录 +import { getToken } from '@/utils/auth' -const whiteList = ['/login'] // 不重定向白名单 +// 定义一个数组，其中包含不需要进行重定向的路径（白名单），这里只有'/login'路径在白名单中 +const whiteList = ['/login'] + +// 注册一个全局的路由前置守卫（beforeEach），在每次路由跳转前都会执行这个函数 router.beforeEach((to, from, next) => { + // 启动NProgress进度条，表示路由跳转开始 NProgress.start() + // 判断用户是否有登录令牌（token） if (getToken()) { + // 如果用户已登录且要访问的路径是'/login'（登录页） if (to.path === '/login') { + // 则重定向到应用的首页（'/'） next({ path: '/' }) - NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it + // 手动结束NProgress进度条，因为如果当前页是首页，不会触发afterEach钩子函数 + NProgress.done() } else { + // 如果用户已登录且要访问的不是登录页 + // 检查store中是否已经获取到用户角色信息（如果没有获取到，说明可能是首次登录或者角色信息丢失） if (store.getters.roles.length === 0) { - store.dispatch('GetInfo').then(res => { // 拉取用户信息 - let menus=res.data.menus; - let username=res.data.username; - store.dispatch('GenerateRoutes', { menus,username }).then(() => { // 生成可访问的路由表 - router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表 - next({ ...to, replace: true }) + // 从store中分发（dispatch）一个名为'GetInfo'的action，这个action可能用于从后端获取用户信息 + store.dispatch('GetInfo').then(res => { + // 获取从后端返回的用户信息中的菜单（menus）数据和用户名（username）数据 + let menus = res.data.menus; + let username = res.data.username; + // 根据获取到的菜单数据和用户名，在store中分发（dispatch）一个名为'GenerateRoutes'的action来生成用户可访问的路由表 + store.dispatch('GenerateRoutes', { menus, username }).then(() => { + // 将生成的可访问路由表动态添加到路由实例中 + router.addRoutes(store.getters.addRoutes); + // 使用传入的to对象（要访问的路由）进行跳转，并设置replace为true，表示替换当前历史记录，而不是添加新记录 + next({...to, replace: true }) }) }).catch((err) => { + // 如果在获取用户信息过程中出错 + // 先从store中分发（dispatch）一个名为'FedLogOut'的action，这个action可能用于执行用户登出操作 store.dispatch('FedLogOut').then(() => { + // 显示错误提示信息，提示用户验证失败，需要重新登录 Message.error(err || 'Verification failed, please login again') + // 重定向到应用的首页（'/'） next({ path: '/' }) }) }) } else { + // 如果store中已经有用户角色信息，直接放行，允许用户访问目标路由 next() } } } else { - if (whiteList.indexOf(to.path) !== -1) { + // 如果用户没有登录令牌（token） + // 检查要访问的路径是否在白名单中 + if (whiteList.indexOf(to.path)!== -1) { + // 如果在白名单中，直接放行，允许用户访问目标路由 next() } else { + // 如果不在白名单中，重定向到登录页（'/login'） next('/login') + // 手动结束NProgress进度条 NProgress.done() } } }) +// 注册一个全局的路由后置守卫（afterEach），在每次路由跳转完成后都会执行这个函数 router.afterEach(() => { - NProgress.done() // 结束Progress + // 结束NProgress进度条，表示路由跳转结束 + NProgress.done() }) diff --git a/src/utils/date.js b/src/utils/date.js index 7c1a591..ff3721f 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -1,42 +1,69 @@ // date.js + +// 这个函数用于将一个日期对象按照指定的格式进行格式化 export function formatDate(date, fmt) { + // 如果格式化字符串中包含'y+'（表示年份） if (/(y+)/.test(fmt)) { + // 使用正则表达式匹配到的'y+'替换为对应的年份值 + // 获取当前日期的年份，将其转换为字符串 + // 根据'y+'的长度，从年份字符串的末尾截取相应长度的字符进行替换 fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } + + // 创建一个对象，包含了从日期对象中获取各种时间单位的方法 let o = { - 'M+': date.getMonth() + 1, - 'd+': date.getDate(), - 'h+': date.getHours(), - 'm+': date.getMinutes(), - 's+': date.getSeconds() + 'M+': date.getMonth() + 1, // 获取月份（月份是从0开始的，所以要加1） + 'd+': date.getDate(), // 获取日期 + 'h+': date.getHours(), // 获取小时 + 'm+': date.getMinutes(), // 获取分钟 + 's+': date.getSeconds() // 获取秒 }; + + // 遍历对象o中的每个属性（时间单位） for (let k in o) { + // 使用正则表达式检查格式化字符串中是否包含当前时间单位的格式 if (new RegExp(`(${k})`).test(fmt)) { + // 将当前时间单位的值转换为字符串 let str = o[k] + ''; - fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); + // 如果当前时间单位在格式化字符串中的格式长度为1，则直接替换 + // 如果长度大于1，则调用padLeftZero函数进行补零操作后再替换 + fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)? str : padLeftZero(str)); } } + // 返回格式化后的字符串 return fmt; } -function padLeftZero(str) { - return ('00' + str).substr(str.length); -} - +// 这个函数用于将字符串格式的日期转换为日期对象 +// 如果没有传入分隔符参数，则默认使用'-'作为分隔符 export function str2Date(dateStr, separator) { if (!separator) { separator = "-"; } + // 根据分隔符将日期字符串拆分成数组 let dateArr = dateStr.split(separator); + // 解析年份 let year = parseInt(dateArr[0]); + // 解析月份 let month; - //处理月份为04这样的情况 + // 如果月份字符串以'0'开头（例如'04'），则去掉'0'后再解析为整数 if (dateArr[1].indexOf("0") == 0) { month = parseInt(dateArr[1].substring(1)); } else { month = parseInt(dateArr[1]); } + // 解析日期 let day = parseInt(dateArr[2]); + // 使用解析后的年、月、日创建一个新的日期对象 + // 注意：月份在日期对象中是从0开始计数的，所以要减1 let date = new Date(year, month - 1, day); + // 返回日期对象 return date; } + +// 这个函数用于在字符串左边补零 +// 例如，如果传入'5'，则返回'05' +function padLeftZero(str) { + // 在字符串前面加上'00'，然后根据原字符串的长度从右边截取 + return ('00' + str).substr(str.length); +} diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 9cf6023..79d8cc1 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,10 +1,17 @@ - - - diff --git a/src/views/login/index.vue b/src/views/login/index.vue index acb654d..b9626b4 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,26 +1,36 @@ - From efcacb598550f6a70ff4ab689e047bca74bce798 Mon Sep 17 00:00:00 2001 From: cwy <2952243518@qq.com> Date: Wed, 18 Dec 2024 18:30:39 +0800 Subject: [PATCH 2/3] 111 --- src/components/Breadcrumb/index.vue | 40 ++++++--- src/router/index.js | 104 ++++++++++++++++++------ src/styles/sidebar.scss | 76 ++++++++++++----- src/utils/index.js | 44 +++++++--- src/views/layout/Layout.vue | 67 +++++++++++++-- src/views/layout/mixin/ResizeHandler.js | 21 ++++- 6 files changed, 277 insertions(+), 75 deletions(-) diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 80c1376..04d529b 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -1,8 +1,13 @@