近期的前端工作总结 <二>

前些天写过一个前端页面，后来增加了需求，之前写的页面部分不可用了，所以又重新写了一下。之前写的

领导描述了下新需求，没有需求和接口文档都没有。

需求描述：

1、获取图片TaskList， 接口输入：User ID， 返回：json格式数据，包含taskid list
2、根据tasklist，展示所有图片缩略图（或list）
3、点击一张图片，展示图片，并显示InvoiceID和InvoiceNum图片和文本信息。
接口信息： 输入taskID和UserID，返回json数据，包含InvoiceID和InvoiceNum图片的base64信息和文本信息
4、InvoiceID和InvoiceNum文本信息有错则修改，并提交 。接口还没给。

问题

1、根据tasklist ,展示所有图片的缩略图或list。 找了几个方案不理想，主要的问题是要根据获取的list个数动态生成缩略图，最后请教前端的大神，推荐使用Swiper的virtual slide框架。 我直接将此框架放到页面的最下面，框架可以完整的显示出来。 接下来就是要调整为自己的内容了。
2、点击图片list 后，展示相关信息， 首先virtual slides点击触发是个问题，虽然可以定位到元素，但是怎么触发点击事件？试了很久最终解决了
3、触发点击事件后，展示图片和InvoiceID和InvoiceNum图片和文本信息。 这个我想来应该是同步显示的。怎么同步显示呢?
4、HTML显示base64格式的图片
6、json解析
7、跨域请求等等

通过代码实现来分析。

1、Swiper的virtual slide方案：

https://www.swiper.com.cn/api/callbacks/2015/0308/225.html
http://idangero.us/swiper/demos/
http://idangero.us/swiper/demos/410-virtual-slides.html 使用的是这个方案。

我是直接把源码下载下来了，
https://github.com/nolimits4web/Swiper/blob/master/demos/410-virtual-slides.html

注意下面的css和js文件都要下载下来。

留下了我需要的功能，html代码如下：

   <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper"></div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

js代码：

   var tasklist = getTaskList(); 
    var tasklistNum = getTasklistNum();
    var swiper = new Swiper('.swiper-container', {
    slidesPerView:5,
    centeredSlides: true,
    spaceBetween: tasklistNum,
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    virtual: {
        slides: (function () {
            var slides = [];
            for (var i = 0; i<tasklistNum; i+=1) {
                slides.push("Slide "+(tasklist[i].slice(0,5)));
            }
        return slides;
        }()),
    },
    on:{                   //通过on click ，解决了第二个问题，如何触发点击
        click:function () {
            if (this.clickedIndex == undefined)
            {
                pass;
            }

            var imgsrc = tasklist[this.clickedIndex];   // 通过this.clickedIndex 获取点击的slide
           //触发点击slide后，显示对应的完整图片，图片信息图，图片文本信息，第三个问题解决
            setImg(imgsrc);    
            //alert("imgsrc:" + imgsrc)
            showNumAndID(imgsrc);
            getInvocieInfo(imgsrc);
        }
    }
})

2、如何显示base64格式的图片?比较容易，img src的值设置为如下即可：

js部分：
baseURl = "data:image/png;base64,";
base64 =getInvoiceBase64(taskId,"invoiceNum");  // 函数getInvoiceBase64返回图片的base64格式编码

html部分: 
<img src =baseURl+base64  />

3、json解析，以及跨域问题，下面代码说明：

function getInvoiceBase64(taskId, invocetype) {
        //通过ajax请求接口，get方式。
        $.ajax({      
            type: 'GET',
            dataType: 'json',     // 数据类型配置成json
            url: 'http://180ly66419.iok.la:5000/api/detect_in?1=1&user_id=2&task_id='+taskId, //服务路径
            async: false,
            timeout: 5,
            headers: {
                'Access-Control-Allow-Origin': '*',   //这里的内容，并没有解决跨域问题，最后是服务端添加了这部分内容解决的
            },

            jsonp: "callback",
            jsonpCallback: "jsonpCallback",
            success: function (response) {
                responseData = JSON.stringify(response);   //此处处理json文件
                var obj = eval('(' + responseData + ')');   //eval解析
                imgNumBase64 =  obj.data["DocNumber_encode"]; 
                imgIDBase64  = obj.data["DocType_encode"];
                //alert(imgSrc);
            },
            error: function () {
                alert('服务器异常！');
            }
        });
        if (invocetype == "invoiceNum")
        {
            return imgNumBase64 ;
        }
        else if (invocetype == "invoiceID")
        {
            return imgIDBase64  ;
        }
    }

返回json文件内容：

{
  "data": {
    "DocNumber_encode":    "/9j/4AAQSkZJRgABAQAUUUAFFFFABRRRQAUUUUAFFFFAH//Z", 
    "DocNumber_ocr_result": "10611830", 
    "DocType_encode": "/9j/4AAQSkZJRgABAQAAAKKKACiiigAooooAKKKKACiiigAooooA//9k=", 
    "DocType_ocr_result": "4200164130", 
    "file_type": "jpg", 
    "task_id": "7207a12d5ab594035051b49222b012f9", 
    "user_id": "123456"
  }, 
  "msg": "Access webpage success.", 
  "ret": 200
}

json解析，参考文档:https://www.cnblogs.com/jtlgb/p/6137915.html

还有两个接口没给，基本调完了。 页面如下：