Erstellen Sie ein einfaches Spielverwaltungssystem

Dieses Mal zeige ich Ihnen, wie Sie ein einfaches Spielverwaltungssystem erstellen. Was sind die Vorsichtsmaßnahmen für den Aufbau eines einfachen Spielverwaltungssystems? Werfen wir einen Blick darauf.

1. Analyse & Layout-Design

Die aktuelle Schnittstelle unseres Projekts sieht so aus:

Einfach ausgedrückt gibt es kein Managementsystem Es sieht so aus, als ob ich auf die chinesische Website von Axure gegangen bin und nachgeschlagen habe. Der Prototyp der Management-Website sollte so aussehen:

Nehmen Sie einfach eine allgemeine Managementsystem-Schnittstelle besteht aus der oberen Navigations- und Statusleiste. Sie besteht aus drei Teilen: , linke Navigationsleiste und rechtem Inhaltsbereich, der so aussieht:

Unsere Website hat weniger Inhalt, daher ist oben keine Navigationsleiste erforderlich. Das heißt, Sie müssen nur den Titel links und den Statusteil rechts oben belassen und dann den Systemnamen hinzufügen und Logo auf der linken Seite der Oberseite, fügen Sie den Benutzernamen auf der rechten Seite der Oberseite hinzu, füllen Sie die Navigationsleiste auf der linken Seite mit Navigationselementen und füllen Sie die Inhaltsleiste auf der rechten Seite entsprechend dem ausgewählten Navigationselement auf der linken Seite Zeigt den entsprechenden Inhalt an:

Nach dem Ausfüllen des Layouts scheint es besser lesbar zu werden, daher werden wir die Benutzeroberfläche basierend auf den Renderings vervollständigen.

2. Technologieauswahl

Mit Hilfe des Frameworks können Sie schnell den gängigsten Stil-Framework Bootstrap3 erkennen, um die Benutzeroberfläche zu vervollständigen. aber wenn Sie Bootstrap3 einführen möchten Für Steuerelemente muss jQuery eingeführt werden, was wir nicht wollen.

Zu diesem Zeitpunkt können wir erwägen, Angular-UI-Bootstrap zu verwenden, das am besten mit dem Angular-Projekt kompatibel ist, um die Bootstrap3-Steuerelemente zu ersetzen, eine Reihe von UI-Elementen, die vom AngularUI-Team implementiert wurden AngularJS basiert auf Bootstrap Control. Es ist großartig, den gleichen Effekt wie Bootstrap Control zu erzielen, ohne jQuery einzuführen.

Also haben wir einfach die Kombination aus Bootstrap + angular-ui-bootstrap ausgewählt, um die Schnittstellenentwicklung zu beschleunigen.

3. Entwicklung

3.1 Installation

3.1.1 Angular-UI-Bootstrap-Installation

Weitere Informationen finden Sie im Dokument „Angular-UI-Bootstrap“. Die Wahl seiner Version entspricht der Angular-Version, aber wir verwenden die AngularJS1.6.10-Version, damit wir den neuesten Angular-UI-Bootstrap direkt installieren können:

yarn add angular-ui-bootstrap --save

Da das obige Dokument auch Angular-UI-Bootstrap erwähnt erfordert Angular-animate, Angular-touch und Bootstrap CSS. Übrigens, aktualisieren Sie Angular auf 1.7.0:

yarn add angular --save
yarn add angular-animate --save
yarn add angular-touch --save
yarn add bootstrap@3 --save

Fügen Sie einen Verweis auf app.js hinzu und fügen Sie ihn dem „pokemon-“ hinzu. app'-Modulabhängigkeiten (Bootstrap3-Stil wird vorerst nicht hinzugefügt):

import ngAnimate from 'angular-animate';
import ngTouch from 'angular-touch';
import uibootstrap from 'angular-ui-bootstrap';
...
angular.module('pokemon-app', [
    ...
    ngAnimate,
    ngTouch,
    ngUIBootstrap
    ...
])

Fügen Sie einen Testcode im Dokument zu index.tpl.html hinzu:

<h4 id="Single-toggle">Single toggle</h4>
<pre class="brush:php;toolbar:false">{{singleModel}}

    Single Toggle

Dann fügen Sie ihn dem AppController hinzu app.js:

$scope.singleModel = 1;

Die Ergebnisse sind wie folgt:

In der Mitte befindet sich ein zusätzlicher Button und die Zahl kann durch Anklicken geändert werden, d.h dass Angular-UI-Bootstrap erfolgreich installiert wurde~

3.1.2 Bootstrap3-Konfiguration

Als nächstes fügen wir Bootstrap.css zum Projekt hinzu, das über Webpack gepackt und dann in das Projekt geladen werden kann Eintragsdateiapp.js, die wir hier verwenden werden, CSS-Loader, Style-Loader, Datei-Loader (Laden von Schriftarten, wenn es keinen solchen Loader gibt, kann die Schriftart nicht geladen werden):

yarn add css-loader style-loader file-loader --save-dev

Ändern Sie das Modul von webpack.config.js wie folgt:

  module: {
    rules: [{
      test: /\.html$/,
      loader: 'raw-loader'
    }, {        // 负责css模块加载
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: ['file-loader']
    }]
  },

app

import 'bootstrap/dist/css/bootstrap.min.css';

wird in .js eingeführt. Schauen Sie sich nun die Seite nach dem automatischen Neuladen an und Sie werden es finden dass der bekannte Bootstrap-Seitenstil endlich erschienen ist:

3.2 界面开发

首先去掉上面添加的Erstellen Sie ein einfaches Spielverwaltungssystem代码，然后开始界面开发：

3.2.1 顶部状态栏

顶部栏使用navbar样式编写，去掉原来的h1标签然后左边填充icon和系统名右边填充用户名，编写代码如下(图源来自神奇宝贝百科，承诺不用于商业用途)：

<nav>
  <p>
    </p>
<p>
      <a>
        <img  src="/static/imghw/default1.png" data-src="http://s1.52poke.wiki/wiki/5/5e/Bag_%E7%B2%BE%E7%81%B5%E7%90%83_Sprite.png" class="lazy" alt="Erstellen Sie ein einfaches Spielverwaltungssystem" >
      </a>
      <a>口袋妖怪管理系统v0.0.1</a>
    </p>
    <p>
      </p>
<ul>
        <li><a>Nodreame</a></li>
      </ul>
    
  
</nav>

效果如下：

为了防止链接丢失导致图片加载失败，把图片下载下来放在本地assert/img文件夹下，命名为spriteball-common.png。按照Webpack模块化规则，图片也应该作为一个模块来加载，于是参考文档url-loader，在webpack.config.js文件的module中加入：

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        fallback: 'file-loader'
      }
    }
  ]
}

用url-loader作为小于8192byte图片的加载器，如果符合条件图片链接将会转为一个Erstellen Sie ein einfaches Spielverwaltungssystem，如果超过改限制，将会默认使用file-loader作为图片的加载器，修改后重新编译通过.

现在继续修改index.tpl.html中图片位置的a标签，加入id="icon"并屏蔽原来图片：

<a>
  <!-- <img src="/static/imghw/default1.png"  data-src="http://s1.52poke.wiki/wiki/5/5e/Bag_%E7%B2%BE%E7%81%B5%E7%90%83_Sprite.png"  class="lazy"     style="max-width:90%"  style="max-width:90%"  alt=""> -->
  <!-- <img src="/static/imghw/default1.png"  data-src="../assert/img/spriteball-common.png"  class="lazy"   alt=""> -->
</a>

在app.js中引入图片，并通过DOM操作把图片插入页面：

import icon from '../assert/img/spriteball-common.png'
...
  function AppController ($scope) {
    // $scope.singleModel = 1;
    var sysIcon = new Image();
    sysIcon.src = icon;
    sysIcon.width = 20;
    sysIcon.height = 20;
    document.getElementById('icon').appendChild(sysIcon);
  }

重新编译，在浏览器元素检测中看到图片已成功插入页面并以Erstellen Sie ein einfaches Spielverwaltungssystem形式被引用：

顶部栏基本编写完成~

3.2.2 Erstellen Sie ein einfaches Spielverwaltungssystem & 右侧内容区域

顶部栏完成之后，左右将分成两部分，这里的页面布局划分Bootstrap3似乎没有提供响应的样式，不过在Bootstrap的官网样例中我们找到了类似的Dashboard，他提供了一个现成的dashboard.css我们可以直接用起来，将dashboard.css放到assert/css文件夹下，并在app.js中引用：

import '../assert/css/dashboard.css'

然后开始跟随Demo简单布局：

<p>
  </p><p>
    </p><p>sidebar</p>
    <p>main</p>
  

很简单就完成了页面布局划分（这里Erstellen Sie ein einfaches Spielverwaltungssystem在小于768px时将自动隐藏）：

然后继续编写Erstellen Sie ein einfaches Spielverwaltungssystem：

<p>
  </p>

    
• 图鉴
    
• 技能
    
• 树果
    
• 道具
    
• 游戏
  

简单的Erstellen Sie ein einfaches Spielverwaltungssystem已经基本完成，并且点击能够看到内容切换，现在我们将被部分遮蔽的内容移动到右侧内容区域：

<p>
  </p>

简单移动完成页面：

Erstellen Sie ein einfaches Spielverwaltungssystem之后，看看内容样式还是比较丑，跟随dashboard例子和Bootstrap修改其样式，对图鉴页（原来的口袋妖怪详情页）进行修改：

pm-list.html

图鉴
<p>
  </p>

                                                                                                                                                              

NO.	名称	数量	重量	总计	操作
{{pokemon.no}}	{{pokemon.name}}		{{pokemon.weight}}	{{pokemon.weight * pokemon.count}}	删除

pm-detail.html

<p>
  <a>
    <span></span>返回图鉴列表
  </a>
</p>
<h2 id="b-pokemon-name-b"><b>{{pokemon.name}}</b></h2>
<img  src="/static/imghw/default1.png" data-src="{{pokemon.img}}" class="lazy" alt="Erstellen Sie ein einfaches Spielverwaltungssystem" >
<p><b>编号: </b>No.{{pokemon.no}}</p>
<p><b>体重: </b>{{pokemon.weight}}</p>
<p><b>属性: </b>{{pokemon.property}}</p>
<p><b>种类: </b>{{pokemon.type}}</p>
<p>
  <b>特性: </b>
  </p>

    
• 普通特性: {{pokemon.character.common}}
    
• 隐藏特性: {{pokemon.character.conceal}}
  

  其他形象:
  

         

{{form.name}}

     

上面代码中，pm-list修改了标题和表格样式，pm-detail修改了返回样式并稍微修缮了布局，修改结果如下：

其他界面也进行类似的修改，结果如下：

至此基本网站布局已完成。

3.3 操作体验升级

现在网站布局和样式得到了优化，但是一些细节暂时还没处理好，列出一些比较直观能看到的不足：

• Erstellen Sie ein einfaches Spielverwaltungssystem交互缺乏选中感

• 删除按钮没有二次确认容易导致误删

现在我们就来完善这些细节。

3.3.1 Erstellen Sie ein einfaches Spielverwaltungssystem交互

dashboard.css已经帮我们写好了选中Erstellen Sie ein einfaches Spielverwaltungssystem某项之后变蓝底白字的样式，只需要简单在选中项的

元素上加上class="active"就行，但是如果用DOM操作来做这个交互就很繁琐，所以考虑通过监听页面当前url来改变

元素的class，监听页面url当然是使用AngularJS的$location服务，该服务中有一个广播$locationChangeSuccess，在每次url改变之后都会广播事件，这里我们用它来修改全局对象nowUrl，我们在app.js中加入run：

  .run(['$rootScope', '$location', function ($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function () {
      $rootScope.nowUrl = $location.url();
      console.log('nowUrl:', $rootScope.nowUrl);
      // console.log('$route,routes.null.redirectTo:', $route.routes.null.redirectTo);
    });
  }])

监听页面切换的日志结果如下：

ke'yi看到获取到的nowUrl都是http://localhost:8080/#!后面的部分，那么了解到这点之后我们就可以尝试在index.tpl.html中借助ng-class指令来完成"根据当前url选中对应导航项"的操作了，修改index.tpl.html中

元素部分如下：

  
• 图鉴
  
• 技能
  
• 树果
  
• 道具
  
• 游戏

3.3.2 删除二次确认

为了达到二次确认删除的效果，我们可以使用angular-ui-bootstrap提供的模态框Modal，参考Modal.
首先我们在src目录下新建文件夹common来存放通用的html模板，新建文件deleteDialog.tpl.html作为模态框的模板文件：

<p>
  </p>
{{modalTitle}}


  {{modalBody}}


    删除
    取消

接下来就可以编写触发模态框的逻辑了，模仿文档修改pokemon.js中PMListController如下:

PMListController.$inject = ['$scope', '$uibModal'];
function PMListController ($scope, $uibModal) {
  $scope.pokemons = pokemons;
  console.log($scope.pokemons);
  $scope.remove = function (index) {
    console.log('index:', index);
    var modalInstance = $uibModal.open({
      animation: true,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      template: delDiage,
      controller: 'DeleteInstanceController',
      resolve: {
        pokemon: function () {
          return $scope.pokemons[index];
        }
      }
    });
    modalInstance.result.then(function (content) {
      console.log('Delete!', content);
      $scope.pokemons.splice(index, 1);   
    }, function (content) {
      console.log('Cancel!', content);
    });
  };
}

上面我们做了两处修改：

1. 为PMListController加入了依赖$uibModal，用以调用模态框；
2. 修改remove方法，使用$uibModal.open()创建模态框实例，并用实例编写模态框关闭的promise，关闭时选择close或cancel将触发不同事件。

完成了模态框触发逻辑编写之后，我们开始编写模态框的逻辑：

DeleteInstanceController.$inject = ['$scope', '$uibModalInstance', 'pokemon'];
function DeleteInstanceController ($scope, $uibModalInstance, pokemon) {
  // console.log('thisIndex:', thisIndex);
  console.log('pokemon:', pokemon);
  $scope.modalTitle = '删除';
  $scope.modalBody  = '是否删除' + pokemon.name + '的数据';
  $scope.ok = function () {
    console.log('delete!');
    $uibModalInstance.close(pokemon);
  };
  $scope.cancel = function () {
    console.log('cancel!');
    $uibModalInstance.dismiss('cancel');
  };
}

这里加入了$uibModalInstance和pokemon依赖，$uibModalInstance代表当前模态框对象，pokemon是$uibModal.open()配置中resolve传递过来的数据。在该controller中完成模态框的内容编写以及两个button触发的事件。接下来我们把这个controller加入module：

export default angular.module('pokemon-app.pokemon', [ngRoute])
    .config(['$routeProvider', function ($routeProvider) {
      $routeProvider
        .when('/pokemons', {
          template: pmlist,
          controller: 'PMListController'
        })
        .when ('/pokemon/:no', {
          template: pmdetail,
          controller: 'PMDetailController'
        })
    }])
    .controller('PMListController', PMListController)
    .controller('PMDetailController', PMDetailController)
    .controller('DeleteInstanceController', DeleteInstanceController)
    .name;

倒数第二行就是新加入module的controller，pm-list.html不用作任何修改，保存等待自动编译重载。

至此，系统的操作体验升级已经基本完成，为了系统体验同步，我们需要把模态框的效果也应用到其他的界面上。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS中的JSON和Math使用案例分析

react实现选中li高亮步骤详解

Das obige ist der detaillierte Inhalt vonErstellen Sie ein einfaches Spielverwaltungssystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!