首页 > 数据库 >使用vue3、egg和SQLite开发通用管理后台系统

使用vue3、egg和SQLite开发通用管理后台系统

时间:2023-07-13 18:33:51浏览次数:56  
标签:SQLite 管理 前端 vue3 后台 egg

使用vue3、egg和SQLite开发通用管理后台系统

plaform是一个基于RBAC模型开发的后台管理系统,没有多余的功能。本项目是一个以学习为目的的后台项目,旨在让前端也能充分了解RBAC模型是如何设计的,不建议用于线上,因为未经过充分的测试。

项目地址:https://github.com/essay-org/platform

技术栈

  • 前端 Vue3 + Element-Plus
  • 服务端 Egg + SQLite

启动

git clone https://github.com/essay-org/platform.git

# 启动前端服务
cd fe
yarn install
npm run dev # 访问 http://127.0.0.1:8088

# 启动后端服务 
cd serve
yarn install
npm run dev # 访问 http://127.0.0.1:7077

登录

默认用户名:admin
默认密码:123456

说明:系统已经内置SQLite初始数据,在server/database/data.db

预览图

用户管理

1.png

菜单管理

2.png

部门管理

3.png

角色管理

4.png

结语

在学习过程中遇到任何问题,欢迎在issue中留言一起探讨。

标签:SQLite,管理,前端,vue3,后台,egg
From: https://www.cnblogs.com/yesyes/p/17551772.html

相关文章

  • Vue3
    一、创建Vue3.0工程1.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_test##......
  • nginx部署 vue3 同时 配置接口代理(详细)
    Vue项目配置.env文件在项目根目录下创建文件夹(.env.production)##.env.production生产环境配置VUE_APP_SYS_URL=sysapi##nginx需要用的的代理表示VUE_APP_MODE=product##模式baseUrl使用VUE_APP_SYS_URL变量代替Nginx下载部署和配置api代理Nginx下载......
  • vue3核心概念-Mutation-辅助函数
    你可以在组件中使用 this.$store.commit('xxx') 提交mutation,或者使用 mapMutations 辅助函数将组件中的methods映射为 store.commit 调用(需要在根节点注入 store)辅助函数只能在选项式API中使用<template><h3>Nums</h3><p>{{getCount}}</p><inputtype="......
  • vue3 图片懒加载
    使用vue第三方库useIntersectionObserver创建文件directives/index.js导入第三方库import{useIntersectionObserver}from'@vueuse/core'exportconstlazyPlugin={install(app){app.directive('img-lazy',{mounted(el,binding){......
  • Vue3 实现点击菜单实现切换主界面组件
    子组件菜单组件 MenuComponent列表组件 ExtTelListComponent状态组件 ExtTelStatusComponent父组件界面主体MainIndex 实现功能:在 MainIndex中引入三个子组件 通过点击 菜单组件切换加载 列表组件和状态组件 实现效果一、菜单组件 MenuComponent<......
  • Vue3+.net6.0 六 条件渲染
    v-if,v-else-if,v-else控制元素是否渲染,不满足条件的时候不会有相应元素。<divv-if="type==='A'">A</div><divv-else-if="type==='B'">B</div><divv-else-if="type==='C'">C&l......
  • vue3自定义指令 拖拽 与拖拽变大小
    directives:{drag:{mounted:(el,binding)=>{constdragDom=el;conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);el.parentElement.style.cursor='move';......
  • Vue3+.net6.0 五 类和样式绑定
    Vue3关于样式的处理跟Vue2是一样的,常用的有以下几种。1.绑定属性html部分:<div:class="{active:isActive}"></div>js部分:data(){return{isActive:true}}当isActive值为true时,div应用这个active样式,反之亦然。 2.对象方式绑定<div:class="cla......
  • 19:vue3 依赖注入
    1、通过Prop逐级透传问题(传统老的方法只能逐级传递) 传统方式代码如下:App.vue1<template>2<h3>祖宗</h3>3<Parent:msg="msg"></Parent>4</template>56<script>7importParentfrom"./components/Parent.vue"......
  • 18:vue3 异步加载
    在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue提供了 defineAsyncComponent 方法来实现此功能: 1<template>2<h3>异步加载</h3>3<KeepAlive>4<component:is="tabComponent"></component>5</KeepAlive>......