ajax请求base64加密后的json数组，并通过vue的v-for遍历输出

一、当json数据使用base64加密后，ajax无法直接请求加密后的字符串密文，需要用数组包裹密文

　　原始json数组内部数据：

　　备注：原始json本来是用放在一个数组内部的[{"a":"b","c":"d"},{"e":"f","g":"h"}]

{"ImgName":"MITSUBISHI","url":"url("/Template/xpshop_currents/Images/logo/MITSUBISHI.png")"},
{"ImgName":"NOK","url":"url("/Template/xpshop_currents/Images/logo/NOK.png")"}

　　原始密文：

eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2N1cnJlbnRzL0ltYWdlcy9sb2dvL05PSy5wbmdcIikifQ==

　　数组包裹密文后：

["eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2N1cnJlbnRzL0ltYWdlcy9sb2dvL05PSy5wbmdcIikifQ=="]

二、请求到了json数据后，需要对数据进行解码

window.btoa //base64加密

window.atob //base64解码

如果密文中有中文数据，还需要进行再次编码解码，否则会出现中文乱码

escape(）//编码

decodeURIComponent（）//解码

三、解码后的明文是字符串String,需要提前字符串数据，并转换为数组

  let pat1 = /[(.*?)]/;
  let pat2 = /},/g;
  let pat3 = /;/; 
　//用正则pat1，匹配原始json内容，并通过split把匹配出来的内容变成数组元素，并通过下标获取  
  let sp = spdata.split(pat1)[0]; 
　//用正则pat2，replace将符合条件的逗号替换为分号，方便等下分割提取数组元素，注意正则尾部加g，启用全局匹配
  let spp = sp.replace(pat2,'};');
  //用正则pat3，split按分号将字符串切割成数组，注意此时的数组内容依然是字符串String
  let ImgUrlArrOld = spp.split(pat3);

四、JSON.parse将提取出来的数组元素转换为对象（Object）格式，并将数组随机重排

let strToObj = JSON.parse(str)//字符串转对象

let objToStr = JSON.stringify(obj)//对象转字符串

                //生成随机数组
                let ImgUrlArr = new Array();
                while(ImgUrlArr.length<ImgUrlArrOld.length){
                    let num = ImgUrlArrOld[Math.floor(Math.random() * ImgUrlArrOld.length)];
                    if (ImgUrlArr.indexOf(num)<0) {
                        ImgUrlArr.push(num);
                    }
                }
　　　　　　　　　　//数组内容对象化
                for (let i = 0; i < ImgUrlArr.length; i++) {
                    ImgUrlArr[i] = JSON.parse(ImgUrlArr[i]);
                };

完整代码：

html:

　　<div id="appVue">
      <ul class="img-ul" id="ImgUl">
        <!-- 遍历背景图片地址和title,并设置背景图片样式 -->
        <li class='img-ul-li' v-for='src in src' v-bind:title='src.ImgName' :style='{background: src.url,"background-repeat": backgroundRepeat,"background-position": backgroundPosition,"background-size":backgroundSize}'></li> 
      </ul>
    </div>

js:

        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/Template/xpshop_currents/inc/imgUrl.json',
            cache: false,
            success: function (data) { 
　　　　　　　　　　//window.atob()base64解码，escape编码，decodeURIComponent解码，这里是为了解决base64解码后的中文乱码问题
                let spdata = decodeURIComponent(escape(window.atob(data[0])));
                 let pat1 = /[(.*?)]/;
                 let pat2 = /},/g;
                 let pat3 = /;/; 
　　　　　　　　　　//因为json数组加密后变成了一串字符串，所以json数据用另外一个数组包裹了加密后的字符串，否则json资源无法加载，这里先通过pat1的正则把字符串提取出来  
                 let sp = spdata.split(pat1)[0]; 
　　　　　　　　　　//将逗号替换为分号，这样方便等下分割提取数组元素
                 let spp = sp.replace(pat2,'};');
                 let ImgUrlArrOld = spp.split(pat3);

                //生成随机数组
                let ImgUrlArr = new Array();
                while(ImgUrlArr.length<ImgUrlArrOld.length){
                    let num = ImgUrlArrOld[Math.floor(Math.random() * ImgUrlArrOld.length)];
　　　　　　　　　　　　if (ImgUrlArr.indexOf(num)<0) {
                        ImgUrlArr.push(num);
                   　}
                }
　　　　　　　　　//数组内容对象化　

　　　　　　　　　　for (let i = 0; i < ImgUrlArr.length; i++) {
　　　　　　　　　　　　ImgUrlArr[i] = JSON.parse(ImgUrlArr[i]);
　　　　　　　　　　};

                let vm = new Vue({
                    el:'#appVue',
                    data:{
                        src:ImgUrlArr,
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center',
                        backgroundSize: '100% 100%',
                    },
                    // 加载函数
                    methods:{
                        ImgInfiniteRolling: function(){
                            ImgInfiniteRolling(-200,1)
                        },
                    },
                    //页面模板加载完成后调用函数
                    mounted(){
                        this.ImgInfiniteRolling()
                    }
                })                                 
            }
        }) 
　　　　function ImgInfiniteRolling(begin,speed){
　　　　　　console.log(begin,speed);
　　　　}