Chapter：11.前端页面开发

11.16集成阅读器代码到项目中

1.代码和数据迁移

​ 1.将阅读器的页面 index.html 移动到目录view 中

​ 2.将模拟数据chapter.json迁移到mock/reader目录下，在mock/reader/data存放各章节数据data1.json,data2.json...

​ 3.将css、js等静态文件转移到static对应的目录中

2.添加相应的路由

​ 1.app.js

/*以下为阅读器相关代码 */

//从"开始阅读"按钮跳转到书籍详情页的路由
app.use(controller.get('/reader',function*(){
    this.set('Cache-Control','no-cache');//设置HTTP返回头，不缓存内容
    this.body=yield render('reader');
}));

//
//阅读器获取章节数据的路由
app.use(controller.get('/ajax/chapter',function*(){
    this.set('Cache-Control','no-cache');//设置HTTP返回头，不缓存内容
    this.body=service.get_chapter_data();
}));

//获取阅读器中当前的书籍信息路由
app.use(controller.get('/ajax/chapter_data',function*(){
    this.set('Cache-Control','no-cache');
    var params = querystring.parse(this.req._parsedUrl.query);//读取地址栏数日的http参数并转为object格式
    var id = params.id;//将参数赋值给本地变量
    if(!id){
        id="";
    }
    this.body =service.get_chapter_content_data(id);//这里函数不是是异步返回的，不用yield返回
})); 

3.添加相应的服务层函数

/*以下为阅读器相关的代码 */
//阅读器获取章节数据
exports.get_chapter_data = function(){//Node.js的语法
    var content = fs.readFileSync('./mock/reader/chapter.json','utf-8');//在创建路由的时候/开头代表根目录也就是app.js所在的那级目录，这里的根目录则是磁盘的根目录
    return content; 
}

//
exports.get_chapter_content_data=function(id){
if(!id)
    {//如果传过来的id是空的，设为默认书籍
        id="1";
    }
    var content = fs.readFileSync('./mock/reader/data/data'+id+'.json','utf-8');
    return content; 
}

4.在书籍详情页添加跳转到阅读器的链接

在书籍详情页"开始阅读"按钮添加跳转到阅读器的链接,可以直接用<a>标签，不过这样不够高级...

<li class="u-btn2" v-on:click="readBook()">

在之前处理从页面跳转到详情页的中间层文件book.js添加方法：

methods:{
            readBook:function(){
                location.href = "/reader"
            } 
        }

11.16添加从书籍详情页跳转到阅读器的中间层函数.png

5.更正阅读器代码迁移后的Bug

1. 将原阅读器中引用外部文件的路径修正

2. 将阅读器中原来获取小说内容的函数修正：修正传参方式和数据获取方式

   var getFictionInfoPromise=function(){
       return new Promise(function(resolve,reject){//在调用时创建promise对象
           $.get("/ajax/chapter",function(data){//***************修正数据获取方式:调用路由接口
               //DO:处理获得的章节信息
               if(data.result==0){
                   chapter_id=Util.StorageGetter('last_chapter_id');
                   if(chapter_id==null)
                   {
                       chapter_id=data.chapters[1].chapter_id;//获取章节的id
                   }
                   chapter_total=data.chapters.length;
                   resolve(chapter_id);
               }else{
                   reject({msg:'get fiction info fail'});
               }
           },"json");//，参数(接口,回调函数)，只供演示使用，不代表真实数据接口    
       });
   }
   

   var getCurrentChapterContentPromise=function(){
       return new Promise(function(resolve,reject){
           $.get("/ajax/chapter_data",{//***************修正数据获取方式:调用路由接口
               id:chapter_id//***************修正参数传递方式
           },function(data){
               if(data.result==0){//判断服务器状态，不同公司不一样，有些喜欢在返回的字段价格code或result或message，都是预先设定好的，这里等于0表示是OK的
                   var url=data.jsonp;//由提供的数据的结构，解析出返回的数据的jsonp值，即为真实数据(base64加密)的地址。
                   Util.getBSONP(url,function(data){//base64解密
                       //debugger 回顾数据结构
                       //callback && callback(data);
                       resolve(data);
                   });
   
               }else{
                   reject({msg:'get content fail'});
               }
           },"json");
       });
   }
   

3. 修正之前阅读器出现的bug(主要都是少写了东西或者名字写错了或者搞混了两个名字相近的参数)