欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 编程语言 > php >内容正文

php

php手游管理系统,搭建简单的游戏管理系统 -凯发k8官方网

发布时间:2024/10/14 php 31 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 php手游管理系统,搭建简单的游戏管理系统 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

这次给大家带来搭建简单的游戏管理系统,搭建简单游戏管理系统的注意事项有哪些,下面就是实战案例,一起来看一下。

一. 分析&布局设计

当前我们项目的界面是这样的:

简单来说,看不出一点管理系统的样子,到axure中文网找了一下,管理类网站的原型应该是下面这个样子的:

照着撸一个呗,管理系统界面一般由顶部导航&状态栏、左侧导航栏、右侧内容区域三个部分组成,也就是这样的:

我们网站内容较少所以顶部无需导航栏,也就是顶部只需保留左侧标题和右侧状态部分,接着再填充一下界面,顶部左侧加入系统名称和logo,顶部右侧加入用户名,左侧导航栏填充入导航项,右侧内容栏根据左侧选中的导航项显示对应的内容:

填充完布局之后好像变得能看了一些,那我们就根据效果图来完成这个界面。

二. 技术选型

借助框架能够快速实现整体样式,选用最通用的样式框架bootstrap3来协助完成界面,但是如果想要引入bootstrap3控件的话需要引入jquery,这是我们不想要的。

这时候我们可以考虑使用和angular项目的相性最佳的angular-ui-bootstrap来取代bootstrap3的控件,angular-ui-bootstrap是angularui团队在bootstrap基础上用angularjs实现的一组ui控件,在达到和bootstrap控件相同效果的情况下还无需引入jquery简直棒。

于是我们简单选定了bootstrap angular-ui-bootstrap组合来加速界面开发。

三. 开发

3.1 安装

3.1.1 angular-ui-bootstrap安装

参考angular-ui-bootstrap文档-dependencies,了解到其版本的选择与angular的版本有对应关系,不过我们用的是angularjs1.6.10版本所以可以直接安装最新的angular-ui-bootstrap:yarn add angular-ui-bootstrap --save

由于上面的文档还提到angular-ui-bootstrap需要angular-animate、angular-touch、bootstrap css,直接安装yarn安装顺便更新一下angular到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

...

])

在index.tpl.html中加入一段文档中的测试代码:

single toggle

{{singlemodel}}

single toggle

接着在app.js中的appcontroller中加入:$scope.singlemodel = 1;

结果如下:

中间多出了一个button并且可以通过点击修改数字,这表示angular-ui-bootstrap已经安装成功了~

3.1.2 bootstrap3配置

接下来我们为项目加入bootstrap.css,css可以通过webpack打包然后在项目入口文件app.js中加载,这里我们要用到css-loader、style-loader、file-loader(加载字体,如果没有这个loader字体会加载失败):yarn add css-loader style-loader file-loader --save-dev

修改webpack.config.js的module如下: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 界面开发

首先去掉上面添加的angular-ui-bootstrap测试代码,然后开始界面开发:

3.2.1 顶部状态栏

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

口袋妖怪管理系统v0.0.1

效果如下:

为了防止链接丢失导致图片加载失败,把图片下载下来放在本地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图片的加载器,如果符合条件图片链接将会转为一个dataurl,如果超过改限制,将会默认使用file-loader作为图片的加载器,修改后重新编译通过.

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

在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);

}

重新编译,在浏览器元素检测中看到图片已成功插入页面并以dataurl形式被引用:

顶部栏基本编写完成~

3.2.2 左侧导航栏 & 右侧内容区域

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

然后开始跟随demo简单布局:

main

很简单就完成了页面布局划分(这里左侧导航栏在小于768px时将自动隐藏):

然后继续编写左侧导航栏:

简单的左侧导航栏已经基本完成,并且点击能够看到内容切换,现在我们将被部分遮蔽的内容移动到右侧内容区域:

简单移动完成页面:

基础页面完成之后,看看内容样式还是比较丑,跟随dashboard例子和bootstrap修改其样式,对图鉴页(原来的口袋妖怪详情页)进行修改:

pm-list.html

no.名称数量重量总计操作

{{pokemon.no}}{{pokemon.name}}{{pokemon.weight}}{{pokemon.weight * pokemon.count}}删除

pm-detail.html

返回图鉴列表

{{pokemon.name}}

编号: no.{{pokemon.no}}

体重: {{pokemon.weight}}

属性: {{pokemon.property}}

种类: {{pokemon.type}}

特性:

  • 普通特性: {{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.;

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作为模态框的模板文件:

{{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中文网其它相关文章!

推荐阅读:

总结

以上是凯发k8官方网为你收集整理的php手游管理系统,搭建简单的游戏管理系统的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

网站地图