整理的关于content-type中几种数据格式转换的内容

最新推荐文章于 2024-07-18 13:47:13 发布

原创最新推荐文章于 2024-07-18 13:47:13 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客详细展示了如何在Vue项目中使用x2js和qs库进行XML、JSON以及URL编码之间的转换。通过示例代码，解释了如何将XML转换为JSON，反之亦然，并演示了JSON到URL编码和URL编码回JSON的转换过程，为开发者提供了实用的数据格式处理方法。

<template>
  <div class="goods-main">

  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "GoodsMain",
  data() {
    return {
      xmlStr:
          '<?xml version="1.0" encoding="utf-8"?>\n' +
          '<configuration>\n' +
          '  <configSections>\n' +
          '    <section name="FrameworkEF" type="FrameworkEF.GlobalUtils.Config.ConfigHandler, FrameworkEF.GlobalUtils" />\n' +
          '  </configSections>\n' +
          '  <FrameworkEF>\n' +
          '    <site name="Utils" file="/Config/FrameworkEF.config" />\n' +
          '  </FrameworkEF>\n' +
          '</configuration>',
      urlEncodedStr:'title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3',
      jsonStr:{
        isCollapse: false,
        //点击二级菜单实现高亮
        activePath: '',
        //添加按钮的禁用
        isAddButtonUsed: null,
        //编辑按钮
        isEditUsed: null,
        //删除按钮
        isDeleteUsed: null,
        //权限按钮
        isSettingUsed: null
      }
    }
  },
  created() {
    this.getJsonData()
  },
  methods: {
    getJsonData() {
      //xml格式转成json格式
      console.log(this.xmlStr)
      console.log(JSON.stringify(this.$x2js.xml2js(this.xmlStr)))

      //json格式转成xml
      console.log(this.jsonStr)
      console.log(this.$x2js.js2xml(this.jsonStr))

      //json转urlEncoded
      console.log(this.jsonStr)
      console.log(qs.stringify(this.jsonStr))

      //urlEncoded转json
      console.log(this.urlEncodedStr)
      console.log(qs.parse(this.urlEncodedStr))

      //urlEncoded转xml
      const jsonUrlEncodeStr=qs.parse(this.urlEncodedStr)
      console.log(this.urlEncodedStr)
      console.log(this.$x2js.js2xml(jsonUrlEncodeStr))

      //xml转urlEncoded
      const jsonXml=this.$x2js.xml2js(this.xmlStr)
      console.log(this.xmlStr)
      console.log(qs.stringify(jsonXml))


    }
  }
}
</script>

<style scoped>

</style>

注意：需要引入两个插件

//导入数据转换插件
import X2JS from "x2js";
Vue.prototype.$x2js=new X2JS()

import qs from 'qs'