DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了

2024-04-09 12:36
文章标签 镜像 阿里 实现 源码 部署 docker 存储 一篇 版本 资源 oss 静态 就够 dataease v1.18

本文主要是介绍DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

修改DataEase实现静态资源阿里云OSS存储

后端源码文件读取配置类配置

1.阿里云OSS配置类
/*** ClassName AliyunConfig.java* author shuyixiao* version 1.0.0* Description 阿里云OSS配置* createTime 2024年04月03日 10:03:00*/
@Data
@Configuration
public class AliyunConfig {// 地域节点@Value("${aliyun.oss.endpoint}")private String endpoint;@Value("${aliyun.accessKeyId}")private String accessKeyId;@Value("${aliyun.accessKeySecret}")private String accessKeySecret;@Value("${aliyun.oss.bucketName}")private String bucketName;@Value("${aliyun.oss.urlPrefix}")private String urlPrefix;}
2.图片文件上传base64转MultipartFile工具类
public class Base64DecodedMultipartFile implements MultipartFile {private final byte[] imgContent;private final String header;public Base64DecodedMultipartFile(byte[] imgContent, String header) {this.imgContent = imgContent;this.header = header;}@Overridepublic String getName() {return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1].split(";")[0];}@Overridepublic String getOriginalFilename() {return getName();}@Overridepublic String getContentType() {return header.split(":")[1].split(";")[0];}@Overridepublic boolean isEmpty() {return imgContent == null || imgContent.length == 0;}@Overridepublic long getSize() {return imgContent.length;}@Overridepublic byte[] getBytes() {return imgContent;}@Overridepublic InputStream getInputStream() {return new ByteArrayInputStream(imgContent);}@Overridepublic void transferTo(File dest) throws IOException, IllegalStateException {try (FileOutputStream fos = new FileOutputStream(dest)) {fos.write(imgContent);}}}
3.图片静态文件解析工具类
public class Base64DecodedStaticFile implements MultipartFile {private byte[] imgContent;public Base64DecodedStaticFile(byte[] imgContent) {this.imgContent = imgContent;}@Overridepublic String getName() {return "filename";}@Overridepublic String getOriginalFilename() {return "originalFilename.jpg";}@Overridepublic String getContentType() {return "image/jpeg";}@Overridepublic boolean isEmpty() {return imgContent == null || imgContent.length == 0;}@Overridepublic long getSize() {return imgContent.length;}@Overridepublic byte[] getBytes() throws IOException {return imgContent;}@Overridepublic InputStream getInputStream() throws IOException {return new ByteArrayInputStream(imgContent);}@Overridepublic void transferTo(java.io.File dest) throws IOException, IllegalStateException {// 这里根据你的需求实现文件传输的逻辑}}
4.阿里云oos响应配置类
@Getter
@Setter
public class PicUploadResult {private String uid;private String name;private String status;private String response;private String linkProps;}
5.文件上传工具类
@Component
public class FileUtil {@Autowiredprivate AliyunConfig aliyunConfig;// 允许上传的格式private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg", ".jpeg", ".gif", ".png"};public PicUploadResult upload(MultipartFile multipartFile) {// 1. 对上传的图片进行校验: 这里简单校验后缀名// 另外可通过ImageIO读取图片的长宽来判断是否是图片,校验图片的大小等。// TODO 图片校验boolean isLegal = false;for (String type : IMAGE_TYPE) {if (StringUtils.endsWithIgnoreCase(multipartFile.getOriginalFilename(), type)) {isLegal = true;break;  // 只要与允许上传格式其中一个匹配就可以}}PicUploadResult picUploadResult = new PicUploadResult();// 格式错误, 返回与前端约定的errorif (!isLegal) {picUploadResult.setStatus("error");return picUploadResult;}// 生成唯一的文件名String originalFileName = multipartFile.getOriginalFilename();String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));String uniqueFileName = UUID.randomUUID().toString() + fileExtension; // 包含UUID的文件名// 3. 上传至阿里OSStry {// 初始化OSSClientOSS ossClient = new OSSClientBuilder().build(aliyunConfig.getEndpoint(), aliyunConfig.getAccessKeyId(), aliyunConfig.getAccessKeySecret());ossClient.putObject(aliyunConfig.getBucketName(), uniqueFileName, new ByteArrayInputStream(multipartFile.getBytes()));} catch (IOException e) {e.printStackTrace();// 上传失败picUploadResult.setStatus("error");return picUploadResult;}// 上传成功picUploadResult.setStatus("done");// 文件名(即直接访问的完整路径)picUploadResult.setName(aliyunConfig.getUrlPrefix() + uniqueFileName);// uidpicUploadResult.setUid(String.valueOf(System.currentTimeMillis()));return picUploadResult;}}
6.DataEase源码部分适配OSS修改
1.修改应用管理功能逻辑（PanelAppTemplateService类）
  • 注入文件上传工具类
@Autowired
private FileUtil fileUtil;
  • 修改原有代码逻辑
//Store static resource into the server// 缩略图处理String snapshotName = "app-template-" + request.getId() + ".jpeg";String base64Image = request.getSnapshot().split(",")[1];String imageType = request.getSnapshot().split(";")[0].split(":")[1];byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);MultipartFile multipartFile = new Base64DecodedMultipartFile(imageBytes, imageType);// 调用上传方法PicUploadResult uploadResult = fileUtil.upload(multipartFile);staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", ""));requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);
//            requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);requestTemplate.setSnapshot(uploadResult.getName());// 静态资源小图处理Gson gson = new Gson();PanelGroupRequest panelGroupRequest = gson.fromJson(request.getPanelInfo(), PanelGroupRequest.class);
//            panelGroupRequest.setPanelData(JSON.toJSONString(jsonArray));Map<String, String> resource = gson.fromJson(panelGroupRequest.getStaticResource(), Map.class);Map<String, String> imageUrl = new HashMap<>();for (String s : resource.keySet()) {String imageCode = resource.get(s);byte[] bytes = DatatypeConverter.parseBase64Binary(imageCode);PicUploadResult picUploadResult = fileUtil.upload(new Base64DecodedStaticFile(bytes));imageUrl.put(s, picUploadResult.getName());}// 数据库缩略图存储处理String staticResource = panelGroupRequest.getStaticResource();Map<String,String> staticResourceMap= gson.fromJson(staticResource, Map.class);for (String s : staticResourceMap.keySet()) {String s1 = staticResourceMap.get(s);if (s.contains("static-resource")) {// 找到匹配项，修改为阿里云oos存储地址for (String string : imageUrl.keySet()) {if (string.equals(s)){staticResourceMap.remove(s);staticResourceMap.put(imageUrl.get(s), s1);}}}}String panelData = panelGroupRequest.getPanelData();JSONArray jsonArray = JSON.parseArray(panelData);// 遍历数组，寻找特定的 propValue 值for (int i = 0; i < jsonArray.size(); i++) {JSONObject obj = jsonArray.getJSONObject(i);if (obj.containsKey("propValue") && obj.getString("propValue").contains("/static-resource/")) {// 找到匹配项，添加前缀obj.put("propValue", imageUrl.get(obj.get("propValue")));}}panelGroupRequest.setPanelData(JSON.toJSONString(jsonArray));panelGroupRequest.setStaticResource(gson.toJson(staticResourceMap));requestTemplate.setPanelInfo(gson.toJson(panelGroupRequest));
2.修改模板管理功能逻辑（PanelTemplateService类）
  • 注入文件上传工具类
@Autowired
private FileUtil fileUtil;
  • 修改原有逻辑代码
//Store static resource into the serverstaticResourceService.saveFilesToServe(request.getStaticResource());// 缩略大图处理String snapshotName = "template-" + request.getId() + ".jpeg";String base64Image = request.getSnapshot().split(",")[1];String imageType = request.getSnapshot().split(";")[0].split(":")[1];byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);MultipartFile multipartFile = new Base64DecodedMultipartFile(imageBytes, imageType);// 调用上传方法PicUploadResult uploadResult = fileUtil.upload(multipartFile);staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", ""));request.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);// 文件中静态资源小图处理String staticResource = request.getStaticResource();Gson gson = new Gson();Map<String, String> resource = gson.fromJson(staticResource, Map.class);Map<String, String> imageCode = new HashMap<>();for (String s : resource.keySet()) {String base64Picture = resource.get(s);byte[] bytes = DatatypeConverter.parseBase64Binary(base64Picture);PicUploadResult picUploadResult = fileUtil.upload(new Base64DecodedStaticFile(bytes));imageCode.put(s, picUploadResult.getName());}String templateData = request.getTemplateData();JSONArray jsonArray = JSON.parseArray(templateData);for (int i = 0; i < jsonArray.size(); i++) {JSONObject obj = jsonArray.getJSONObject(i);if (obj.containsKey("propValue") && obj.getString("propValue").contains("/static-resource/")) {// 找到匹配项，添加前缀obj.put("propValue", imageCode.get(obj.get("propValue")));}}request.setTemplateData(JSON.toJSONString(jsonArray));
//                request.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName);request.setSnapshot(uploadResult.getName());
7.配置文件中添加阿里云OSS配置

阿里云oss配置

# 阿里云oss配置
# Aliyun OSS 配置
# 访问密钥ID，用于标识用户
aliyun.accessKeyId=xxxxxxxxxxxxxx
# 访问密钥密文，用于验证用户的身份
aliyun.accessKeySecret=xxxxxxxxxxxxxx
# OSS服务的访问域名
aliyun.oss.endpoint=xxxxxxxxxxxxxx
# OSS中的存储桶名称
aliyun.oss.bucketName=xxxxxxxxxxxxxx
#访问OSS服务的URL前缀
aliyun.oss.urlPrefix=xxxxxxxxxxxxxx

前端源码样式修改为自己喜欢的即可

前后端不分离单体部署

1.源码获取

GitHub地址
在这里插入图片描述
Gitee地址

在这里插入图片描述

2.配置源码信息
后端代码

注意事项：

注意V1.18代码的配置方式为JDK11版本
需要后端POM文件中有的资源依赖拉取不下来，可以链接：https://pan.baidu.com/s/1UYKk9R96B6dBUEqsRgjJhA 提取码：x8wr 这里获取然后直接替换即可
在这里插入图片描述
配置启动类配置处的配置文件信息，由于是在windows的环境中，下图是Linux中的文件写法，因此偷懒一些可以直接就是在windows的项目的根路径下建立相似的路径文件信息即可，详情见下图
在这里插入图片描述
在这里插入图片描述
配置配置文件中的数据库信息，数据库信息比较私密因此直接打马赛克了~
在这里插入图片描述

前端代码

注意事项：由于使用的是V1.18版本左右的前端代码，因此node版本不宜太高16.0.0左右即可。

查看前端项目的打包配置信息可以得到，运行需要的指令信息
在这里插入图片描述

3.Docker打包部署
首先在项目根文件夹下面添加数据库信息的配置文件

在这里插入图片描述

去除后端POM文件中移动端部分资源

在这里插入图片描述##### 修改前端POM文件中node和npm版本
在这里插入图片描述

分别打包前后端文件资源

在这里插入图片描述

执行Docker打包指令得到镜像文件
 # 这里我需要说明一下就是版本号随着DataEase官方版本给就可以，这里我写的时候使用1.18.15就写这个了docker build --build-arg IMAGE_TAG=1.18.15 -t your-image-name:tag .

在这里插入图片描述
在这里插入图片描述

运行镜像文件得到前端展示页面

在这里插入图片描述

附录一下打包和启动命令
docker build --build-arg IMAGE_TAG=1.18.15 -t core-backend-image-v1.18.15:1.18.15 .
docker run -d -p 8181:8181 core-backend-image-v1.18.15:1.18.15

前后端分离单体部署

后端代码
1.修改后端代码添加对应上下文

在这里插入图片描述##### 2.修改后端短链共享代码部分
在这里插入图片描述

3.pom文件中去除掉前端资源打包内容

在这里插入图片描述

4.执行Docker打包，步骤和上述前端后不分离单体部署命令一致不赘述了

前端代码修改

前端代码修改下面两处配置信息完成接口路径上下文配置

在这里插入图片描述
在这里插入图片描述

执行前端打包后放置与nginx服务器
# 打包命令：
npm run build

这篇关于DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/888168。

相关文章

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
python管理工具之conda安装部署及使用详解

python管理工具之conda安装部署及使用详解

《python管理工具之conda安装部署及使用详解》这篇文章详细介绍了如何安装和使用conda来管理Python环境,它涵盖了从安装部署、镜像源配置到具体的conda使用方法,包括创建、激活、安装包... 目录pytpshheraerUhon管理工具：conda部署+使用一、安装部署1、 下载2、 安装3
阅读更多...
使用MongoDB进行数据存储的操作流程

使用MongoDB进行数据存储的操作流程

《使用MongoDB进行数据存储的操作流程》在现代应用开发中,数据存储是一个至关重要的部分,随着数据量的增大和复杂性的增加,传统的关系型数据库有时难以应对高并发和大数据量的处理需求,MongoDB作为... 目录什么是MongoDB？MongoDB的优势使用MongoDB进行数据存储1. 安装MongoDB
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
IDEA如何切换数据库版本mysql5或mysql8

IDEA如何切换数据库版本mysql5或mysql8

《IDEA如何切换数据库版本mysql5或mysql8》本文介绍了如何将IntelliJIDEA从MySQL5切换到MySQL8的详细步骤,包括下载MySQL8、安装、配置、停止旧服务、启动新服务以及... 目录问题描述解决方案第一步第二步第三步第四步第五步总结问题描述最近想开发一个新应用，想使用mysq
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2