├── backend-notes ├── Active-Iptables-Services.md ├── Change-Hostname-On-CentOs-7-x64.md ├── Conf-App-Based-Express-With-Nginx-On-CentOs-7-x64.md ├── Conf-JDK-For-Windows.md ├── Conf-Nginx-With-NodeJs.md ├── Install-And-Conf-LEMP-On-Centos-7-x64.md ├── Install-And-Conf-Nginx-Php-Mysql-For-Windows.md ├── Install-MongoDB-On-OSX.md ├── Optimize-MariaDB-On-Centos-7-x64.md ├── Sorting-In-Mongoose.md ├── install-and-conf-nginx-with-rtmp-on-Centos-7-64.md └── install-and-conf-nginx-with-rtmp-on-osx.md ├── frontend-notes ├── javascript │ ├── angular-1.x │ │ ├── Angularjs-directives.md │ │ ├── Angularjs-route.md │ │ ├── Angularjs-seajs.md │ │ └── Angularjs.md │ ├── original │ │ ├── Customize-HTML5-Player.md │ │ ├── How-to-define-a-function-in-javascript.md │ │ ├── Interface-protected-in-javascript.md │ │ ├── JavaScript-Get-Set-Hash.md │ │ ├── JavaScript-inherit.md │ │ ├── Remove-element-in-javascript-array.md │ │ ├── ScrollTop-On-IE8.md │ │ ├── how-to-watch-unwatch-variables.md │ │ ├── isIE-And-addEvent.md │ │ ├── logical-expression.md │ │ └── use-regexr-replace-plain-URLs-with-links.md │ ├── plugins │ │ └── Datetimepicker-mod-version.md │ └── webgl-threejs │ │ └── angle-to-quaternion.md ├── others │ ├── Save-Svg-Or-Canvas-to-local-Disk-Chrome-Extensions.md │ └── use-seajs2.3.x-as-module-loader-with-package-built-by-spm-sea.md └── stylesheet │ ├── Css-Float-And-Clear-Fix.md │ ├── Css-Triangel-And-How-To-Draw.md │ ├── Css3-align-center-vertical-middle.md │ └── css-media-queries-for-standard-devices.md ├── mt-experimentations ├── About-Coding-Net-Api.md ├── Structure-of-VBigger-Based-On-Angular.md ├── Test-And-Debug-For-Front-End-Dev-Based-On-Environments.md └── Trying-For-Separating-FrontEnd-From-BackEnd.md ├── mt-notes └── Why-it-is-difficult-to-learn-nodejs-for-frontend-developer.md ├── mt-projects ├── Cyanogenmod-htc-one-sprint-model-chinese-version.md ├── MT-NOTES.md ├── MagiciTerm-Golang.md └── Qrcode-Gen.md └── other-notes ├── Backup-Data-While-Mac-Can-Be-Booted-Normally.md ├── Change-Remote-Git-Address.md ├── FFMPEG-Commands.md ├── Reinstall-OSX-Yosemite-And-Make-Create-Install-Media.md ├── android-notes ├── Android-Zip-Apk-Sign-Script-For-Linux.md ├── CyanogenMod-SMSC.md ├── Edit-and-compile-odex.md ├── Modify-dialer-panel-pinyin-method-for-blur.md ├── Run-android-in-emulator.md └── Show-ChinaTelecom-in-Chinese-On-D2G.md ├── gyro-hack-in-iframe.md ├── idl ├── Convert-To-Envi.md └── Convert-To-Tiff.md └── matlab └── Moving-Mean-Smooth.md /backend-notes/Active-Iptables-Services.md: -------------------------------------------------------------------------------- 1 | > * title: CentOS 7 开启 iptables禁止外部ip访问内部端口 2 | > * date: 2015-06-19 16:31:05 3 | 4 | 我们使用nginx作为前端代理处理网络访问请求，为了安全性考虑，要尽量访问外部ip访问一些内部端口例如mongodb的数据库27017，那么做法如下： 5 | 6 | # Install iptables 7 | yum install iptables-services 8 | 9 | 10 | 然后修改配置文件： 11 | 12 | # Mod conf 13 | nano /etc/sysconfig/iptables 14 | 15 | 内如如下： 16 | 17 | # 18 | # Generated by iptables-save v1.4.21 on Fri Aug 7 00:02:47 2015 19 | *filter 20 | :INPUT DROP [32:1868] 21 | :FORWARD DROP [0:0] 22 | :OUTPUT DROP [0:0] 23 | -A INPUT -p tcp -m tcp --dport 22 -j ACCEPT 24 | -A INPUT -p tcp -m tcp --dport 80 -m state --state NEW,ESTABLISHED -j ACCEPT 25 | -A INPUT -s 127.0.0.1/32 -d 127.0.0.1/32 -j ACCEPT 26 | -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT 27 | -A INPUT -p tcp -m tcp --dport 443 -m state --state NEW,ESTABLISHED -j ACCEPT 28 | -A OUTPUT -p tcp -m tcp --sport 22 -j ACCEPT 29 | -A OUTPUT -p tcp -m tcp --sport 80 -m state --state NEW,ESTABLISHED -j ACCEPT 30 | -A OUTPUT -j ACCEPT 31 | -A OUTPUT -p tcp -m tcp --sport 443 -m state --state NEW,ESTABLISHED -j ACCEPT 32 | COMMIT 33 | # Completed on Fri Aug 7 00:02:47 2015 34 | 35 | 最后重新启动iptables服务器即可： 36 | 37 | service iptables save 38 | systemctl restart iptables.service 39 | -------------------------------------------------------------------------------- /backend-notes/Change-Hostname-On-CentOs-7-x64.md: -------------------------------------------------------------------------------- 1 | > * title: CentOS 7.0 x64更改Hostname 2 | > * date: 2014-09-09 03:31:05 3 | 4 | 团队更换域名，需要对Vps中的hostname进行更改，看了网上的很多说法，都是说修改两处内容： 5 | 6 | /etc/sysconfig/network 7 | /etc/hosts 8 | 9 | 其实CentOS 7.0 中对于hostname的更改已经更换了命令， 10 | 11 | 故而以前的这种方式仅仅支持老的版本如CentOS 6，在7中已经更换为另一种方式： 12 | 13 | hostnamectl set-hostname name 14 | 15 | 输入上述命令即可更改hostname，重启后在terminal输入： 16 | 17 | hostname 18 | 19 | 就可以看到已经更改成功了。 -------------------------------------------------------------------------------- /backend-notes/Conf-App-Based-Express-With-Nginx-On-CentOs-7-x64.md: -------------------------------------------------------------------------------- 1 | > 配置基于Express,Nignx的Web App的进程守护及开机重启 2 | 3 | 4 | 文档站基于ExpressJs跑在VPS，使用了Nginx做前端代理，转发请求到内部网络的NodeJs服务器上。 5 | 6 | 为了能让开机启动，并在文件变化（这个情况比较少吧）或者进程意外结束后重启，参考了诸多的解决方案： 7 | 8 | * 基于Supervisord的自启动方法 9 | * 基于Forever与Crontab的方式 10 | * 基于Systemd的自定义服务启动 11 | * 基于PM2的进程守护，宕机重启 12 | 13 | 试用了上述的几种方式，supervisor适用于开发环境；forever据说是内部包含了一个supervisor的模块，具体的没怎么看，但是它的日志，是比较烦人的，不方便查看；pm2刚刚安装试了一下，感觉还不错，最起码查看log比较方便了。 14 | 15 | #### Nginx 16 | 17 | Nginx的前端代理配置 18 | 19 | # HTTP server 20 | # 21 | 22 | upstream node_com { 23 | server 127.0.0.1:8080; 24 | keepalive 8; 25 | } 26 | 27 | server { 28 | listen 0.0.0.0:80; 29 | server_name www.domain.com; 30 | 31 | charset utf-8; 32 | access_log /dir/log/log.log main; 33 | 34 | location / { 35 | proxy_pass http://node_com; 36 | proxy_set_header X-Real-IP $remote_addr; 37 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 38 | proxy_set_header Host $http_host; 39 | proxy_set_header X-NginX-Proxy true; 40 | 41 | proxy_redirect off; 42 | } 43 | } 44 | 45 | #### Express 46 | 47 | 添加一行，说明其是在Nginx的后端，前面有一层代理。 48 | 49 | app.set('trust proxy', APP_RUNENV.TRUST); 50 | 51 | 52 | #### 基于Forever的守护方式 53 | 54 | 在方便查找的位置放置一个autoload.sh： 55 | 56 | #!/bin/bash 57 | 58 | if [ $(ps -e -o uid,cmd | grep $UID | grep node | grep -v grep | wc -l | tr -s "\n") -eq 0 ] 59 | then 60 | export PATH=$PATH:/home/USERNAME/.nvm/v0.10.33/bin 61 | export NODE_PATH=$NODE_PATH:/home/USERNAME/.nvm/v0.10.33/lib/node_modules 62 | cd /home/USERNAME/domain.com && forever start ./autoload.js 63 | # 这里注意一下，直接填写绝对路径运行的结果和cd 然后运行的结果不同 64 | fi 65 | 66 | Crontab配置： 67 | 68 | crontab -l 69 | # 查看任务列表 70 | 71 | crontab -e 72 | # 进入编辑模式，并添加一行： 73 | @reboot /home/USERNAME/domain.com/autoload.sh 74 | 75 | #### 基于PM2的守护方式 76 | 77 | 先安装pm2吧，npm安装就是一句话： 78 | 79 | npm install -g pm2 80 | 81 | 然后是类似forver的启动方式： 82 | 83 | pm2 start autoload.js --watch 84 | 85 | 最后是pm2提供了一个简单的启动脚本的设置，使用比较方便。 86 | 87 | $ pm2 startup 88 | # auto-detect platform 89 | 90 | $ pm2 startup [platform] 91 | # render startup-script for a specific platform, the [platform] could be one of: 92 | # ubuntu|centos|redhat|gentoo|systemd|darwin 93 | 94 | 这样貌似就成了，具体需要还是参考文档吧。 95 | 96 | [PM2 - ADVANCED_README](https://github.com/Unitech/PM2/blob/development/ADVANCED_README.md) 97 | 98 | 今天再次测试的时候发现，pm2的startup并不靠谱，所以还是需要自己做一些东西，pm2启动以后基本是没什么问题的，但是自动启动的时候，需要一些环境变量什么的设置，因为我们是使用的nvm安装的，所以在启动脚本那边就这么写吧~ 99 | 100 | #!/bin/bash 101 | # Active Nvm 102 | . ~/.nvm/nvm.sh 103 | # Export PATH & NODE_PATH 104 | # export PATH=$PATH:/home/{username}/.nvm/versions/node/v0.12.7 105 | # export NODE_PATH=$NODE_PATH:/home/{username}/.nvm/versions/node/v0.12.7/lib/node_modules 106 | # Active PM2 107 | cd /home/{username}/workspace/{project} && npm run pm2sp 108 | -------------------------------------------------------------------------------- /backend-notes/Conf-JDK-For-Windows.md: -------------------------------------------------------------------------------- 1 | > * title: Java开发环境配置 2 | > * date: 2011-06-18 00:49:14 3 | 4 | Java现在是世界使用率最高的语言，以其跨平台的特性广受欢迎。 5 | 6 | #### 下载新版JDK 7 | 8 | [http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u26-download-400750.html](http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u26-download-400750.html) 9 | 10 | **注意：** 11 | 12 | * 一定要下载Windows版。 13 | * JRE是Java运行环境，JDK中包含它，但JRE不含有JDK中其他的组件，也就是说下的时候不要下JRE，要下JDK。 14 | * Java分三个版本，常用的是JavaSE，这也是其他两个的基础，所以请下载您要的版本。如果是初学者，请下载JavaSE版本。 15 | 16 | #### 设置环境变量 17 | 18 | * java_home为JDK的安装路径，例如:C:Program Files Program FilesJava Java jdk1.5.0_09 jdk1.5.0_09。 19 | * classpath为Java类文件的路径，一般配置就是一个"."（就是一个点，没有双引号）；有的Windows系统，在点后还要加一个分号“;”(无双引号)。 20 | * path为命令的检索路径，例如：%java_home% bin。 21 | 22 | #### 校验Java环境 23 | 24 | 在C盘建立一个文件叫dain.java 内容为: 25 | 26 | public class main 27 | { 28 | public static void main(String arg[]){ 29 | System.out.println("Hello world"); 30 | } 31 | } 32 | 33 | 然后启动控制台。 34 | 35 | #### 结语 36 | 37 | 如果没有错误提示，则您已经正确安装了Java环境。 -------------------------------------------------------------------------------- /backend-notes/Conf-Nginx-With-NodeJs.md: -------------------------------------------------------------------------------- 1 | > * title: Nginx+Node.js环境配置 2 | > * date: 2013-01-30 05:41:19 3 | 4 | 5 | 最近要给团队搭建一个网站，鉴于近期学习Js比较多，因而考虑用Node.js做开发， 6 | 7 | 与此同时，顺带着安装了Nginx，算是搭建一个Nginx+Node.js环境吧~ 8 | 9 | 10 | #### 资源文件 11 | 12 | * Node.js http://nodejs.org/ 13 | * Nginx http://nginx.org/ 14 | 15 | #### 环境配置 16 | 17 | ##### Nginx配置 18 | 19 | 其实Nginx的配置没什么好说的，我下载的是Stable version，也就是1.6，zip的解压并更名为nginx即可，之前下载过一个小工具： 20 | 21 | RunHiddenConsole.exe，配合着写一段批处理： 22 | 23 | @echo off 24 | echo 正在启动Nginx进程...... 25 | %~dp0RunHiddenConsole.exe E:My-ToolsNginxnginx.exe -c E:My-ToolsNginxconfnginx.conf 26 | echo Nginx已启动。 27 | pause 28 | 29 | 30 | 关于conf的配置根据个人需要改文件conf/nginx.conf: 31 | 32 | server { 33 | listen       80; 34 | server_name  localhost; 35 | 36 | #charset koi8-r; 37 | 38 | #access_log  logs/host.access.log  main; 39 | 40 | location / { 41 | root   html; 42 | proxy_pass http://127.0.0.1:8080; 43 | } 44 | 45 | error_page  404              /50x.html; 46 | } 47 | 48 | 49 | 运行时候点击上面的写的批处理即可。 50 | 51 | ##### Node.js配置 52 | 53 | 将下载好的node.js解压并设置全局变量（这个，个人百度吧....），我配置的目录就是那个html了。 54 | 55 | 56 | #### 最后测试 57 | 58 | 依然是写一个juy.js文件吧，内容如下： 59 | 60 | var http = require('http'); 61 | http.createServer( 62 | function (req, res) { 63 | res.writeHead(200, {'Content-Type': 'text/plain'}); 64 | res.end('Hello Juy n'); 65 | } 66 | ).listen(8080, "127.0.0.1"); 67 | console.log('Server running at http://127.0.0.1:8080/'); 68 | 69 | 接着命令行运行: 70 | 71 | node juy.js 72 | 73 | 打开浏览器http://localhost，熟悉的hello Juy就出现了，大功告成。 -------------------------------------------------------------------------------- /backend-notes/Install-And-Conf-LEMP-On-Centos-7-x64.md: -------------------------------------------------------------------------------- 1 | > * title: CentOS 7.0 x64下LEMP环境配置 2 | > * date: 2014-08-19 04:56:54 3 | 4 | 团队搭建网站，故而换了Vps作为服务器使用，显而易见，环境配置就是第一步了，综合考虑之后选择了CentOs 7.0 x64做系统，团队网站的话是使用LEMP（Linux+Nginx+Mysql+Php），老高那边也弄了一台，但他没怎么接触过linux系统，当然也就不要说环境配置了，所以整理下内容，方便同样对linux不太熟悉的朋友们。 5 | 6 | ### 服务器初始化 7 | 8 | 首先讲一下为什么要初始化配置，很多新人（我也是其中之一）都习惯性的在root权限下操作服务器，这个习惯确实是不太好，虽然说是很方便，但是吧，出了问题往往根本不知道出在哪里，所以还是建议按照我的推荐内容，对服务器做下初始化配置，大体就是配置一个普通帐号来使用，只有必要的时候才使用root帐号。 9 | 10 | #### 登录服务器： 11 | 12 | ssh root@domain.name 13 | 14 | ## 更改密码： 15 | passwd 16 | 17 | ## 添加用户： 18 | adduser thonatos 19 | 20 | ## 设置密码： 21 | passwd password 22 | 23 | ## 添加权限： 24 | visudo 25 | 26 | ## 然后找到下面的内容，并新添加一行: 27 | # User privilege specification 28 | root    ALL=(ALL)       ALL 29 | thonatos    ALL=(ALL)       ALL 30 | 31 | ##（这里说一下vi吧，其实我也不太会，但是勉强还能用一点，进入以后，键盘i进入插入模式， 32 | ## 不进行输入的时候就esc，然后切换到你要输入的位置，保存退出的话是键盘输入:wq并且回车键退出） 33 | 34 | ## 修改ssh端口是必要的，最起码默认的端口，还是尽量改了吧 35 | sudo nano /etc/ssh/sshd_config` 36 | Port 25000 37 | PermitRootLogin no 38 | AllowUsers thonatos 39 | 40 | ## 接着重启ssh服务， 41 | sudo systemctl reload sshd.service 42 | 43 | ## 测试的话用下面这句，如果没问题，可以登录，那就可以退出了~ 44 | ssh -p 25000 thonatos@domain.name 45 | 46 | 47 | 48 | ### 运行环境配置 49 | 50 | 上面说完了初始化，现在应该要搭建LEMP环境了，由于默认的yum源中nginx比较老，想要使用新的版本需要添加源，（注意我们现在是使用刚才配置的新帐号登录的，换言之，不是root帐号，所以需要输入sudo） 51 | 52 | #### 配置CentOs7的yum源 53 | 54 | sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 55 | 56 | #### 安装nginx 57 | 58 | sudo yum install nginx 59 | 60 | 等待完成以后，启动服务看看： 61 | 62 | sudo systemctl start nginx.service 63 | sudo systemctl enable nginx.service (开机启动) 64 | 65 | 接着就可以浏览器打开看看了，如果看到欢迎信息，就可以继续下一步了。 66 | 67 | #### 安装Mysql 68 | 69 | sudo yum install mariadb-server mariadb 70 | 71 | 同样的，等待完成后启动mysql数据库： 72 | 73 | sudo systemctl start mariadb 74 | 75 | 接着可以进行mysql的初始化配置，设置密码帐号，删除测试表（这里基本是都输入y）： 76 | 77 | sudo mysql_secure_installation 78 | 79 | 按照提示设置数据库的密码即可，同理配置开机启动： 80 | 81 | sudo systemctl enable mariadb.service 82 | 83 | #### 安装php-fpm 84 | 85 | sudo yum install php php-mysql php-fpm 86 | 87 | 同样的基本都是等待完成即可，然后继续配置php： 88 | 89 | sudo nano /etc/php.ini 90 | 91 | 然后修改按照自己的需要去掉注释“;”(快速定位内容请使用ctrl+w)： 92 | 93 | cgi.fix_pathinfo=0 94 | 95 | 接着ctrl+o保存，ctrl+x退出编辑，并继续编辑php-fpm如下： 96 | 97 | sudo nano /etc/php-fpm.d/www.conf 98 | 99 | ## 找到listen并改为如下内容： 100 | listen=/var/run/php-fpm/php-fpm.sock 101 | 102 | （之前忘了说了，感谢老高测试，哈哈哈）这里补充一句,用户组是要改了的，不然运行起来是有问题的： 103 | 104 | user = nginx 105 | group = nginx 106 | 107 | 接着启动服务，没有问题的情况下，开启开机启动： 108 | 109 | sudo systemctl start php-fpm 110 | sudo systemctl enable php-fpm.service 111 | 112 | 113 | #### 配置nginx+php-fpm 114 | 115 | 这里抽时间单独拿出来讲配置文件的写法，现在只是为了测试环境是否搭建成功，所以采用简略的写法： 116 | 117 | sudo nano /etc/nginx/conf.d/default.conf 118 | 119 | 去除注释以后，大概是这个样子的： 120 | 121 | server { 122 | listen 80; 123 | server_name localhost; 124 | 125 | location / { 126 | root /usr/share/nginx/html; 127 | index index.html index.htm; 128 | } 129 | error_page 500 502 503 504 /50x.html; 130 | location = /50x.html { 131 | root /usr/share/nginx/html; 132 | } 133 | } 134 | 135 | 然后我们修改成下面的样子： 136 | 137 | server { 138 | 139 | # 监听端口，默认就是80 140 | listen 80; 141 | 142 | # 网站域名 143 | server_name server_domain_name_or_IP; 144 | 145 | # 网站根目录(我是改成了/home/wwwroot) 146 | root /usr/share/nginx/html; 147 | index index.php index.html index.htm; 148 | 149 | location / { 150 | try_files $uri $uri/ =404; 151 | } 152 | 153 | # 错误页配置 154 | error_page 404 /404.html; 155 | error_page 500 502 503 504 /50x.html; 156 | location = /50x.html { 157 | root /usr/share/nginx/html; 158 | } 159 | 160 | # php-fpm配置，即对于php后缀的，都是用php-fpm处理 161 | location ~ \.php$ { 162 | try_files $uri =404; 163 | fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock; 164 | fastcgi_index index.php; 165 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 166 | include fastcgi_params; 167 | } 168 | } 169 | 170 | 这里都改完以后就可以保存了，然后在你的根目录（上面设置的根目录，比如我的/home/wwwroot）下面新建一个index.php文件并写入： 171 | 172 | ##（斜杠全部去掉。） 173 | 174 | 这里要说一下啊，我们的现在使用的帐号和用yum安装nginx的用户是不一样的，换言之，就是直接写入的文件会读取不到，所以再改权限： 175 | 176 | sudo chmod -R 755 /home/wwwroot/* 177 | sudo chown -R nginx.nginx /home/wwwroot/* 178 | 179 | 或者这样输入： 180 | 181 | cd /home/wwwroot 182 | sudo chmod -R 755 ./ 183 | sudo chown -R nginx.nginx ./ 184 | 185 | 186 | #### 环境测试 187 | 188 | 之前修改了nginx的配置，所以重启下nginx： 189 | 190 | sudo systemctl restart nginx.service 191 | 192 | 接着打开你的网站看看效果吧，不出意外的话，应该可以看到服务器信息了。 -------------------------------------------------------------------------------- /backend-notes/Install-And-Conf-Nginx-Php-Mysql-For-Windows.md: -------------------------------------------------------------------------------- 1 | > * title: Nginx+PHP+Mysql环境配置 2 | > * date: 2014-05-18 14:53:26 3 | 4 | 5 | 升级win8后感觉iis的使用还是比较方便的，偷懒什么的就一直在用iis，但是最近感觉内存吃紧，再加之笔者对电脑有点小洁癖，所以花费几分钟配置了一下Nginx+PHP+Mysql的运行环境，便于笔者进行php程序的测试及调试。 6 | 7 | #### 所需文件 8 | 9 | * nginx-1.6.0 [http://nginx.org/download/nginx-1.6.0.zip](http://nginx.org/download/nginx-1.6.0.zip) 10 | * php-5.4.28 [http://windows.php.net/downloads/releases/php-5.4.28-Win32-VC9-x86.zip](http://windows.php.net/downloads/releases/php-5.4.28-Win32-VC9-x86.zip) 11 | * mysql-5.6.17 [http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.17-win32.zip](http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.17-win32.zip) 12 | * RunHiddenConsole [http://redmine.lighttpd.net/attachments/660/RunHiddenConsole.zip](http://redmine.lighttpd.net/attachments/660/RunHiddenConsole.zip) 13 | 14 | 15 | #### 环境配置 16 | 17 | 解压对应的压缩包并得到相应的文件，php的相关配置根据自己的需要来写，mysql的配置麽，也就不多说了，这些都是基本的，其他地方基本都写了，直接跳过上述步骤来说具体的配置。 18 | 19 | 在nginx的conf目录下新建php.conf，然后修改nginx.conf为如下内容： 20 | 21 | #user nobody; 22 | worker_processes 1; 23 | #error_log logs/error.log; 24 | #error_log logs/error.log notice; 25 | #error_log logs/error.log info; 26 | #pid logs/nginx.pid; 27 | 28 | events { 29 | worker_connections 1024; 30 | } 31 | 32 | http { 33 | include mime.types; 34 | default_type application/octet-stream; 35 | #header-charset 36 | charset utf-8; 37 | 38 | #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 39 | # '$status $body_bytes_sent "$http_referer" ' 40 | # '"$http_user_agent" "$http_x_forwarded_for"'; 41 | 42 | #access_log logs/access.log main; 43 | 44 | sendfile on; 45 | #tcp_nopush on; 46 | 47 | #keepalive_timeout 0; 48 | keepalive_timeout 65; 49 | 50 | #gzip on; 51 | 52 | gzip on; 53 | 54 | #autoindex 55 | autoindex on; 56 | autoindex_exact_size on; 57 | autoindex_localtime on; 58 | 59 | server { 60 | listen 80; 61 | server_name localhost; 62 | 63 | #charset koi8-r; 64 | 65 | #access_log logs/host.access.log main; 66 | 67 | location / { 68 | root F:/My_Workspace/Web_Root; 69 | index index.php index.html index.htm; 70 | #添加index.php的默认页 71 | } 72 | 73 | #error_page 404 /404.html; 74 | 75 | error_page 404 /404.html; 76 | 77 | # redirect server error pages to the static page /50x.html 78 | # 79 | error_page 500 502 503 504 /50x.html; 80 | location = /50x.html { 81 | root html; 82 | } 83 | 84 | #此处进行php的配置，兵引入之前建立的php.conf文件 85 | location ~ \.php$ { 86 | root F:/My_Workspace/Web_Root; 87 | include php.conf; 88 | } 89 | 90 | # deny access to .htaccess files, if Apache's document root 91 | # concurs with nginx's one 92 | # 93 | #location ~ /\.ht { 94 | # deny all; 95 | #} 96 | } 97 | } 98 | 99 | 100 | 然后对php.conf进行修改： 101 | 102 | #此处设置php的fastcgi路径 103 | fastcgi_pass 127.0.0.1:9000; 104 | #此处设置默认页面 105 | fastcgi_index index.php; 106 | #此处设置运行脚本 107 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 108 | include fastcgi_params; 109 | 110 | 上述基本已经配置好了php的运行环境的一些设置，然后新建start_nginx.bat与stop_nginx.bat的批处理文件并将RunHiddenConsole放在nginx的根目录下，相关的内容如下： 111 | 112 | #start_nginx.bat 113 | 114 | @echo off 115 | echo Starting PHP FastCGI... 116 | RunHiddenConsole.exe D:/My-Tools/php-5.4.27/php-cgi.exe -b 127.0.0.1:9000 -c D:/My-Tools/php-5.4.27/php.ini 117 | echo Starting nginx... 118 | RunHiddenConsole.exe D:/My-Tools/nginx-1.6.0/nginx.exe 119 | exit 120 | 121 | #stop_nginx.bat 122 | @echo off 123 | echo Stopping nginx... 124 | taskkill /F /IM nginx.exe > nul 125 | echo Stopping PHP FastCGI... 126 | taskkill /F /IM php-cgi.exe > nul 127 | exit 128 | 129 | 至此运行环境基本完成，访问localhost就可以访问了，其他内容就不再多说了，核心的东西就这么多了。 -------------------------------------------------------------------------------- /backend-notes/Install-MongoDB-On-OSX.md: -------------------------------------------------------------------------------- 1 | install MongoDB (OSX). 2 | 3 | #### install 4 | 5 | brew install mongodb 6 | 7 | #### setting 8 | 9 | To have launchd start mongodb at login: 10 | 11 | ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents 12 | 13 | Then to load mongodb now: 14 | 15 | launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist 16 | 17 | Or, if you don't want/need launchctl, you can just run: 18 | 19 | mongod --config /usr/local/etc/mongod.conf 20 | 21 | ==> Summary 22 | 23 | /usr/local/Cellar/mongodb/2.6.5: 17 files, 331M -------------------------------------------------------------------------------- /backend-notes/Optimize-MariaDB-On-Centos-7-x64.md: -------------------------------------------------------------------------------- 1 | > * title: CentOS 7.0 x64下MariaDB异常结束的解决方法 2 | > * date: 2014-08-20 02:36:10 3 | 4 | 团队使用的是DigitalOcean的Vps，并且使用了LEMP作为运行环境， 5 | 6 | 团队主站是使用WordPress作为主程序来做支持，不过近期经常出现“建立数据库连接时出错”这个错误提示， 7 | 8 | 大概推测应该是数据库出问题了，所以我们现在先登录服务器查看一下错误代码。 9 | 10 | #### ssh连接过去先连接过去，然后输入： 11 | 12 | sudo systemctl status mariadb.service 13 | 14 | ## 这时候可以看到一些错误提示: 15 | 140819 14:06:14 mysqld_safe Logging to '/var/log/mariadb/mariadb.log'. 16 | 140819 14:06:14 mysqld_safe Starting mysqld daemon with databases from /var/lib/mysql 17 | 18 | ## 这里可以看到，log存储在/var/log/mariadb/mariadb.log里面，接着我们继续去查看一下问题： 19 | sudo nano /var/log/mariadb/mariadb.log 20 | 21 | ## 然后可以看到里面比较重要的问题是出现在了下面这句话里面： 22 | 140819 14:06:14 InnoDB: Fatal error: cannot allocate memory for the buffer pool 23 | 24 | ## 这里问题就比较明确了，内存不足，故而无法分配资源。 25 | 26 | #### 可行的解决方法大概有这么三种 27 | 28 | * 增加物理内存，使用的是DG的服务器，所以就直接升级配置即可。 29 | * 创建Swap分区，这种方式应该算是比较好的解决方法，使用的命令如下： 30 | 31 | ``` 32 | ## 使用Root权限，直接sudo -i吧 33 | dd if=/dev/zero of=/swap.dat bs=1024 count=524288 34 | ## 524288=512*1024也就是说分配了512M的交换分区 35 | mkswap /swap.dat 36 | swapon /swap.dat 37 | ## 然后查看下效果 38 | free -m 39 | ## 会出现下面的内容，也就是说已经成功了 40 | total used free shared buffers cached 41 | Mem: 490 453 37 1 1 22 42 | -/+ buffers/cache: 430 60 43 | Swap: 511 48 463 44 | ## 这样还不行，我们需要继续让系统自动挂载swap分区，编辑/etc/fstab并添加一行： 45 | /swap.dat swap swap 0 0 46 | ## 现在基本已经解决问题了，直接启动mariadb应该是没有问题了： 47 | sudo systemctl start mariadb.service 48 | ``` 49 | 50 | * 修改Mysql内存池大小，编辑/etc/my.cnf并修改如下内容： 51 | 52 | ``` 53 | [mysqld] 54 | innodb_buffer_pool_size=64M 55 | ``` 56 | 57 | 最后打开网站吧，应该可以看到内容了。 58 | 这里建议重启下服务器，当然，这不是必需的，也可以稍后重启。 -------------------------------------------------------------------------------- /backend-notes/Sorting-In-Mongoose.md: -------------------------------------------------------------------------------- 1 | Sorting in Mongoose has evolved over the releases such that some of these answers are no longer valid. As of the current 3.5.7 release of Mongoose, a descending sort on the date field can be done in any of the following ways: 2 | 3 | 使用Mongoose做nodejs应用开发的时候，需要对输出的数据进行排序如倒序正序，很多内容已经不适用了，这里是找到的可以用的一个排序使用方式。 4 | 5 | # 6 | # Code 7 | + Room.find({}).sort('-date').exec(function(err, docs) { ... }); 8 | + Room.find({}).sort({date: -1}).exec(function(err, docs) { ... }); 9 | + Room.find({}).sort({date: 'desc'}).exec(function(err, docs) { ... }); 10 | + Room.find({}).sort({date: 'descending'}).exec(function(err, docs) { ... }); 11 | + Room.find({}, null, {sort: {date: -1}}, function(err, docs) { ... }); 12 | + Room.find({}, null, {sort: [['date', -1]]}, function(err, docs) { ... }); 13 | 14 | Link: 15 | 16 | [In Mongoose, how do I sort by date? (node.js)](http://stackoverflow.com/questions/5825520/in-mongoose-how-do-i-sort-by-date-node-js) -------------------------------------------------------------------------------- /backend-notes/install-and-conf-nginx-with-rtmp-on-Centos-7-64.md: -------------------------------------------------------------------------------- 1 | 2 | conf nginx with rtmp module 3 | 4 | #### Command 5 | 6 | # 7 | # Install Lib 8 | sudo yum install pcre pcre-devel openssl openssl-devel zlib zlib-devel -y 9 | # 10 | # Download nginx && rtmp-module 11 | cd ~/download/ 12 | wget http://nginx.org/download/nginx-1.8.0.tar.gz 13 | wget https://github.com/arut/nginx-rtmp-module/archive/v1.1.7.zip 14 | # 15 | # Extract zip 16 | tar -xvf nginx-1.8.0.tar.gz 17 | tar -xvf v1.1.7.zip 18 | # 19 | # Configure 20 | cd nginx-1.8.0 21 | ./configure --add-module=../nginx-rtmp-module-1.1.7/ 22 | make 23 | # 24 | # Install 25 | sudo make install 26 | 27 | #### Systemd 28 | 29 | # 30 | # Add systemd 31 | # /usr/lib/systemd/system/nginx.service 32 | [Unit] 33 | Description=nginx - high performance web server 34 | Documentation=http://nginx.org/en/docs/ 35 | After=network.target remote-fs.target nss-lookup.target 36 | [Service] 37 | Type=forking 38 | PIDFile=/run/nginx.pid 39 | ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf 40 | ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 41 | ExecReload=/bin/kill -s HUP $MAINPID 42 | ExecStop=/bin/kill -s QUIT $MAINPID 43 | PrivateTmp=true 44 | [Install] 45 | WantedBy=multi-user.target 46 | # 47 | # Autoload 48 | systemctl enable nginx.service 49 | 50 | #### Config 51 | 52 | Add rtmp{} Before http{}; 53 | 54 | rtmp_auto_push on; 55 | rtmp { 56 | server { 57 | listen 1935; 58 | chunk_size 4096; 59 | timeout 10s; 60 | # application record { 61 | # live on; 62 | # record all; 63 | # record_path /Users/thonatos/workspace/localhost_cdndl/local_assets/flv/; 64 | # # record_max_size 1M; 65 | #} 66 | application hls { 67 | live on; 68 | hls on; 69 | hls_path /tmp/hls; 70 | hls_fragment 5s; 71 | # on_publish http://localhost:8035/event/status; 72 | # on_done http://localhost:8035/event/status; 73 | # on_publish_done http://localhost:8035/event/status; 74 | } 75 | } 76 | } 77 | 78 | Add server in http{}; 79 | 80 | server { 81 | listen 8000; 82 | location /hls { 83 | # Serve HLS fragments 84 | types { 85 | application/vnd.apple.mpegurl m3u8; 86 | video/mp2t ts; 87 | } 88 | root /tmp; 89 | add_header Cache-Control no-cache; 90 | } 91 | } 92 | 93 | #### Usage 94 | 95 | send steam & play. 96 | 97 | ## Send 98 | ffmpeg -re -i input.mp4 -c copy -f flv rtmp://192.168.3.8/hls/live 99 | ## Play 100 | ffplay http://192.168.1.122:8080/hls/live.m3u8 -------------------------------------------------------------------------------- /backend-notes/install-and-conf-nginx-with-rtmp-on-osx.md: -------------------------------------------------------------------------------- 1 | 2 | conf nginx with rtmp module 3 | 4 | #### Command 5 | 6 | brew tap homebrew/nginx 7 | brew options nginx-full 8 | brew info nginx-full 9 | brew install nginx-full --with-rtmp-module --with-debug 10 | 11 | #### Config 12 | 13 | Add rtmp{} Before http{}; 14 | 15 | rtmp_auto_push on; 16 | rtmp { 17 | server { 18 | listen 1935; 19 | chunk_size 400000; 20 | timeout 10s; 21 | application live { 22 | live on; 23 | record all; 24 | record_path /tmp; 25 | record_max_size 1M; 26 | } 27 | application hls { 28 | live on; 29 | hls on; 30 | hls_path /tmp/hls; 31 | hls_fragment 5s; 32 | } 33 | } 34 | } 35 | 36 | Add server in http{}; 37 | 38 | server { 39 | listen 8000; 40 | # This URL provides RTMP statistics in XML 41 | location /stat { 42 | rtmp_stat all; 43 | # Use this stylesheet to view XML as web page 44 | # in browser 45 | rtmp_stat_stylesheet stat.xsl; 46 | } 47 | location /stat.xsl { 48 | # XML stylesheet to view RTMP stats. 49 | # Copy stat.xsl wherever you want 50 | # and put the full directory path here 51 | root /usr/local/etc/nginx/rtmp/stat.xsl/; 52 | } 53 | location /hls { 54 | # Serve HLS fragments 55 | types { 56 | application/vnd.apple.mpegurl m3u8; 57 | video/mp2t ts; 58 | } 59 | root /tmp; 60 | add_header Cache-Control no-cache; 61 | } 62 | location /dash { 63 | # Serve DASH fragments 64 | root /tmp; 65 | add_header Cache-Control no-cache; 66 | } 67 | } 68 | 69 | #### Usage 70 | 71 | send steam & play. 72 | 73 | ## Send 74 | ffmpeg -re -i input.mp4 -c copy -f flv rtmp://192.168.3.8/hls/live 75 | ## Play 76 | ffplay http://192.168.1.122:8080/hls/live.m3u8 -------------------------------------------------------------------------------- /frontend-notes/javascript/angular-1.x/Angularjs-directives.md: -------------------------------------------------------------------------------- 1 | AngularJS(ng) lets you extend HTML with new attributes called Directives. --W3Schools. 2 | 3 | ng用来扩展HTML的属性即指令，通过ng的指令，我们能够对HTML进行扩展，ng自带了一些指令，例如： 4 | 5 | * ng-app 6 | * ng-init 7 | * ng-click 8 | * ng-model 9 | * ... 10 | 11 | 通过ng自带的指令，我们可以实现很多非HTML原生的功能，与此同时，我们也可以通过ng自定义指令，来实现我们所需要的功能。 12 | 13 | ### ng官方指令 14 | 15 | * ng-app指令用来初始化ng程序 16 | * ng-init指令用来初始化程序数据 17 | * ng-model指令用来绑定HTML的元素到ng程序数据 18 | 19 | 20 | 例子： 21 | 22 | ``` 23 |
24 |

{{ name }}

25 |

Name:

26 |
27 | ``` 28 | 29 | 这个简单的程序默认的显示tt，当我们改变输入框的内容，显示的内容也随之改变（例如我们输入name，则显示的内容也变为name）。 30 | 31 | ### 自定义指令 32 | 33 | ng自带的指令很多，也很实用，但是不一定能够适合我们在开发环境中的使用，例如我们需要在一个div中动态的改变内容，使用ng自带的指令，显然需要写很多才能够实现， 34 | 我们需要一个更具有扩展性的方式来实现，ng为我们提供了这样的方法或者说是这样的能力，开篇就讲到了，ng可以让我们通过新的属性对HTML进行扩展。 35 | 36 | 注册一个一个新的指令方法比较多，但是实现是基本类似的，不过是包裹的方式不一样，但功能是一样的： 37 | 38 | 39 | #### basis directive 40 | 41 | 42 | js代码： 43 | 44 | ``` 45 | var ass = angular.module('ASS',[]); 46 | ass.directive('newDirective',function(){ 47 | return { 48 | restrict: 'E', 49 | template: '
ng-directive
', 50 | replace: true 51 | }; 52 | }); 53 | ``` 54 | 55 | html代码： 56 | 57 | 58 | ``` 59 | 60 | 61 | 62 | 63 | 64 | ``` 65 | 这样html中的就会现实为ng-directive。 66 | 67 | 68 | #### directive - templateUrl 69 | 70 | 71 | 当然，这里是最简单的实现，上面的js还可以换成一个html页面。例如： 72 | js代码： 73 | 74 | ``` 75 | var ass = angular.module('ASS',[]); 76 | ass.directive('newDirective',function(){ 77 | return { 78 | restrict: 'E', 79 | templateUrl: 'newDirective.html', 80 | replace: true 81 | }; 82 | }); 83 | ``` 84 | 85 | newDirective.html可以写成这样： 86 | 87 |
ng-directive
88 | 89 | 然后输出的结果是相同的，不过只是这样还远远不够，仅仅替换内容，我们自己用js实现也很容易，何必用这么复杂的代码？ 90 | 91 | 92 | #### directive - transclude 93 | 94 | 95 | 我们来进一步增加他的功能，还是贴代码，简单暴力。 96 | js代码： 97 | 98 | ``` 99 | var ass = angular.module('ASS',[]); 100 | ass.directive('newDirective',function(){ 101 | return { 102 | restrict: 'E', 103 | templateUrl: 'newDirective.html', 104 | transclude: true 105 | }; 106 | }); 107 | ``` 108 | newDirective.html可以写成这样： 109 | 110 | 111 | ``` 112 |
ng-directive :

113 | ``` 114 | 115 | 116 | ``` 117 | 118 | 119 |

message

120 | 121 | 122 | ``` 123 | 124 | 125 | 这样就会将HTML中自定义的指令内部的内容引入了。 126 | 127 | 128 | #### directive - controller 129 | 130 | 这样还不够，他只是实现了html标签的功能，肯定要做点不一样的事情么，不然要你何用？ 131 | 132 | js代码： 133 | 134 | 135 | ``` 136 | directiveFactory.directive('searchDirective', function () { 137 | return { 138 | restrict: 'E', 139 | templateUrl: __ROOT__ + 'components/directive/searchDirective.html', 140 | controller: function ($scope, shareService) { 141 | //事件处理 142 | $scope.setEvent = function (eid, pid) { 143 | if (angular.isNumber(eid)) { 144 | shareService.setEid(eid); 145 | } 146 | if (angular.isNumber(pid)) { 147 | shareService.setPid(pid); 148 | } 149 | var _eid = shareService.getEid(); 150 | var _pid = shareService.getPid(); 151 | if (angular.isNumber(_eid) || angular.isNumber(_pid)) { 152 | console.log("SET GLOBAL EID : " + _eid + " PID : " + _pid + " AND REDIRECT TO EVENT(URL)"); 153 | location.href = '#/event/'; 154 | } 155 | $('#searchModal').modal('hide'); 156 | }; 157 | } 158 | }; 159 | }); 160 | ``` 161 | 162 | 这里我贴一个写过的directive，他能做什么呢？ 163 | 首先他内部定义了一个controller，这个controller包含一个$scope，这个$scope可以用来想我们的tmpl中绑定和传递参数，同时也能够接收tmpl中的event，例如这里我定义了一个setEvent方法，他可以用来传递用户选择eid和pid， 其次我向controller中注入了一个shareService，这里就能够将eid和pid传递给 164 | 我们定义的公共服务，让其他的controller获取eid/pid了。 165 | 166 | 那么我们总结一下，directive可以实现的功能包含了： 167 | 168 | * 替换自定义的HTML标签 169 | * 附加标签内容到新的标签 170 | * 事件绑定 171 | * 参数绑定 172 | * 注入调用（这里可以是服务，当然也可以是其他的一些内容，比如factory，又或者ng自带的一些功能，如$http,$route等等） 173 | 174 | ### More 175 | 176 | 暂时就写这么多了，有补充的再添加，凌晨两点半的南京，静悄悄，该睡觉了哦~ -------------------------------------------------------------------------------- /frontend-notes/javascript/angular-1.x/Angularjs-route.md: -------------------------------------------------------------------------------- 1 | As we start this post, we may already know something about ng(AngularJs) like : 2 | 3 | * ng-app 4 | * ng-model 5 | * ng-view 6 | * ng-conroller 7 | * how to add your res(css, js) 8 | * how to add jquery, ng and other libs 9 | 10 | So our html file may be : 11 | 12 | ``` 13 | 14 | 15 | 16 | 17 | BigInt - Vzhibo.tv 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 |
33 | 38 |
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ``` 51 | 52 | ### Deal with Route and MVC 53 | 54 | _** MVC : Model and View, Controller **_ 55 | 56 | #### Define our app 57 | 58 | 59 | ``` 60 | var BIApp = angular.module('BIApp', ['ngRoute','BIConrollers']); 61 | ``` 62 | 63 | #### Define our route 64 | 65 | ``` 66 | BIApp.config( 67 | ['$routeProvider', 68 | function($routeProvider) { 69 | $routeProvider. 70 | when('/', { 71 | templateUrl : __ROOT_VIEW__+'general.html', 72 | controller : 'generalController' 73 | }). 74 | when('/event', { 75 | templateUrl : __ROOT_VIEW__+'event.html', 76 | controller : 'eventController' 77 | }). 78 | when('/event/:view', { 79 | templateUrl: __ROOT_VIEW__+'event/event.html', 80 | controller: 'eventViewController' 81 | }). 82 | when('/post', { 83 | templateUrl : __ROOT_VIEW__+'post.html', 84 | controller : 'postController' 85 | }). 86 | otherwise({ 87 | templateUrl : __ROOT_VIEW__+'404.html' 88 | }); 89 | }] 90 | ); 91 | 92 | ``` 93 | 94 | _** What we need to focus on is "/event/:view" **_ 95 | 96 | #### Define our Controller 97 | 98 | ``` 99 | var BIConrollers = angular.module('BIConrollers', []); 100 | BIConrollers.controller('generalController', function($scope) { 101 | $scope.message = 'generalController'; 102 | }); 103 | BIConrollers.controller('eventController', function($scope) { 104 | $scope.message = 'eventController'; 105 | }); 106 | BIConrollers.controller('eventViewController', 107 | ['$scope', '$routeParams', 108 | function($scope, $routeParams) { 109 | $scope.eventView = $routeParams.view; 110 | }] 111 | ); 112 | BIConrollers.controller('postController', function($scope) { 113 | $scope.message = 'postController'; 114 | }); 115 | ``` 116 | 117 | _** eventViewConroller can deal with different requests. **_ 118 | 119 | 120 | ### What are we doing ? 121 | 122 | + when html file has been loaded, 123 | + **$routeProvider** : get parms from **$routeParams**, 124 | + **$routeProvider** : load the **general.html**,turn to **generalController** 125 | + **generalController** : put data 126 | + **general.html** : get data and render html 127 | 128 | this is traditional way, what is special? click the nav menu, it will do like about, but html file will not be load again! Just parts of DOM will be changed, that's what we have done! 129 | 130 | I do believe you can do it by using kinds of methods with JavaScript, But, what we do just now is so easy, we do not need to "find","replace" or some new methods, just define var in html files and put them somewhere, everything will be loaded automatic, Besides, you may not pay attention to **Browser Address Bar**, it has changed without page loaded again! 131 | 132 | we will find more later. 133 | 134 | 贴代码这种很简单暴力的方式虽然很没有节操，但说真的，很实在很有用，至少能让人一眼就明白怎么用不是？ -------------------------------------------------------------------------------- /frontend-notes/javascript/angular-1.x/Angularjs-seajs.md: -------------------------------------------------------------------------------- 1 | 2 | As we start this post, we may still heve to know something about ng(AngularJs) and seajs, SeaJs - A Module Loader for the Web, ng(AngularJs) is a MVVM(Model View ViewModel) framework: 3 | 4 | 5 | * how to add your res(css, js) 6 | * how to add jquery, ng and other libs 7 | * how to configure SeaJs and ng 8 | 9 | 10 | * Official SeaJs: [http://seajs.org/](http://seajs.org/) 11 | * Official ng Document: [https://angularjs.org/](https://angularjs.org/) 12 | 13 | 14 | _** [angularjs-route-template](http://tech.thonatos.com/angularjs/angularjs-route-template/) **_ 15 | 16 | 17 | ### Basic Html 18 | 19 | if you know how to include libs and add basic conf, your html file will be: 20 | 21 | ``` 22 | 23 | 24 | 25 | 26 | BigInt - Vzhibo.tv 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 39 | 40 | 41 |
42 | 47 |
48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | ``` 66 | 67 | if you compare this with last post i wrote, you may know we remove tags -- ** ng-app="BIApp" **, 68 | because we combine SeaJs and ng, so ng should not be loaded automaticly, everything is controlled by modules of SeaJs, 69 | here, it's the file -- ** ./app/src/admin/app.js **, then we will say how it works. 70 | 71 | 72 | ### JavaScript(Main App) 73 | 74 | as you known, we removed ** ng-app="BIApp" ** and bootstrap ng by code in ** ./app/src/admin/app.js **, so, how to ? 75 | 76 | 77 | _** Before we start this section, we need know basic format for CMD used by SeaJs **_ 78 | 79 | 80 | ``` 81 | // All modules should be defined by "define" 82 | define(function(require, exports, module) { 83 | // use "require" to include dependencies and modules 84 | var $ = require('jquery'); 85 | var Spinning = require('./spinning'); 86 | // use "exports" to share interface 87 | exports.doSomething = ... 88 | // use "module.exports" share whole interface 89 | module.exports = ... 90 | }); 91 | ``` 92 | 93 | then our main app: 94 | 95 | ``` 96 | define(function (require, exports, module) { 97 | /* ********************************* 98 | * GLOBAL STATIC VARS 99 | ******************************** */ 100 | var __ROOT__ = 'apps/src/admin/'; 101 | var __ROOT_VIEW__ = __ROOT__+'view/'; 102 | /* ********************************* 103 | * APP Main 104 | ******************************** */ 105 | var BIApp = angular.module('BIApp', ['ngRoute','BIConrollers']); 106 | BIApp.config( 107 | ['$routeProvider', 108 | function($routeProvider) { 109 | $routeProvider. 110 | when('/', { 111 | templateUrl : __ROOT_VIEW__+'general.html', 112 | controller : 'generalController' 113 | }). 114 | when('/event', { 115 | templateUrl : __ROOT_VIEW__+'event.html', 116 | controller : 'eventController' 117 | }). 118 | when('/event/:view', { 119 | templateUrl: __ROOT_VIEW__+'event/event.html', 120 | controller: 'eventViewController' 121 | }). 122 | when('/post', { 123 | templateUrl : __ROOT_VIEW__+'post.html', 124 | controller : 'postController' 125 | }). 126 | otherwise({ 127 | templateUrl : __ROOT_VIEW__+'404.html' 128 | }); 129 | }] 130 | ); 131 | var BIConrollers = angular.module(require("./controller/app"), []); 132 | angular.bootstrap(document, ['BIApp']); 133 | }); 134 | ``` 135 | 136 | * Define some static vars 137 | * Instantiate our ng app 138 | * Configure ng ** $routeProvider ** 139 | * Define ** controller ** 140 | * Run our app -- ** ng app** from _** document **_ 141 | 142 | our controllers: 143 | 144 | ``` 145 | define(function(require, exports, module) { 146 | /* ********************************* 147 | * APP CONTORLLER 148 | ******************************** */ 149 | var BIConrollers = angular.module('BIConrollers', []); 150 | BIConrollers.controller('generalController', function($scope) { 151 | $scope.message = 'generalController'; 152 | }); 153 | BIConrollers.controller('eventController', function($scope) { 154 | $scope.message = 'eventController'; 155 | }); 156 | module.exports = BIConrollers; 157 | }); 158 | ``` 159 | 160 | the most important place is: _** module.exports = BIConrollers; **_, with it, we can _** require **_ controllers here. 161 | 162 | we will find more later. 163 | -------------------------------------------------------------------------------- /frontend-notes/javascript/angular-1.x/Angularjs.md: -------------------------------------------------------------------------------- 1 | 2 | ### What is AngualrJs ? 3 | 4 | HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop 5 | 6 | Official Site: [AngualrJs](https://angularjs.org/) 7 | 8 | #### Alternatives 9 | 10 | Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views. 11 | 12 | #### Extensibility 13 | 14 | AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how. 15 | 16 | #### Chinese 17 | 18 | HTML是一门伟大的文本标记语言，我们使用Css与Js对其进行扩展，AngularJs是一个高度可扩展的Framework，那么优势在那里？ 19 | 20 | * 前端，与后端分离，便于各自独立开发 21 | * 前端，按需加载组件与视图，动态渲染 22 | * 前端，前端路由，控制器，视图，模块 23 | 24 | 简而言之，开发阶段可完全脱离与后台的联系，通过模拟数据进行测试与开发，预留借口与方法即可在前端功能完成后对接后端数据平台，这在开发阶段极为方便，改善了过往开发过程中先制作独立页面与空能，待后台MVC结构完成后再进行数据填充与页面调试的传统模式，提高了开发的效率与速度。 25 | 26 | 作为学习过程中的第一篇记录，先简单介绍选择AngularJs的基本考虑，如果以后有更多的发现会继续补充在此。 -------------------------------------------------------------------------------- /frontend-notes/javascript/original/Customize-HTML5-Player.md: -------------------------------------------------------------------------------- 1 | HTML5 Video & Control 2 | 3 | 手机版的视频播放，选择了较为激进的HTML5来做，所以要求播放器支持M3U8格式视频，找了一堆播放器测试，发现功能大同小异，有一个感觉很不错的，但是价格有点伤人，况且我们需要的功能其实很简单，所以，自己写了。 4 | 5 | #### HTML5 Player 6 | 7 | * VideoJS 8 | * Flowplayer 9 | * Html5Media 10 | * MediaElements 11 | 12 | #### Do something 13 | 14 | var h5m = document.getElementById('html5-video'); 15 | 16 | // Get Property 17 | 18 | var _h5mSrc = h5m.src; 19 | var _h5mDuration = h5m.duration.toFixed(1); 20 | var _h5mCurrentTime = h5m.currentTime.toFixed(1); 21 | 22 | // Set Property 23 | 24 | h5m.currentTime = _h5mCurrentTime; 25 | h5m.src = newSrcString; 26 | 27 | // Bind Event 28 | 29 | h5m.addEventListener("onended", function(){ 30 | console.log("end"); 31 | // and some thing 32 | }); 33 | 34 | h5m.addEventListener("oncanplay", function(){ 35 | console.log("canplay"); 36 | // and some thing 37 | }); 38 | 39 | h5m.addEventListener("onplaying", function(){ 40 | console.log("playing"); 41 | // and some thing 42 | }); 43 | 44 | 有了上述的方法，然后配合一些前端技巧，可以随意定制了~ 45 | 46 | 然后我们来实现一个切换视频流并跳转到原来位置的代码 47 | 48 | _protected.updateVideo = function(videoUrl){ 49 | 50 | // 获取video元素 51 | var video = document.getElementById('html5-video'); 52 | 53 | // 获取当前播放位置（时间） 54 | var _currentTime = getTime(); 55 | 56 | 57 | changeSrc(videoUrl); 58 | play(); 59 | seekTo(_currentTime); 60 | 61 | function getTime(){ 62 | return video.currentTime.toFixed(1); 63 | } 64 | 65 | function changeSrc(url){ 66 | video.src = url; 67 | video.load(); 68 | } 69 | 70 | function seekTo(value){ 71 | 72 | // 设置延迟时间 73 | var _SEEK_DELAY = 500; 74 | 75 | // readyState 为0表示未获取到数据，延迟一秒重新判断 76 | if(video.readyState == 0){ 77 | 78 | setTimeout(function(){ 79 | seekTo(value); 80 | },_SEEK_DELAY*2); 81 | 82 | // 递归调用并停止后续代码 83 | return false; 84 | 85 | }else{ 86 | 87 | // 当前视频流正常且长度大于之前的播放位置则进行跳转 88 | if ((video.currentTime !== null) && (video.duration > value)) { 89 | console.log('TO SEEK'); 90 | video.currentTime = value; 91 | }else{ 92 | console.log('Wait for data ... biu biu biu .'); 93 | // 流不正常，延迟并重新判获取状态 94 | setTimeout(function(){ 95 | seekTo(value); 96 | },_SEEK_DELAY); 97 | return false; 98 | } 99 | } 100 | 101 | } 102 | 103 | function play(){ 104 | if (video.paused) { 105 | video.play(); 106 | } 107 | } 108 | }; 109 | 110 | 111 | 参考内容： 112 | 113 | * https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement 114 | * http://www.w3cschool.cc/html/html5-video.html 115 | 116 | ** 属性和方法参考后面，摘自w3cschool. ** 117 | 118 | #### HTML5 Video Intro 119 | 120 | 使用方法： 121 | 122 | 127 | 128 | 支持格式： MP4, WebM, 和 Ogg 129 | 130 | * MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 131 | * WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 132 | * Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 133 | 134 | 支持浏览器： 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 |
浏览器MP4WebMOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESNONO
Opera 10.6+NOYESYES
176 | 177 | #### HTML5 Video Property 178 | 179 | 可选属性： 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 |
属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性，视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadauto
metadata
none		如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
235 | 236 | #### HTML5 Video Event 237 | 238 | 多媒体事件(Media Events) 239 | 240 | 通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于HTML媒体元素比如: 241 | 242 |