이번에는 간단한 게임 관리 시스템을 구축하는 방법에 대해 소개하겠습니다. 간단한 게임 관리 시스템 구축 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
현재 우리 프로젝트의 인터페이스는 이렇습니다.
간단히 말하면 관리 시스템 같은 건 보이지 않네요. Axure 중국 웹사이트에서 검색해 봤습니다. 관리 웹사이트의 프로토타입은 다음과 같습니다:
하나를 클릭하기만 하면 됩니다. 관리 시스템 인터페이스는 일반적으로 상단 탐색 및 상태 표시줄, 왼쪽 탐색 막대, 오른쪽 콘텐츠 영역의 세 부분으로 구성됩니다.
저희 웹사이트에는 콘텐츠가 적기 때문에 상단에 탐색 모음이 필요하지 않습니다. 즉, 제목을 왼쪽에 두고 상태 부분만 상단에 유지하면 됩니다. 를 입력한 다음 상단 왼쪽에 시스템 이름과 로고를 추가하고 상단 오른쪽에 사용자 이름을 추가합니다. 왼쪽 탐색 표시줄은 탐색 항목으로 채워지고 오른쪽 콘텐츠 표시줄이 표시됩니다. 왼쪽에서 선택한 탐색 항목에 따른 해당 콘텐츠:
레이아웃을 채우고 나면 가독성이 높아지는 것 같으니 렌더링 인터페이스를 기반으로 완성하겠습니다.
프레임워크의 도움으로 전체적인 스타일을 빠르게 구현할 수 있으며 인터페이스 완성을 돕기 위해 가장 일반적인 스타일 프레임워크인 Bootstrap3을 선택합니다. 하지만 Bootstrap3을 도입하려면 제어하려면 우리가 원하지 않는 jQuery를 도입해야 합니다.
현재 Bootstrap3 컨트롤을 대체하기 위해 Angular 프로젝트와 가장 호환되는angular-ui-bootstrap을 사용하는 것을 고려할 수 있습니다. Bootstrap jQuery를 도입할 필요 없이 Bootstrap 컨트롤과 동일한 효과를 얻을 수 있다는 점이 좋습니다.
그래서 우리는 인터페이스 개발 속도를 높이기 위해 Bootstrap + angular-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}}
그런 다음 app.js의 AppController에 추가합니다.
$scope.singleModel = 1;
결과는 다음과 같습니다.
중앙에 추가 버튼이 있고 번호를 클릭하면 수정할 수 있습니다. 이는angular-ui-bootstrap이 성공적으로 설치되었음을 의미합니다. ~
다음으로 Bootstrap.css를 프로젝트에 추가하고 CSS를 Webpack을 통해 패키징한 다음 로드할 수 있습니다. 프로젝트 entry fileapp.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 페이지 스타일이 마침내 나타나는 것을 확인할 수 있습니다.
首先去掉上面添加的간단한 게임 관리 시스템 구축代码,然后开始界面开发:
顶部栏使用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); }
重新编译,在浏览器元素检测中看到图片已成功插入页面并以간단한 게임 관리 시스템 구축形式被引用:
顶部栏基本编写完成~
顶部栏完成之后,左右将分成两部分,这里的页面布局划分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时将自动隐藏):
然后继续编写간단한 게임 관리 시스템 구축:
<p> </p>
简单的간단한 게임 관리 시스템 구축已经基本完成,并且点击能够看到内容切换,现在我们将被部分遮蔽的内容移动到右侧内容区域:
<p> </p>
简单移动完成页面:
간단한 게임 관리 시스템 구축之后,看看内容样式还是比较丑,跟随dashboard例子和Bootstrap修改其样式,对图鉴页(原来的口袋妖怪详情页)进行修改:
图鉴
<p> </p>
NO. | 名称 | 数量 | 重量 | 总计 | 操作 |
---|---|---|---|---|---|
{{pokemon.no}} | {{pokemon.name}} | {{pokemon.weight}} | {{pokemon.weight * pokemon.count}} |
<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>
其他形象:
{{form.name}}
上面代码中,pm-list修改了标题和表格样式,pm-detail修改了返回样式并稍微修缮了布局,修改结果如下:
其他界面也进行类似的修改,结果如下:
至此基本网站布局已完成。
现在网站布局和样式得到了优化,但是一些细节暂时还没处理好,列出一些比较直观能看到的不足:
간단한 게임 관리 시스템 구축交互缺乏选中感
删除按钮没有二次确认容易导致误删
现在我们就来完善这些细节。
dashboard.css已经帮我们写好了选中간단한 게임 관리 시스템 구축某项之后变蓝底白字的样式,只需要简单在选中项的
.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中
为了达到二次确认删除的效果,我们可以使用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中文网其它相关文章!
推荐阅读:
위 내용은 간단한 게임 관리 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!