大家好，我是Java小卷。前段时间一直在更新spring boot的后端项目开发的小册------spring boot小卷生鲜电商项目实战。目前已完成了电商前后台接口的商品分类功能开发和商品API的定义。在继续更新前，我们有必要让一个独立部署的前端应用与已开发的后端服务进行对接，进一步验证后台功能。为此，小卷这段时间先针对电商的后台接口开发了一个juan-admin，而对于用户端的前端页面还将进一步学习构建静态多html的前端打包技术并进行实践，再做分享。
整个juan-admin项目目前还在基础功能的完善阶段，后续稳定了将开源出来。已经完成了基本的页面框架布局、菜单路由生成、面包屑路径导航、页标签、暗黑主题切换、主题换肤等功能。
采用的技术
该后台管理平台采用目前最新的vue3，UI使用的最新的element plus，目前还在不断迭代更新中，因为以前的项目用的基于vue2的element ui，所以这次vue3依然选择element系列。打包工具依然采用的webpack，其打包性能还是可以的，主要是我们对element plus的各种组件除了字体图标之外，都是采用按需引入的方式，这样比起全局引入所有组件，构建和打包效率自然大大提升了。
具体用到哪些模块可以参考项目的package.json
json
{
"name": "juan-admin",
...
"dependencies": {
"axios": "^1.6.0",
"core-js": "^3.6.5",
"css-color-function": "^1.3.3",
"driver.js": "^1.3.1",
"element-plus": "^2.4.2",
"fuse.js": "^6.4.6",
"rgb-hex": "^4.1.0",
"screenfull": "^5.1.0",
"vue": "^3.2.8",
"vue-i18n": "^9.1.7",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"unplugin-auto-import": "^0.16.7",
"unplugin-icons": "^0.17.1",
"unplugin-vue-components": "^0.25.2"
}
}juan-admin的网站布局参考了有名的vue-element-admin，在此基础上进行了一些基础功能的扩展和优化。
功能说明
注意：以下功能演示的动态图片在制作时丢失了帧数，所以动画不是那么流畅，并且背景会失真。
登录页
目前实现了基本的管理员账号登录，密码可以显现和隐藏。文字可以中英文切换。
页框架布局
登录成功后进入后台管理页面，页框架布局如下：
左侧菜单
左上角为固定布局的logo和系统名称，左侧为可展开折叠的功能菜单，后续将实现按登录用户角色加载菜单数据。目前数据为硬编码，左侧菜单功能演示如下：
菜单折叠功能：
面包屑路径导航
当路由页面发生切换时，会改变路径导航展示，并且上级路径页可以点击跳转。
头像
特色功能
功能引导
当我们新开发一个功能模块时，可以在用户进入到相关页面时自动弹出功能引导组件，以提示用户发布的新功能。
菜单功能搜索
当左侧的菜单很多时，我们可以通过搜索关键字来查询菜单，并点击跳转。
全屏
修改主题色
我们会通过color picker颜色选择器来设置一个primary主题色，并以改主题色为基准进行加深或变浅，以应用到组件中去。
因此我们对primary色值在选择时会进行相应的校正，校正后的颜色显示在后面：
暗黑模式
element plus从2.2.0版本开始支持暗黑模式的切换，组件的皮肤可以自动适应暗黑模式，因此我们的juan-admin也提供了暗黑模式的切换功能：
国际化支持
以上我们对页框架各个部分实现了文字的国际化，而对于路由页面我们同样可以用封装好的国际化组件来实现。
页标签优化
juan-admin的页标签实现了右键菜单的关闭功能，同时对标签溢出的情况进行了人性化的处理，一起来看下效果。
当页标签溢出时，超出的内容会在一行上隐藏，鼠标以一定的速度穿过时，并不会触发所有标签的展现。
而当逗留的时候，才显示出来，并且选中后，可以保证始终显示在可视区域，即会随着窗口的变化或者左侧菜单折叠展开的操作而自动适应：
最后，再演示下右键菜单的功能：
篇末总结
以上就是juan-admin1.0所实现的基本功能。小卷会在这个基础上不断完善和开发用户角色、菜单权限以及角色授权等安全方面的基础功能。并作为spring boot小卷生鲜电商项目实战项目的后台管理来维护商品、分类、用户等模块的数据，还会在这个平台上进一步开发出一套属于自己的swagger UI的前端页面。大家加油！