SpringBoot+Vue+ElementUI+Mybatis+SpringSecurity编写OSS文件上传下载系统所遇到的问题记录和解决方案

前后端基本实现思路参考链接如下

https://www.jianshu.com/p/d2c21f46c8cf

个人前端实现思路

不使用vue脚手架,而是使用简单的html进行实现。将所需的JS和CSS文件下载到本地后引入
在这里插入图片描述

后端问题1

前端发送请求时响应为404,后端正常处理,原因是controller没有添加响应体,可将注解改为@RestController解决问题或者给单独的方法上方加上@ResponseBody

请求的跨域问题

解决方案参考https://blog.csdn.net/qq_43719932/article/details/113000563
其中代码行:corsConfiguration.addAllowedOrigin("");/允许访问的客户端域名/
需要改为:corsConfiguration.addAllowedOriginPattern("
");/允许访问的客户端域名/
否则会报错

获取用户目录

在这里插入图片描述
那么用户的下载目录就应该是
String usrDH = System.getProperty(“user.home”) + “/” + “Downloads”;

上传下载带进度条实现的方法和遇到的问题

实现思路参考链接https://blog.csdn.net/qq_42910468/article/details/109325375

1.上传的异步方法编写时记得调用OSS上传带进度条中的传文件输入流的方法
在这里插入图片描述
2.上传文件的监听类得稍许改动,OSS官方文档的写法不能达到理想效果

得将上传的监听类的文件总字节数设置为静态变量,再写个静态方法,在serviceImpl实现类中为上传文件的总大小赋值。
在这里插入图片描述

在这里插入图片描述
赋值这里有一个需要注意的点,不能用MultipartFile类的getBytes加.length()的方法来获取长度,而应该用.getSize。否则的话上传的文件过大会导致.getBytes方法存入一个巨大的byte数组,从而出现OOM问题,会报错。报java heap space的错。

3.上传文件前端代码实现思路
在这里插入图片描述
4.下载文件前端代码实现思路
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你解答。以下是一个简单的实现步骤: 1. 创建数据库表 首先,你需要在 MySQL 数据库中创建一个表来存储搜索数据。例如,可以创建一个名为 `product` 的表,包含 `id`、`name` 和 `description` 三个字段。 ```sql CREATE TABLE product ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255), description TEXT ); ``` 2. 创建后端服务 使用 Spring Boot 和 MyBatis 框架来创建一个后端服务,可以接收搜索请求并从数据库中获取数据。具体实现步骤如下: - 添加相关依赖 在 `pom.xml` 文件中添加 MyBatis 和 MySQL 相关依赖: ```xml <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.0.6</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.25</version> </dependency> ``` - 配置数据库连接 在 `application.properties` 中添加数据库连接配置: ``` spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=false spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver ``` - 创建数据模型 创建一个名为 `Product` 的 Java 类,用于映射数据库表中的数据: ```java public class Product { private Integer id; private String name; private String description; // 省略 getter 和 setter 方法 } ``` - 创建 MyBatis 映射文件 创建一个名为 `ProductMapper.xml` 的 MyBatis 映射文件,用于定义 SQL 语句和数据模型的映射关系: ```xml <mapper namespace="com.example.demo.mapper.ProductMapper"> <select id="search" resultType="com.example.demo.model.Product"> SELECT * FROM product WHERE name LIKE CONCAT('%', #{keyword}, '%') </select> </mapper> ``` - 创建数据访问层 创建一个名为 `ProductMapper` 的 Java 接口,用于定义数据访问方法: ```java @Mapper public interface ProductMapper { List<Product> search(String keyword); } ``` - 创建控制器 创建一个名为 `ProductController` 的 Spring MVC 控制器,用于接收搜索请求和返回搜索结果: ```java @RestController public class ProductController { @Autowired private ProductMapper productMapper; @GetMapping("/search") public List<Product> search(@RequestParam("keyword") String keyword) { return productMapper.search(keyword); } } ``` 至此,后端服务的实现就完成了。 3. 创建前端界面 在前端界面中,可以使用 VueElementUI 的 `el-input` 和 `el-table` 组件来实现搜索和显示数据的功能。例如,可以实现如下代码: ```html <template> <div> <el-input v-model="keyword" placeholder="请输入搜索关键字" @keyup.enter.native="search" /> <el-table :data="data"> <el-table-column prop="name" label="名称" /> <el-table-column prop="description" label="描述" /> </el-table> </div> </template> <script> export default { data() { return { keyword: '', data: [] }; }, methods: { async search() { const { data } = await this.$http.get('/search', { params: { keyword: this.keyword } }); this.data = data; } } }; </script> ``` 这段代码会创建一个包含搜索输入框和显示搜索结果的界面,当用户输入关键字并按下回车键时,会向后端发送搜索请求,并将结果显示在表格中。 以上就是一个简单的使用 Spring Boot、MyBatisVueElementUI 来创建搜索功能的实现步骤。当然,具体实现方式还需要根据你的具体需求来进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值