• 豆瓣电影个人项目总结


    1.用到的技术点

    npm  使用npm来进行下载相应的插件和框架
    新建项目的文件目录
        dist
        src
            assets
                css
                js
                img
        details
            details.html
            details.js
        app.js    主模块,各个从(子)模块会依赖注入到这里
        index.html    主页面来进行单页面开发
    gulp  来进行代码压缩和优化  
    

    2.index.html首页模块,用到的技术点

      angular指令

        ng-app    设置ng的管理范围    ng-app="moviecat"

        ng-view    路由匹配的内容会在这里显示    ng-view

        ng-submit  submit事件 按enter和button都会触发的事件

      模块js的引入

        顺序需要注意,需要依赖关系   

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <title>电影展示</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/wap.css">
    </head>
    <!--
    1. 先按照功能划分模块.
    首页模块
    正在上映
    即将上映
    top250模块
    电影详情
    为每一个模块创建1个文件夹.
    用来分别保存每一个模块相关的视图 控制器.
    -->
    <body ng-app="moviecat">
     <!-- 顶部导航栏开始 -->
      <div class="top">
      <div class="header" ng-controller="searchCtrl">
      <a href="#/home_page"><img src="assets/img/logo.png" alt=""></a>
      <div class="search">
      <form ng-submit="query()">
      <input class="my-input" type="text" placeholder="电影搜索" ng-model="keyword">
      <button>搜索</button>
      </form>
      </div>
      </div>
      <nav class="nav">
      <ul>
      <!--li中添加 active 类样式,显示焦点状态。-->
      <li class="active" hm-active><a href="#/home">首页</a></li>
      <li hm-active><a href="#/in_theaters">正在热映</a></li>
      <li hm-active><a href="#/coming_soon">即将上映</a></li>
      <li hm-active><a href="#/top250">Top250</a></li>
      </ul>
      </nav>
      </div>
      <!-- 顶部导航栏结束 -->
    
    <!--视图部分,理由改变重新渲染部分-->
    <div class="container" ng-view>
    
    </div>
    <footer class="footer">
    <div class="container">
    <p>版权所有© 前端与移动开发学院 火骑士空空</p>
    </div>
    </footer>
    <script src="assets/js/prefixfree.min.js"></script>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-route/angular-route.min.js"></script>
    <script src="./service/heima.js"></script>
    <script src="./home/home.js"></script>
    <script src="./in_theaters/in_theaters.js"></script>
    <script src="./details/details.js"></script>
    <script src="./coming_soon/coming_soon.js"></script>
    <script src="./top250/top250.js"></script>
    <script src="app.js"></script>
    </body>
    </html>

    3.app.js是主模块,各个从(子)模块依赖到这里来

      1.使用一个自执行函数把全局变量angular传到函数里面

        (function(angular){处理业务逻辑})(angular)

      2.创建angular模块并起一个名字 跟ng-app="moviecat" 里的值是一样的

        var app = angular.module("moviecat",["从模块名称"]) 

      3.动态获取表单的值

        视图中  <input class="my-input" type="text" placeholder="电影搜索" ng-model="keyword">

        控制器中  $scope.keyword

      4.

    (function (angular) {
        //主模块.
        //用来管理ng-app的那个模块就叫做主模块.
        //在主模块中写的代码就会直接在html页面上=起作用.
    
        //从模块如果需要起作用,除非被主模块依赖.
        var app = angular.module("moviecat", [
            "moviecat_home",
            "moviecat_details",
            "moviecat_movie_list",
            "heima"
        ]);
    
    
        app.controller("searchCtrl",["$scope","$window",function($scope,$window){
            $scope.query = function(){
                //将url地址栏的路由改成/
                //  #/search?q=china
                $window.location.hash = "#/search/q="+$scope.keyword;
    
            }
        }]);
    
    
    
    })(angular);
    

    4.movie_list.js是几个模块结合起来的,用到的功能是

      1.创建module模块,并增加模块依赖 ngRoute heima

      2.配置路由 需要angular的路由模块的 $routeProvider 方法调用when()方法

        路由匹配 "/:type/:page?" 前面 ":"是动态匹配后面的?是有路由就匹配,没有路由匹配可以忽略

        通过templateUrl:"./movie_list/movie_list.html"与html建立联系

        通过controller:"movie_listController"进行与控制器建立联系

      3.服务功能介绍

        $scope  服务是存放数据的,可以到html文件中的

          $scope.data="石顺麟"

          $scope.getPage=function(pageIndex){出来业务逻辑}  在视图中 ng-click="getPage(pageIndex)"

          $scope.$apply()  通知视图数据已经发生更改,赶紧刷新页面

        $routeParams  服务获取路由动态的值

        $window  服务类似全局变量window,

        $route  服务是一个路由 

          $route.updateParams({page:pageindex}) 更改路由参数的值   

    (function(angular){
        //1.创建1个正在热映的模块.
        var app = angular.module("moviecat_movie_list",["ngRoute","heima"]);
    
        //2.配置路由
        app.config(["$routeProvider",function($routeProvider){
            //                   /in_theaters
            //                   #/in_theaters/3
            //                   #/coming_soon/2
            //                   #/top250/4
            //                   #/details/26270502
            //                   #/search?q=china
            $routeProvider.when("/:type/:page?",{
                templateUrl:"./movie_list/movie_list.html",
                controller:"movie_listController"
            });
        }]);
    
        app.controller("movie_listController",["$scope","$routeParams","$route","$window","heimaJsonp",function($scope,$routeParams,$route,$window,heimaJsonp){
            
            $scope.isShow = true;
    
            //每一页的容量
            $scope.pageSize = 10;
            //当前这次要请求第几页的数据.
            $scope.pageIndex = ($routeParams.page || "1" ) - 0;
            /*
            pageIndex   start
            1           0
            2          10 = (pageIndex-1)*pageSize
            3          20
            4          30
            5          40
            */
            heimaJsonp.jsonp({
                url:"http://api.douban.com/v2/movie/"+$routeParams.type,
                //http://api.douban.com/v2/movie/search?q=china&count=20&strat=0
                params:{
                    count:$scope.pageSize,//20
                    start:($scope.pageIndex-1)*$scope.pageSize,//0
                    q:$routeParams.q
                    //http://api.douban.com/v2/movie/in_theaters?count=10&start=10&q=undefine
                },
                callback:function(data){
                    $scope.movies = data;
                    console.log(data);
                    //总页数.
                    $scope.pageCount = $window.Math.ceil((data.total/$scope.pageSize));
                    $scope.isShow = false;
                    $scope.$apply();//通知视图数据模型已经发生变化.赶紧刷新视图.
                }
            });
    
            //请求指定页码的数据.
            $scope.getPage = function(pageIndex){
                //2  $route.updateParams({ page: pageIndex });
                //先判断页码是否合法.
                //10  1  10  0  5
                //>0 && <= 总页码
                if(pageIndex < 1 || pageIndex > $scope.pageCount) return;
                
                $route.updateParams({
                    page:pageIndex
                });
            };
    
            /*
            1. 实现分页
               1.1 如何向api发送分页的请求.
                   参数1: count 代表希望服务器返回的电影的数量.
                   参数2: start 从第几部开始给.
                   count=5&start=10
    
               1.2 页码通过路由参数来传递
                   修改路由的匹配规则.
                   /in_theaters/:page
    
                   在控制器中就可以拿到page参数.
                   就可以根据页码和页容量发起请求.
    
               1.3 上一页和下一页的切换.
                   调用同1个方法 getPage(pageIndex+1)
    
                   我们通过$route服务
                   updateParams方法修改路由参数.
                   {page:3}
            */
    
    
        }]);
    })(angular);
    

    5.自定义跨域服务

      1.创建一个模块,模块里面新建一个自定义服务,服务里面有一个jsonp函数

      2.jsonp里面思路是拼接url并随机生成函数名,创建script标签并给src赋值,并追加到body标签中

      3.调用自己的自定义的服务看上面

        先在angular.module()模块引入,在app.controller()中注入里面的服务,调用服务里面的jsonp函数

    (function(angular){
         var app =  angular.module("heima",[]);
         
         app.service("heimaJsonp",["$window",function($window){
             this.jsonp = function(opts){
                //1 拼接url
                var url = opts.url += "?";
                for(var key in opts.params){
                    url += (key + "=" + opts.params[key] + "&");
                }
                //  生成随机的函数名
                //  Math
                var callbackName = "jsonp_"+ $window.Math.random().toString().slice(2);
                $window[callbackName] = opts.callback;
                url += "callback="+callbackName
    
                //2.创建script标签.
                var script = $window.document.createElement("script");
                script.src = url;
                $window.document.body.appendChild(script);
            }
         }]);
    
    
         app.directive("hmActive",[function(){
             return {
                 restrict:"A",
                 link:function(scope,elemnt,attrs){
                     elemnt.on("click",function(){
                         elemnt.parent().children().removeClass("active");
                         elemnt.addClass("active");
                     });
                 }
             };
         }]);
    
    
    })(angular); 

    6.通过gulp打包工具压缩代码,清除注释

      1.使用node下载相应的第三方包

        下载gulp  npm install gulp --save 

        下载压缩css  npm install gulp-cssmin --save

        下载压缩js  npm install gulp-uglify --save

        下载合并js  npm install gulp-concat --save

        下载压缩html  npm install gulp-htmlmin --save

      2.引入下载的第三方包,通过require()方法来引入

      3.创建任务压缩css代码

        gulp.task("yscss",function(){gupl.src(想压缩文件).pipe(引入的js函数).pipe(gulp.dest(压缩到哪里))})

        在cmd中运行gulp  gulp yscss  来进行压缩css代码

    //1. 引入gulp
    var gulp = require("gulp");
    //2. 引入压缩css的模块.
    var cssmin = require("gulp-cssmin");
    
    var uglify = require("gulp-uglify");
    
    var concat = require("gulp-concat");
    
    var htmlmin = require("gulp-htmlmin");
    
    
    //2.创建任务.
    gulp.task("testTask", function () {
        console.log("这是1个新的任务!");
    
    });
    
    //3.创建任务 压缩css代码
    gulp.task("yscss", function () {
        gulp.src("./src/**/*.css")
            .pipe(cssmin())
            .pipe(gulp.dest("./dist"));
    });
    
    //4.压缩js代码
    gulp.task("ysjs", function () {
        gulp.src(["./dist/assets/js/all.js"])
            .pipe(uglify())
            .pipe(gulp.dest("./dist/assets/js"));
    })
    
    //5. 压缩html
    gulp.task("yshtml", function () {
        gulp.src("./src/**/*.html")
            .pipe(htmlmin({
                removeEmptyAttributes: true,
                collapseWhitespace: true,
                removeComments: true,
            }))
            .pipe(gulp.dest("./dist"));
    });
    

      

      

        

  • 相关阅读:
    SAP BW维护项目中的常见问题 沧海
    从印度英语想到creole 沧海
    侃State模式
    住在“天堂”的代价一个工薪阶层买房的感受
    家庭财务总管软件设计
    侃观察者模式(Observer)
    软件设计起步:画UML类图
    一个提醒软件---好朋友
    学习设计模式的一些心得
    一次偶然结对编程的感受
  • 原文地址:https://www.cnblogs.com/wade1220/p/7396116.html
Copyright © 2020-2023  润新知