【vue】vue使用x2js解析xml文件 - Go语言中文社区

【vue】vue使用x2js解析xml文件


一、功能需求

实验室的项目需要添加直播功能,获取到直播流网址如下图所示:

这是一个xml网址,需要解析这个xml网址获取到正在直播的rtmp地址,以进行直播展示。

jq使用get或ajax解析xml文件在vue框架里似乎行不通了。搜索发现了x2js插件,用于在XML和JavaScript对象之间进行转换的库。

二、x2js安装配置

可以使用npm安装或者到https://github.com/abdolence/x2js上下载.js代码,

① npm安装,然后在main.js中引用

npm i x2js
import x2js from 'x2js' //xml数据处理插件
Vue.prototype.$x2js = new x2js() //创建x2js对象,挂到vue原型上

//或使用es6语法(直接在组件中require('x2js')):
const x2js = require('x2js')

②下载到.js代码,直接在index.html中引入

<script type='text/javascript' src="xml2json.js"></script>

三、x2js在组件中使用

 

x2js.xml2js(xml) //xml2js方法,传入xml格式的数据,返回json对象
_getVersion(url) {
      this.loading = true;
      let _self = this;
      this.$ajax.get(`/data/version${url}.xml`).then(function(res) {
        _self.loading = false;
          console.log(res.data);
          /* var x2js = new X2JS();*/
          /* var obj = x2js.xml_str2json(res.data).note;*/
          var jsonObj = _self.$x2js.xml2js(res.data);
          console.log("-----");
          console.log(jsonObj.note);
          _self.tableData = jsonObj.note.specialityList.item;
          _self.changeData = jsonObj.note.changeList.item;
          _self.finishData = jsonObj.note.finishedPunchList.item;
          _self.knownData = jsonObj.note.questionList.item;
          _self.versionDes =  jsonObj.note.name;
          _self.versionDate = jsonObj.note.date;

        })
        .catch(function(err) {
          console.log(err)
          _self.loading = false;
        });
    }

注意:你的xml文件如果是放在前端这边的话,要把文件放到public文件夹当中,否则文件将会报404的错

 

参考:https://www.jianshu.com/p/184442e86fcd

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/u014322206/article/details/87780255
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-07 23:33:29
  • 阅读 ( 1985 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢