数据卷的使用

在实际开发中,上传用户头像,上传文件等是一些很常见的功能,上传的这些文件将如何存储,在Methodot平台,是如何做到这些数据的持久化呢?为此,我们简单改造一下我们的Java + Mysql模板来简单说明一下数据卷的使用方式。

数据卷是Methodot提供的一种存储抽象,使用数据卷可以将您的数据和应用程序相对独立,多个应用程序可使用同一个数据卷来共享数据卷内部的数据。应用本身的状态(起、停或更新)都不会影响到数据卷内的数据。

  1. 首先,使用云端编码打开Java代码

  2. 在src/.../servlet/CTGServlet.java文件中,将class添加@MultipartConfig

    @MultipartConfig
    public class CTGServlet extends HttpServlet {
    
    }

    并改造doPost方法代码段如下(为使用该功能,需要更新一下pom.xml中依赖版本)

    
            javax.servlet.jsp
            javax.servlet.jsp-api
            2.3.0
            provided
    
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String path = req.getRequestURI();
    
        OutputStream out = null;
        InputStream in = null;
        if (path.contains("/upload")) {
            Part part = req.getPart("file");
            try {
                File file = new File("/test/download/file/test.html");
    
                out = new FileOutputStream(file);
                in = part.getInputStream();
                int read = 0;
                byte[] bytes = new byte[4096];
                while ((read = in.read(bytes)) != -1) {
                    out.write(bytes, 0, read);
                }
                file.setReadable(true,false);               
            } catch (FileNotFoundException e) {
                e.fillInStackTrace();
            } finally { 
                out.close();
                in.close();
            }
    
        }
    
        if (path.contains("/cloudtogo")) {
            resp.setHeader("Content-Type","application/json;charset=utf8");
            CTGService ctgService = new CTGService();
    
            PrintWriter printWriter = resp.getWriter();
            printWriter.print(ctgService.getShowParam().toString());
        }
    
    }
  3. 在webapp/.../index.html文件中添加脚本引入upload.js与上传文件入口

    
        
        Title
        
        
    
    
    

    已连接到MySQL(JAVA): #

    #
    #
    #
    #
    #
    #
    id framework language create_time

    上传文件 #

  4. 在webapp/js/下新建upload.js文件

    $(document).ready(function () {
            var data = new FormData(),
                $file = document.querySelector("#file"),
                $showFile = document.querySelector("#showFile");
            $file.addEventListener("change",function(e) {
                    var files = e.target.files;
                    if (files && files[0]) {
                        data.append("file",files[0]);
                        $.ajax({
                            url: "/upload",
                            type: 'post',
                            data: data,
                            enctype: "multipart/form-data",
                            processData: false,
                            contentType: false,
                            success: function(data)
                            {
                                alert("您的文件已上传");
                            }
                        });
                    }
            });
    
            $showFile.addEventListener("click", function(e) {
                $.ajax({
                    url: "/file",
                    type: "get",
                    data: "",
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        console.info(data.length);
                        //alert(data.data);
                    }
                });
            })
    });
  5. 在webapp/WEB-INF/web.xml文件中\<servlet-mapping>添加新的/upload配置

    
        ctg
        /cloudtogo
        /upload
    
  6. 代码修改部分就配置好了,在云端编码将以上修改 提交并推送后,修改原有架构图中java组件配置,增加存储路径的配置,这里的路径需要根据步骤2中doPost方法改造(将上传的文件存储于/test/download/file/test.html),于是在存储路径栏中填入/test/download/file,其余不变,保存此架构图,并发布

  7. 在发布页配置中,您会发现比默认的模板新增了java>存储路径的配置

  8. 点击下拉图标,您可以在此新建数据卷,或选择已经创建好的数据卷(数据卷的创建

  9. 选择好数据卷后,您就可以发布此架构图,发布成功后查看如下

  10. 此处我们上传一个本地的test.html文件

接下来的步骤将展示如何使用项目内的数据卷,查看我们上传的html文件 #

  1. 在此项目内,设计模块下点击新建架构图

  2. 在蓝图设计中,选择镜像组件拖入右侧区域

  3. 选择nginx镜像(此处可选择我们平台内部已有的nginx镜像)

  4. 配置nginx, 配置网络服务监听8080端口,配置存储路径:/test/download/file,配置映射配置文件/etc/nginx/conf.d/8080.conf

    其中8080.conf的内容如下

    server {
        listen 8080;
        root /test/download/file;
        index test.html;
        location / {
        }
    } 
  5. 保存蓝图发布,访问时,您就可以看到之前应用上传的test.html的文件内容了

发表回复

您的电子邮箱地址不会被公开。