若依框架的使用（前后端分离版）

若依是一套全部开源的免费的快速开发平台，可以迅速搭建项目。

这里我们主要介绍前端的使用。

介绍

• 前端采用Vue、Element UI。
• 权限认证使用Jwt，支持多终端认证系统。
• 支持加载动态权限菜单，多方式轻松权限控制。
• 高效率开发，使用代码生成器可以一键生成前后端代码。

功能

1. 用户管理：用户是系统操作者，该功能主要完成系统用户配置。
2. 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
3. 岗位管理：配置系统用户所属担任职务。
4. 菜单管理：配置系统菜单，操作权限，按钮权限标识等。
5. 角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
6. 字典管理：对系统中经常使用的一些较为固定的数据进行维护。
7. 参数管理：对系统动态配置常用参数。
8. 通知公告：系统通知公告信息发布维护。
9. 操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
10. 登录日志：系统登录日志记录查询包含登录异常。
11. 在线用户：当前系统中活跃用户状态监控。
12. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。
13. 代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
14. 系统接口：根据业务代码自动生成相关的api接口文档。
15. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
16. 缓存监控：对系统的缓存信息查询，命令统计等。
17. 在线构建器：拖动表单元素生成相应的HTML代码。
18. 连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。

代码地址

https://gitee.com/y_project/RuoYi-Vue.githttps://gitee.com/y_project/RuoYi-Vue.git

 官方demo

 

 

 代码运行

首先进入到ruoyi-ui目录中，

 打开vue.config.js，修改ip。

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`, //改为后端ip
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

安装依赖，启动项目 。

 npm install
 npm run dev

基础使用

• 添加菜单

在环境中点击菜单管理，可以新增目录，菜单，按钮等，通过权限标识控制不同角色的操作权限。

• 添加角色 

在环境中点击角色管理，新增角色，勾选权限。

•  添加用户

在环境中点击用户管理，新增用户，填写基本信息，为用户分配权限 。

•  添加图标

在src/assets目录下的icons/svg中添加菜单图标，在环境中选择菜单管理，修改菜单图标。

文件结构分析 （基本没变化）

com.ruoyi     
├── common            // 工具类
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── json                          // JSON数据处理
│       └── utils                         // 通用类处理
│       └── xss                           // XSS过滤处理
├── framework         // 框架核心
│       └── aspectj                       // 注解实现
│       └── config                        // 系统配置
│       └── datasource                    // 数据权限
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── shiro                         // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator   // 代码生成（不用可移除）
├── ruoyi-quartz      // 定时任务（不用可移除）
├── ruoyi-system      // 系统代码
├── ruoyi-admin       // 后台服务
├── ruoyi-xxxxxx      // 其他模块