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;
}
@Override
public String getName() {
return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1].split(";")[0];
}
@Override
public String getOriginalFilename() {
return getName();
}
@Override
public String getContentType() {
return header.split(":")[1].split(";")[0];
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() {
return imgContent;
}
@Override
public InputStream getInputStream() {
return new ByteArrayInputStream(imgContent);
}
@Override
public 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;
}
@Override
public String getName() {
return "filename";
}
@Override
public String getOriginalFilename() {
return "originalFilename.jpg";
}
@Override
public String getContentType() {
return "image/jpeg";
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() throws IOException {
return imgContent;
}
@Override
public InputStream getInputStream() throws IOException {
return new ByteArrayInputStream(imgContent);
}
@Override
public 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 {
@Autowired
private 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();
// 格式错误, 返回与前端约定的error
if (!isLegal) {
picUploadResult.setStatus("error");
return picUploadResult;
}
// 生成唯一的文件名
String originalFileName = multipartFile.getOriginalFilename();
String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
String uniqueFileName = UUID.randomUUID().toString() + fileExtension; // 包含UUID的文件名
// 3. 上传至阿里OSS
try {
// 初始化OSSClient
OSS 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);
// uid
picUploadResult.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 resource = gson.fromJson(panelGroupRequest.getStaticResource(), Map.class); Map 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 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; i2.修改模板管理功能逻辑（PanelTemplateService类）
- 注入文件上传工具类
@Autowired private FileUtil fileUtil;
- 修改原有逻辑代码
//Store static resource into the server staticResourceService.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 resource = gson.fromJson(staticResource, Map.class); Map 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; i7.配置文件中添加阿里云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
- 修改原有逻辑代码
- 注入文件上传工具类
- 修改原有代码逻辑
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
