首页 > 其他分享 >Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统

Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统

时间：2024-05-22 22:29:33浏览次数：28  
标签：code const Vadmin Electron electron vue import store

Electron-Vue3-Vadmin后台系统|vite2 electron桌面上端管理权限智能管理系统

根据vite2.x electron12桌面上端后台管理智能管理系统Vite2ElectronVAdmin。

继上一次共享vite2融合electron构建后台框架，此次产生的是全新开发设计的跨桌面上中后台管理管理权限智能管理系统。应用全新的前端技术栈，内嵌 i18n 现代化解决方法，动态性管理权限路由器，管理权限认证，融合了典型性的报表/表格等业务流程控制模块作用。

一、技术栈

  • 伺服电机：vscode
  • vue3技术性：vite2.1.5 vue3.0 vuex4 vue-router@4
  • 跨端架构：electron^12.0.4
  • 封装工具：vue-cli-plugin-electron-builder
  • UI组件库：element-plus^1.0.2 (饿了么外卖vue3组件库)
  • 报表拖动：sortablejs^1.13.0
  • 图表组件：echarts^5.1.1
  • 现代化计划方案：vue-i18n^9.1.6
  • 数据信息仿真模拟：mockjs^1.1.0

二、关键特点

  1. 前端技术栈Vite2、Vue3、Electron12、Element Plus、Vue-i18n、Echarts5.x、Sortable、Mockjs。
  2. 管理权限验证适用部件式 命令式二种方法。
  3. 适用汉语/英语/繁体字现代化解决方法。
  4. 适用报表拖动排列、放缩、树型报表等作用。
  5. 适用载入动态性管理权限莱单，多方法轻轻松松权限管理。
  6. 效率高开发设计，全部架构早已构建结束，只需增加相对应控制模块就可以。

三、项目结构图

全部新项目应用全新vue3英语的语法编号，选用规范的分层次文件目录结构形式，数据信息均是应用Mock.js开展仿真模拟。

◆ electron适用游戏多开新页面

新项目适用开启好几个对话框，如主题风格焕肤、有关等对话框。只需根据以下的方法启用就可以。

code

  1. import { winCfg, createWin } from '@/Windows/actions'
  2. // 焕肤对话框
  3. const handleOpenTheme = () => {
  4. createWin({
  5. title: '个性装扮',
  6. route: '/skin',
  7. width: 750,
  8. height: 480,
  9. modal: true,
  10. parent: winCfg.window.id,
  11. resize: false,
  12. })
  13. }

大伙儿假如对electron建立多窗口模式有兴趣得话，能够 看一看下边本文。

https://www.cnblogs.com/xiaoyan2017/p/14403820.html

◆ electron完成无框Mac导航条实际效果

如上图所述：顶端导航条默认设置是Mac设计风格，也适用自定文章标题、情况/文本色调、是不是沉浸式体验透明背景等作用。

设定 -webkit-app-region: drag 完成导航栏可拖动，文章标题及按键 -webkit-app-region:no-drag 可回应点击事件。

code

  1. <!-- //顶端导航栏 -->
  2. <template>
  3. <WinBar zIndex="1000">
  4. <template #wbtn>
  5. <MsgMenu />
  6. <Lang />
  7. <a class="wbtn" title="焕肤" @click="handleSkinWin"><i class="iconfont icon-huanfu"></i></a>
  8. <Setting />
  9. <a class="wbtn" title="更新" @click="handleRefresh"><i class="iconfont el-icon-refresh"></i></a>
  10. <a class="wbtn" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? '撤销顶置' : '顶置'" @click="handleAlwaysTop"><i class="iconfont icon-ding"></i></a>
  11. <Avatar @logout="handleLogout" />
  12. </template>
  13. </WinBar>
  14. </template>

针对自定义导航条的完成方法，因为以前经历有关共享文章内容，这儿也不详解了。

https://www.cnblogs.com/xiaoyan2017/p/14449570.html

◆ Vite2|electron新项目合理布局模版

为了更好地促使新项目分层次构造更为清楚，合理布局分成 Auth 和 Main 两大控制模块。

code

  1. <!-- //Auth主控制模块模版 -->
  2. <template>
  3. <div class="vadmin__wrapper">
  4. <router-view class="vadmin__layouts-auth"></router-view>
  5. </div>
  6. </template>
  7. <script>
  8. import { useRoute } from "vue-router"
  9. import useTitle from '@/hooks/useTitle'
  10. export default {
  11. components: {},
  12. setup() {
  13. const route = useRoute()
  14. // 设定文章标题
  15. useTitle(route)
  16. }
  17. }
  18. </script>

code

  1. <!-- //Main主控制模块模版 -->
  2. <template>
  3. <div class="vadmin__wrapper" :style="{'--themeSkin': store.state.skin}">
  4. <div v-if="!route.meta.isNewin" class="vadmin__layouts-main flexbox flex-col">
  5. <!-- //顶端导航栏 -->
  6. <div class="layout__topbar">
  7. <TopNav />
  8. </div>
  9. <div class="layout__workpanel flex1 flexbox">
  10. <!-- //侧栏 -->
  11. <div v-show="rootRouteEnable" class="panel__leftlayer">
  12. <SideMenu :routes="mainRoutes" :rootRoute="rootRoute" />
  13. </div>
  14. <!-- //正中间栏 -->
  15. <div class="panel__middlelayer" :class="{'collapsed': collapsed}">
  16. <RouteMenu
  17. :routes="getAllRoutes"
  18. :rootRoute="rootRoute"
  19. :defaultActive="defaultActive"
  20. :rootRouteEnable="rootRouteEnable"
  21. />
  22. </div>
  23. <!-- //右侧栏 -->
  24. <div class="panel__rightlayer flex1 flexbox flex-col">
  25. <!-- 导航 -->
  26. <BreadCrumb />
  27. <!-- 主內容区 -->
  28. <v3-scroll autohide>
  29. <div class="lay__container">
  30. <!-- //路由器权限管理 -->
  31. <permission :roles="route.meta.roles">
  32. <template #tooltips>
  33. <Forbidden />
  34. </template>
  35. <router-view></router-view>
  36. </permission>
  37. </div>
  38. </v3-scroll>
  39. </div>
  40. </div>
  41. </div>
  42. <router-view v-else class="vadmin__layouts-main flexbox flex-col"></router-view>
  43. </div>
  44. </template>

◆ Vue-Router路由器配备

code

  1. /**
  2. * 路由器配备 Router util
  3. * @author XiaoYan
  4. */
  5. import { createRouter, createWebHashHistory } from "vue-router"
  6. import { ElLoading } from "element-plus"
  7. import { loginWin } from "@/windows/actions"
  8. import store from '@/store'
  9. // 导进公共性模版/路由器配备
  10. import mainLayout from "@/layouts/main"
  11. import authLayout from "@/layouts/auth"
  12. import mainRoutes from "@/layouts/main/routes.js"
  13. import authRoutes from "@/layouts/auth/routes.js"
  14. const RoutesLs = [
  15. // 主页面控制模块
  16. {
  17. path: '/',
  18. redirect: '/home/index',
  19. component: mainLayout,
  20. children: mainRoutes,
  21. },
  22. // 认证控制模块
  23. {
  24. path: '/auth',
  25. redirect: '/auth/login',
  26. component: authLayout,
  27. children: authRoutes,
  28. },
  29. // 不正确控制模块
  30. {
  31. path: '/:pathMatch(.*)*',
  32. component: () => import('@/views/error/404.vue'),
  33. meta: {
  34. title: 'app__global-page-notfound',
  35. }
  36. }
  37. ]
  38. const router = createRouter({
  39. history: createWebHashHistory(),
  40. routes: RoutesLs,
  41. })
  42. // 全局钩子阻拦认证情况
  43. let loadingIns
  44. router.beforeEach((to, from, next) => {
  45. // 打开载入提醒
  46. loadingIns = ElLoading.service({
  47. lock: true,
  48. text: 'Loading...',
  49. spinner: 'el-icon-loading',
  50. background: 'rgba(19, 209, 122, .1)'
  51. })
  52. // 分辨当今路由器是不是必须认证情况
  53. const isLogined = store.state.isLogin
  54. if(to.meta.auth) {
  55. if(isLogined) {
  56. next()
  57. }else {
  58. loginWin()
  59. loadingIns.close()
  60. }
  61. }else {
  62. next()
  63. }
  64. })
  65. router.afterEach(() => {
  66. // 关掉载入提醒
  67. loadingIns.close()
  68. })

◆ Vue-I18n现代化解决方法

新项目中单由选用了 vue-i18n 现代化，适用汉语|繁体字|英语三种语言表达。

现阶段vue-i18n软件适用vue3新项目了，大伙儿需安裝最新版就可以。

code

  1. npm i vue-i18n@next -D

如上图所述：新创建locale文件目录用于解决相对应控制模块语言表达配备。

code

  1. import { createI18n } from "vue-i18n"
  2. import Storage from "@/utils/storage"
  3. // 初始值
  4. export const langKey = 'lang'
  5. export const langVal = 'zh-CN'
  6. /* elementPlus现代化配备 */
  7. import enUS from "element-plus/lib/locale/lang/en"
  8. import zhCN from "element-plus/lib/locale/lang/zh-cn"
  9. import zhTW from "element-plus/lib/locale/lang/zh-tw"
  10. export const elPlusLang = {
  11. 'en-US': enUS,
  12. 'zh-CN': zhCN,
  13. 'zh-TW': zhTW,
  14. }
  15. /* 复位多语言表达 */
  16. export const $messages = importAllLang()
  17. export const $lang = getLang()
  18. const i18n = createI18n({
  19. legacy: false,
  20. locale: $lang,
  21. messages: $messages
  22. })

◆ 动态性数据图表Hooks

新项目中数据图表是应用全新的Echarts部件。为了更好地防止每一次都应用echarts.init启用数据图表插口。因此就封裝了启用数据图表hook涵数。

一开始是应用监视window.resize来源于融入数据图表规格，这儿有一个bug，仅有对话框尺寸更改才会开启，而DOM更改则不容易开启了，因此改成 element-resize-detector 来监视，极致解决困难。

code

  1. /**
  2. * 动态性数据图表Hook
  3. * @author XiaoYan
  4. */
  5. import { onMounted, onBeforeUnmount, ref } from "vue"
  6. import * as echarts from "echarts"
  7. import elementResizeDetectorMaker from "element-resize-detector"
  8. import utils from "@/utils"
  9. export default function useChart(refs, options) {
  10. let chartInst
  11. let chartRef = ref(null)
  12. let erd = elementResizeDetectorMaker()
  13. const handleResize = utils.debounce(() => {
  14. chartInst.resize()
  15. }, 100)
  16. onMounted(() => {
  17. if(refs.value) {
  18. chartInst = echarts.init(refs.value)
  19. chartInst.setOption(options)
  20. chartRef.value = chartInst
  21. }
  22. // window.addEventListener('resize', handleResize)
  23. erd.listenTo(refs.value, handleResize)
  24. })
  25. onBeforeUnmount(() => {
  26. chartInst.dispose()
  27. // window.removeEventListener('resize', handleResize)
  28. erd.removeListener(refs.value, handleResize)
  29. })
  30. return chartRef
  31. }

◆ 路由器管理权限

新项目中的管理权限规格部件式和命令式二种方式。

code

  1. <!-- //管理权限认证模版 -->
  2. <template>
  3. <slot v-if="isPermission"/>
  4. <slot v-else name="tooltips">
  5. <el-alert title="抱歉，您沒有管理权限实际操作此网页页面！" type="error" show-icon></el-alert>
  6. </slot>
  7. </template>
  8. <script>
  9. import { computed } from "vue";
  10. import { useStore } from "vuex";
  11. import { getPermissionRoute } from "@/utils/routes";
  12. export default {
  13. props: { roles: { type: [String, Array] } },
  14. components: {},
  15. setup(props) {
  16. const store = useStore();
  17. // 分辨是不是有管理权限
  18. const isPermission = computed(() =>
  19. getPermissionRoute(JSON.stringify(store.state.roles), props.roles)
  20. );
  21. return { isPermission };
  22. }
  23. };
  24. </script>

code

  1. import store from "@/store"
  2. import { getPermissionRoute } from "@/utils/routes"
  3. const Permission = (el, binding) => {
  4. const { value } = binding
  5. if(value) {
  6. const userRoles = JSON.stringify(store.state.roles)
  7. if(!getPermissionRoute(userRoles, value)) {
  8. el.parentNode && el.parentNode.removeChild(el)
  9. }
  10. }else {
  11. console.error(`Set Roles！ Like v-permission="['admin', 'dev']" or v-permission="'test'"`)
  12. }
  13. }
  14. export default Permission

部件启用

code

  1. <Permission roles="test">
  2. <template #tooltips>
  3. <h2 style="color:red;">此控制模块仅有test人物角色才可以实际操作！</h2>
  4. </template>
  5. <el-button type="primary" icon="el-icon-search">查看</el-button>
  6. </Permission>
  7. <el-divider />
  8. <Permission roles="dev">
  9. <template #tooltips>
  10. <h2 style="color:red;">你没有权利实际操作Dev控制模块！</h2>
  11. </template>
  12. <el-button type="primary" icon="el-icon-edit">编写</el-button>
  13. <el-button type="warning" icon="el-icon-delete">删掉</el-button>
  14. </Permission>

命令启用

code

  1. <el-button v-permission="'test'" type="primary" icon="el-icon-search">查看</el-button>
  2. <el-button v-permission="'dev'" type="success" icon="el-icon-plus">增加</el-button>
  3. <el-button v-permission="['test', 'dev']" type="warning" icon="el-icon-edit">编写</el-button>
  4. <el-button v-permission="['admin']" type="danger" icon="el-icon-delete">删掉</el-button>

◆ electron-builder装包配备

code

  1. {
  2. "productName": "electron-vadmin",
  3. "appId": "cc.xiaoyan.electron-vadmin",
  4. "copyright": "Copyright © 2021-present XiaoYan",
  5. "compression": "maximum",
  6. "asar": false,
  7. "extraResources": [{
  8. "from": "./resource","to": "resource"
  9. }],
  10. "nsis": {
  11. "oneClick": false,
  12. "allowToChangeInstallationDirectory": true,
  13. "perMachine": true,
  14. "deleteAppDataOnUninstall": true,
  15. "createDesktopShortcut": true,
  16. "createStartMenuShortcut": true,
  17. "shortcutName": "ElectronVAdmin"
  18. },
  19. "win": {
  20. "icon": "./resource/shortcut.ico",
  21. "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
  22. "target": [{
  23. "target": "nsis","arch": ["ia32"]
  24. }]
  25. },
  26. "mac": {
  27. "icon": "./resource/shortcut.icns","artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  28. },
  29. "linux": {
  30. "icon": "./resource","artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  31. }
  32. }

最终还特别注意

1、新项目途径取名不可以包括汉语，不然装包会出错！
2、尽可能不必应用 getCurrentInstance 涵数来应用router或store，装包也会出错！
3、装包后运作发生黑屏状况，可配备 history: createWebHashHistory()
4、提醒fs.existsSync不正确，设定nodeIntegration: true打开Node适用；

好啦，根据vite2 electron开发设计后台管理智能管理系统就发送到这儿，期待对大伙儿有一些协助~

最终另附一个electron vue3 vant小视频新项目

https://www.cnblogs.com/xiaoyan2017/p/14585223.html

 

标签：code,const,Vadmin,Electron,electron,vue,import,store
From： https://www.cnblogs.com/webenh/p/18207276

相关文章

  • 曲径农场electron
    这篇写的一塌糊涂，草草掠过即可。忆及二十年前在校园懵懵度日，继而八八六加八，亲睹某同辈VC6娴熟开发erp软件，不以其异，是时小年轻工资小半数只可晚一碗汤粉加两啤，有的是赚几铜板的兴奋和未知的憧憬，想着两三年功夫，吾亦可为之，及而职场垂暮，c++基本没怎么学，写望其项背而不能之语也是欺己......
  • Electron桌面应用
    Electron介绍Electron集成了chromium（支持最新特性的浏览器）与Node.js（javascript运行时，可实现文件读写）NativeAPI是（提供统一原生界面操作的能力）工作流程：启动APP启动主进程，创建窗口，加载指定界面，开启渲染进程，渲染进程需要进行通信（如新增歌曲打开文件夹选择MP3文件）需通过主进程调用......
  • electron 菜单选项 - 隐藏，设置菜单
    隐藏菜单const{app,Menu,session}=require('electron');/*隐藏electron的菜单栏*/Menu.setApplicationMenu(null);设置菜单const{app,Menu,session}=require('electron'); //创建menufunctioncreateMenu(){letmenuStructure=[......
  • electron的两个进程
    electron 有两个类别的进程，一个是主进程，另一个是渲染进程 主进程：启动后一直存在的，相当于一个树的主干并不会展示出来，是看不到的所有跟系统资源交互的操作都在这里进行操控渲染进程，新建或销毁一个渲染进程调用 app.js 文件，app.js 里面的内容就是 主进程 的内容，里面会有......
  • Razavi - RF Microelectronics的笔记 - Differential Output Current
    Onpage400,example6.26,weareaskedtoanalyzeadouble-balancedcircuitonits\(IP_2\).Idon'tgetwheredoes(6.127)comefrom.Sincethere'snoexplanationon(6.127),Iguessthisequationisobvious.SoIreducetheproblemandtry......
  • Razavi - RF Microelectronics的笔记 - Current-Driven Passive Mixer
    Onpage367,whilediscussingaboutcurrent-drivenpassivemixer,thereisthissaying:theswitchesinFig.6.39(b)alsomixthebasebandwaveformswiththeLO,deliveringtheupconvertedvoltagestonodeA.Iamquiteconfusedonwheredoesthiswave......
  • 基于electron-store的最佳实践封装工具类
    基于之前讨论的electron-store最佳实践，以下是一个更加完善和健壮的封装示例，包含了类型处理、默认值设定、以及一些实用方法，以适应更复杂的场景：//storeUtil.jsconstStore=require('electron-store');constapp=require('electron').app;classStoreUtil{constructor......
  • IPC-7711/21D, IPC-7711D, IPC-7721D 电子组件的返工、修改和维修，验收标准。Rework,
    IPC-7711/21-RevisionD-StandardOnly:Rework,ModificationandRepairofElectronicAssembliesTheIPC-7711/21guideprovidesproceduresforrework,repairandmodificationofprintedboardassemblies,includingtoolsandmaterials,commonprocedures,......
  • Electron打包的时候路径出现问题!include: could not find: "C:\Users\xxxx\AppDat
    !include:couldnotopenfile:"C:\ztg\projects\electron-vite-vue-ts\node_modules\.pnpm\[email protected][email protected][email protected]_dmg-bui_lrspnoputfiosacwyigcypdbdi\node_modules\app-builder-lib\t......
  • electron-store会将数据保存为什么格式
    electron-store是一个用于Electron应用程序的轻量级、持久化数据存储库。它将数据以JSON格式保存到本地文件系统上。具体来说：数据结构：electron-store接受任何可序列化的JavaScript数据结构作为存储内容。这包括基本类型（如字符串、数字、布尔值）、数组、对象（包括嵌套对象......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99