docker的web管理工具

2017-09-14 12:47:06

海鸥

简介

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是一样的东西。

一个markdown编辑器editor.md

2017-07-19 11:38:00

Editor.md

Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.

Features

Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting…;
Markdown Extras : Support ToC (Table of Contents), Emoji, Task lists, @links.html"">@Links…;
Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
Support decode & fliter of the HTML tags & attributes;
Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;

README & Examples (English)

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

editormd-screenshot

主要特性

支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持 ToC（Table of Contents）、Emoji表情、Task lists、@links.html">@链接等 Markdown 扩展语法；
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；

Examples

https://pandao.github.io/editor.md/examples/index.html

Download & install

Github download

Bower install :

bower install editor.md

Usages

HTML：

```html

angularjs的$http发送post请求

2016-01-04 11:38:16

刚开始用angularjs的post方法时, 后台总是接收不到数据, 查了资料发现是因为angularjs的post提交方式和jquery的不一样, jquery默认就是模拟form提交数据, 而angularjs则使用的是 request payload, 所有使用$_POST是获取不到数据的, 解放方法:

$http({
    url: url,
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    data: {
        order_id: orderId
    },
    transformRequest: function(obj) {
        var str = [];
        for (var p in obj) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    }
}).success(function(data, header, config, status) {
    // 正确返回
}).error(function(data, header, config, status) {
    //处理响应失败
});

写了个jquery的自动填充form插件

2015-12-15 15:27:49

最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.

jquery.autofill.js

jQuery.fn.extend({
    autofill: function (data) {
        if (!data || !$.isPlainObject(data)) {
            return;
        }
        for (var name in data) {
            if ($.isArray(data[name])) {
                var field = $('[name="' + name + '[]"]', this);
                field.each(function () {
                    if (data[name].indexOf($(this).val()) >= 0) {
                        $(this).attr('checked', 'checked');
                    }
                });
            } else {
                var field = $('[name="' + name + '"]', this);
                field.each(function () {
                    switch ($(this).attr('type')) {
                        case 'radio':
                            if ($(this).val() === data[name].toString()) {
                                $(this).attr('checked', 'checked');
                            }
                            break;
                        default:
                            $(this).val(data[name]);
                            break;
                    }
                });
            }
        }
    }
});

使用方法 ./test.php

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="container">
            <form action="?" method="post" id="form">
                姓名: <input type="text" name="name" id="" />
                <br />
                年龄: <input type="number" name="age" id="" />
                <br />
                性别:
                <input type="radio" name="sex" value="1" id="" /> 男
                <input type="radio" name="sex" value="0" id="" /> 女
                <br />
                省份:
                <select name="area" id="">
                    <option value="-1">选择省份</option>
                    <option value="shanghai">上海</option>
                    <option value="beijing">北京</option>
                    <option value="henan">河南</option>
                </select>
                <br />
                爱好:
                <input type="checkbox" name="hobby[]" value="book" id="" /> 看书
                <input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
                <input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
                简介:
                <textarea name="content"></textarea>
                <br />
                <input type="submit" value="提交" />
            </form>
            <!-- 这里是数据 -->
            <div class="hidden" id="data">
                <?php
                $data = [
                    'name'    => 'shuai',
                    'age'     => '25',
                    'area'    => 'henan',
                    'sex'     => 0,
                    'hobby'   => ['book', 'games'],
                    'content' => 'hello world',
                ];
                echo json_encode($data);
                ?>
            </div>
        </div>
        <script src="jquery.min.js" type="text/javascript"></script>
        <script src="jquery.autofill.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var data = $.parseJSON($('#data').text());
                $('#form').autofill(data);
            });
        </script>
    </body>
</html>