用eggjs返回xml格式数据，前端解析xml

最近公司有个需求，需要从接口返回xml格式数据，再由前端解析后渲染。之前处理过类似的场景，接口是用java写的。本次想写个demo，用eggjs尝试返回xml格式接口，再由前端处理结果。

nodejs端

首先是eggjs，根据官方文档，先把应用跑起来。
接着需要安装依赖egg-view-ejs

npm i egg-view-ejs -S

配置文件 /config/plugin.js 添加

'use strict';
...

exports.ejs = {
  enable: true,
  package: 'egg-view-ejs',
};

...

修改 /config/config.default.js

'use strict';
module.exports = appInfo => {
...
  config.view = {
    mapping: {
      '.xml': 'ejs',
    },
  };
...
}

/app/router.js 加个路由

'use strict';
module.exports = app => {
  const { router, controller } = app;
  ...
  // 模拟返回xml格式数据
  router.get('/xml', controller.xml.index);
  ...
};

新增对应的控制器 /app/controller/xml.js

'use strict';
const Controller = require('egg').Controller;
class XmlController extends Controller {
  async index() {
    const { ctx } = this;
    // 使用模板引擎
    await ctx.render("index.xml",{lists:[{name:'Tom'},{name:'Jerry'}]});
  }
}
module.exports = XmlController;

在项目目录 app 中创建 view 文件夹, 并创建 index.xml 模板

<?xml version="1.0" encoding="UTF-8"?>
<oauth>
  <status>200</status>
  <data>
    <% for( let i = 0; i < lists.length; i++ ) { %>
      <list> <name><%=lists[i].name%></name> </list>
    <% } %>
  </data>
  <message>Success</message>
</oauth>

可以测试了，在postman中运行结果：

<?xml version="1.0" encoding="UTF-8"?>
<oauth>
  <status>200</status>
  <data>
    <list>
      <name>Tom</name>
    </list>
    <list>
      <name>Jerry</name>
    </list>
  </data>
  <message>Success</message>
</oauth>

前端

可以用一个html文件测试
引入axios.js cdn依赖

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入 jquery.js 和 jquery.xml2json.js cdn 依赖

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>   
<script src="http://www.jsons.cn/Down/jquery.xml2json.js"></script>

xml2json可以把xml格式转化成json

axios.get('http://localhost:7001/xml').then(res=>{
  console.log(res.data);
            
  //读取返回字符串
  const _xml = new DOMParser().parseFromString(res.data, "text/xml");
  console.log(_xml);

  //获取 code 节点中内容
  const htmlContent = _xml.getElementsByTagName("data")[0].innerHTML;
  console.log(htmlContent);

  //获得json数组
  const json_obj = $.xml2json(res.data);
  console.log(json_obj);
})