chapter6: 页面和服务器通信代码开发

title: 2.实现UI层及数据层与UI层连接

检测数据是否解析成功

上一节中实现了数据流(前面有bug，不过到最后修复了)，但是不知道数据是否解析成功，所以需要打断点检测:

1. 查看得到的result值(经过base64加密的数据串)是不是跟json文件里的一样。

   1. 在getBSONP函数定义中success参数值的函数里边的最上边打一个断点debugger

第一个断点位置.png

2. 在浏览器dev tools中刷新查看sources，将鼠标悬浮在result上，查看发现和json文件(本地的示例文件)里的字符串是一样的

   data为decode后的数据，再经过处理后转换成了我们需要的内容格式

   [图片上传失败...(image-197ffe-1537758702835)]

   escape和再度decode后得到需要的格式.png

实现UI层渲染

实际的开发过程中就是要在知道了数据结构之后，才能写UI层数据的渲染方法

1. 可以再打一个断点查看json文件解码后数据结构，

   1. 在getCurrentChapterContent中的Util.getBSONP里第一句打debugger

      打的debugger查看数据结构.png

2. 到chrome控制台查看这个断点的数据

   到chrome控制台查看第二个断点的数据.png

  发现上节课写的代码出错了，callback返回的应该是储存解析后数据的`json`变量，而不是`data`变量

  ![发现返回的数据错了，传的应该是json变量.png](https://upload-images.jianshu.io/upload_images/7346071-df9ec99e2a631d66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3. 将此处的data改为json即可

   将此处的改为json即可.png

4. 再到控制台上查看

   debug成功图.png

5. 获得json文件解码后的数据结构

   在console控制台序列化数据，输入JSON.parse()

   数据结构.png

  **结构就是对象，包含一个变量t(标题)，和一个数组变量p(段落)**

6. 在ReaderBaseFrame()函数写数据渲染代码

   function ReaderBaseFrame(container){
       //todo:渲染基本的UI结构
   
       function parseChapterData(jsonData){
           var jsonObj=JSON.parse(jsonData);//移动端兼容
           //因为这里数据比较简单，就没有用模板引擎，
           //对于小数据而言这样直接+链接构建HTML结构也基本是没有效率问题的
           var html='<h4>'+jsonObj.t+'</h4>';
           for(var i=0;i<jsonObj.p.length;i++){
               html+='<p>'+jsonObj.p[i]+'</p>';
           }
           return html;
       }
       return function(data){
           container.html(parseChapterData(data));//html结构的渲染
       }
   
   }
   

书写数据层和UI层的连接

在init的定义函数里补充加入参数UIcallback，在里面添加对应的代码

在init补充相应代码.png

在getCurrentChapterContent定义函数里将参数data改为callback

在main函数里进行进行相应函数的调用

在main函数里进行相应调用.png

删除掉之前填充使用的页面代码

删除原来填充的内容.png

调试成功截图：数据能在网页上显示了

数据在网页中正确加载了.png