豆瓣電影我的項目總結

時間  2019-12-11
標籤 豆瓣 我的 項目 總結 简体版
原文   原文鏈接

1.用到的技術點javascript

npm  使用npm來進行下載相應的插件和框架
新建項目的文件目錄
    dist
    src
        assets
            css
            js
            img
    details
        details.html
        details.js
    app.js    主模塊，各個從(子)模塊會依賴注入到這裏
    index.html    主頁面來進行單頁面開發
gulp  來進行代碼壓縮和優化

2.index.html首頁模塊，用到的技術點css

　　angular指令html

　　　　ng-app    設置ng的管理範圍    ng-app="moviecat"前端

　　　　ng-view    路由匹配的內容會在這裏顯示    ng-viewjava

　　　　ng-submit  submit事件 按enter和button都會觸發的事件node

　　模塊js的引入npm

　　　　順序須要注意，須要依賴關係　　　json

<!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是主模塊，各個從(子)模塊依賴到這裏來gulp

　　1.使用一個自執行函數把全局變量angular傳到函數裏面api

　　　　(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"));
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程