若依管理系统RuoYi-Vue（一）：项目启动和菜单创建
<p>若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧，看看gitee上的star数量，着实惊人。若依系统有很多个版本</p><table>
<thead>
<tr>
<th>版本</th>
<th>gitee地址</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>前后端不分离版本</td>
<td>https://gitee.com/y_project/RuoYi</td>
<td>应该是第一版若依系统，star数量最多，但是前端界面比较丑</td>
</tr>
<tr>
<td>前后端分离版本</td>
<td>https://gitee.com/y_project/RuoYi-Vue</td>
<td>该版本前后端分离，而且前端使用Vue重写了，后端权限部分使用了spring seurity+jwt实现，和原来的前后端不分离版本似乎有所不同</td>
</tr>
<tr>
<td>微服务版本</td>
<td>https://gitee.com/y_project/RuoYi-Cloud</td>
<td>相对于前后端分离版本，微服务版本将模块拆分的更细，并且单独作为一个服务对外暴露，通过服务发现相互调用</td>
</tr>
</tbody>
</table>
<p>个人觉得前后端不分离版本太丑，而且前后端不分离维护起来也比较困难，而微服务版本又拆分的太细，前后端分离版本则正好，本篇文章将会讲解如何如何使用RuoYi-Vue前后端分离版本。</p>
<h2 id="一项目启动">一、项目启动</h2>
<p>首先下载源代码 https://gitee.com/y_project/RuoYi-Vue ，下载完之后打开doc文件夹，查看使用说明书。综合使用说明书和实际操作，可以得到以下几点：</p>
<ol>
<li>后端启动项目是ruoyi-admin，启动类是com.ruoyi.RuoYiApplication；前端项目是ruoyi-ui</li>
<li>后端项目使用maven构建，使用前需确保maven环境；前端是vue项目，使用前需确保node环境</li>
<li>后端项目依赖mysql和redis，启动前需要修改application.yml配置文件和application-druid.yml配置文件修改对应的配置。</li>
<li>mysql数据初始化，需要创建ruoyi数据库并且依次执行sql文件夹下的ry_20210108.sql、quartz.sql文件</li>
</ol>
<p>所以，操作上：</p>
<p>第一步，创建ruoyi数据库，并且执行sql文件夹下的ry_20210108.sql、quartz.sql</p>
<p>第二步，修改application.yml配置文件和application-druid.yml配置文件中的redis和mysql的连接配置</p>
<p>第三步，在项目根目录下执行<code>mvn clean package -DskipTests</code>命令下载后端项目依赖；在ruoyi-ui模块下执行<code>npm install --registry=https://registry.npm.taobao.org</code>命令安装前端项目依赖</p>
<p>第四步，打开ruoyi-admin项目的启动类com.ruoyi.RuoYiApplication，并执行main方法，运行后端代码；打开ruoyi-ui模块，执行命令<code>npm run dev</code>运行前端代码</p>
<p>第五步，打开浏览器输入网址<code>http://127.0.0.1</code>，看到以下页面就表示前后端项目均已经成功运行</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150936343-1352465432.png;%20charset=UTF-8" alt="image-20210204105228831" loading="lazy"></p>
<h2 id="二修改前端默认设置">二、修改前端默认设置</h2>
<p>登录若依系统之后，看到的页面是这样子的</p>
<p><img src="https://img2020.cnblogs.com/news/516671/202102/516671-20210204150937825-13306136.png;%20charset=UTF-8" alt="image-20210204105721001" loading="lazy"></p>
<p>如果想侧边栏变成白色主题，关闭tabview，只需要依次点击头像->布局设置，即可切换主题、打开或者关闭tabview功能，但是页面一刷新就失效了，想要永久生效，则需要改变前端代码的默认设置。</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150937991-493294935.png;%20charset=UTF-8" alt="image-20210204110322338" loading="lazy"></p>
<p>打开前端项目ruoyi-ui，找到ruoyi-ui/src/settings.js文件，里面的配置项和页面布局中的选项一一对应，这里如果做了修改，则永久生效</p>
<pre><code class="language-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'
}
</code></pre>
<h2 id="三添加菜单和页面">三、添加菜单和页面</h2>
<p>添加菜单和页面是若依管理系统最核心的功能，也是使用者最关心的事情，这里涉及到核心中的核心功能：权限，先不考虑那么多，直接新增页面，看看能否生效</p>
<p>下面演示新闻列表页添加的过程，这里如果想要新增新闻列表菜单，需要先新增“新闻”父菜单目录，再新增“新闻列表”菜单项。</p>
<h3 id="1添加新闻父目录菜单">1.添加新闻父目录菜单</h3>
<p>依次点击系统管理->菜单管理->新增，在弹出框中输入内容如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150938142-1665648452.png;%20charset=UTF-8" alt="image-20210204111314148" loading="lazy"></p>
<p>这里，菜单图标随意选择，路由地址随意输入news即可</p>
<h3 id="2添加新闻列表菜单">2.添加新闻列表菜单</h3>
<p>在上一步新建的新闻目录那一行点击新增按钮，在弹出框中输入内容如下</p>
<p><img src="https://img2020.cnblogs.com/news/516671/202102/516671-20210204150938348-1314564281.png;%20charset=UTF-8" alt="image-20210204111740860" loading="lazy"></p>
<p>完成之后，新闻列表菜单就添加完成了，之后刷新页面，当前admin管理员就能看到添加的菜单了</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150938503-1373630764.png;%20charset=UTF-8" alt="image-20210204112137838" loading="lazy"></p>
<p>但是点击新闻列表菜单，会报错，说是没有找到<code>news/list/index</code>模块，因为虽然我们定义好了路由和菜单，但是真正的前端页面还没有添加。毕竟 每一个菜单项都要有一个页面和它对应的嘛。</p>
<h3 id="3添加新闻列表页面">3.添加新闻列表页面</h3>
<p>在前端项目ruoyi-ui的ruoyi-ui/src/views目录下新增news/list/index.vue文件，文件内容如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150938711-893075741.png;%20charset=UTF-8" alt="image-20210204112732497" loading="lazy"></p>
<p>之后再点击新闻列表页，就可以看到页面内容了（如果出现缓存问题，重新运行命令npm run dev即可解决）</p>
<p><img src="https://img2020.cnblogs.com/news/516671/202102/516671-20210204150939033-552519753.png;%20charset=UTF-8" alt="image-20210204112917354" loading="lazy"></p>
<h2 id="四创建新用户和分配菜单权限">四、创建新用户和分配菜单权限</h2>
<p>若依系统初始化SQL已经创建了两个用户：admin和ry，分别作为管理员和普通用户，这里我创建一个新用户kdyzm，用来测试菜单权限。</p>
<p>首先，创建一个角色“运营角色”，仅允许“新闻”菜单权限。</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150939265-1517176105.png;%20charset=UTF-8" alt="image-20210204131636421" loading="lazy"></p>
<p>接下来，创建一个新用户一枝梅，并将上一步创建的角色赋给该用户</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150939408-970577975.png;%20charset=UTF-8" alt="image-20210204131939309" loading="lazy"></p>
<p>创建完成之后，打开无痕窗口，使用该账户登录若依管理系统，之后看到的菜单就是这样子的了</p>
<p><img src="https://img2020.cnblogs.com/news/516671/202102/516671-20210204150939608-1393505159.png;%20charset=UTF-8" alt="image-20210204132121229" loading="lazy"></p>
<p>可以看到，使用kdyzm账号登陆系统，只能看到新闻菜单了，符合我们的预期；如果这时候输入只有admin才能看到的其它页面地址又会如何呢？比如kdyzm在浏览器上手动输入了地址：http://127.0.0.1/system/user 这本应当是管理员才有权限看到的页面，kdyzm看到的则是</p>
<p><img src="https://img2020.cnblogs.com/blog/516671/202102/516671-20210204150939765-612996244.png;%20charset=UTF-8" alt="image-20210204132338997" loading="lazy"></p>
<p>这说明菜单权限是生效了的，而不仅仅至于看不到，就算知道页面地址也无济于事。</p>
<p>好了，若依系统到了这里，初步的页面和权限问题已经解决，下一篇文章将会讲解实际开发中的一些细节，比如按钮权限，前端如何发起http请求，后端接口权限等等，欲知后事如何，且听下回分解~</p><br><br>
来源：https://www.cnblogs.com/kuangdaoyizhimei/p/14372719.html
頁:
[1]