若依管理系统RuoYi-Vue（一）：项目启动和菜单创建

若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧，看看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文件夹，查看使用说明书。综合使用说明书和实际操作，可以得到以下几点：

1. 后端启动项目是ruoyi-admin，启动类是com.ruoyi.RuoYiApplication；前端项目是ruoyi-ui
2. 后端项目使用maven构建，使用前需确保maven环境；前端是vue项目，使用前需确保node环境
3. 后端项目依赖mysql和redis，启动前需要修改application.yml配置文件和application-druid.yml配置文件修改对应的配置。
4. 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，用来测试菜单权限。

首先，创建一个角色“运营角色”，仅允许“新闻”菜单权限。

接下来，创建一个新用户一枝梅，并将上一步创建的角色赋给该用户

创建完成之后，打开无痕窗口，使用该账户登录若依管理系统，之后看到的菜单就是这样子的了

可以看到，使用admin账号管理系统，只能看到新闻菜单了，如果这时候输入只有admin才能看到的其它页面地址又会如何呢，比如kdyzm在浏览器上手动输入了地址：http://127.0.0.1/system/user 这本应当是管理员才有权限看到的页面，kdyzm看到的则是

这说明菜单权限是生效了的，而不仅仅至于看不到，就算知道页面地址也无济于事。

好了，若依系统到了这里，初步的页面和权限问题已经解决，下一篇文章将会讲解实际开发中的一些细节，比如按钮权限，前端如何发起http请求，后端接口权限等等，欲知后事如何，且听下回分解~