From ab77120d6bf441a400fcb5026cd6ea347a412153 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 21 Jul 2024 19:40:26 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2024.07.10-ABP.md" | 2 +- ...5-\350\217\234\345\215\225\346\240\217.md" | 53 +++++ ...71\345\207\273\344\272\213\344\273\266.md" | 195 ++++++++++++++++++ ...36\347\216\260\344\272\222\347\202\271.md" | 71 +++++++ 4 files changed, 320 insertions(+), 1 deletion(-) create mode 100644 "\351\273\204\345\215\216\351\233\250/2024.07.15-\350\217\234\345\215\225\346\240\217.md" create mode 100644 "\351\273\204\345\215\216\351\233\250/2024.07.16-\347\202\271\345\207\273\344\272\213\344\273\266.md" create mode 100644 "\351\273\204\345\215\216\351\233\250/2024.07.17-\345\256\236\347\216\260\344\272\222\347\202\271.md" diff --git "a/\351\273\204\345\215\216\351\233\250/2024.07.10-ABP.md" "b/\351\273\204\345\215\216\351\233\250/2024.07.10-ABP.md" index 4cd5345..b9cb3a2 100644 --- "a/\351\273\204\345\215\216\351\233\250/2024.07.10-ABP.md" +++ "b/\351\273\204\345\215\216\351\233\250/2024.07.10-ABP.md" @@ -7,7 +7,7 @@ ABP（ASP .NET Boilerplate Project）是基于DDD的经典分层架构思想 聚合 聚合根 领域模型 -值对象 +值对 通用仓储接口（底层：贴近数据库） 领域模型仓储接口 领域服务接口 diff --git "a/\351\273\204\345\215\216\351\233\250/2024.07.15-\350\217\234\345\215\225\346\240\217.md" "b/\351\273\204\345\215\216\351\233\250/2024.07.15-\350\217\234\345\215\225\346\240\217.md" new file mode 100644 index 0000000..4fc79c5 --- /dev/null +++ "b/\351\273\204\345\215\216\351\233\250/2024.07.15-\350\217\234\345\215\225\346\240\217.md" @@ -0,0 +1,53 @@ +``` + + + +``` \ No newline at end of file diff --git "a/\351\273\204\345\215\216\351\233\250/2024.07.16-\347\202\271\345\207\273\344\272\213\344\273\266.md" "b/\351\273\204\345\215\216\351\233\250/2024.07.16-\347\202\271\345\207\273\344\272\213\344\273\266.md" new file mode 100644 index 0000000..cfdee48 --- /dev/null +++ "b/\351\273\204\345\215\216\351\233\250/2024.07.16-\347\202\271\345\207\273\344\272\213\344\273\266.md" @@ -0,0 +1,195 @@ +``` +import { routes } from '../route/staticRoutes'; +import { defineStore } from 'pinia'; +import { computed, reactive, ref, watch } from 'vue'; +import { useRouter, useRoute } from 'vue-router'; + +// 为了将路由实例引入进来，特意采用了setup语法，有没有注意到defineStore函数，没错，第2个参数是个函数，这就是setup语法 +export const useRouterStore = defineStore('router',()=> +{ + // 引入路由实例 + const router = useRouter(); + const route = useRoute(); + + // 以下为定义的state + const menuArr = reactive([]);// 菜单数据 + const tabArr = reactive // 标签栏数据 + ([ + { + key: '/desktop', + title: '工作台', + content: '' + }, + { + key: '/dashboard', + title: '仪表盘', + content: '' + } + ]); + + // 当前的key，用于绑定到菜单栏和标签栏的“当前项”属性 + let activeKey = ref('/desktop');//标签栏的当前标签 + const selectKeys = reactive([]); + const openKeys = reactive([]); + + // 扁平化的菜单数据，这个是计算属性，也是getters + const flatMenuArr = computed(()=> + { + let arr = flatArr(menuArr); + return arr; + }); + + // 监听路由变化，设置当前标签项和当前菜单项（菜单项有些无法展开，暂不清楚是什么问题，待解决） + watch(route, (newVal, oldVal)=> + { + // console.log(newVal); + // console.log(oldVal); + changeActiveKey(newVal.path) + }); + + // 由路由数据生成菜单数据 + function generatRoutes() + { + // 清空原来的所有菜单数据，准备重新生成 + this.menuArr.splice(0); + routes.forEach(item => + { + let menu = createMenuItemFromRoute(item); + if (menu) + { + this.menuArr.push(menu); + } + }); + }; + // 添加对象到标签数组中（如果不存在则添加） + function addTab(key) + { + var isExist = this.tabArr.filter(item => item.key === key); + if (isExist.length > 0) + { + + } + else + { + let tmp = getOjbectByKey(key, this.flatMenuArr); + let obj = + { + title: tmp.title, + content: ``, + key: key, + } + this.tabArr.push(obj); + } + }; + + // 菜单栏和标签栏点击后，改变路由的统一逻辑 + function changeActiveRoute(key) + { + router.push(key); + this.addTab(key); + // console.log(selectKeys); + // this.changeActiveKey(key); + // console.log(selectKeys); + }; + + // 改变当前项 + function changeActiveKey(key) //切换当前Key + { + // console.log('这里输出准备要修改的key值：', key); + // console.log('key值：', key); + // console.log('activeKey值：', activeKey.value); + + activeKey.value = key; + + selectKeys.splice(0); + selectKeys.push(key); + // console.log('222', selectKeys); + + let tmpArr = menuArr.map(item => item.children).flat().filter(item => item.key === key).map(item => item.key); + // console.log(tmpArr); + // console.log(menuArr); + + openKeys.splice(0).push(...tmpArr); + openKeys.push('/system'); + }; + + // 这里必须返回 + return { + menuArr, + tabArr, + openKeys, + activeKey, + selectKeys, + flatMenuArr, + generatRoutes, + addTab, + changeActiveKey, + changeActiveRoute + }; +}); + + // 一个函数，将一个路由对象，转换为左侧菜单栏对象 + const createMenuItemFromRoute = (route) => + { + if(route.meta.hide && route.meta.hide === true) + { + return; + } + // 先拿到路由中的基本信息 + let obj = + { + key: route.path, + title: route.meta.title, + label: route.meta.title, + } + // 尝试处理其下级路由，将其转化为菜单数组返回，挂载到孩子属性 + let arr = []; + if (route.children && route.children.length > 0) + { + route.children.forEach(item => + { + let tmpObj = createMenuItemFromRoute(item); + arr.push(tmpObj); + }); + + if (arr.length > 0) + { + obj.children = arr; + } + } + return obj; + }; + + // 从数组中筛选key值对应的对象 + const getOjbectByKey = function (key, arr) + { + let tmp = arr.filter(item => item.key === key); + if (tmp.length > 0) + { + return tmp[0]; + } + return undefined; + }; + + // 将数组扁平化，突然想到，这个好像可以用计算属性，嗯，就这么办，所以这个闲置了，本功能代码待清理 + const flatArr = (arr) => + { + let resArr = []; + arr.forEach(item => + { + let obj = + { + key: item.key, + title: item.title, + content: '' + } + resArr.push(obj); + if (item.children && item.children.length > 0) + { + let tmpArr = flatArr(item.children); + resArr = resArr.concat(tmpArr); + } + }); + return resArr; + } +``` \ No newline at end of file diff --git "a/\351\273\204\345\215\216\351\233\250/2024.07.17-\345\256\236\347\216\260\344\272\222\347\202\271.md" "b/\351\273\204\345\215\216\351\233\250/2024.07.17-\345\256\236\347\216\260\344\272\222\347\202\271.md" new file mode 100644 index 0000000..7d5c707 --- /dev/null +++ "b/\351\273\204\345\215\216\351\233\250/2024.07.17-\345\256\236\347\216\260\344\272\222\347\202\271.md" @@ -0,0 +1,71 @@ +``` +import {createRouter, createWebHistory} from 'vue-router' + +import {routes} from './staticRoutes'; + +export const router=createRouter +({ + history:createWebHistory(), + routes +}); +``` + +staticRoutes.js： + +``` +import Layout from '../components/Layout.vue'; +export const routes= +[ + { + path:'/', + component:Layout, + meta:{title:'首页'}, + children: + [ + { + path:'/desktop', + component:()=>import('../views/desktop.vue'), + meta:{title:'工作台'} + }, + { + path:'/dashboard', + component:()=>import('../views/dashboard.vue'), + meta:{title:'仪表盘'} + } + ] + }, + { + path:'/system', + component:Layout, + meta:{title:'系统管理'}, + children: + [ + { + path:'/system/user', + component:()=>import('../views/user.vue'), + meta:{title:'用户管理'} + }, + { + path:'/system/role', + component:()=>import('../views/role.vue'), + meta:{title:'角色管理'} + }, + { + path:'/system/permission', + component:()=>import('../views/permission.vue'), + meta:{title:'权限管理'} + } + ] + }, + { + path:'/login', + component:()=>import("../views/login.vue"), + meta:{title:'登录',hide:true} + }, + { + path:'/:pathMatch(.*)*', + component:()=>import("../views/notfound404.vue"), + meta:{title:'NotFound',hide:true} + } +]; +``` \ No newline at end of file -- Gitee