基于豆瓣API+Angular开发的web App

前端技术 2023/09/02 JavaScript

一、扯淡的说

name:【豆瓣搜索】

最近关注了下豆瓣的API，发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬虫，想想，真是美丽极了！有个豆瓣的接口，我都不用去爬数据，不用数据存储，丢给github page直接完事。豆瓣，Nice!最近也在看angular，于是就萌生了使用Angular + 豆瓣API 做一个web app。于是...网上回家就折腾了。

体验地址：http://vczero.github.io/t/html/index.html#/

项目地址：https://github.com/vczero/search （欢迎大家fork，任意修改，继续增加功能；欢迎拍砖，一起进步。）

二、直接上图

（1）图书搜索

（2）音乐搜索界面

（3）图书详情

（4）电影搜索

三、项目结构和简介

三、几个注意点

（1）-webkit-tap-highlight-color:rgba(255,255,255,0);去除点击时的高亮阴影

（2）box-sizing:border-box的使用，包含padding的像素计算

（3）position fixed 和 搜索跳转的结合（虚拟键盘引起）

（4）angular-ui-router的多视图控制

（5）ios & android系统的各种细节

（6）压缩angularjs代码依赖注入的问题

...

我觉得比较重要的服务和状态路由的代码贴出来

复制代码 代码如下:

/*服务的URL配置*/
app.constant(\'ServiceConfig\', {
    book_search: \'https://api.douban.com/v2/book/search\',
    book_search_id: \'https://api.douban.com/v2/book/\',
    music_search: \'https://api.douban.com/v2/music/search\',
    music_search_id: \'https://api.douban.com/v2/music/\',
    movie_search: \'https://api.douban.com/v2/movie/search\',
    movie_search_id: \'https://api.douban.com/v2/movie/subject/\'
});
app.config([\'$stateProvider\', \'$urlRouterProvider\',function($stateProvider, $urlRouterProvider){
    /*URL路由*/
    $urlRouterProvider.otherwise(\"/\");
    /*状态配置*/
    $stateProvider
        //首页
        .state(\'index\',{
            url: \'/\',
            views:{
                header:{
                    templateUrl: \'../html/views/list_header.html\',
                    controller: \'SearchController\'
                },
                container:{
                    templateUrl: \'../html/views/list_book.html\',
                    controller: \'BookListController\'
                },
                footer:{
                    templateUrl: \'../html/views/list_footer.html\',
                    controller: \'\'
                }
            }
        })
        //book list
        .state(\'book_list\',{
            url: \'/book\',
            views:{
                header:{
                    templateUrl: \'../html/views/list_header.html\',
                    controller: \'SearchController\'
                },
                container:{
                    templateUrl: \'../html/views/list_book.html\',
                    controller: \'BookListController\'
                },
                footer:{
                    templateUrl: \'../html/views/list_footer.html\',
                    controller: \'\'
                }
            }
        })
        // book detail
        .state(\'book_detail\',{
            url: \'/book/:id\',
            views:{
                header:{
                    templateUrl: \'../html/views/list_header.html\',
                    controller: \'SearchController\'
                },
                container:{
                    templateUrl: \'../html/views/detail_book.html\',
                    controller: \'BookDetailController\'
                },
                footer:{
                    templateUrl: \'../html/views/list_footer.html\',
                    controller: \'\'
                }
            }
        })
        // music list
        .state(\'music_lsit\',{
            url: \'/music\',
            views:{
                header:{
                    templateUrl: \'../html/views/list_header.html\',
                    controller: \'SearchController\'
                },
                container:{
                    templateUrl: \'../html/views/list_music.html\',
                    controller: \'musicListController\'
                },
                footer:{
                    templateUrl: \'../html/views/list_footer.html\',
                    controller: \'\'
                }
            }
        })
        // movie list
        .state(\'movie_lsit\',{
            url: \'/movie\',
            views:{
                header:{
                    templateUrl: \'../html/views/list_header.html\',
                    controller: \'SearchController\'
                },
                container:{
                    templateUrl: \'../html/views/list_movie.html\',
                    controller: \'movieListController\'
                },
                footer:{
                    templateUrl: \'../html/views/list_footer.html\',
                    controller: \'\'
                }
            }
        })
        .state(\'search\',{
            url: \'/search/:type\',
            views:{
                header:{
                    templateUrl: \'../html/views/search.html\',
                    controller: \'Search\'
                },
                container:{
                    templateUrl: \'\',
                    controller: \'\'
                },
                footer:{
                    templateUrl: \'\',
                    controller: \'\'
                }
            }
        });
}]);

本文地址：https://www.stayed.cn/item/3302

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案