1 Star 8 Fork 2

llvyr/vue-ts

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MulanPSL-2.0

vue3-ts-cms

接口在线文档

后台 API 接口在线文档【永久有效】:接口在线文档 访问密码 : llvyr

项目概述

一个基于 RBAC 设计的通用后台管理系统,支持通过配置文件批量完成特定功能,如搜索、表格数据显示,导入、导出。项目中封装了大量通用组件,如表单、表格、Echarts 图表、头像上传、面包屑、左侧菜单等。

项目技术选型

前端技术

  • vue3 全家桶
  • Typescript
  • Element-plus
  • axios
  • Echarts

后端技术

  • Egg.js
  • Sequelize
  • Mysql

项目亮点

  • RBAC 架构,用户-->角色-->资源的权限配置
  • 权限认证
  • 动态路由
  • ELement-plus 的表格、表单二次封装
  • axios 的二次封装
  • Echarts 的常用图封装
  • 头像裁剪封装
  • hooks 的公用逻辑抽取
  • 外部 svg 的导入功能
  • Excel 的导入和导出功能
  • 换肤功能

统一规范

  • 前端

    • 所的样式、图片放到 asset 下
    • 所有公共组件都放到 base-ui 下
    • 所有与项目相关的组件放到 components 文件下
    • 所欲的全局组件都在 global 文件中注册
    • 所的公用逻辑放到 hook 下
    • 每一个页面的路由进行拆分放到 router 下
    • 所有请求封装放到 servers 下
    • 所有的工具类放到 utils 下
    • 所有页面放到 views 下
    • 所有按需导入外部组件放到 plugins 下注册
    • 所有的请求通过 despatch 调用 vuex 中的 Action 完成,
    - 一个页面的基本架构
      - xxx 文件夹
        - config 配置信息
          - table.config 表格配置信息
          - search.config 搜索配置信息
          - modal.config 添加、修改模型配置信息
          - export.config 导入导出配置信息配置信息
        - xxx.vue
    
    
      - 一个组件的基本架构(参考 element 的组件结构)
        - xxx 文件夹
          - src 文件夹
            - xxx.vue
          - types 文件夹
            -index.ts
          - index.ts 根目录
    
  • 后端

    • controller 公共逻辑处理
      • 参数合法校验成功后调用对应的 service 层
    • exception 统一异常处理
      • 权限异常处理
      • 参数错误处理
      • 404 处理
      • 服务器异常处理
    • extend 扩展
      • 辅助模块 helper
      • 公共方法
    • middleware 插件
      • 权限检测
      • 异常捕获
    • model 数据库映射模型
      • 模型数据定义
      • 模型关联
    • public 公共资源目录
      • 存放上传的头像
    • rules 参数规则校验
      • 存放规则配置信心
    • service 服务层,执行数据库操作
      • 增删改查
      • 返回执行结果
    • router.js 配置路由映射
    • config 项目基础配置 -数据库配置
      • session 配置
      • jwt 配置
      • 插件配置
      • .......

项目工关键功能设计

登录功能

  • 账号登录实现思路
    • 账号和手机号具有唯一性,是辨别用户身份的唯一凭证
    • 新建用户或则批量导入用户数据时后台会进行关键字段检测
    • 用户密码采用 crypto 加密
    • 账号密码正确后会依据 status 字段的值检测账号是否被冻结
    • 用户登录后成功后调用 getUerInfo 接口后台根据 token 自动解析出用户 id 以及用户身份并返回用户角色信息
    • 用户需要通过返回的角色信息调用对应的接口获取用户的权限和菜单等信息
    • 之后对于拥有权限的请求都将进行权限认证.
  • 手机号登录实现思路
    • 检测手机号符合规则后可点击发送验证码按钮获取验证码
    • 后台会采用哈希值截取出 6 位作为验证码,同时保存到 session 会话中方便后期做登录验证
    • 其他流程同上

换肤功能

  • 实现思路
    • 基本流程 通过动态修改 css 自定义变量 var(--primary) 实现页面颜色的改变
    • 定义不同主题的 less 颜色变量 导出变量供页面使用
    • 将默认系统主题存储到 vuex 和本地 storage 中
    • 根据不同的主题动态替换 根目录的 css 变量达到改变样式的效果

数字滚动、头像裁剪功能

  • 实现思路
    • 主要是采用了 vue-countup-v3 实现数字滚动效果
    • 利用 cropperjs 实现头像裁剪效果
    • 遇到的坑:数据同步更新问题,出现原因,在 setup 函数会执行一次,及时数据改变也不会触发视图更新,解决方案:使用计算属性(计算属性持续追踪它的响应依赖)

Echarts 数据分析功能

  • 实现思路
    • 采用 Echarts 通过传入配置参数渲染对应的图表库
    • 遇到的坑:下载地图 json 数据的是否要看清楚里面的省份名称 例如:有的 json 数据是福建省有的是福建

删除、更新、新建功能

  • 实现思路

    • 所有的数据都要进行非空判断
    • 对于具有关联的数据删除后台通过先删除所有相关数据,再添加数据的形式完成删除功能
    • 对于具有关联的数据更新需要验证 id 是否存在,以及数据合法性
    • 对具有关联的数据新建需要验证数据合法性
    • 所有涉及到多表关联更新的操作后台都要对数据库进行事务处理
    • 具有关联的数据删除:
      • 角色删除
        • 删除角色 需要判断角色是否和用户关联,存在关联不能删除,不存在关联需要删除当前角色以及角色菜单表中角色所关联的所有菜单菜单
      • 菜单删除:
        • 删除父级菜单,所有的子集菜单都要删除
      • 用户删除
        • 删除用户同时删除与用户关联的一切数据(评论、回复、文章、用户角色关联关系记录、点赞记录、收藏记录)
      • 文章删除
        • 删除一起和文章相关的数据(文章点赞记录、收藏记录、评论记录、评论的子评论记录、文章分类记录)
      • 评论删除
        • 删除一切和此条评论有关的记录(回复记录)
  • 页面统一设计

    • 通用模式:views 下的页面组件(传递 props)--> page-xx 组件(传递 props)--> base-ui 先组件(接收 props 并渲染组件)
    • 第一层:base-ui 文件夹下的组件 主要是对 element-plus 的原生组件二次封装 利用 v-bind 绑定 props 接收的属性参数
    • 第二层:components 文件夹先的 page-xx 组件 主要是做请求层业务逻辑,调用 vuex 中的 Action 完成处理所有的请求
    • 第三层:views 下的组件具体的页面如用户、角色页面等
    • 搭建一个新页面需要传递的配置文件

项目展示

账号登录 手机登录 默认主题 绿色主题 核心技术 头像裁剪 数据分析 角色管理 权限管理 权限管理 用户管理 文章列表 文章管理 文章导出 评论管理 演示连接演示连接

Customize configuration

See Configuration Reference.

木兰宽松许可证, 第2版 木兰宽松许可证, 第2版 2020年1月 http://license.coscl.org.cn/MulanPSL2 您对“软件”的复制、使用、修改及分发受木兰宽松许可证,第2版(“本许可证”)的如下条款的约束: 0. 定义 “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。 “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。 “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。 “法人实体”是指提交贡献的机构及其“关联实体”。 “关联实体”是指,对“本许可证”下的行为方而言,控制、受控制或与其共同受控制的机构,此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。 1. 授予版权许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可,您可以复制、使用、修改、分发其“贡献”,不论修改与否。 2. 授予专利许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的(根据本条规定撤销除外)专利许可,供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求,不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地,就“软件”或其中的“贡献”对任何人发起专利侵权诉讼(包括反诉或交叉诉讼)或其他专利维权行动,指控其侵犯专利权,则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。 3. 无商标许可 “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可,但您为满足第4条规定的声明义务而必须使用除外。 4. 分发限制 您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发,不论修改与否,但您必须向接收者提供“本许可证”的副本,并保留“软件”中的版权、商标、专利及免责声明。 5. 免责声明与责任限制 “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下,“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。 6. 语言 “本许可证”以中英文双语表述,中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致,以中文版为准。 条款结束 如何将木兰宽松许可证,第2版,应用到您的软件 如果您希望将木兰宽松许可证,第2版,应用到您的新软件,为了方便接收者查阅,建议您完成如下三步: 1, 请您补充如下声明中的空白,包括软件名、软件的首次发表年份以及您作为版权人的名字; 2, 请您在软件包的一级目录下创建以“LICENSE”为名的文件,将整个许可证文本放入该文件中; 3, 请将如下声明文本放入每个源文件的头部注释中。 Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details. Mulan Permissive Software License,Version 2 Mulan Permissive Software License,Version 2 (Mulan PSL v2) January 2020 http://license.coscl.org.cn/MulanPSL2 Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v2 (this License) with the following terms and conditions: 0. Definition Software means the program and related documents which are licensed under this License and comprise all Contribution(s). Contribution means the copyrightable work licensed by a particular Contributor under this License. Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License. Legal Entity means the entity making a Contribution and all its Affiliates. Affiliates means entities that control, are controlled by, or are under common control with the acting entity under this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity. 1. Grant of Copyright License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not. 2. Grant of Patent License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution, where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed. The patent license shall not apply to any modification of the Contribution, and any other combination which includes the Contribution. If you or your Affiliates directly or indirectly institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken. 3. No Trademark License No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in Section 4. 4. Distribution Restriction You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software. 5. Disclaimer of Warranty and Limitation of Liability THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 6. Language THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION SHALL PREVAIL. END OF THE TERMS AND CONDITIONS How to Apply the Mulan Permissive Software License,Version 2 (Mulan PSL v2) to Your Software To apply the Mulan PSL v2 to your work, for easy identification by recipients, you are suggested to complete following three steps: i Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner; ii Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package; iii Attach the statement to the appropriate annotated syntax at the beginning of each source file. Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details.

简介

通用RBAC管理后台模板 在线地址演示:http://www.llvyr.top:8001 在线API文档链接: https://www.apifox.cn/apidoc/shared-7e454f95-9f0d-4f57-adf6-636d9ed39b41 访问密码 : llvyr 展开 收起
README
MulanPSL-2.0
取消

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
TypeScript
1
https://gitee.com/llvyr/vue-ts.git
git@gitee.com:llvyr/vue-ts.git
llvyr
vue-ts
vue-ts
master

搜索帮助