{"id":13938008,"url":"https://github.com/wjkang/vue-quasar-admin","last_synced_at":"2025-04-04T20:10:09.640Z","repository":{"id":35191734,"uuid":"133745808","full_name":"wjkang/vue-quasar-admin","owner":"wjkang","description":"Vue 2.0 admin-dashboard based on Quasar-Framework","archived":false,"fork":false,"pushed_at":"2023-01-04T04:31:52.000Z","size":3995,"stargazers_count":576,"open_issues_count":23,"forks_count":162,"subscribers_count":33,"default_branch":"dev","last_synced_at":"2025-03-28T19:07:11.665Z","etag":null,"topics":["access-control","admin","admin-dashboard","admin-template","axios","quasar-admin","quasar-framework","rbac","vue-admin","vue-router","vue2","vuex","webpack2"],"latest_commit_sha":null,"homepage":"http://jaycewu.coding.me/vue-quasar-admin","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wjkang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-17T02:07:45.000Z","updated_at":"2025-01-12T02:00:15.000Z","dependencies_parsed_at":"2023-01-15T15:51:46.463Z","dependency_job_id":null,"html_url":"https://github.com/wjkang/vue-quasar-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wjkang%2Fvue-quasar-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wjkang%2Fvue-quasar-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wjkang%2Fvue-quasar-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wjkang%2Fvue-quasar-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wjkang","download_url":"https://codeload.github.com/wjkang/vue-quasar-admin/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["access-control","admin","admin-dashboard","admin-template","axios","quasar-admin","quasar-framework","rbac","vue-admin","vue-router","vue2","vuex","webpack2"],"created_at":"2024-08-07T23:04:10.070Z","updated_at":"2025-04-04T20:10:09.622Z","avatar_url":"https://github.com/wjkang.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://quasar-framework.org\"\u003e\n        \u003cimg width=\"200\" src=\"https://quasar-framework.org/images/logo/xxhdpi.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n代码太丑，不建议照搬，可以看一看 RBAC 的实现思路，这是通用的。\n\n## vue-quasar-admin\n\u0026emsp;\u0026emsp;[Quasar-Framework](https://quasar-framework.org/) 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站：响应式网站，渐进式应用，手机应用(通过Cordova)，跨平台应用(通过Electron)。\n\u0026emsp;\u0026emsp;Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App 在使用Quasar的时候, 你甚至不需要Hammerjs, Momentjs, 或者Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到。\n\u0026emsp;\u0026emsp;[vue-quasar-admin](http://jaycewu.coding.me/vue-quasar-admin)是基于Quasar-Framework搭建的一套包含通用权限控制的后台管理系统(目前只针对PC端)。\n\n[![](https://ci.appveyor.com/api/projects/status/github/wjkang/vue-quasar-admin?branch=master\u0026svg=true)]()\n[![vue](https://img.shields.io/badge/vue-2.5.16-brightgreen.svg)](https://github.com/vuejs/vue)\n[![quasar framework](https://img.shields.io/badge/quasar-0.15.14-brightgreen.svg)](https://quasar-framework.org/)\n[![MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)]()\n\n[online demo ](http://jaycewu.coding.me/vue-quasar-admin)\n\n登录账号:\n\n    admin 123\n\n    test 123456\n\n    website_admin 123456\n\n请不要随意修改账号名称，其他操作随意，可通过右上角\"数据初始化\"按钮初始化数据\n\n## 系统流程图\n\n![](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/flowchart.png)\n\n## 功能与特点\n\n- 真实后端数据支持\n- 登录/登出\n- 灵活的九宫格布局\n- 收缩左侧菜单栏\n- tag标签导航\n- 面包屑\n- 全屏/退出全屏\n- 动态菜单\n- 菜单按模块划分\n- 通用权限控制\n    - 菜单级权限控制\n    - 接口级权限控制\n    - 元素级权限控制\n- 全局可配置loading效果\n- 网络异常处理\n- 模块\n    - 系统模块\n        - 系统设置\n            - 菜单管理\n        - 权限管理\n            - 功能管理\n            - 角色管理\n            - 角色权限管理\n            - 角色用户管理\n            - 用户角色管理\n        - 组织架构\n            - 部门管理\n            - 职位管理\n        - 用户管理 \n    - 网站模块\n        - CMS\n            - 文章管理\n    - 开发模块\n        - 官方组件\n            - 。。。\n        - 业务组件\n            - sku\n    - 审计日志\n    - 数据初始化\n\n## 文件结构\n```shell\n.\n├── .quasar  Quasar CLI生成的配置\n└── src\n    ├── assets  资源文件\n    ├── components 自定义组件\n    ├── css 样式文件\n    ├── layout 布局组件\n    ├── libs  工具方法\n    ├── router  路由配置\n    ├── store  状态管理\n    ├── service  API管理\n    ├── plugins  需要全局注册的组件、指令、插件\n    └── pages\n        ├── cms \n        │   └── 文章管理\n        ├── develop\n        │   ├── 官方组件\n        │   └── 业务组件\n        ├── organization\n        │   ├── 部门管理\n        │   └── 职位管理\n        ├── other\n        │   └── 审计日志\n        ├── permission\n        │   ├── 功能管理\n        │   ├── 角色管理\n        │   ├── 角色权限管理 \n        │   ├── 角色用户管理\n        │   └── 用户角色管理\n        ├── system  \n        │   ├── 菜单管理\n        ├── user  \n        │   └── 用户管理\n        ├── 403 无权限页面\n        ├── index 首页\n        └── login 登录页\n        \n```\n\n## 安装使用\n\n## Install\n```bush\nnpm install -g vue-cli\n```\n```bush\nnpm install -g quasar-cli\n```\n```bush\nnpm install\n```\n## Run\n### Development\n```bush\nquasar dev\n```\n### Production(Build)\n```bush\nquasar build\n```\n\n### 安装后台程序\n\n\n[后台程序](https://github.com/wjkang/quasar-admin-server)\n\n```bush\ngit clone https://github.com/wjkang/quasar-admin-server.git\n```\n\n## Install\n```bush\nnpm install\n```\n## Run\n### Development\n```bush\nnpm run start\n```\n### Production(Build)\n```bush\nnpm run production\n```\n后端程序使用[koa2](https://github.com/koajs/koa)构建，并且使用[lowdb](https://github.com/typicode/lowdb)持久化数据到JSON文件(使用JSON文件存储是为了快速构建demo)。\n\n## 功能开发步骤（以文章管理为例）\n- 前端\n    - 定义功能码：\n    - post_view  -文章列表查看\n    - post_edit -文章编辑\n    - post_del  -文章删除\n    - 新建文章列表页  post.vue\n    - 新增路由\n    - 使用菜单管理功能新增\"文章管理\"的相关菜单，菜单名称必须与上一步新增的路由的name字段一致。权限码填定义好的\"文章列表查看\"功能对应的权限码（菜单级权限控制）\n    - 使用功能管理在新建的菜单下录入定义好的功能名称及功能码\n    - 配置角色与用户\n    - 在角色权限管理为相应的角色设置功能权限\n- 后端\n    - db.json文件新增文章存储结构\n    - services下新增postService.js,编写对db.json文件的操作\n    - controllers下新增post.js,引入postService.js做相关操作\n    - main-routes.js 增加相关路由,使用PermissionCheck中间件进行后端接口级的权限控制(可使用功能码或角色码)\n- 前端\n    - service下新增post.js，配置API相关操作，配置loading字段实现自定义loading效果，permission字段可配置功能编码与角色编码（实现前端接口级权限控制）\n    - 回到post.vue文件，引入API访问文件，编写业务代码\n    - 使用v-permission指令控制页面元素的是否显示，可使用功能编码与角色编码（实现元素级权限控制）\n    - store app模块下配置dontCache，控制页面是否缓存\n    \n可多细节可查看源码\n\n## 效果展示\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/1.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/2.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/3.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/4.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/5.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/6.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/7.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/8.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/9.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/10.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/11.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/12.jpg)\n\n![image](https://raw.githubusercontent.com/wjkang/vue-quasar-admin/master/screenshot/13.jpg)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjkang%2Fvue-quasar-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwjkang%2Fvue-quasar-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjkang%2Fvue-quasar-admin/lists"}