이번에는 간단한 게임 관리 시스템을 구축하는 방법에 대해 소개하겠습니다. 간단한 게임 관리 시스템 구축 시 주의사항 은 무엇인가요? 실제 사례를 살펴보겠습니다.
1. 분석 및 레이아웃 디자인
현재 우리 프로젝트의 인터페이스는 이렇습니다.
간단히 말하면 관리 시스템 같은 건 보이지 않네요. Axure 중국 웹사이트에서 검색해 봤습니다. 관리 웹사이트의 프로토타입은 다음과 같습니다:
하나를 클릭하기만 하면 됩니다. 관리 시스템 인터페이스는 일반적으로 상단 탐색 및 상태 표시줄, 왼쪽 탐색 막대 , 오른쪽 콘텐츠 영역의 세 부분으로 구성됩니다.
저희 웹사이트에는 콘텐츠가 적기 때문에 상단에 탐색 모음이 필요하지 않습니다. 즉, 제목을 왼쪽에 두고 상태 부분만 상단에 유지하면 됩니다. 를 입력한 다음 상단 왼쪽에 시스템 이름과 로고를 추가하고 상단 오른쪽에 사용자 이름을 추가합니다. 왼쪽 탐색 표시줄은 탐색 항목으로 채워지고 오른쪽 콘텐츠 표시줄이 표시됩니다. 왼쪽에서 선택한 탐색 항목에 따른 해당 콘텐츠:
레이아웃을 채우고 나면 가독성이 높아지는 것 같으니 렌더링 인터페이스를 기반으로 완성하겠습니다.
2. 기술 선택
프레임워크의 도움으로 전체적인 스타일을 빠르게 구현할 수 있으며 인터페이스 완성을 돕기 위해 가장 일반적인 스타일 프레임워크인 Bootstrap 3을 선택합니다. 하지만 Bootstrap3을 도입하려면 제어하려면 우리가 원하지 않는 jQuery를 도입해야 합니다.
현재 Bootstrap3 컨트롤을 대체하기 위해 Angular 프로젝트와 가장 호환되는angular-ui-bootstrap을 사용하는 것을 고려할 수 있습니다. Bootstrap jQuery를 도입할 필요 없이 Bootstrap 컨트롤과 동일한 효과를 얻을 수 있다는 점이 좋습니다.
그래서 우리는 인터페이스 개발 속도를 높이기 위해 Bootstrap + angular-ui-bootstrap 조합을 선택했습니다.
3. Development
3.1 설치
3.1.1 angle-ui-bootstrap 설치
버전 선택이 Angular 버전에 해당하는 것을 알아보려면 angle-ui-bootstrap 문서-Dependency를 참조하세요. AngularJS1.6.10 버전이므로 최신 angle-ui-bootstrap을 직접 설치할 수 있습니다.
yarn add angular-ui-bootstrap --save 로그인 후 복사
위 문서에서도 angle-ui-bootstrap에는 Angular-animate, Angular-touch 및 Bootstrap CSS가 필요하다고 언급했으므로 Yarn을 직접 설치하고 그런데 각도를 1.7.0으로 업데이트하세요:
yarn add angular --save
yarn add angular-animate --save
yarn add angular-touch --save
yarn add bootstrap@3 --save 로그인 후 복사
app.js에 대한 참조를 추가하고 'pokemon-app' 모듈에 대한 종속성을 추가하세요(Bootstrap3 스타일은 당분간 추가되지 않습니다):
import ngAnimate from 'angular-animate';
import ngTouch from 'angular-touch';
import uibootstrap from 'angular-ui-bootstrap';
...
angular.module('pokemon-app', [
...
ngAnimate,
ngTouch,
ngUIBootstrap
...
]) 로그인 후 복사
Add index.tpl.html에 대한 문서의 단락 테스트 코드:
<h4>Single toggle</h4>
<pre class="brush:php;toolbar:false">{{singleModel}} 로그인 후 복사
Single Toggle
그런 다음 app.js의 AppController에 추가합니다.
$scope.singleModel = 1; 로그인 후 복사
결과는 다음과 같습니다.
중앙에 추가 버튼이 있고 번호를 클릭하면 수정할 수 있습니다. 이는angular-ui-bootstrap이 성공적으로 설치되었음을 의미합니다. ~
3.1.2 Bootstrap3 구성
다음으로 Bootstrap.css를 프로젝트에 추가하고 CSS를 Webpack을 통해 패키징한 다음 로드할 수 있습니다. 프로젝트 entry file app.js 여기서는 css-loader, style-loader, file-loader를 사용해야 합니다(글꼴 로드, 로더가 없으면 글꼴 로드에 실패함):
yarn add css-loader style-loader file-loader --save-dev 로그인 후 복사
모듈 수정 webpack.config.js는 다음과 같습니다.
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.js에 도입됨
import 'bootstrap/dist/css/bootstrap.min.css'; 로그인 후 복사
이제 자동 새로고침 페이지를 확인하면 익숙한 Bootstrap 페이지 스타일이 마침내 나타나는 것을 확인할 수 있습니다.
3.2 界面开发
首先去掉上面添加的간단한 게임 관리 시스템 구축代码，然后开始界面开发：
3.2.1 顶部状态栏
顶部栏使用navbar样式编写，去掉原来的h1标签然后左边填充icon和系统名右边填充用户名，编写代码如下(图源来自神奇宝贝百科，承诺不用于商业用途)：
<nav>
<p>
</p>
<p>
<a>
<img alt="간단한 게임 관리 시스템 구축" >
</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图片的加载器，如果符合条件图片链接将会转为一个간단한 게임 관리 시스템 구축，如果超过改限制，将会默认使用file-loader作为图片的加载器，修改后重新编译通过.
现在继续修改index.tpl.html中图片位置的a标签，加入id="icon"并屏蔽原来图片：
<a>
<!-- <img width="20" style="max-width:90%" src="http://s1.52poke.wiki/wiki/5/5e/Bag_%E7%B2%BE%E7%81%B5%E7%90%83_Sprite.png" alt=""> -->
<!-- <img src="../assert/img/spriteball-common.png" 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);
} 로그인 후 복사
重新编译，在浏览器元素检测中看到图片已成功插入页面并以간단한 게임 관리 시스템 구축形式被引用：
顶部栏基本编写完成~
3.2.2 간단한 게임 관리 시스템 구축 & 右侧内容区域
顶部栏完成之后，左右将分成两部分，这里的页面布局划分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>
로그인 후 복사
很简单就完成了页面布局划分（这里간단한 게임 관리 시스템 구축在小于768px时将自动隐藏）：
然后继续编写간단한 게임 관리 시스템 구축：
简单的간단한 게임 관리 시스템 구축已经基本完成，并且点击能够看到内容切换，现在我们将被部分遮蔽的内容移动到右侧内容区域：
简单移动完成页面：
간단한 게임 관리 시스템 구축之后，看看内容样式还是比较丑，跟随dashboard例子和Bootstrap修改其样式，对图鉴页（原来的口袋妖怪详情页）进行修改：
pm-list.html
pm-detail.html
<p>
<a>
<span></span>返回图鉴列表
</a>
</p>
<h2><b>{{pokemon.name}}</b></h2>
<img alt="간단한 게임 관리 시스템 구축" >
<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 操作体验升级
现在网站布局和样式得到了优化，但是一些细节暂时还没处理好，列出一些比较直观能看到的不足：
간단한 게임 관리 시스템 구축交互缺乏选中感
删除按钮没有二次确认容易导致误删
现在我们就来完善这些细节。
3.3.1 간단한 게임 관리 시스템 구축交互
dashboard.css已经帮我们写好了选中간단한 게임 관리 시스템 구축某项之后变蓝底白字 的样式，只需要简单在选中项的
元素上加上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.
<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高亮步骤详解
위 내용은 간단한 게임 관리 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
