前些天写过一个前端页面，后来增加了需求，之前写的页面部分不可用了，所以又重新写了一下。之前写的
领导描述了下新需求，没有需求和接口文档都没有。
需求描述：
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
还有两个接口没给，基本调完了。 页面如下：
网友评论