PHP开发清单
前端框架Semantic-ui
官网: http://www.semantic-ui.cn/
更快地设计赏心悦目的网站
Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
简洁的 HTML
Semantic UI中词语和类(css clases)是可以相互替换的概念
直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。
取BEM 和 SMACSS 的精华,同时使之更易于使用。
直观明了的 Javascript
Semantic 使用被叫做 behaviors 的简单短语来触发功能
开发者可以更改任何组件中的配置来设置该组件中的某一设置
化繁为简的调试
记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。
docker的web管理工具
海鸥
简介
Seagull 友好的docker Web界面管理工具
- 易于安装和卸载在Docker容器
- 单击开始/停止/删除容器和镜像
- 超快速(小于10ms)的搜索和过滤
- 支持多主机管理和监控
- 国际化主要包括英语、汉语、德语和法语
更多信息, 请到 dockerseagull.com, 观看 三分钟视频 和 官方的幻灯片.
github地址
点击跳转: https://github.com/tobegit3hub/seagull
安装
docker run -d -p 10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
或运行 docker-compose up -d
.
截图
多主机
Seagull支持监控多台服务器。确保你开始Docker守护这样。
docker -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock -api-enable-cors=true -d
参与
Seagull is written in Go with tools like Docker, Beego, AngularJS, Bootstrap and JQuery.
- Install golang and setup
$GOPATH
go get github.com/astaxie/beego
go get github.com/tobegit3hub/seagull
go build seagull.go
sudo ./seagull
More detail in seagull-design-and-implement and we have excellent documents in docs.
提醒
The issue #2 每个人都可以在IP和端口海鸥接触访问您的码头工人守护。为了安全,你可以绑定到本地主机的访问限制。
docker run -d -p 127.0.0.1:10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
类似的Docker项目
现在有很多类似的项目提供了Web界面来监控Docker。海鸥就是受他们影响并且期望做得比他们更好。
我想把这些项目都介绍给你们,任何人都可以根据他们所需要的进行选择。
Dockerui
这是它的Github主页,https://github.com/crosbymichael/dockerui.
你可以发现海鸥的UI是有点像Dockerui。因为我们都使用了Bootstrap和AngularJS作为前端框架。它是一个很好的项目并且在Github上有差不多2000个关注。
海鸥从Dockerui中学习了很多,包括使用JQuery.Gritter作为网站通知。但Dockerui的界面不够简洁,而且它没有考虑到国际化的需求,而我们考虑到了。我们愿意为全世界的开发者多做些事情。Dockerui还没有实现搜索功能而海鸥则很擅长这点。
Dockerui和海鸥是同类型产品,用于监控Docker。你没必要同时使用他们。而我们的目标就是用一个更友好、更实用的UI满足用户,并且取代Dockerui。
Zdocker
这是它的Github主页,https://github.com/love320/Zdocker.
Zdocker做了同类的事情来监控Docker镜像和容器。但它是使用Java实现的,而且没有提供Docker镜像,而且人们很难使用和学习。
这只能算是个人项目,我并不建议你去使用。因为目前为止我也不知道该怎样去运行它。
Shipyard
这是它的Github主页,https://github.com/shipyard/shipyard.
Shipyard设计来管理一个Docker集群。你必须输入服务器的SSH认证代码才能部署Shipyard引擎。然后你就可以通过命令行或者Web界面在你管理的服务器上部署容器了。
它和海鸥是非常不同的,因为海鸥仅仅是监控Docker而不会要求更多的权限。因此你可以使用Shipyard作为管理系统,同时使用海鸥来监控Docker。
CAdvisor
这是它的Github主页,https://github.com/google/cadvisor.
CAdvisor来自于Google,它主要是为了分析容器的资源。你可以使用它来监控你的容器占用CPU或者内存的历史情况。
然后,你不能用CAdivsor来管理你的镜像和容器。
Docker Registry Web
这是它的Github主页,https://github.com/atc-/docker-registry-web.
这是为Docker参与设计的Web界面。它的UI展示不错但你必须手动添加私有仓库地址。它用了Cookies来存储这个地址所以每次你运行时都要重新添加。
当我尝试去搜索Docker镜像时程序崩溃了。当我尝试去或者镜像详细信息的时候它显示“方法未授权”。
我希望他们可以在我们添加私有仓库时就默认添加Docker官方仓库。但我不太可能因为http://registry.hub.docker.com不支持CORS。
Docker Registry UI
这是它的Github主页,https://github.com/worksap-ate/docker-registry-ui.
这也是为Docker仓库设计的Web界面。它能用但是UI不是很好。
Docker Register Frontend
这是它的Github主页,https://github.com/kwk/docker-registry-frontend.
这几乎是跟Docker-registry-web和Docker-registry-ui是一样的东西。
MUI一个以IOS为参考的移动端前端框架
mui
性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。
参考文档
快速体验
在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;
在线交流
若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;
License
mui遵循MIT License;
开发工具
mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;
php-angular模板引擎
源码地址: https://github.com/php-angular/php-angular
仿angularjs的php模板引擎
目前实现了一下几种标签和用法
标签
- php-if
- php-for
- php-foreach
- php-repeat
- php-show
- php-hide
- php-include
- php-init
- php-exec
变量输出
{$var}
{$array.name}
{$array[‘name’]}
{:func()}
{$var ? ‘’ : ‘’}
结合框架使用
具体的框架驱动可以在 /drivers 目录中找到
直接使用方法 /test/index.php
<?php
require '../lib/angular.php';
// 配置
$config = array(
'tpl_path' => './view/',
'tpl_suffix' => '.html',
'cache_path' => './cache/',
'attr' => 'php-',
'debug' => true,
);
// 实例化
$view = new Angular($config);
// 数据
$data = array(
'title' => 'Hello PHP Angular',
'list' => array(
array('name' => 'name_1', 'email' => 'email_1@qq.com'),
array('name' => 'name_2', 'email' => 'email_2@qq.com'),
array('name' => 'name_3', 'email' => 'email_3@qq.com'),
array('name' => 'name_4', 'email' => 'email_4@qq.com'),
array('name' => 'name_5', 'email' => 'email_5@qq.com'),
),
);
// 向模板引擎设置数据
$view->assign($data);
// 输出解析结果
$view->display('index');
// 获取输出结果
// $view->fetch('index');
模板实例 /test/view/index.html
<!DOCTYPE html>
<html>
<head>
<title>php-angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.box {
padding: 10px;
font-size: 12px;
margin: 10px 5px;
background: #CCC;
}
</style>
</head>
<body>
<div class="box" php-show="$title">{$title}</div>
<div class="box" php-hide="$title">如果title的值为空, 则可以显示这条消息, 否则不显示</div>
<div class="box">
<span>foreach by [1,2,3,4,5]</span>
<ul>
<li php-foreach="[1,2,3,4,5] as $i">foreach {$i}</li>
</ul>
</div>
<div class="box">
<span>repeat by [1,2,3,4,5]</span>
<ul>
<li php-repeat="[1,2,3,4,5] as $i">foreach {$i}</li>
</ul>
</div>
<div class="box" php-show="$list">
<span>foreach by $list as $item</span>
<ul>
<li php-foreach="$list as $item">name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box" php-show="$list">
<span>repeat by $list as $item</span>
<ul>
<li php-repeat="$list as $item">name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box" php-if="$list">
<span>foreach by $list as $key => $item</span>
<ul>
<li php-foreach="$list as $key => $item">{$key} -- name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box">
<span>for by ($i = 1; $i <= 10; $i++;)</span>
<ul>
<li php-for="$i = 1; $i <= 10; $i++">for {$i}</li>
</ul>
</div>
<div class="box" php-if="$list">
<span>$list 不为空</span>
</div>
</body>
</html>
解析结果 /test/cache/6a992d5529f459a44fee58c733255e86.php
<!DOCTYPE html>
<html>
<head>
<title>php-angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.box {
padding: 10px;
font-size: 12px;
margin: 10px 5px;
background: #CCC;
}
</style>
</head>
<body>
<?php if ($title) { ?><div class="box" ><?php echo $title; ?></div><?php } ?>
<?php if (!($title)) { ?><div class="box" >如果title的值为空, 则可以显示这条消息, 否则不显示</div><?php } ?>
<div class="box">
<span>foreach by [1,2,3,4,5]</span>
<ul>
<?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<div class="box">
<span>repeat by [1,2,3,4,5]</span>
<ul>
<?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<?php if ($list) { ?><div class="box" >
<span>foreach by $list as $item</span>
<ul>
<?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<?php if ($list) { ?><div class="box" >
<span>repeat by $list as $item</span>
<ul>
<?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<?php if ($list) { ?><div class="box" >
<span>foreach by $list as $key => $item</span>
<ul>
<?php foreach ($list as $key => $item) { ?><li ><?php echo $key; ?> -- name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<div class="box">
<span>for by ($i = 1; $i <= 10; $i++;)</span>
<ul>
<?php for ($i = 1; $i <= 10; $i++) { ?><li >for <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<?php if ($list) { ?><div class="box" >
<span>$list 不为空</span>
</div><?php } ?>
</body>
</html>