若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧，看看gitee上的star数量，着实惊人。若依系统有很多个版本
| 版本 | gitee地址 | 说明 |
|---|---|---|
| 前后端不分离版本 | https://gitee.com/y_project/RuoYi | 应该是第一版若依系统，star数量最多，但是前端界面比较丑 |
| 前后端分离版本 | https://gitee.com/y_project/RuoYi-Vue | 该版本前后端分离，而且前端使用Vue重写了，后端权限部分使用了spring seurity+jwt实现，和原来的前后端不分离版本似乎有所不同 |
| 微服务版本 | https://gitee.com/y_project/RuoYi-Cloud | 相对于前后端分离版本，微服务版本将模块拆分的更细，并且单独作为一个服务对外暴露，通过服务发现相互调用 |
个人觉得前后端不分离版本太丑，而且前后端不分离维护起来也比较困难，而微服务版本又拆分的太细，前后端分离版本则正好，本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本。
一、项目启动
首先下载源代码 https://gitee.com/y_project/RuoYi-Vue ，下载完之后打开doc文件夹，查看使用说明书。综合使用说明书和实际操作，可以得到以下几点：
- 后端启动项目是ruoyi-admin，启动类是com.ruoyi.RuoYiApplication；前端项目是ruoyi-ui
- 后端项目使用maven构建，使用前需确保maven环境；前端是vue项目，使用前需确保node环境
- 后端项目依赖mysql和redis，启动前需要修改application.yml配置文件和application-druid.yml配置文件修改对应的配置。
- mysql数据初始化，需要创建ruoyi数据库并且依次执行sql文件夹下的ry_20210108.sql、quartz.sql文件
所以，操作上：
第一步，创建ruoyi数据库，并且执行sql文件夹下的ry_20210108.sql、quartz.sql
第二步，修改application.yml配置文件和application-druid.yml配置文件中的redis和mysql的连接配置
第三步，在项目根目录下执行mvn clean package -DskipTests命令下载后端项目依赖；在ruoyi-ui模块下执行npm install --registry=https://registry.npm.taobao.org命令安装前端项目依赖
第四步，打开ruoyi-admin项目的启动类com.ruoyi.RuoYiApplication，并执行main方法，运行后端代码；打开ruoyi-ui模块，执行命令npm run dev运行前端代码
第五步，打开浏览器输入网址http://127.0.0.1，看到以下页面就表示前后端项目均已经成功运行
二、修改前端默认设置
登录若依系统之后，看到的页面是这样子的
如果想侧边栏变成白色主题，关闭tabview，只需要依次点击头像->布局设置，即可切换主题、打开或者关闭tabview功能，但是页面一刷新就失效了，想要永久生效，则需要改变前端代码的默认设置。
打开前端项目ruoyi-ui，找到ruoyi-ui/src/settings.js文件，里面的配置项和页面布局中的选项一一对应，这里如果做了修改，则永久生效
module.exports = {
title: '若依管理系统',
/**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
*/
sideTheme: 'theme-dark',
/**
* 是否系统布局配置
*/
showSettings: false,
/**
* 是否显示 tagsView
*/
tagsView: true,
/**
* 是否固定头部
*/
fixedHeader: false,
/**
* 是否显示logo
*/
sidebarLogo: true,
/**
* @type {string | array} 'production' | ['production', 'development']
* @description Need show err logs component.
* The default is only used in the production env
* If you want to also use it in dev, you can pass ['production', 'development']
*/
errorLog: 'production'
}
三、添加菜单和页面
添加菜单和页面是若依管理系统最核心的功能，也是使用者最关心的事情，这里涉及到核心中的核心功能：权限，先不考虑那么多，直接新增页面，看看能否生效
下面演示新闻列表页添加的过程，这里如果想要新增新闻列表菜单，需要先新增“新闻”父菜单目录，再新增“新闻列表”菜单项。
1.添加新闻父目录菜单
依次点击系统管理->菜单管理->新增，在弹出框中输入内容如下：
这里，菜单图标随意选择，路由地址随意输入news即可
2.添加新闻列表菜单
在上一步新建的新闻目录那一行点击新增按钮，在弹出框中输入内容如下
完成之后，新闻列表菜单就添加完成了，之后刷新页面，当前admin管理员就能看到添加的菜单了
但是点击新闻列表菜单，会报错，说是没有找到news/list/index模块，因为虽然我们定义好了路由和菜单，但是真正的前端页面还没有添加。毕竟 每一个菜单项都要有一个页面和它对应的嘛。
3.添加新闻列表页面
在前端项目ruoyi-ui的ruoyi-ui/src/views目录下新增news/list/index.vue文件，文件内容如下：
之后再点击新闻列表页，就可以看到页面内容了（如果出现缓存问题，重新运行命令npm run dev即可解决）
四、创建新用户和分配菜单权限
若依系统初始化SQL已经创建了两个用户：admin和ry，分别作为管理员和普通用户，这里我创建一个新用户kdyzm，用来测试菜单权限。
首先，创建一个角色“运营角色”，仅允许“新闻”菜单权限。
接下来，创建一个新用户一枝梅，并将上一步创建的角色赋给该用户
创建完成之后，打开无痕窗口，使用该账户登录若依管理系统，之后看到的菜单就是这样子的了
可以看到，使用kdyzm账号登陆系统，只能看到新闻菜单了，符合我们的预期；如果这时候输入只有admin才能看到的其它页面地址又会如何呢？比如kdyzm在浏览器上手动输入了地址：http://127.0.0.1/system/user 这本应当是管理员才有权限看到的页面，kdyzm看到的则是
这说明菜单权限是生效了的，而不仅仅至于看不到，就算知道页面地址也无济于事。
好了，若依系统到了这里，初步的页面和权限问题已经解决，下一篇文章将会讲解实际开发中的一些细节，比如按钮权限，前端如何发起http请求，后端接口权限等等，欲知后事如何，且听下回分解~