使用ruoyi框架遇到的问题修改记录

使用ruoyi框架遇到的问题修改记录

文章目录

  • 使用ruoyi框架遇到的问题修改记录
    • 上传后文件名改变
    • 上传时设置单多文件及其他选项
    • 附件显示文件名,点击下载
    • 附件直接显示图片
    • 表格固定列
    • 查询数据库作为下拉选项值
    • 字典使用
    • 加入json递归注解,防止无限递归内存溢出
    • 中文路径访问不到问题
    • 前端传过来的 id 后端接收到后加入了000,不对

上传后文件名改变

image-20231024202729118

上传时设置单多文件及其他选项

Html

<div class="form-group">
            <label class="col-sm-3 control-label">附件
                :</label>
            <div class="col-sm-8">
                <input type="hidden" name="attachment">
                <div class="file-loading">
                    <input class="singleFile" name="file" type="file" id="attachment">
                </div>
<!--                <div class="file-loading">-->
<!--                    <input class="form-control multipleFile" id="attachment" name="files" type="file" multiple>-->
<!--                </div>-->
            </div>
        </div>

Js代码

 // 单图上传
    $(".singleFile").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        var rsp = data.response;
        log.info("return url:" + rsp.url)
        log.info("reutrn fileName:" + rsp.fileName)
        $("input[name='" + event.currentTarget.id + "']").val(rsp.fileName)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })

    // 多图上传
    $(".multipleFile").fileinput({
        uploadUrl: ctx + 'common/uploads',
        maxFileCount: 1,
        uploadAsync: false,
        autoReplace: true
    }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        //var rsp = data.data.name;
        var fileJson = data.response.data;
        var urlList = [];
        for (var i in fileJson) {
            console.log("return data.url:" + fileJson[i].url)
            console.log("reutrn data.name:" + fileJson[i].name)
            urlList.push(fileJson[i].name)
            urlList.join(",")
        }
        $("input[name='" + event.currentTarget.id + "']").val(data.response.data[0].name)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })

附件显示文件名,点击下载

 {
                    field: 'attachment',
                    title: '附件',
                    formatter: function (value, row, index) {
                        var prefix = ctx + row.attachment;
                        // 图片预览(注意:如存储在本地直接获取数据库路径,如有配置context-path需要使用ctx+路径)
                        // 如:/profile/upload/2019/08/08/3b7a839aced67397bac694d77611ce72.png
                        return  $.table.downFile(value, row, index);
                    }
                },
// 文件下载
            downFile: function (value, row, index) {
                const http = value.split('?')[0];
                const dot = http.lastIndexOf(".");
                const ext = http.substr(dot + 1);

                let file = http.split('/');
                let name = file[file.length - 1];
                if ($.common.isNotEmpty(value)) {
                    if(isAssetTypeAnImage(ext)) {
                        let imgWtdth=0;
                        let imgHeight=0;
                        let img = new Image();
                        if(img.complete){
                            // 打印
                            imgWtdth=img.width;
                            imgHeight=img.height;
                        }else{
                            // 加载完成执行
                            img.onload = function(){
                                // 打印
                                imgWtdth=img.width;
                                imgHeight=img.height;
                            }
                        }
                        img.src = value;
                        imgWtdth=img.width;
                        imgHeight=img.height;

                        if(browserRedirect()){
                            const w = document.documentElement.scrollWidth || document.body.scrollWidth;
                            const h = document.documentElement.scrollHeight || document.body.scrollHeight;

                            if(imgWtdth>w || imgHeight >h){
                                return $.table.imageView(value,h*0.8,imgWtdth*h/imgHeight*0.8);
                            }else {
                                return $.table.imageView(value);
                            }
                        }else {
                            const w2 = document.body.clientWidth || document.documentElement.clientWidth;
                            const h2=  document.body.clientHeight || document.documentElement.clientHeight;
                            // if(imgWtdth === 0 || imgHeight === 0 ){
                            //     return $.table.imageView(value,h2*0.8,w2*0.8);
                            // }
                            if(imgWtdth>w2 || imgHeight >h2 || imgWtdth === 0 || imgHeight === 0){
                                    return $.table.imageView(value,imgHeight*w2/imgWtdth*0.8,w2*0.8);
                            }else {
                                return $.table.imageView(value);
                            }
                        }
                    }else{
                        return $.common.sprintf("<a href='%s' download='%s'>%s</a>",value,name,name);
                    }
                } else {
                    return $.common.nullToStr(value);
                }
            },

//判断文件是否为图片
function isAssetTypeAnImage(ext) {
    return [
        'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
    indexOf(ext.toLowerCase()) !== -1;
}

// 判断设备是移动还是pc
function browserRedirect() {
    //document.writeln("您的浏览设备为:"+getDevice());
    if(!window.navigator) {
        //alert("提示","当前设备:移动端APP")
        return false;
    }
    else{
        if(/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent)){
            //alert("当前设备:移动端H5");
            return false;
        }
        else{
           // alert("当前设备:PC端");
            return true;
        }
    }
}

附件直接显示图片

image-20231024202817065

表格固定列

image-20231024202852334

查询数据库作为下拉选项值

image-20231024202919169

这自动生成代码,已经做了修改,可以获取 *****all();

字典使用

image-20231024203157416

使用自动生成代码,添加使用的字典,手动修改代码或添加,请参考自动生成后代码

加入json递归注解,防止无限递归内存溢出

中文路径访问不到问题

\ruoyi-framework\src\main\java\com\ruoyi\framework\config\ShiroConfig.java

import org.apache.shiro.web.filter.InvalidRequestFilter;
import org.apache.shiro.web.filter.mgt.DefaultFilter;

 /**

- Shiro过滤器配置
/
@Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager)
{
   ......

//关闭 中文路径 校验 ckinder 上传和打开中文名字文件
        InvalidRequestFilter invalidRequestFilter = new InvalidRequestFilter();
        invalidRequestFilter.setBlockNonAscii(false);
        shiroFilterFactoryBean.getFilters().put(DefaultFilter.invalidRequest.name(), invalidRequestFilter);

......
}

image-20231024203445317

前端传过来的 id 后端接收到后加入了000,不对

image-20231024203955841

解决方法:

在pom.xml 中加入

org.springframework spring-webmvc 5.3.9 compile

然后,在E:\monitor\websit\ltt-websit\ruoyi-common\src\main\java\com\ruoyi\common\config

增加 WebConfiguration.java 文件,内容如下,就是将long转string

package com.ruoyi.common.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.List;

/**
 * @description: WebConfiguration
 * @Author: llt
 * @date: Created in 2021/9/9 17:46
 *@version: 0.1.0
 * @modified By:
 */
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
    /**
     * 序列化json时,将所有的long变成string
     * 因为js中得数字类型不能包含所有的java long值
     */
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter();
        ObjectMapper objectMapper = new ObjectMapper();
        SimpleModule simpleModule=new SimpleModule();
        simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
        simpleModule.addSerializer(Long.TYPE, ToStringSerializer.instance);
        objectMapper.registerModule(simpleModule);
        jackson2HttpMessageConverter.setObjectMapper(objectMapper);
        converters.add(0,jackson2HttpMessageConverter);
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/103530.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从零开始学习wpsjs

1.这是一个简单的wpsjs学习文档&#xff0c;我是边学习wpsjs边记录学习的&#xff0c;希望对您的学习有所帮助 开发事项&#xff1a; 全局安装wpsjs:npm install -g wpsjsWpsjs create HelloWps 安装wps npm install -g wpsjs 新建一个wps加载项 输入命令wpsjs create HelloW…

塔式服务器介绍

大家都知道服务器分为机架式服务器、刀片式服务器、塔式服务器三类&#xff0c;今天小编就分别讲一讲这三种服务器&#xff0c;第三篇先来讲一讲塔式服务器的介绍。 塔式服务器定义&#xff1a;塔式服务器的外观和普通电脑差不多&#xff0c;直立放置。机箱比较大&#xff0c;服…

药房商城小程序便捷购药体验,找药买药一键操作

在我们的生活中&#xff0c;偶尔会遇到身体不适或需要常见药品的情况。然而&#xff0c;传统的购药方式往往会浪费大量的时间和精力。幸运的是&#xff0c;现在有了药房商城小程序&#xff0c;仅需一键操作&#xff0c;您就能享受到便捷、高效的购药体验。 药房商城小程序是用于…

聊聊分布式架构10——Zookeeper入门详解

目录 01ZooKeeper的ZAB协议 ZAB协议概念 ZAB协议基本模式 消息广播 崩溃恢复 选举出新的Leader服务器 数据同步 02Zookeeper的核心 ZooKeeper 的核心特点 ZooKeeper 的核心组件 选举算法概述 服务器启动时的Leader选举 服务器运行期间的Leader选举 03ZooKeeper的…

Netty核心源码剖析

Netty 线程模型 Netty高并发高性能架构设计精髓 主从Reactor线程模型NIO多路复用非阻塞无锁串行化设计思想支持高性能序列化协议零拷贝(直接内存的使用)ByteBuf内存池设计灵活的TCP参数配置能力并发优化 无锁串行化设计思想 在大多数场景下&#xff0c;并行多线程处理可以提…

安卓使用android studio跨进程通信之AIDL

我写这篇文章不想从最基础的介绍开始,我直接上步骤吧. 1.创建服务端 1.1:创建服务端项目:我的as版本比较高,页面就是这样的 1.2:创建AIDL文件,右键项目,选中aidl aidl名字可以自定义也可以默认 basicTypes是自带的,可以删掉,也可以不删,然后把你自己所需的接口写上去 1.3:创建…

CSS 两栏布局

目录 CSS两栏布局&#xff08;左列定宽&#xff0c;右列自适应宽&#xff09; 方法一&#xff1a;浮动margin 方法二&#xff1a;定位margin 方法三&#xff1a;浮动BFC 方法四&#xff1a;Flex布局 方法五&#xff1a;able布局 CSS两栏布局&#xff08;左列不定宽&#…

uniapp 自定义导航栏

自定义导航栏 修改 pages.json 在 pages.json 中将 navigateionStyle 设为 custom 新建 systemInfo.js systemInfo.js 用来获取当前设备的机型系统信息&#xff0c;放在 common 目录下 /*** 此 js 文件管理关于当前设备的机型系统信息*/ const systemInfo function() {/***…

信息检索与数据挖掘 | 【实验】排名检索模型

文章目录 &#x1f4da;实验内容&#x1f4da;相关概念&#x1f4da;实验步骤&#x1f407;分词预处理&#x1f407;构建倒排索引表&#x1f407;计算query和各个文档的相似度&#x1f407;queries预处理及检索函数&#x1f525;对输入的文本进行词法分析和标准化处理&#x1f…

从0开始在Vscode中搭建Vue2/3项目详细步骤

1.安装node.js:Node.js下载安装及环境配置教程【超详细】_nodejs下载_WHF__的博客-CSDN博客 node.js自带npm&#xff0c;无需单独安装。 验证&#xff1a; node -v npm -v 2.先简单创建一个空文件夹&#xff0c;vscode进入该文件夹&#xff0c;并打开终端。 3.安装cnpm&…

【Gensim概念】03/3 NLP玩转 word2vec

第三部分 对象函数 八 word2vec对象函数 该对象本质上包含单词和嵌入之间的映射。训练后&#xff0c;可以直接使用它以各种方式查询这些嵌入。有关示例&#xff0c;请参阅模块级别文档字符串。 类型 KeyedVectors 1&#xff09; add_lifecycle_event(event_name, log_level2…

OpenCV视频车流量识别详解与实践

视频车流量识别基本思想是使用背景消去算法将运动物体从图片中提取出来&#xff0c;消除噪声识别运动物体轮廓&#xff0c;最后&#xff0c;在固定区域统计筛选出来符合条件的轮廓。 基于统计背景模型的视频运动目标检测技术&#xff1a; 背景获取&#xff1a;需要在场景存在…

React 框架

1、React 框架简介 1.1、介绍 CS 与 BS结合&#xff1a;像 React&#xff0c;Vue 此类框架&#xff0c;转移了部分服务器的功能到客户端。将CS 和 BS 加以结合。客户端只用请求一次服务器&#xff0c;服务器就将所有js代码返回给客户端&#xff0c;所有交互类操作都不再依赖服…

禁止拷贝文件到U盘的解决办法

禁止拷贝文件到U盘的解决办法 安企神U盘管理系统下载使用 说到这问题&#xff0c;大多情况下是企业的需求&#xff0c;很多公司电脑中都保存着极为重要的数据&#xff0c;这些数据往往是不能传播的&#xff0c;所以此时就需要禁止拷贝文件到U盘来防止公司数据被泄密。 禁止拷…

python造测试数据存到excel

代码&#xff1a; from ExcelHandler import ExcelHandler from faker import Faker # 导入faker库的Faker方法 # ↓默认为en_US&#xff0c;只有使用了相关语言才能生成相对应的随机数据 fkFaker(locale"zh_CN")def create_date():m int(input(请输入要造的数据条…

自动驾驶的商业应用和市场前景

自动驾驶技术已经成为了交通运输领域的一项重要创新。它不仅在改善交通安全性和效率方面具有巨大潜力&#xff0c;还为各种商业应用提供了新的机会。本文将探讨自动驾驶在交通运输中的潜力&#xff0c;自动驾驶汽车的制造商和技术公司&#xff0c;以及自动驾驶的商业模式和市场…

基于OpenCV批量分片高像素影像

基于OpenCV批量分片高像素影像 为了更加精确的诊断和治疗&#xff0c;医疗影像往往是大像素&#xff08;1920x1080&#xff09;或超大像素图像&#xff08;4k图像4096x2160&#xff09;。这类图像的尺寸与深度学习实验数据常见尺寸&#xff08;227x227&#xff0c;或32x32&…

OpenCV实现物体尺寸的测量

一 &#xff0c;项目分析 物体尺寸测量的思路是找一个确定尺寸的物体作为参照物&#xff0c;根据已知的计算未知物体尺寸。 如下图所示&#xff0c;绿色的板子尺寸为220*300&#xff08;单位&#xff1a;毫米&#xff09;&#xff0c;通过程序计算白色纸片的长度。 主要是通过…

我国有多少个港口?

港口是什么&#xff1f; 港口是海洋运输中不可或缺的重要设施之一&#xff0c;是连接陆路和水路运输的重要节点。港口通常是指位于沿海地区的水陆交通枢纽&#xff0c;是船舶停靠、装卸货物、储存物资和维修船只的场所。港口一般由码头、泊位、仓库、货场、客运站等设施组成&a…

数据结构和算法概述

什么是数据结构&#xff1f; 官方解释&#xff1a; 数据结构是一门研究非数值计算的程序设计问题中的操作对象&#xff0c;以及他们之间的关系和操作等相关问题的学科。 大白话&#xff1a; 数据结构就是把数据元素按照一定的关系组织起来的集合&#xff0c;用来组织和存储…