小技巧与小问题总结

前端

ElementUI在表单只有一个input时按回车会刷新页面问题

原因：elementUI中的当el-form表单只存在一个el-input框时，会触发表单的默认提交事件

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

后端

SpringBoot配置文件引用Maven中配置的属性进行环境切换

下面的pom.xml中的配置，定义了dev和prod两个对应的环境，每个环境有不同的properties，然后springboot会读取对应的属性进行启动项目

<profiles>
    <profile>
        <id>dev</id>
        <properties>
            <!-- 环境标识，需要与配置文件的名称相对应 -->
            <profiles.active>dev</profiles.active>
            <logging.level>info</logging.level>
        </properties>
        <activation>
            <!-- 默认环境 -->
            <activeByDefault>true</activeByDefault>
        </activation>
    </profile>
    <profile>
        <id>prod</id>
        <properties>
            <profiles.active>prod</profiles.active>
            <logging.level>warn</logging.level>
        </properties>
    </profile>
</profiles>

Mybatis中通过表达式调用Java类中的方法

下面这段mybatis的xml中，通过”@org.dromara.common.mybatis.helper.DataBaseHelper@isMySql()”调用了isMySql方法进行判断当前的数据库类型

<if test="@org.dromara.common.mybatis.helper.DataBaseHelper@isMySql()">
    select table_name, table_comment, create_time, update_time
    from information_schema.tables
    where table_schema = (select database())
    order by create_time desc
</if>

下面的active: @profiles.active@就是引用maven中对应的属性

# Spring配置
spring:
  application:
    name: ${ruoyi.name}
  # 资源信息
  messages:
    # 国际化资源文件路径
    basename: i18n/messages
  profiles:
    active: @profiles.active@ #这个就是对应maven中的属性

后端通过响应流下载文件

在实际项目开发中有一些动态生成文件下载的需求，比如用户自己勾选需要的内容，将相关的资源打包成一个压缩包返回给用户下载（通过固定链接下载的不适用）

//后端不需要返回值，void；方法参数一定要有HttpServletResponse 
public void download(HttpServletResponse response){
    //省略打包压缩成文件的逻辑
    try {
        // 设置响应头内容
        response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition", "attachment; filename=" + zip.getName());
        response.setContentLength((int) zip.length());
        FileUtil.writeToStream(zip, response.getOutputStream());
    } finally {
        // 删除临时目录及其内容
        FileUtil.del(tempDir);
        FileUtil.del(zip);
    }
}

但是后端仅仅返回流是不行的，如果前端是使用axios发送的请求，即使请求收到流也无法触发浏览器的下载操作，前端还需要通过Blob构造下载链接才可以触发浏览器下载

接口定义

export function downloadLogImages(ids) {
  return request({
    url: '/identifyLog/download/' + ids,
    method: 'get',
    responseType: 'arraybuffer'  //这里需要将接收类型为arraybuffer
  })
}

页面逻辑

const res = await downloadLogImages(ids)
const url = window.URL.createObjectURL(new Blob([res], { type: 'application/octet-stream' }))
// 创建一个a标签
const a = document.createElement('a')
a.href = url
a.download = 'compressed.zip' // 设置下载文件的名称
document.body.appendChild(a)
// 触发下载
a.click()
// 移除a标签
document.body.removeChild(a)
// 释放URL对象
window.URL.revokeObjectURL(url)

前后端配合才可以实现通过ajax请求下载文件

运维