vue项目快速实现后端接口返回的xml格式的数据进行解析

相关背景：

老项目重构，后端返回xml格式数据。

前端有现有的vue项目底层框架可以复用，现有框架支持对后端返回的json数据进行解析，需要调整的就是对xml格式数据的解析。

前端对后端接口的请求使用axios进行封装，且有mock数据方便本地联调开发。

解决方案：

封装xml解析相关方法；

根据后端接口返回数据格式边写xml文件进行后端数据mock；

mock数据的实现：

json格式的数据可以直接编写json格式的数据进行模拟，可以很方便的进行解析。

xml格式的数据如果直接写成字符串格式的，更新管理起来会比较麻烦，因此可以直接编写xml文件进行模拟。

对于mock接口数据的xml文件，可以在mock数据请求封装中直接对xml文件进行读取解析。

xml解析相关函数封装：

xmlLoad.js

/**
 * 加载xml文件
 * @param {Object} dname
 */
function loadXMLDoc(dname) {
  let xhttp
  if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  } else {
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.open("GET", dname, false);
  xhttp.send();
  return xhttp.responseXML;
}

/**
 * xml字符串转换xml对象数据
 * @param {Object} xmlStr
 */
function xmlStr2XmlObj(xmlStr) {
  var xmlObj = {};
  if (document.all) {
    var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
    xmlDom.loadXML(xmlStr);
    xmlObj = xmlDom;
  } else {
    xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
  }
  return xmlObj;
}

/**
 * xml直接转换json数据
 * @param {Object} xml
 */
function xmlObj2json(xml) {
  try {
    var obj = {};
    if (xml.children.length > 0) {
      for (var i = 0; i < xml.children.length; i++) {
        var item = xml.children.item(i);
        var nodeName = item.nodeName;
        if (typeof(obj[nodeName]) == "undefined") {
          obj[nodeName] = xmlObj2json(item);
        } else {
          if (typeof(obj[nodeName].push) == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(xmlObj2json(item));
        }
      }
    } else {
      obj = xml.textContent;
    }
    return obj;
  } catch (e) {
    console.log(e.message);
  }
}

/**
 * xml字符串转换json数据
 * @param {Object} xml
 */
function xmlStr2json(xml) {
  var xmlObj = xmlStr2XmlObj(xml);
  var jsonObj = {};
  if (xmlObj.childNodes.length > 0) {
    jsonObj = xmlObj2json(xmlObj);
  }
  return jsonObj;
}

export default {
  loadXMLDoc,
  xmlStr2XmlObj,  
  xmlObj2json,
  xmlStr2json
}

mock后端返回数据：

mocklist.xml

<?xml version="1.0" encoding="utf-8"?>

<Apilist>
  <!--首页banner-->
  <searchBanners>
    <ApiResult>
      <ret_code>000000</ret_code>
      <ret_msg>请求成功</ret_msg>
      <datas>
        <Banner>
          <banner_id>001</banner_id>
          <set_id>001</set_id>
          <num>0</num>
          <pic_url>http://xxx.com.jpg</pic_url>
          <link_type>0</link_type>
          <link_id>http://xxx.com</link_id>
          <description>描述</description>
        </Banner>
        <Banner>
          <banner_id>002</banner_id>
          <set_id>002</set_id>
          <num>0</num>
          <pic_url>http://xxx.com.jpg</pic_url>
          <link_type>1</link_type>
          <link_id>/myTask</link_id>
          <description>描述</description>
        </Banner>
      </datas>
    </ApiResult>
  </searchBanners>
  ...
</Apilist>

如上，高亮部分的标签可以看做是mock接口的名称，与前端对接口请求的封装函数名对应，如下：

request.js

import request from '@api/request'
const {
  errorToast,
  http
} = request
/**
 * 导出接口请求
 * noNeedLogin: true 无需登录
 * noPreError: true 无需预处理错误信息
 */
export default {
  errorToast,
  //检验用户登录有效性
  searchBanners(params) {
    return http({
      api: "searchBanners",
      data: params
    })
  },
......

注：经验证，xml文件需要放在static文件夹中，本地编译vue项目后，能直接在浏览器中访问该文件，以便于xml文件的读取。

xml文档中mock数据的读取：

request.js

import axios from "axios"
......
import xmlLoad from '@assets/js/xmlLoad'
/**
 * 封装mock数据模拟接口请求
 */
let http2;
if (isLocal) http2 = (params) => {
  var self = this
  let dname = location.origin + '/static/mocklist.xml'
  return new Promise((resolve, reject) => {
    //读取xml中的数据
    let xmlNodes = xmlLoad.loadXMLDoc(dname) //xml数据读取
    if(!xmlNodes) return;
    let xmlJson = xmlLoad.xmlObj2json(xmlNodes) //xml转换为json格式数据
    let mocklist = xmlJson['Apilist'] //mock数据列表
    setTimeout(() => {
      //获取当前访问接口名及mock数据
      let key = params.api
      var data = mocklist[key].ApiResult 
      resolve(data)
  })
}

export default {
  errorToast,
  http: isLocal ? http2 : http
}

后端接口真实数据的读取：

request.js

import axios from "axios"
import xmlLoad from '@assets/js/xmlLoad'
......

/**
 * 封装服务器端接口请求方法
 */
const http = (params) => {
  return new Promise((resolve, reject) => {
    axios.request({
      url: '/xxxx.do',//后端访问接口地址
      params: params.data,
      method: params.method || 'POST'
    }).then(function(res) {
      //解析接口返回的xml字符串数据
      let xmlStr = res.data;
      let xmlJson = xmlLoad.xmlStr2json(xmlStr)
      let data = xmlJson && xmlJson["ApiResult"]
      if (res.status == 200 && data) {
        ......
        resolve(data)
      } else {
        errorToast();
        console.log(data)
      }
    }).catch(function(e) {
      errorToast();
      reject(e)
    });
  })
}

/**
 * 封装mock数据模拟接口请求
 */
let http2;
......

export default {
  errorToast,
  http: isLocal ? http2 : http
}

如上，即实现了对后端接口数据的模拟，方便本地开发，同时对xml格式数据处理方面也只是在请求封装中进行，页面中的实现未受影响。

注意事项：

对于xml到json的转换，因xml本身并没有数组的概念，所以需要注意我们需要的“数组”如果只有一条数据的异常处理。

      <datas>
        <UserTask>
          <task_tag>001</task_tag>
          <task_term>001</task_term>
          <task_title>xxxx</task_title>
          <task_status>0</task_status>
          <task_extra_info>{"tag_name":"xxxx","tag_pic_url":"https://xxxx.jpg","task_begin_time":"2020.06.20","task_end_time":"2020.07.20"}</task_extra_info>
        </UserTask>
      </datas>

如上面代码，如果只有一个 UserTask ，那么解析出来将是一个Object对象:

//只有一个UserTask
data:{
    UserTask:{
        ......
    }
}

如果有多个，则是数组:

//有多个UserTask
data:{
    UserTask:[{
        ......
    },{
        ......
    },{
        ......
    }]
}

对于这个情况，可以封装一个函数进行转换，以方便前端进行页面布局与数据渲染。代码如下：

/**
 * xml解析后的列表转换为js的数组
 * @param {Object} xmlList
 */
function xmlListToArr(xmlList) {
  let targetArr = []
  if (xmlList.constructor == Array) {
    targetArr = xmlList
  } else {
    targetArr[0] = xmlList
  }
  return targetArr
}

如上，可以封装在公共函数里边，在页面中有从后端请求的列表数据需要渲染时，就可以调用这个函数进行数据处理。

这里还需要注意这些问题：

• 大部分列表数据都需要进行数组化处理：毕竟大部分列表的数据都当然，如果是几个简单的图片列表的展示，那可以考虑单个图片的展示，不必要把单个图片也转换成数组；
• 数组化处理操作在具体页面具体业务代码中进行：列表数据的处理由于xml中没有数组的概念，所以没办法很好的进行集中封装处理，因此可以在具体页面的具体数据进行处理；
• 可以集中封装处理的情况：如果知道后端返回接口所有列表类数据都严格包含某个字符串，如list,那么可以直接在xml解析函数中进行拦截处理就好了。