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<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 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<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