FEBS Cloud项目使用教程

系统管理

角色管理

新增角色

点击角色管理菜单，页面右侧区域为新增角色区域：

可以看到新增角色需要填写“角色名称”，“角色描述”和“角色权限”。其中角色权限需要勾选菜单树。

比如，我现在需要新增一个“系统监控员”（就是拥有系统监控模块下所有页面及按钮的功能），那么我们需要填写角色名称为“系统监控员”，并且勾选菜单树“系统监控”模块下的所有菜单及按钮：

最后点击新增按钮即可。

菜单树并没有设置为父子关联的模式，虽然父子关联在操作上会更方便，但在某些业务场景下是行不通的。以“登录日志”菜单为例，如果我想分配一个角色具有查看登录日志的权限，但不能删除日志和导出日志，那么我们只需要勾选系统监控和登录日志模块即可。假如设置了父子关联，一旦我们勾选了登录日志模块，那么它下面的按钮“删除日志”和“导出Excel”也会被勾选，无法满足我们的需求。

修改角色

点击页面表格操作区域的“齿轮”按钮，页面右侧会显示对应的角色信息：

在右侧区域修改相应内容后，点击“更新”按钮即可。

删除角色

您可以点击表格操作区域的“垃圾桶”来删除对应的角色，也可以勾选表格的多选框，然后点击删除按钮（在更多操作下拉选中）来一次性删除多个角色。

注意，删除角色后，对应的用户将会丧失相应的权限。

用户管理

新增用户

点击用户管理菜单，在“更多操作”下拉选中，包含“添加”按钮：

点击该按钮弹出新增用户界面：

填写相应的用户信息，角色可以选择我们刚刚创建的“系统监控员”（一个用户可以拥有多个角色）。

点击“确定”按钮新增用户，用户默认密码为1234qwer。使用该用户登录系统，因为他的角色为“系统监控员”，所以它理所应当只拥有系统监控模块的菜单权限：

修改用户

在用户管理界面的表格操作区域，点击“齿轮”按钮，可以修改相应用户：

除了用户名和密码不能修改外，其他内容都可修改。

删除用户

您可以点击用户列表操作栏的“垃圾桶”图标，删除对应的用户，也可以勾选多个用户，然后点击“更多操作”下拉选中的“删除”按钮，一次性删除多个用户。假如待删除用户包含当前用户，系统将会拒绝：

密码重置

假如有用户忘记了登录密码，您可以通过密码重置功能重置他的登录密码。

在用户管理模块中，选中需要重置密码的用户，然后点击“更多操作”下拉选中的“密码重置”按钮，将其登录密码重置为1234qwer：

菜单管理

菜单结构介绍

菜单管理页面可以对系统菜单和按钮进行统一管理。菜单可以拥有层级结构，一个菜单可以作为另一个菜单的上级，但按钮不能作为菜单的上级（虽然系统没有进行限制，但选择按钮作为上级毫无意义）。

新增菜单

菜单管理页面右侧为菜单新增区域：

其中URL对应浏览器地址栏的URL，组件对应前端系统的Vue组件，权限用于后台系统接口控制。

比如，我们在系统管理下新增一个菜单：

勾选左侧菜单树上系统管理，然后点击“更多操作”下拉选中的新增按钮（逻辑已经修改为树形下来选，请知悉）：

可以看到，“上级ID”输入框的值自动赋值为所勾选菜单的ID，表示以该菜单为上级创建新的菜单。

然后填写如下内容，并点击“新增按钮新增”：

点击新增后，左侧菜单树已经出现了刚刚新增的菜单：

但是你会发现，系统左侧菜单栏中并没有出现该菜单，这是因为我们还没有给角色授权。点击角色管理，然后编辑“管理员”角色，在右侧的权限树中，勾选上刚刚新增的菜单：

点击更新后，拥有管理员角色的用户就拥有了该菜单权限。权限更新生效需要重新登录系统，或者可以点击“清除缓存”按钮来刷新缓存：

点击后，可以看到菜单栏已经出现了刚刚新增的菜单：

但是，点击该菜单后，控制台报错了：

这是因为我刚刚新增菜单的时候指定组件地址为febs/system/test/Index，但我们并没有在前端项目里创建该组件。

在前端系统的src/views/febs/system路径下新建test目录，然后在该目录下新建Index.vue：

我们在Index.vue里编写了一些简单的Vue代码，代码如下所示：

<template>
  <div class="app-container">
    <div id="message">{{ hello }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hello: 'hello world'
    }
  }
}
</script>
<style scoped>
  #message {
    font-size: 1rem;
    font-weight: 600;
    color: #42b983;
  }
</style>

回到系统页面，再次点击测试菜单后，页面就会渲染出我们刚刚新增的组件：

新增多级菜单

菜单可以拥有层级结构。一级菜单（如现有的“系统管理”、“系统监控”等）的组件栏固定填写为Layout；二级菜单为末级菜单的话，组件栏填写前端系统定义的组件地址；如果二级菜单还有下级菜单的话，那么它就是一个中间菜单。下面演示如何新建一个三级菜单（更多层级以此类推即可，您也可以参考vue element admin的文档：多级目录）。

勾选系统管理菜单，点击“更多操作”下拉选中的“新增按钮”，然后在右侧区域填写如下内容：

接着在前端项目的src/views/febs/system下新增one目录，然后在该目录下新建Index.vue，代码如下所示：

1
2
3

<template>
  <router-view />
</template>

因为它是一个中间菜单，所以只要编写一个<router-view/>即可。

创建完该菜单后，我们继续创建第三级菜单，勾选刚刚创建的“测试菜单1”，点击“更多操作”下拉选中的“新增按钮”，然后在右侧区域填写如下内容：

创建完该菜单后，接着继续在src/views/febs/system/one下新增two目录，然后在该目录下新建Index.vue，代码如下所示：

<template>
  <div class="app-container">
    <div id="message">{{ hello }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hello: 'hello world'
    }
  }
}
</script>
<style scoped>
  #message {
    font-size: 1rem;
    font-weight: 600;
    color: #42b983;
  }
</style>

至此，三级菜单创建完毕，给角色授权并清除缓存后，系统菜单栏效果如下所示：

新增按钮

新增按钮和新增菜单操作一致，只需要将类型选为按钮即可。比如在上面创建的测试菜单下新建一个“新增文章”按钮：

新增按钮后，并不是说页面上就会自动出现该按钮了，这里按钮的作用为权限分配。

修改菜单/按钮

修改菜单或者按钮，只需要点击菜单树中对应的菜单或者按钮（不是勾选）即可，比如我要修改测试菜单的相关信息：

删除菜单/按钮

勾选需要删除的菜单或者按钮，然后点击“更多操作”下拉选中的“删除按钮就可”：

如果勾选的模块含有下级的话，下级也会一并被删除。

部门管理

部门也拥有层级结构，操作大致和菜单一致，所以不再做过多操作介绍。

部门在本系统中可以用于控制数据权限，后续会介绍到。

客户端管理

客户端接入系统需要配置相应的client_id和client_secret，这个模块就是用于管理client的。不同的client可以配置不同的授权模式，不同时长的令牌有效期等。该模块通过数据库和Redis实现client的存储及缓存实时更新：

系统监控

系统日志

系统日志模块如下所示：

该模块用于记录用户操作日志（即访问了什么资源，参数是什么，方法耗时之类的信息），通过后端系统中的@ControllerEndpoint注解实现，具体介绍可参考开发教程的自定义注解介绍一节。

登录日志

登录日志模块如下所示：

该模块用于记录用户登录系统日志，比如登录用户名，登录的系统，浏览器版本，IP地址，登录地点和登录时间等信息。其中，登录地点使用ip2region实现。

监控面板

监控面板聚合了各种监控面板页面，具体包括：

Nacos控制台面板：

ELK面板

ELK用于集中收集微服务日志，搭建教程可以参考：https://www.kancloud.cn/mrbird/spring-cloud/1263715。

SkyWalking面板

Skywalking是由国人吴晟开发的一款分布式追踪软件，后面成功孵化为Apache的顶级项目。Skywalking主要包括了分布式追踪、性能指标分析、应用和服务依赖分析等功能：

搭建教程可以参考：https://www.kancloud.cn/mrbird/spring-cloud/1337996。

Grafana面板

多维度监控微服务的可视化平台，包括Docker容器监控、MySQL监控、Redis监控和微服务JVM监控等，并且在必要的情况下可以发送预警邮件：

Docker容器监控：

微服务JVM监控：

MySQL数据库监控：

Redis监控：

具体搭建过程可以参考：https://www.kancloud.cn/mrbird/spring-cloud/1333138。

微服务接口文档

基于knife4j，聚合了所有微服务子模块的API接口：

具体使用参考开发教程。

Admin面板

基于Spring Boot Admin的服务监控面板：

TX面板

分布式事务控制面板：

代码生成

生成配置

要使用代码生成功能，需要先启动febs-server-generator微服务：

生成配置模块用于修改代码生成相关配置：

可修改的配置有：

作者名称，对应Java类上@author的值；
基础包名，即生成的包和代码位于哪个路径下面;
entity包名，即实体类的包名；
mapper包名，即Dao层接口的包名；
mapperXml包名，即Mybatis XML文件的包名；
service包名，即Service接口的包名；
serviceImpl包名，即Service接口实现类的包名；
controller包名，即Controller层的包名；
是否去除表前缀，用于控制在生成Java类名的时候是否去除表前缀；
表前缀，指定去除的表前缀。

就“是否去除表前缀”，这里举个例子：比如您的库表名称为TBL_USER，如果不去除表前缀，生成的实体类名称为TblUser；如果选择去除表前缀，并且指定表前缀内容为TBL的话，生成的实体类名称为User。

生成代码

该模块用于生成后端代码：

点击表格操作区域的下载图标，即可根据前面配置的内容生成该表对应的实体类，Dao接口，Service接口，Service接口实现类，Controller等代码。

比如点击t_user表格的代码，生成后如下所示：

代码生成通过freemarker实现，您可以根据自己的需求修改文件模板。文件模板位于febs-server-generator微服务：

其实代码生成的本质就是模板变量填充。

其他模块

导入导出

该模块用于演示Excel的导入导出：

导出的话没有什么可说的，直接点击导出按钮就可以将当前页面的数据导出到Excel表格中。

要导入Excel数据并且入库，需要下载导入模板。点击“模板下载”按钮下载模板：

每一列都定义了数据格式，我们修改几组数据，让它们不符合格式要求：

然后点击页面上的“导入”按钮，选择该模板，结果如下所示：

导入成功的数据将会被保存到t_eximport表中，导入失败的数据会给出不符合要求的提示。

个人博客

这个页面主要演示如何通过iframe加载第三方页面，这个页面的vue源码为：

<template>
  <i-frame
    :src="url"
    @refresh="refresh"
  />
</template>
<script>
import iFrame from '@/components/iFrame'
export default {
  components: { iFrame },
  data() {
    return {
      url: 'https://mrbird.cc'
    }
  },
  methods: {
    refresh(u) {
      this.url = u
    }
  }
}
</script>

数据权限

这个页面用于测试数据权限（不同的系统账户登录看到的数据不一样），数据权限的使用具体可以参考开发教程里的相关说明。

网关管理

使用说明

网关管理是对FEBS Gateway的增强，也是对WebFlux编程的一次实践，相关代码位于cc.mrbird.febs.gateway.enhance目录下，主要包含黑名单控制、限流控制和相关日志记录等功能。默认网关增强是关闭的，要开启它需要进行如下操作：

安装MongoDB。MongoDB下载地址：https://www.mongodb.com/download-center/community，下载后安装即可。我的安装路径为：D:\Program Files\MongoDB。

安装好后，在D盘的根目录（或者任意你喜欢的位置）新建mongodb文件夹，然后到D:\Program Files\MongoDB\Server\4.2\bin目录下打开CMD窗口，输入如下命令开启MongoDB：

启动后，浏览器访问：http://localhost:27017/

说明我们的MongoDB启动成功。

Navicat连接MongoDB。使用Navicat新建一个MongoDB连接：

连接后，新建一个名称为febs_cloud_route的db：

然后在该db下导入febs-cloud/sql/febs_cloud_route.sql SQL脚本即可。

打开配置。访问Nacos控制台：http://localhost:8001/nacos，编辑febs-gateway.yaml配置：

修改好后，配置如下图所示：

编辑IDEA环境变量，在febs-gateway模块中添加mongo.url和redis.url变量配置：

重新启动febs-gateway模块，启动日志中输出如如下内容的话，说明网关增强开启成功：

1
2

2020-01-14 16:17:59 INFO  main cc.mrbird.febs.gateway.enhance.service.impl.RouteEnhanceCacheServiceImpl Cache blacklist into redis >>>
2020-01-14 16:17:59 INFO  main cc.mrbird.febs.gateway.enhance.service.impl.RouteEnhanceCacheServiceImpl Cache rate limit rules into redis >>>

网关用户

网关管理新增了黑名单和限流规则等配置的增删改查接口，所以这部分内容也需要受保护。第一反应肯定是将网关配置为资源服务器，这样就可以和febs-server-system、febs-sever-test那样统一通过febs-auth认证和授权。但是，目前网关使用的是spring cloud gateway，其基于WebFlux编程，模型使用Reactive，而非Servlet模型，所以之前那一套并不适合网关。

综上所述，网关资源要受保护，不能将其配置为资源服务器，而需要额外的定义一套规则。相关配置可以参考febs-gateway模块的cc.mrbird.febs.gateway.enhance.auth目录下的代码，网关用户的作用便是用于管理网关模块的增删改查接口。网关管理的所有模块都需要认证，未认证时，页面显示如下：