從零開始搭建口袋妖怪管理系統(3)-實現一個簡單的SPA管理系統

時間  2019-11-10
標籤 開始 搭建 口袋妖怪 管理 系統 實現 一個 簡單 spa 简体版
原文   原文鏈接

1、目標

上一章咱們完成了口袋妖怪的細節展現頁面，此次我想要把總計劃的框架搭起來，也就是創建起一個口袋妖怪SPA管理系統，包含口袋妖怪、技能、樹果、道具、遊戲這樣五個模塊，而且可以經過導航平滑跳轉到指定模塊。css

2、分析

SPA系統的基礎是路由&模塊化，因此將上一章咱們所寫的pokemon抽象出pokemon模塊，而後路由默認跳轉至pokemon模塊頁面。完成以後再照葫蘆畫瓢完成其餘模塊的，最後再編寫導航標籤實現口袋妖怪SPA系統的多模塊導航。html

3、開發

1. pokemon部分模塊化

首先在pokemon文件夾中新建pokemon.js，而後在index.html中加入引用：webpack

<script src="pokemon/pokemon.js"></script>

完成以後開始編寫pokemon.js，首先完成建立pokemon-app.pokemon模塊並引入ng-Route依賴：git

(function () {
  'use strict';
  angular.module('pokemon-app.pokemon', ['ngRoute']);
})();

接着將app.js中的pokemon控制器部分剪切過來，固然順便把pokemons的數據也帶上：github

(function () {
  'use strict';
  angular.module('pokemon-app.pokemon', ['ngRoute'])
  .controller('PMListController', PMListController)
  .controller('PMDetailController', PMDetailController);

  
  var pokemons = [
    { no:'001', name:'妙蛙種子', count: 1, weight: 6.9, property: '草/毒', type: '種子寶可夢', character: { common: '茂盛', conceal: '葉綠素'}},
    { no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '種子寶可夢',  character: { common: '茂盛', conceal: '葉綠素'}},
    { no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '種子寶可夢',  character: { common: '茂盛', conceal: '葉綠素'}},
    { no:'004', name:'小火龍', count: 1, weight: 8.5, property: '火', type: '蜥蜴寶可夢',  character: { common: '猛火', conceal: '太陽之力'}},
    { no:'025', name:'皮卡丘', count: 1, weight: 6, property: '電', type: '鼠寶可夢',  character: { common: '靜電', conceal: '避雷針'}}
  ];

  PMListController.$inject = ['$scope'];
  function PMListController ($scope) {
    $scope.pokemons = pokemons;
    $scope.remove = function (index) {
      $scope.pokemons.splice(index, 1);
    }
  }

  PMDetailController.$inject = ['$scope', '$routeParams'];
  function PMDetailController ($scope, $routeParams) {
    console.log('$routeParams:', $routeParams);
    angular.forEach(pokemons, function (element) {
      if (element.no === $routeParams.no) {
        $scope.pokemon = element;
        console.log('the match pokemon:', $scope.pokemon);
      }
    });
  }
})();

而後再將app.js中pokemon路由部分剪切過來：web

angular.module('pokemon-app.pokemon', ['ngRoute'])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/pokemons', {
        templateUrl: 'pokemon/pm-list.html',
        controller: 'PMListController'
      })
      .when ('/pokemon/:no', {
        templateUrl: 'pokemon/pm-detail.html',
        controller: 'PMDetailController'
      })
  }])

pokemon模塊很簡單地完成了，這時候應該在app.js中添加對'pokemon-app.pokemon'模塊的依賴，並修改一下路由，使其初始化時默認加載pokemon模塊：segmentfault

(function () {
  'use strict';
  angular.module('pokemon-app', [
    'ngRoute',
    'pokemon-app.pokemon'           // 添加依賴
  ])
  .config (['$routeProvider', function ($routeProvider) {
    $routeProvider
      .otherwise({  
        redirectTo: '/pokemons'     // 初始化直接跳轉到pokemon模塊
      });
  }])

  AppController.$inject = ['$scope'];
  function AppController ($scope) {}
})();

至此，pokemon模塊已經徹底從主模塊中獨立出來了，主模塊想要使用pokemon就須要經過添加依賴的方式實現調用。app

2. 其餘模塊編寫

完成了pokemon模塊以後，其餘模塊的構建天然也是很簡單的，構建完成以後的項目文件目錄以下：框架

項目文件列表.png

完成每一個模塊的編寫以後，記得將模塊引入工程：ide

<!DOCTYPE html>
<html lang="en" ng-app="pokemon-app">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>口袋妖怪</title>
    <script src="libs/angular.js"></script>
    <script src="libs/angular-route.js"></script>
    <script src="pokemon/pokemon.js"></script>
    <script src="skill/skill.js"></script>
    <script src="hagberry/hagberry.js"></script>
    <script src="prop/prop.js"></script>
    <script src="game/game.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="app.css"/>
  </head>
  <body ng-controller="AppController">
    <h1>口袋妖怪管理系統</h1>
    <div ng-view></div>
  </body>
</html>

並添加爲'pokemon-app'模塊的依賴：

angular.module('pokemon-app', [
    'ngRoute',
    'pokemon-app.pokemon',           // 添加依賴
    'pokemon-app.skill',
    'pokemon-app.hagberry',
    'pokemon-app.prop',
    'pokemon-app.game'
])

3. 導航標籤

完成了模塊編寫以後，爲了方便去到想要的界面，如今來爲系統製做導航標籤。在index.htm中加入如下代碼：

<div>
    <h2>快速導航：</h2>
    <a href="/#!/pokemons">口袋妖怪</a>
    <a href="/#!/skills">技能</a>
    <a href="/#!/hagberrys">樹果</a>
    <a href="/#!/props">道具</a>
    <a href="/#!/games">遊戲</a>
</div>

4. 效果展現

項目效果展現.gif

5. 擴展學習--加入圖片

我在編寫上面的SPA系統過程當中，找到一些有趣的東西：[皮卡丘]（https://wiki.52poke.com/wiki/...）
在皮卡丘的頁面中，咱們發現皮卡丘有着許多換裝形象，因而我想要把這個功能加入到SPA系統中，實現效果就是在點擊口袋妖怪-皮卡丘後，在SPA系統中可以看到皮卡丘的樣子。

因而稍微擴展一下pokemons的數據，爲口袋妖怪加上原始圖像，若是有其餘形象，將其名稱及連接加入forms中：

var pokemons = [
    { no:'001', name:'妙蛙種子', count: 1, weight: 6.9, property: '草/毒', type: '種子寶可夢', 
      character: { common: '茂盛', conceal: '葉綠素'},
      img: 'https://s1.52poke.wiki/wiki/thumb/2/21/001Bulbasaur.png/300px-001Bulbasaur.png'
    },
    { no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '種子寶可夢',  
      character: { common: '茂盛', conceal: '葉綠素'},
      img: 'https://s1.52poke.wiki/wiki/thumb/7/73/002Ivysaur.png/300px-002Ivysaur.png'
    },
    { no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '種子寶可夢',  
      character: { common: '茂盛', conceal: '葉綠素'},
      img: 'https://s1.52poke.wiki/wiki/thumb/a/ae/003Venusaur.png/300px-003Venusaur.png'
    },
    { no:'004', name:'小火龍', count: 1, weight: 8.5, property: '火', type: '蜥蜴寶可夢',  
      character: { common: '猛火', conceal: '太陽之力'},
      img: 'https://s1.52poke.wiki/wiki/thumb/7/73/004Charmander.png/300px-004Charmander.png'
    },
    { no:'025', name:'皮卡丘', count: 1, weight: 6, property: '電', type: '鼠寶可夢',  
      character: { common: '靜電', conceal: '避雷針'},
      img: 'http://s1.52poke.wiki/wiki/thumb/0/0d/025Pikachu.png/260px-025Pikachu.png',
      forms: [
        { name: '偶像皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/e/e8/025Pikachu-Pop_Star.png/260px-025Pikachu-Pop_Star.png'},
        { name: '博士皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/2/2f/025Pikachu-PhD.png/260px-025Pikachu-PhD.png'},
        { name: '面罩摔角手皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/e/e7/025Pikachu-Libre.png/260px-025Pikachu-Libre.png'},
        { name: '貴婦皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/f/f0/025Pikachu-Belle.png/260px-025Pikachu-Belle.png'},
        { name: '重搖滾皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/4/4f/025Pikachu-Rock_Star.png/260px-025Pikachu-Rock_Star.png'},
      ] }
  ];

Tip： 數據來源 https://wiki.52poke.com/wiki/ , 僅引用展現而且承諾不用於商業用途。

接下來修改pm-detail.html頁面，加入初始形象img及其餘形象img：

<h2>口袋妖怪詳情：</h2>
<img ng-src="{{pokemon.img}}">
<p><b>編號: </b>No.{{pokemon.no}}</p>
<p><b>名稱: </b>{{pokemon.name}}</p>
<p><b>體重: </b>{{pokemon.weight}}</p>
<p><b>屬性: </b>{{pokemon.property}}</p>
<p><b>種類: </b>{{pokemon.type}}</p>
<div>
  <b>特性: </b>
  <ul>
    <li><b>普通特性: </b>{{pokemon.character.common}}</li>
    <li><b>隱藏特性: </b>{{pokemon.character.conceal}}</li>
  </ul>
</div>

<div ng-show="pokemon.forms">
  <b style="float: left;">其餘形象:</b><br/>
  <div ng-repeat="form in pokemon.forms" style="float: left;">
    <img ng-src="{{form.src}}">
    <p style="text-align: center;">{{form.name}}</p>
  </div>
  <div style="clear: both;"></div>
</div>

<a href="/#!/pokemons">返回列表</a>

加入形象效果展現.png

6. 源碼地址

口袋妖怪SPA系統源碼地址：https://github.com/Nodreame/p...

本章基本功能提交：https://github.com/Nodreame/p...

擴展學習源碼提交： https://github.com/Nodreame/p...

4、總結

藉助ngRoute以及模塊化開發，完成了口袋妖怪SPA系統的多模塊導航，可是如今引用的東西愈來愈多，以後若是系統再次擴容的話，隨着加載文件的增長加載時間也會隨之變長，並且會愈來愈難以維護，想知道怎麼解決的話，請看下章~

To be continue...

系列文章：

從零開始搭建口袋妖怪管理系統(1)-從Angular1.x開始

從零開始搭建口袋妖怪管理系統(2)-藉助ngRoute實現詳情頁面跳轉

從零開始搭建口袋妖怪管理系統(4)-藉助webpack4.6工程化項目(上)

從零開始搭建口袋妖怪管理系統(5)-藉助webpack4.6工程化項目(下)

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