vagrant+docker一键搭建php+mysql开发环境

必备软件

  1. Vagrant
  2. Virtual Box

启动脚本

  1. Vagrantfile
  1. Vagrant.configure("2") do |config|
  2. config.vm.box = "ubuntu/xenial64"
  3. config.vm.network "forwarded_port", guest: 80, host: 80
  4. config.vm.network "forwarded_port", guest: 3306, host: 3306
  5. config.vm.network "private_network", ip: "10.0.0.2"
  6. config.vm.provision "shell", inline: <<-SHELL
  7. # 更换aliyun软件源
  8. cp /etc/apt/sources.list /etc/apt/sources.list.bak
  9. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse' > /etc/apt/sources.list
  10. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse' >> /etc/apt/sources.list
  11. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse' >> /etc/apt/sources.list
  12. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse' >> /etc/apt/sources.list
  13. echo 'deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse' >> /etc/apt/sources.list
  14. apt-get update
  15. # 安装docker
  16. apt-get -y install apt-transport-https ca-certificates curl software-properties-common
  17. curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
  18. add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
  19. apt-get -y update
  20. apt-get -y install docker-ce docker-compose
  21. # 使用aliyun加速docker镜像
  22. mkdir -p /etc/docker
  23. echo '{' > /etc/docker/daemon.json
  24. echo ' "registry-mirrors": ["https://kag9wqej.mirror.aliyuncs.com"]' >> /etc/docker/daemon.json
  25. echo '}' >> /etc/docker/daemon.json
  26. systemctl daemon-reload
  27. systemctl restart docker
  28. usermod -G docker vagrant
  29. cd /vagrant
  30. docker-compose up -d
  31. # 开机自启动
  32. echo '#!/bin/bash' > /etc/rc.local
  33. echo 'sleep 10' >> /etc/rc.local
  34. echo 'cd /vagrant' >> /etc/rc.local
  35. echo 'docker-compose up -d' >> /etc/rc.local
  36. echo 'exit 0' >> /etc/rc.local
  37. sudo rm /bin/sh
  38. sudo ln -s /bin/bash /bin/sh
  39. SHELL
  40. end
  1. docker-compose.yml
  1. version: '2'
  2. services:
  3. mysql:
  4. image: mysql
  5. environment:
  6. - MYSQL_ROOT_PASSWORD=root
  7. volumes:
  8. - "./mysql:/var/lib/mysql"
  9. ports:
  10. - '3306:3306'
  11. networks:
  12. - bridge
  13. www:
  14. build: .
  15. volumes:
  16. - "./wwwroot/www:/app"
  17. - "./wwwroot/static/Uploads:/app/Uploads"
  18. environment:
  19. - VIRTUAL_HOST="你要绑定的域名"
  20. - PHP_DB_HOST=mysql
  21. - PHP_DB_NAME=你的数据库名称
  22. - PHP_DB_USER=root
  23. - PHP_DB_PASSWORD=root
  24. networks:
  25. - bridge
  26. lb:
  27. image: 'dockercloud/haproxy'
  28. volumes:
  29. - /var/run/docker.sock:/var/run/docker.sock
  30. links:
  31. - www
  32. ports:
  33. - '80:80'
  34. networks:
  35. - bridge
  36. networks:
  37. bridge:
  1. Dockerfile
  1. FROM php:5.6-apache
  2. # 安装扩展
  3. COPY ./soft/*.tgz /soft/
  4. WORKDIR /soft
  5. RUN pecl install redis-3.1.6.tgz \
  6. && pecl install xdebug-2.5.5.tgz \
  7. && docker-php-ext-enable redis xdebug \
  8. && docker-php-ext-install pdo_mysql \
  9. && docker-php-ext-install mysqli \
  10. && rm -rf /soft
  11. # URL重写
  12. RUN a2enmod rewrite
  13. # 安装composer
  14. ADD ./soft/composer.phar /usr/local/bin/composer
  15. RUN chmod 755 /usr/local/bin/composer \
  16. && composer config -g repo.packagist composer https://packagist.phpcomposer.com
  17. # 安装代码
  18. COPY ./wwwroot /app/
  19. # 修改网站主目录
  20. ENV APACHE_DOCUMENT_ROOT /app
  21. RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
  22. RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
  23. # 可写权限
  24. RUN chmod -R 777 /app/
  25. # 默认工作目录
  26. WORKDIR /app
  27. # 暴露工作端口
  28. EXPOSE 80 443 22

基于 Composer 的 PHP 模块化开发

转载, 文章原始地址: https://zhuanlan.zhihu.com/p/27943241
订阅号:假装我会写代码

这个话题之前是在微博公司内部做的技术分享,这里拿出来分享给大家。

基于 GitHub 或者其它平台托管的开源项目的引入大家应该都已经非常熟悉了,但是公司内部项目的模块化应该怎么做呢?这或许是不少朋友头疼的问题。

我们先聊聊 PHP 模块化开发演进的过程,在没有 GitHub 之前,我们大家获取与分享代码的方式主要是博客,国内的 CSDN 或者博客园还有很多很多,大家都是从文章内复制到自己项目里面使用。现在看起来真的是相当原始粗暴,但是那个时代也没有太多可选的方案。导致的现象就是一段代码在 N 个项目里出现,可能见得最多的就是获取客户端 IP 的那几行了,在互联网上不止出现了几万遍。现在很多项目里都还是这段:

是不是很熟悉?

这种引入代码的方式有很多弊端:比如不安全,因为很多人是直接复制粘贴就用上了,根本没花时间去考证它是否真的是安全的。另外一个问题就是不同步,你今天在别人那里复制过来就用上了,后来作者发现了 bug 并修复更新了文章也不会通知你,你也不可能记得这段代码来自哪里去检查更新。

在没有 Composer 之前我们是如何引入代码的呢?除了上面说的复制粘贴以外,在 PHP 中还有 pear,不过自从用过两次我就再也不用它了,一种说不出来的感觉。

不信你可以找一些旧的项目看看,在没有 Composer 之前的项目中,你会发现大量的重复代码,以及各种花样的组织格式,各种规范的写法。这也是 Composer 诞生的原因之一。

Composer 给我们带来了诸多的好处:

  • 模块化,降低代码重用成本
  • 统一的第三方代码组织方式
  • 更科学的版本更新
    这三个是比较重要的特征了,基于 GitHub 的共享代码方式解决了传统引入方式带来了各种问题。

我们先来了解一点 Composer 基础。

Composer 的实现结构相对比较简单,http://Packagist.org 是 Composer 官方数据源,它的数据基于 GitHub 等代码托管平台,你在本地使用 Composer 命令行工具,基于 http://Packagist.org 的数据信息安装与更新依赖。
本地安装 Composer 非常简单,主要有以下几种方式:

新手同学需要注意的是,这里一定要确定 composer 安装目录在环境变量 $PATH 内才能全局使用 composer 命令。

那接下来我们聊一下如何创建一个 Composer 包。

步骤很简单,创建目录,然后在目录内使用命令 composer init 按照提示完成包的初始化。

接着就是完成你的代码编写,然后在 composer.json 文件配置你的引入方式等信息。
然后我们如何对已经写好的代码进行测试呢?

我们需要在其它任何地方建立一个测试项目(不要在刚才创建的包目录就可以),比如这里我们创建一个叫 ‘my-package-test’ 的目录,然后在目录里 composer init 完成项目初始化。接着就是声明项目依赖,我们这里要依赖的就是刚才建立好的包,由于我们的包还没有发布到 packagist,所以是无法直接 composer require 来安装的,我们需要告诉 composer 从哪里加载我们的包信息:

  1. $ composer config repositories.foo path /Users/overtrue/www/foo/bar

我们通过这个命令在 composer.json 中 repositories 区块添加了一个项目源。

然后我们添加包依赖:

  1. $ composer require foo/bar:dev-master -vvv

这样就完成了包的安装,你会发现这样的安装方式它只是创建了一个软链接到包目录,所以,你在测试的时候就可以直接在 vendor/foo/bar 下修改代码,这样就加快了你的开发速度。

更多细节这里你就自己去研究了,我们来看看 composer.json 文件:

我们最需要关心的就是图里上面的三个部分了,包名、依赖、以及自动加载,是必不可少的部分。

刚才我们提到了包的安装,安装依赖包的方式主要有以下两种:

手动方式是不太推荐的,容易写错,比如后面多一个逗号之类的,不过你可以写完以后使用以下命令来验证:

  1. $ composer validate

更新依赖就非常简单了:

虽然在上一篇文章我们已经讲了语义化版本,这里再提一次:

我们在依赖一个包的时候,很多同学对于依赖的版本一直处于蒙逼状态,那看完下一页你就恍然大悟了,首先是两个符号:”~” 与 “^”

接着是版本号的范围的各种写法:

还有包含稳定性的标识:

这里需要说一下生产环境最重要也一直是好多同学不清楚的一个东西:版本锁定,很多人在纠结,要不要把 composer.lock 上传到代码库啊。我可以给你一个特别简单的判断方法:

如果你的代码是一个项目,就上传,如果是一个工具包,给大家用的,就别上传。

在已经存在 composer.lock 的目录执行 composer install 的时候,是不会分析包依赖的,它只是按 composer.lock 中描述的下载地址直接下载,所以会快很多,而且版本号是具体的。那怕包已经发了新版,只要 composer.lock 没动过,它就会按 composer.lock 里的版本来安装。composer update 时会更新 composer.lock,所以不要乱用 composer update。

包开发好了怎么发布?开源的方式是这样的:

最后一句请酌情考虑。

另外一种发布方式是闭源,公司内部用的包,上传到 GitLab 或者其它私有的代码托管平台,有两种玩法:

  1. 最容易的玩法,在 composer.json 中添加 repositories 直接用 vcs 指定代码库地址
    这样做有一个缺点,当你的包很多的时候,你全都得在 composer.json 中加上才行。

  2. 自已架设 Packagist 类似的服务,Packagist 官方提供了两款: toran,收费,开源方案是 Satis,不过它偏手动一些,自己酌情选择即可。

私有包有一个点需要注意:授权,私有包肯定都是需要授权才能访问的,这里由于方案不太通用,大家根据自己的场景来解决就好了。

另外,有一些痛点不晓得啥时候能够解决:

好在 Laravel China 已经为了我提供了国内目前最稳定最好用的镜像源,Composer 中文镜像 / Packagist 中国全量镜像正式发布!

最后总结一下:

  在 PHP 现代开发中,Composer 已经是离不开的东西了,它的确加快了我们的开发速度节省了开发成本,如果你还在纠结用不用 Composer,那你真得反思一下了。

  本文标题是模块化开发,内容主要介绍了包的创建与测试,以及公有包与私有包的发布方案。但是无法帮你解决,如何拆分项目这类问题,这得基于你的长期经验积累,但是有一些经验可以分享一下:

  • 不要过度设计,很多自以为很 NB 我不把学到的东西用上就是不爽的同学,上来就分库分表,uuid 做主键之类,项目运营了好几年一个表还没到100万条记录,也是够厉害的。

  • 不要过早设计,真正 NB 的架构是演进而来的,不是前期设计出来的,当然不是说完全不需要设计哈,恰当的根据实际情况来就好,不要立项就把“千万”、“亿级”、“百亿” 这些单位挂在嘴边,也许到你项目倒闭那天你都没到过任何一个量级。随着项目逐渐改进即可。

  • 优先关注成本,很多同学以为是性能,No! 技术团队真正的成本是人力,所以开发效率才是优先需要关注的。上次文章在发在知乎有人就强制把我的“不要首先关注性能”解读成了“性能不重要”,也是够厉害的,语文也许跟养殖场动物学的。数学正常一点的人都会算,一台服务器多少钱?一个技术员工多少钱?服务器你花 20 万是永久资产,一个员工 20 万呢?半年工资?一年工资?

docker的web管理工具

海鸥

Docker Pulls
GoDoc
Gitter

简介

Seagull 友好的docker Web界面管理工具

  • 易于安装和卸载在Docker容器
  • 单击开始/停止/删除容器和镜像
  • 超快速(小于10ms)的搜索和过滤
  • 支持多主机管理和监控
  • 国际化主要包括英语、汉语、德语和法语

更多信息, 请到 dockerseagull.com, 观看 三分钟视频官方的幻灯片.

github地址

点击跳转: https://github.com/tobegit3hub/seagull

安装

  1. docker run -d -p 10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull

或运行 docker-compose up -d.

截图

多主机

Seagull支持监控多台服务器。确保你开始Docker守护这样。

  1. 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.

  1. Install golang and setup $GOPATH
  2. go get github.com/astaxie/beego
  3. go get github.com/tobegit3hub/seagull
  4. go build seagull.go
  5. sudo ./seagull

More detail in seagull-design-and-implement and we have excellent documents in docs.

提醒

The issue #2 每个人都可以在IP和端口海鸥接触访问您的码头工人守护。为了安全,你可以绑定到本地主机的访问限制。

  1. 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效果的框架。

参考文档

mui官网文档使用Jekyll 构建,立即查看

快速体验

在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;



在线交流

若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;

License

mui遵循MIT License;

开发工具

mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;



一个markdown编辑器editor.md

Editor.md






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

Features

README & Examples (English)


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

editormd-screenshot

主要特性

Examples

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

Download & install

Github download

Bower install :

  1. bower install editor.md

Usages

HTML:

```html


一个翻译github的脚本

把下面的代码另存为github.user.js, 然后拖拽到chrome的插件管理界面, 打开github就可以看到中文的github了

  1. (function() {
  2. var url_has = function(str) {
  3. return location.href.indexOf(str) >= 0;
  4. }
  5. var $ = function(selector) {
  6. return document.querySelectorAll(selector);
  7. };
  8. var replace_dom = function(selector, num, attr, old_string, new_string) {
  9. var selector_str = selector;
  10. if (typeof selector == 'string') {
  11. selector = $(selector);
  12. }
  13. var rep = function(str) {
  14. str = str || '';
  15. if (typeof new_string == 'undefined') {
  16. for (var j in old_string) {
  17. str = str.replace(old_string[j][0], old_string[j][1]);
  18. }
  19. } else {
  20. str = str.replace(old_string, new_string);
  21. }
  22. return str;
  23. }
  24. if (num === 'each') {
  25. for (var i in selector) {
  26. selector[i][attr] = rep(selector[i][attr]);
  27. }
  28. } else if (selector.length && (num in selector) && (attr in selector[num])) {
  29. selector[num][attr] = rep(selector[num][attr]);
  30. }
  31. if (typeof selector_str == 'string') {
  32. setTimeout(function() {
  33. replace_dom(selector_str, num, attr, old_string, new_string);
  34. }, 1000);
  35. }
  36. };
  37. if (!url_has('github.com')) {
  38. return;
  39. }
  40. // 搜索框
  41. replace_dom($('.header-search-input'), 0, 'placeholder', 'Search GitHub', '全站搜索');
  42. // 翻译导航 Pull requests, Issues, Gist
  43. replace_dom($('.header-nav a'), 2, 'innerHTML', 'Gist', '重点');
  44. // 首页的两个大按钮
  45. replace_dom($('.shelf-cta'), 0, 'innerHTML', 'Read the guide', '阅读指南');
  46. replace_dom($('.shelf-cta'), 1, 'innerHTML', 'Start a project', '开始一个项目');
  47. // 首页我贡献的
  48. replace_dom($('[role=navigation] h3'), 0, 'innerHTML', 'Repositories you contribute to', '你有贡献的库');
  49. // 首页我的仓库
  50. replace_dom($('#your_repos'), 0, 'innerHTML', 'Your repositories', '你的仓库');
  51. replace_dom($('#your_repos a'), 0, 'innerHTML', 'New repository', '新建仓库');
  52. replace_dom($('.repo-filter'), 0, 'innerHTML', 'All', '全部');
  53. replace_dom($('.repo-filter'), 1, 'innerHTML', 'Public', '公开');
  54. replace_dom($('.repo-filter'), 2, 'innerHTML', 'Private', '私有');
  55. replace_dom($('.repo-filter'), 3, 'innerHTML', 'Sources', '创建的');
  56. replace_dom($('.repo-filter'), 4, 'innerHTML', 'Forks', '克隆的');
  57. replace_dom($('#your-repos-filter'), 0, 'placeholder', 'Find a repository', '搜索仓库');
  58. // document.querySelector('.file-navigation i').innerHTML = '分支:';
  59. // 翻译提交时间
  60. replace_dom('relative-time,time-ago', 'each', 'innerHTML', [
  61. ['minutes ago', '分钟前'],
  62. ['an hour ago', '1小时前'],
  63. ['hours ago', '小时前'],
  64. ['a day ago', '一天前'],
  65. ['days ago', '天前'],
  66. ['a month ago', '1个月前'],
  67. ['months ago', '个月前'],
  68. [/^on\s(\d+)\sJan/, '1月$1号'],
  69. [/^on\s(\d+)\sFeb/, '2月$1号'],
  70. [/^on\s(\d+)\sMar/, '3月$1号'],
  71. [/^on\s(\d+)\sApr/, '4月$1号'],
  72. [/^on\s(\d+)\sMay/, '5月$1号'],
  73. [/^on\s(\d+)\sJun/, '6月$1号'],
  74. [/^on\s(\d+)\sJul/, '7月$1号'],
  75. [/^on\s(\d+)\sAug/, '8月$1号'],
  76. [/^on\s(\d+)\sSep/, '9月$1号'],
  77. [/^on\s(\d+)\sOct/, '10月$1号'],
  78. [/^on\s(\d+)\sNov/, '11月$1号'],
  79. [/^on\s(\d+)\sDec/, '12月$1号']
  80. ]);
  81. // 翻译提交时间
  82. replace_dom($('.commit-group-title'), 'each', 'innerHTML', [
  83. ['Commits on', '提交时间: '],
  84. [/Jan\s(\d+)\,\s(\d+)/, '$2年1月$1号'],
  85. [/Feb\s(\d+)\,\s(\d+)/, '$2年2月$1号'],
  86. [/Mar\s(\d+)\,\s(\d+)/, '$2年3月$1号'],
  87. [/Apr\s(\d+)\,\s(\d+)/, '$2年4月$1号'],
  88. [/May\s(\d+)\,\s(\d+)/, '$2年5月$1号'],
  89. [/Jun\s(\d+)\,\s(\d+)/, '$2年6月$1号'],
  90. [/Jul\s(\d+)\,\s(\d+)/, '$2年7月$1号'],
  91. [/Aug\s(\d+)\,\s(\d+)/, '$2年8月$1号'],
  92. [/Sep\s(\d+)\,\s(\d+)/, '$2年9月$1号'],
  93. [/Oct\s(\d+)\,\s(\d+)/, '$2年10月$1号'],
  94. [/Nov\s(\d+)\,\s(\d+)/, '$2年11月$1号'],
  95. [/Dec\s(\d+)\,\s(\d+)/, '$2年12月$1号']
  96. ]);
  97. // 创建新仓库页面
  98. replace_dom($('.subhead-heading'), 0, 'innerHTML', 'Create a new repository', '创建一个新的存储库');
  99. replace_dom($('.subhead-description'), 0, 'innerHTML', 'A repository contains all the files for your project, including the revision history.', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  100. replace_dom($('.owner-reponame label'), 0, 'innerHTML', 'Owner', '所有者');
  101. replace_dom($('.owner-reponame label'), 1, 'innerHTML', 'Repository name', '仓库名称');
  102. replace_dom($('.with-permission-fields .my-3'), 0, 'innerHTML', 'Great repository names are short and memorable. Need inspiration? How about', '一个存储库包含您的项目的所有文件,包括修改历史记录。');
  103. replace_dom($('.select-menu-title'), 0, 'innerHTML', 'Choose another owner', '选择其他所有者');
  104. replace_dom($('[for=repository_description]'), 0, 'innerHTML', 'Description', '描述');
  105. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Public', '公开');
  106. replace_dom($('.with-permission-fields .form-checkbox .note'), 0, 'innerHTML', 'Anyone can see this repository. You choose who can commit.', '公开: 任何人都可以看到这个库。你可以选择谁能提交。');
  107. // replace_dom($('.with-permission-fields .form-checkbox label :nth-child(3)'), 0, 'textContent', 'Private', '私有');
  108. replace_dom($('.with-permission-fields .form-checkbox .note'), 1, 'innerHTML', 'You choose who can see and commit to this repository.', '私有: 您选择谁可以看到并提交到这个存储库。');
  109. // 版本库首页
  110. replace_dom($('.header-search-scope'), 0, 'innerHTML', [
  111. ['This repository', '搜索当前仓库'],
  112. ['This organization', '搜索当前组织']
  113. ]);
  114. replace_dom($('.numbers-summary li:nth-child(1) a'), 0, 'innerHTML', 'commits', '次提交');
  115. replace_dom($('.numbers-summary li:nth-child(2) a'), 0, 'innerHTML', 'branch', '个分支');
  116. replace_dom($('.numbers-summary li:nth-child(3) a'), 0, 'innerHTML', 'releases', '个版本');
  117. replace_dom($('.numbers-summary li:nth-child(4) a'), 0, 'innerHTML', 'contributors', '个贡献者');
  118. replace_dom('#context-commitish-filter-field', 0, 'placeholder', [
  119. ['Filter branches/tags', '搜索分支标签'],
  120. ['Find a tag', '搜索标签']
  121. ]);
  122. replace_dom($('h3'), 'each', 'innerHTML', [
  123. ['Watched repositories', '监控的版本库'],
  124. ]);
  125. replace_dom($('button,a,span,i'), 'each', 'innerHTML', [
  126. ['New pull request', '新拉取请求'],
  127. [' Projects', ' 项目'],
  128. [' Pulse', ' 脉冲'],
  129. [' branch', ' 分支'],
  130. ['Graphs', '图表'],
  131. ['Settings', '设置'],
  132. ['Pull requests', '拉取请求'],
  133. ['Change notification settings', '更改通知设置'],
  134. ['Unread', '未读'],
  135. ['Unwatch all', '取消全部监控'],
  136. ['Unwatch', '取消监控'],
  137. ['Not watching', '不监控'],
  138. ['Participating', '参与'],
  139. ['Mark all as read', '标记全部为已读'],
  140. ['All notifications', '所有通知'],
  141. ['Notifications', '通知'],
  142. ['Watching', '监控'],
  143. ['Learn more', '加载更多'],
  144. ['New repository', '新建仓库'],
  145. ['New team', '新建团队'],
  146. ['My teams', '我的团队'],
  147. ['Repositories', '仓库'],
  148. ['People', '成员'],
  149. ['Teams', '团队'],
  150. ['Use SSH', '使用SSH协议'],
  151. ['Use HTTPS', '使用HTTPS协议'],
  152. ['Create new file', '创建新文件'],
  153. ['Upload files', '上传文件'],
  154. ['Find file', '搜索文件'],
  155. ['Issues', '问题'],
  156. ['Code', '代码'],
  157. ['Wiki', '维基'],
  158. ['Contact GitHub', '联系GitHub'],
  159. ['Training', '培养'],
  160. ['Blog', '博客'],
  161. ['Shop', '商店'],
  162. ['About', '关于'],
  163. ['Labels', '标签'],
  164. ['Milestones', '里程碑'],
  165. ['Filters', '搜索'],
  166. ['Clone or download', '克隆或下载'],
  167. ['Branches', '分支'],
  168. ['Branch:', '分支:'],
  169. ['Tags', '标签'],
  170. ['Download ZIP', '下载ZIP压缩包'],
  171. ['Switch branches/tags', '切换分支或标签']
  172. ]);
  173. })();

解决手机网页click事件的300毫秒延时问题

这里我不讨论为什么手机端有300毫秒延时, 只说解决方法, 需要知道为什么的小伙伴可以自己百度.

直接上解决方法

  1. 下载引入fastclick.js : https://github.com/ftlabs/fastclick
  2. 在网页加在后执行 FastClick.attach(document.body);
  3. 没有了, 尽情享受手机端快速相应的体验吧

angularjs的$http发送post请求

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

  1. $http({
  2. url: url,
  3. method: 'post',
  4. headers: {
  5. 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  6. },
  7. data: {
  8. order_id: orderId
  9. },
  10. transformRequest: function(obj) {
  11. var str = [];
  12. for (var p in obj) {
  13. str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
  14. }
  15. return str.join("&");
  16. }
  17. }).success(function(data, header, config, status) {
  18. // 正确返回
  19. }).error(function(data, header, config, status) {
  20. //处理响应失败
  21. });

php内置服务器使用方法

1 启动Web服务器

  1. $ cd ~/public_html
  2. $ php -S localhost:8000

终端输出信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html
  4. Press Ctrl-C to quit

当请求了 http://localhost:8000/http://localhost:8000/myscript.html 地址后,终端输出类似如下的信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html
  4. Press Ctrl-C to quit.
  5. [Thu Jul 21 10:48:48 2011] ::1:39144 GET /favicon.ico - Request read
  6. [Thu Jul 21 10:48:50 2011] ::1:39146 GET / - Request read
  7. [Thu Jul 21 10:48:50 2011] ::1:39147 GET /favicon.ico - Request read
  8. [Thu Jul 21 10:48:52 2011] ::1:39148 GET /myscript.html - Request read
  9. [Thu Jul 21 10:48:52 2011] ::1:39149 GET /favicon.ico - Request read

2 启动web服务器时指定文档的根目录

  1. $ cd ~/public_html
  2. $ php -S localhost:8000 -t foo/

终端显示信息:

  1. PHP 5.4.0 Development Server started at Thu Jul 21 10:50:26 2011
  2. Listening on localhost:8000
  3. Document root is /home/me/public_html/foo
  4. Press Ctrl-C to quit

如果你在启动命令行后面附加一个php脚本文件,那这个文件将会被当成一个“路由器”脚本。这个脚本将负责所有的HTTP请求,如果这个脚本执行时返回FALSE,则被请求的资源会正常的返回。如果不是FALSE,浏览里显示的将会是这个脚本产生的内容。

3 使用路由器脚本

在这个例子中,对图片的请求会返回相应的图片,但对HTML文件的请求会显示“Welcome to PHP”:

  1. <?php
  2. // router.php
  3. if (preg_match('/\.(?:png|jpg|jpeg|gif)$/', $_SERVER["REQUEST_URI"])) {
  4. return false; // serve the requested resource as-is.
  5. } else {
  6. echo "<p>Welcome to PHP</p>";
  7. }
  8. ?>

执行:

  1. $ php -S localhost:8000 router.php

4 判断是否是在使用内置web服务器

通过程序判断来调整同一个PHP路由器脚本在内置Web服务器中和在生产服务器中的不同行为:

  1. <?php
  2. // router.php
  3. if (php_sapi_name() == 'cli-server') {
  4. /* route static assets and return false */
  5. }
  6. /* go on with normal index.php operations */
  7. ?>

执行:

  1. $ php -S localhost:8000 router.php

这个内置的web服务器能识别一些标准的MIME类型资源,它们的扩展有:.css, .gif, .htm, .html, .jpe, .jpeg, .jpg, .js, .png, .svg, and .txt。对.htm 和 .svg 扩展到支持是在PHP 5.4.4之后才支持的。

5 处理不支持的文件类型

如果你希望这个Web服务器能够正确的处理不被支持的MIME文件类型,这样做:

  1. <?php
  2. // router.php
  3. $path = pathinfo($_SERVER["SCRIPT_FILENAME"]);
  4. if ($path["extension"] == "ogg") {
  5. header("Content-Type: video/ogg");
  6. readfile($_SERVER["SCRIPT_FILENAME"]);
  7. }
  8. else {
  9. return FALSE;
  10. }
  11. ?>

执行:

  1. $ php -S localhost:8000 router.php

如果你希望能远程的访问这个内置的web服务器,你的启动命令需要改成下面这样:

6 远程访问这个内置Web服务器

  1. $ php -S 0.0.0.0:8000

这样你就可以通过 8000 端口远程的访问这个内置的web服务器了。

php-angular模板引擎

源码地址: https://github.com/php-angular/php-angular

仿angularjs的php模板引擎

目前实现了一下几种标签和用法

标签

  1. php-if
  2. php-for
  3. php-foreach
  4. php-repeat
  5. php-show
  6. php-hide
  7. php-include
  8. php-init
  9. php-exec

变量输出
{$var}
{$array.name}
{$array[‘name’]}
{:func()}
{$var ? ‘’ : ‘’}

结合框架使用

具体的框架驱动可以在 /drivers 目录中找到

直接使用方法 /test/index.php

  1. <?php
  2. require '../lib/angular.php';
  3. // 配置
  4. $config = array(
  5. 'tpl_path' => './view/',
  6. 'tpl_suffix' => '.html',
  7. 'cache_path' => './cache/',
  8. 'attr' => 'php-',
  9. 'debug' => true,
  10. );
  11. // 实例化
  12. $view = new Angular($config);
  13. // 数据
  14. $data = array(
  15. 'title' => 'Hello PHP Angular',
  16. 'list' => array(
  17. array('name' => 'name_1', 'email' => 'email_1@qq.com'),
  18. array('name' => 'name_2', 'email' => 'email_2@qq.com'),
  19. array('name' => 'name_3', 'email' => 'email_3@qq.com'),
  20. array('name' => 'name_4', 'email' => 'email_4@qq.com'),
  21. array('name' => 'name_5', 'email' => 'email_5@qq.com'),
  22. ),
  23. );
  24. // 向模板引擎设置数据
  25. $view->assign($data);
  26. // 输出解析结果
  27. $view->display('index');
  28. // 获取输出结果
  29. // $view->fetch('index');

模板实例 /test/view/index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>php-angular</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style type="text/css">
  8. .box {
  9. padding: 10px;
  10. font-size: 12px;
  11. margin: 10px 5px;
  12. background: #CCC;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="box" php-show="$title">{$title}</div>
  18. <div class="box" php-hide="$title">如果title的值为空, 则可以显示这条消息, 否则不显示</div>
  19. <div class="box">
  20. <span>foreach by [1,2,3,4,5]</span>
  21. <ul>
  22. <li php-foreach="[1,2,3,4,5] as $i">foreach {$i}</li>
  23. </ul>
  24. </div>
  25. <div class="box">
  26. <span>repeat by [1,2,3,4,5]</span>
  27. <ul>
  28. <li php-repeat="[1,2,3,4,5] as $i">foreach {$i}</li>
  29. </ul>
  30. </div>
  31. <div class="box" php-show="$list">
  32. <span>foreach by $list as $item</span>
  33. <ul>
  34. <li php-foreach="$list as $item">name:{$item.name} -- email: {$item.email}</li>
  35. </ul>
  36. </div>
  37. <div class="box" php-show="$list">
  38. <span>repeat by $list as $item</span>
  39. <ul>
  40. <li php-repeat="$list as $item">name:{$item.name} -- email: {$item.email}</li>
  41. </ul>
  42. </div>
  43. <div class="box" php-if="$list">
  44. <span>foreach by $list as $key => $item</span>
  45. <ul>
  46. <li php-foreach="$list as $key => $item">{$key} -- name:{$item.name} -- email: {$item.email}</li>
  47. </ul>
  48. </div>
  49. <div class="box">
  50. <span>for by ($i = 1; $i <= 10; $i++;)</span>
  51. <ul>
  52. <li php-for="$i = 1; $i <= 10; $i++">for {$i}</li>
  53. </ul>
  54. </div>
  55. <div class="box" php-if="$list">
  56. <span>$list 不为空</span>
  57. </div>
  58. </body>
  59. </html>

解析结果 /test/cache/6a992d5529f459a44fee58c733255e86.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>php-angular</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style type="text/css">
  8. .box {
  9. padding: 10px;
  10. font-size: 12px;
  11. margin: 10px 5px;
  12. background: #CCC;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <?php if ($title) { ?><div class="box" ><?php echo $title; ?></div><?php } ?>
  18. <?php if (!($title)) { ?><div class="box" >如果title的值为空, 则可以显示这条消息, 否则不显示</div><?php } ?>
  19. <div class="box">
  20. <span>foreach by [1,2,3,4,5]</span>
  21. <ul>
  22. <?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
  23. </ul>
  24. </div>
  25. <div class="box">
  26. <span>repeat by [1,2,3,4,5]</span>
  27. <ul>
  28. <?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
  29. </ul>
  30. </div>
  31. <?php if ($list) { ?><div class="box" >
  32. <span>foreach by $list as $item</span>
  33. <ul>
  34. <?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  35. </ul>
  36. </div><?php } ?>
  37. <?php if ($list) { ?><div class="box" >
  38. <span>repeat by $list as $item</span>
  39. <ul>
  40. <?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  41. </ul>
  42. </div><?php } ?>
  43. <?php if ($list) { ?><div class="box" >
  44. <span>foreach by $list as $key => $item</span>
  45. <ul>
  46. <?php foreach ($list as $key => $item) { ?><li ><?php echo $key; ?> -- name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
  47. </ul>
  48. </div><?php } ?>
  49. <div class="box">
  50. <span>for by ($i = 1; $i <= 10; $i++;)</span>
  51. <ul>
  52. <?php for ($i = 1; $i <= 10; $i++) { ?><li >for <?php echo $i; ?></li><?php } ?>
  53. </ul>
  54. </div>
  55. <?php if ($list) { ?><div class="box" >
  56. <span>$list 不为空</span>
  57. </div><?php } ?>
  58. </body>
  59. </html>