新增Vue3前端代码生成模板

ruoyi-generator/src/main/resources/vm/vue/v3

vue2的方式是data()方式，vue3使用的是setup的方式。

如果想使用vue3查看当前目录的redme:

如果使用的是RuoYi-Vue3前端，那么需要覆盖一下此目录的模板index.vue.vm、index-tree.vue.vm文件到上级vue目录。

新增图片预览组件

ruoyi-ui/src/components/ImagePreview/index.vue

不同的环境配置文件：.env.developmen、t .env.production、 .env.staging

自定义xss校验注解实现

ruoyi-admin/src/main/resources/application.yml

# 防止XSS攻击
xss: 
  # 过滤开关
  enabled: true
  # 排除链接（多个用逗号分隔）
  excludes: /system/notice
  # 匹配链接
  urlPatterns: /system/*,/monitor/*,/tool/*

ruoyi-system/src/main/java/com/ruoyi/system/domain/SysNotice.java

使用@Xss

@Xss(message = "公告标题不能包含脚本字符")
@NotBlank(message = "公告标题不能为空")
@Size(min = 0, max = 50, message = "公告标题不能超过50个字符")
public String getNoticeTitle()
{
    return noticeTitle;
}

比如所虽然对/system/notice进行了排除（实体：ruoyi-system/src/main/java/com/ruoyi/system/domain/SysNotice.java），是因为有内容是个富文本，但是可以对其他字段进行单独设置校验xss。比如公告的标题。（路径：系统管理》通知公告）

校验生效

• 1、如果直接入口就是入库实体，直接加在入口处即可
• 2、如果是方法中的，可以使用手动校验

1、如果直接入口就是入库实体，直接加在入口处即可

比如：

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

@Validated

/**
 * 新增用户
 */
@PreAuthorize("@ss.hasPermi('system:user:add')")
@Log(title = "用户管理", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@Validated @RequestBody SysUser user)
{

}

2、如果是方法中的，可以使用手动校验

无法在入口校验，因为上传是一个excel

@Log(title = "用户管理", businessType = BusinessType.IMPORT)
@PreAuthorize("@ss.hasPermi('system:user:import')")
@PostMapping("/importData")
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception{

}

可以在方法中入库的时候进行校验

userService.importUser

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

user 时一个SysUser实体对象，ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysUser.java，里面定义的那些注解规则就会进行校验

BeanValidators.validateWithException(validator, user);

xxl注解的实现

自定义校验器实现

ruoyi-common/src/main/java/com/ruoyi/common/xss

自定义文字复制剪贴指令

代码生成预览支持复制内容

v-clipboard 文字复制剪贴

ruoyi-ui/src/directive/module/clipboard.js

如何使用？ 官方文档内容复制 (opens new window)

示例：代码生成预览支持复制内容

ruoyi-ui/src/directive/module/clipboard.js

<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>


/** 复制代码成功 */
clipboardSuccess() {
  this.$modal.msgSuccess("复制成功");
},

路由支持单独配置菜单或角色权限

ruoyi-ui/src/router/index.js

主要是路由上配置以下两个

 * roles: ['admin', 'common']       // 访问路由的角色权限
 * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
 
 // 动态路由，基于用户权限动态去加载

可以单独对某个路由进行角色和菜单权限

具体的权限校验源码：ruoyi-ui/src/store/modules/permission.js

// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {
  const res = []
  routes.forEach(route => {
    if (route.permissions) {
      if (auth.hasPermiOr(route.permissions)) {
        res.push(route)
      }
    } else if (route.roles) {
      if (auth.hasRoleOr(route.roles)) {
        res.push(route)
      }
    }
  })
  return res
}

用户管理部门查询选择节点后分页参数初始

ruoyi-ui/src/views/system/user/index.vue

 // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery(); // 这一行
    },

以前点击左侧部门切换，用户可能分页已经在第二页，那么点击部门切换分页没有初始化(以前的this.getList())

修复打包后字体图标偶现的乱码问题

生产环境图标加载时乱码 (opens new window)

可以采用如下方案，在vue.config.js加入sassOptions选项（建议）。

ruoyi-ui/vue.config.js 已加入。

css: {
  loaderOptions: {
    sass: {
      sassOptions: { outputStyle: "expanded" }
    }
  }
},

详细的说明可以参考官方文档 https://webpack.js.org/loaders/sass-loader/#sassoptions

优化分页方法设置成通用方便灵活调用

ruoyi-common/src/main/java/com/ruoyi/common/core/controller/BaseController.java

 /**
 * 设置请求分页数据
 */
protected void startPage()
{
    PageUtils.startPage();
}

以前是写在controller里的startPage，单独拿出来了，因为不可能只在controller里调用分页

ruoyi-common/src/main/java/com/ruoyi/common/utils/PageUtils.java