6.1实现数据层

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

title: 实现数据层

数据交互过程讲解

1. 先发一个 ajax 请求一个 json 文件 ，实际中可能是请求一个 http 接口，用参数来控制传输许多文件
2. 取回来的数据并不是可以直接拿来渲染的，json 数据中包含的是一个地址，这个地址指向的数据也是经过base64加密的，目的就是防止数据被轻易爬走

数据层要实现的任务

即从服务器中取回数据，具体包括:

1. 拿到文章章节的概要信息
2. 拿到每一章的详细内容数据

代码

在ReaderModel()函数里添加:

var chapter_id;
var init=function(){
    getFictionInfo(function(){//括号里是getFictionInfo的参数，是一个匿名函数
        getCurrentChapterContent(chapter_id,function(){//匿名函数里再嵌套了一个函数，这个函数以chapter_id和一个匿名函数作为参数，这个匿名函数就是尚未补充，用于数据层和UI层的联络渲染
          //TODO:数据层和UI层的联络渲染
        });  
    })
};
                   
var getFictionInfo=function(){
    $.get('data/chapter.json',function(){//这个数据接口是本地的模拟数据接口
        //DONE:获得章节信息之后的回调函数
        chapter_id=data.chapters[1].chapter_id;//获取章节的id
        callback && callback();//回调(返回? )
    },'json')//，参数(接口,回调函数)，只供演示使用，不代表真是数据接口
    
    var getCurrentChapterContent =function(chapter_id,data){
        $.get('data/data'+chapter_id+'.json',function(data){//这个接口是本地文件目录路径
            if(data.result==0){//判断服务器状态，不同公司不一样，有些喜欢在返回的字段价格code或result或message，都是预先设定好的，这里等于0表示是OK的
                var url=data.jsonp;//由提供的数据的结构，解析出返回的数据的jsonp值，即为真实数据(base64加密)的地址。
                Util.getBSONP(url,function(data){//base64解密
                    callback && callback(data);
                });
                
            }
        },'json')
    }
    return{
        init:init//返回接口
    }
} 

在闭包函数Util变量里添加:

//在StorageSetter后面添加:
var getBSONP =function(url,callback){
    return $.jsonp({//插件(外引的JS文件)提供的方法
        //指定该方法的参数
        url:url,
        cache:true,
        callback:'duokan_fiction_chapter',//请求回来的数据外面包了一个方法，原理就是把这段数据当成一段JS代码插到页面里直接去执行
        success:function(result){//result结果集就是那段被base64加密的数据
            var data = $.base64.decode(result);//插件里的base64解码方法，返回json数据
            var json = decodeURIComponet(escape(data));//JS原生带的，之后看一下每一步返回什么就知道这样干是为啥了
            callback(data);
        }
    })
}//获得json加密后的数据

//在return{}里添加:
    getBSONP:getBSONP,
     

Note：请求回来的JSON数据里的地址指向的内容--被一个方法包围的base64加密过的json数据

请求回来的json数据的地址指向的内容

在main()函数里添加：

//在main()函数里，EventHandler()前添加
var readerModel=ReaderModel();
readerModel.init();