用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);
})