使用springBoot实现服务端XML文件的前端读写

简介

通常我们修改某个服务的配置文件的时候，需要登入服务器，进入指定目录然后对配置文件例如xml进行修改，偶尔一次操作还可以，但是频繁操作确实有点麻烦。
所以我们直接把这项功能放到前端界面来进行操作,来提升运维的效率。

思路

1. 后端通过I/O来将服务端XML文件读取并发送给前端
2. 前端把接收回来的xml文件在前端web编辑器里进行渲染
3. 前端把修改过的xml文件再次发送给后端
4. 后端把接收回来的xml写回服务端配置文件

依赖

1.springBoot
2.dom4j(xml读写库）
3.vue-element-admin
4.ace.js(web编辑器)

实现

后端

导入依赖

    dom4j
    dom4j
    1.6.1

在resources目录下新建hdfs-site.xml,并写入如下内容进行测试

测试demo中路径为写死的，后续可改为动态配置即可

 
    
   
    dfs.replication  
    1.2 
    
    
   
    dfs.namenode.secondary.http-address  
    java151:50090 
    
   
    dfs.webhdfs.enabled  
    true 
   

新建XmlUtil工具类

import org.dom4j.*;
import org.dom4j.io.*;
import java.io.*;

public class XmlUtil {
    /**
     * 获取xml文档
     */
    public static Document getDocument(String filename) {
        File xmlFile = new File(filename);
        Document document = null;
        if (xmlFile.exists()) {
            try {
                SAXReader saxReader = new SAXReader();
                document = saxReader.read(xmlFile);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return document;
    }

    /**
     * 写入xml节点，没有就新建，存在就覆盖
     */
    public static void coverElement(String filePath, Document document) throws Exception {
        if (document != null) {
            OutputFormat format = OutputFormat.createPrettyPrint();
            File xmlFile = new File(filePath);
            format.setEncoding("UTF-8");
            XMLWriter writer = new XMLWriter(new FileOutputStream(xmlFile), format);
            writer.write(document);
            writer.close();
        }
    }
}

新建getXmlFile接口,借助dom4j的asXML()将xml以字符串形式返回给前端,Result类自行根据项目返回需求实现即可

@ApiOperation(value = "获取xml文件", notes = "获取xml文件")
@GetMapping(value = "/getXmlFile")
public Object getXmlFile(HttpServletRequest request, HttpServletResponse response) throws Exception {
    String filePath = "src/main/resources/hdfs-site.xml";
    Document document = XmlUtil.getDocument(filePath);
    String docXmlText = document.asXML();//输出xml字符串
    return new Result(true, 20000, "获取hdfs-site.xml成功", docXmlText);
}

新建putXmlFile接口，借助DocumentHelper.parseText将前端返回的字符串转为xml

@ApiOperation(value = "修改xml文件", notes = "修改xml文件")
@ResponseBody()
@PostMapping(value = "/putXmlFile")
public Object putXmlFile(@RequestBody XmlDO body, HttpServletResponse response) throws Exception {
    Document document = DocumentHelper.parseText(body.getData());//字符串转xml
    String filePath = "src/main/resources/hdfs-site.xml";
    XmlUtil.coverElement(filePath, document);
    return new Result(true, 20000, "修改hdfs-site.xml成功", body.getData());
}

XmlDO

import lombok.Data;
@Data
public class XmlDO {
    private String type;
    private String data;
}

前端

插件依赖

"xml-formatter": "^2.4.0"
"lodash": "^4.17.20",

在api目录下新建xml.js接口,url根据自己的实际情况修改即可

import request from '@/utils/request'

export function getXmlFile() {
  return request({
    url: '/api/test/getXmlFile',
    method: 'get'
  })
}
export function putXmlFile(data) {
  return request({
    url: '/api/test/putXmlFile',
    method: 'post',
    data
  })
}

导入ace.js，包括主题以及语言
public/index.html写入

//css

//js

新建编辑器组件src/components/codeEditor/index.vue, lodash依赖自行isntall

新建页面src/views/xmlTest/index.vue

添加路由配置

  {
    path: '/xml',
    component: Layout,
    children: [
      {
        path: '',
        name: 'xml',
        component: () => import('@/views/xmlTest/index'),
        meta: { title: 'xml', icon: 'xml' }
      }
    ]
  }

界面

更多问题欢迎加入前端交流群交流749539640