2016年12月

aria2+在线磁力链接下载在线查看播

作者: M69W
时间: 2016/12/23
分类: tutorial
评论

安装配置好 aira2 后[ http://aria2c.com/usage.html ]
https://github.com/maysrp/webdir
只要把其中的 wadir.php 丢在网站根目录即可：
登入密码设置

define("PASS", "admin");

设置禁止显示文件

$this->notex=array("php","js","tgz");//不允许显示的后缀名文件 
$this->notdir=array("a","phpmyadmin");//不允许显示的文件夹

支持磁力链接下载以及简单的操作。

nginx限制并发连接数以及下载带宽

作者: M69W
时间: 2016/12/23
分类: tutorial
评论

来自nginx限制并发连接数以及下载带宽

在nginx.conf里的http{}里加上如下代码：

limit_conn_zone $binary_remote_addr zone=perip:10m;
limit_conn_zone $server_name zone=perserver:10m;

在需要限制并发数和下载带宽的网站配置server{}里加上如下代码：

server {
    limit_conn perip 10;
    limit_conn perserver 100;
    limit_rate 100k;
}

参数说明：

$binary_remote_addr是限制同一客户端ip地址；

$server_name是限制同一server最大并发数；

limit_conn为限制并发连接数；

limit_rate为限制下载速度；

vuejs

作者: M69W
时间: 2016/12/22
分类: front-end
1 条评论

Vue数据绑定原理

官网：https://vuejs.org 要是网络差可以打开中文
 V3
GitHub：https://github.com/vuejs/vue
http://weibo.com/arttechdesign 尤雨溪
比较详细的采访 Vue 作者尤雨溪
 Vue 2.0——渐进式前端解决方案
 Vue CLI Vue.js 开发的标准
Vue的 Object.defineProperty和未来3.0的proxy观察者机制
 集 Vue3+ & Vue-CLI3+ 开发生态圈和填坑姿态

Vue3.0中文文档（Vue3 + TS学习资源路线）

vue3

第三届VueConf
关于 Vue3 的文章，我不明白为啥用 TS

使用 React Hooks 重构你的小程序
https://aotu.io/notes/2019/07/10/taro-hooks/

Vue Function API
https://github.com/vuejs/vue-function-api/blob/master/README.zh-CN.md

来自 Vue 3.0 的 Composition API 尝鲜
vue3 源码的利器 - mini-vue & B站

教程

Vue作者：新手向：Vue 2.0 的建议学习顺序
 从0到1手写一个vuejs
Vue.js 2.3 知识清单
 2018 我所了解的 Vue 知识大全（一）
2018 我所了解的 Vue 知识大全（二）
Vue2.0 新手入门 — 从环境搭建到发布
 Vue.js学习教程_专题
 JTaro-Tutorial
Vuex 是什么
 技术胖-胜洪宇
 easy-mock
蓝狐博客

入门看看

1.Vue.js——60分钟快速入门
2.Vue.js——60分钟组件快速入门（上篇）
3.Vue.js——60分钟组件快速入门（下篇）
4.Vue.js——基于$.ajax实现数据的跨域增删查改
5.Vue.js——vue-resource全攻略
6.Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
7.Vue.js——60分钟browserify项目模板快速入门
8.Vue.js——60分钟webpack项目模板快速入门
9.Vue.js——vue-router 60分钟快速入门
上面源码https://github.com/keepfool/vue-tutorials
在Vue中有条件地使用CSS类

搭建过vue开发环境

vue学习
 Vue 源码解析：深入响应式原理
 剖析Vue原理&实现双向绑定MVVM
Vue技术内幕
 VUE.JS组件化开发实践
 vue开发看这篇文章就够了
 vue.js关于Object.defineProperty的利用原理

vue 248个知识点（面试题）为你保驾护航
 https://alligator.io/vuejs/
https://vuedose.tips/tips/

Vuex

vuex的demo实现
 到底vuex是什么？
使用Vue.js和Vuex实现购物车场景
 正确理解Vuex：懂人生，就懂了Vuex
Vuex 的简单使用

state的，store还有getter、Mutations、Actions以及Modules。
在vuex文档中都有非常详细的说明：http://vuex.vuejs.org/zh-cn/state.html
笼统的说：

组件获取 state 用 vuex 的 getter
组件触发动作用 vuex 的 action
修改 state 用 vuex 的 mutation

SSR

追求极致的用户体验ssr(基于vue的服务端渲染)
实现基于 Nuxt.js 的 SSR 应用

项目

Element 2.0
vux github 移动框架
饿了么前端
 Vue相关开源项目库汇总
 Let you insight into the Vue.js

https://github.com/yaoyao1987/vue-cli-multipage

Vue组件库

https://nutui.jd.com/demo.html#/index

多页面

https://github.com/luchanan/vue2.0-multi-page
基于 Vue-cli 构建多页面应用（Multi-pages Application）脚手架
 基于vue-cli搭建一个多页面应用(六)--移动端适配方案

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
 改用nodejs构建的后台系统接口
 对应的后台管理系统
 Vue 全家桶 + Electron 开发的一个跨三端的应用
 vue.js - 收藏集
 vue相关收集
 https://github.com/lichenbuliren/vuex-notes-app
微豆 - Vue 2.0 实现豆瓣 Web App 教程
 Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
vue-element-admin && 文档 && 手摸手，带你用vue撸后台
 Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统
 开源中国微信版 vue+vux的2.x版本 github
使用vue.js + laravel开发单页面应用
 利用WordPress REST API 开发微信小程序从入门到放弃

vue2.0 admin / a management system templateelement-ui
Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3 https://admin.vuebulma.com
vue2 + vue-router + vuex 入门项目

框架

vonic && vonic-documents
iview
基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。

插件(库)

Nicescroll滚动条插件
bcrypt.js && npm && 使用
 手摸手，带你封装一个vue component
[译]如何在 Vue.js 中使用第三方库

https://zhuanlan.zhihu.com/p/25042521
详解 Vue & Vuex 实践

插件

Vue 插件编写与实战

Vue生命周

http://www.cnblogs.com/gagag/p/6246493.html
生命周期

vue 钩子函数

Vue2.0 探索之路——生命周期和钩子函数的一些理解
https://segmentfault.com/a/1190000008010666\

https://crazy0x.github.io/frontend/2017/01/23/vue-nga.html
使用Vue框架实现NGA客户端

Vue.js：a (re)introduction（作者中文）
https://zhuanlan.zhihu.com/p/20302927
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ (作者英文原文)
https://github.com/vuejs/awesome-vue

sublime中有没有*.vue文件格式化插件？
https://segmentfault.com/q/1010000004221470

HTML/CSS/JS Prettify 这个插件就行，安装后 tools->HTML/CSS/JS Prettify->set prettify preference 在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了

PostCSS(px2rem)
除了Sass这样的CSS处理器这外，我们团队的@颂奇同学还开发了一款npm的工具px2rem 。安装好px2rem之后，可以在项目中直接使用。也可以使用PostCSS 。使用PostCSS插件postcss-px2rem：

wordpress with vue

https://deliciousbrains.com/creating-a-wordpress-theme-using-the-rest-api-and-vue-js/
https://github.com/bstavroulakis/vue-wordpress-pwa
https://www.npmjs.com/package/vue-wordpress
https://segmentfault.com/a/1190000008715104

优化

关于 webpack 打包后文件过大的那些事……
基于 Webpack 的应用包体尺寸优化
 Vue路由开启keep-alive时的注意点
 vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件？
如何降低Vue.js项目中Webpack打包文件的大小？
路由懒加载 Webpack 的代码分割功能
 vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画
 在vue 中使用 Clipboard.js复制粘贴官网
 Clipboard is not a function?
使用clipboard.js实现页面内容复制到剪贴板

组件通信

vue中8种组件通信方式
 vue-router 项目中$route.params和$route.query的区别是什么，踩坑事件进行总结

?id=123456&uid=1 这样传参的方式，获取值为this.$route.query.id(uid) ，这样的不用改路由
/create/12345/1  这样的传参获取值为this.$route.params.id，需要改路由path: '/create/:id/:uid

部署

node-vue前后端分离记录
 利用scp2部署Vue项目到测试环境
 vue.js（SCP2）打包后自动上传到服务器
 vue2 前后端分离项目ajax跨域session问题解决
 vuejs怎么在服务器部署？

总结

大型Vuex应用程序的目录结构
 你不知道的Vuejs
curated list(awesome-vue)
从1万篇文章中挑出的40篇最棒的 Vue 学习指南（2018版）
如何在Vue项目中使用vw实现移动端适配
 Vue折腾记
 Vuejs的一些总结
 Vue2技术栈归纳与精粹
 Vue-Layout : vue可视化布局、自动生成代码
 Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
Vue-Layout : vue可视化布局、自动生成代码
基于 Vue.js 的 PWA 解决方案帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题

其他

npm uninstall xxx --save
为什么 npm 要为每个项目单独安装一遍 node_modules？
关于Webstorm webpack经常不能自动热更新问题
webstrom settings的system settings默认勾选safewrite,勾选去掉就可以了
SCSS 与 Sass 异同

在线编辑器

https://codesandbox.io/s/

挖坑

https://www.jianshu.com/p/31ad32e7ec13

vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程
done()方法的解释

引用本地数据

因为不能直接引用或以请求的方式获取项目本地.json后缀的json文件，
可以把json数据转换js文件格式在index.html中引入

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    ...
    <script src="./datas.js"></script>
    ...
  </body>
</html>

datas.js

// 在本地开发时 ESLint 报错，添加下面代码即可，build 时打包不受影响
// eslint-disable-next-line no-undef
datas = {
  'identifier': '20190714',
  'name': '我的好友',
  'version': '0.0.1',
  'build': 0,
  'releaseNote': '我的好友',
  'hidden': true,
  'dependencies': {
    'piece': '0.0.1',
    'com.csair.base': '0.0.1',
    'butterfly': '0.0.1',
    'ratchet': '0.0.1'
  },
  'code': 200
}

在页面上 xx.vue 中调用

created: function () {
  ...
  // 下面是打包时的引用；
  // 本地开发时这样写会报错，datas为未定义，开发时正常用请求的方式(axios,get)获取本地json即可
  this.data = datas  
  ...
},

或者看这个
vue项目怎么在打包后再引入一些数据文件？

在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置：


const express = require('express')
const app = express()
var singer = require('./src/db/data/singer.json')  //本地 json文件数据，打包会打包到 js 文件中

module.exports = {
   devServer:{      
     before(app) {
       app.get('/api/singer', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: singer
            })
        })
        app.get('/api/recommend', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: recommend
            })
        })
    },

再组件内使用axios调用本地json文件数据：


import axios from 'axios'
axios.get("/api/singer").then((data)=>{
    console.log(data)
})

vue.config.js 配置如下：

const goods = require('./mock/goods.json')
module.exports = {
  devServer: {
    before: (app) => {
      app.post('/goods', function (req, res, next) {
        res.json(goods)
      })
    }
  }
}
src/views/Home.vue
<script>
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  created () {
    axios.post('/goods')
  }
}
</script>

注意：vue cli3.0 public 文件夹才是静态资源文件,修改了vue.config.js需要重启项目。

https://www.v2ex.com/t/619038#reply23

简单的WEB目录

作者: M69W
时间: 2016/12/08
分类: front-end,PHP
评论

简单的WEB目录前段基于bootstrap 与 Jquery && 源码&& 直接下载

webdir

index.php放在你的网站根目录并且设置好你的所在目录权限即可
只展示该目录以下的所有文件
通过添加禁止显示文件夹以及后缀文件来控制显示
例如:

$this->notex=array("php","js","tgz");//不允许显示的后缀名文件
$this->notdir=array("a","phpmyadmin");//不允许显示的文件夹

支持在线播放mp4视频和MP3音频以及PDF在线预览；

eg：104.223.12.18

请不要使用index.php 以外的其他文件
不支持IE

在Linux上开启谷歌TCP BBR拥塞控制算法

作者: M69W
时间: 2016/12/08
分类: default
评论

魔改 BBR 一键脚本 for Debian | CentOS && github
【最后的更新】如何维护一个属于自己的 bbr 魔改？
维护一个自己的 bbr 魔改

一、ubuntu/debian系统
下载新内核:

wget http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.9-rc8/linux-image-4.9.0-040900rc8\
-generic_4.9.0-040900rc8.201612051443_amd64.deb

安装内核：

dpkg -i linux-image-4.9.0*.deb

删除其他内核:

dpkg -l|grep linux-image 
sudo apt-get remove linux-image-[Tab补全] #删4.9.0以外的旧内核

更新 grub 系统引导文件并重启

update-grub
reboot

开启BBR

echo "net.core.default_qdisc=fq" >> /etc/sysctl.conf
echo "net.ipv4.tcp_congestion_control=bbr" >> /etc/sysctl.conf
sysctl -p
sysctl net.ipv4.tcp_available_congestion_control

查看下是否有BBR：lsmod | grep bbr

二、centos7：

    wget http://mirrors.kernel.org/debian/pool/main/l/linux/linux-image-4.9.0-rc8-amd64-un
signed_4.9~rc8-1~exp1_amd64.deb
    ar x linux-image-4.9.0-rc8-amd64-unsigned_4.9~rc8-1~exp1_amd64.deb
    tar -Jxf data.tar.xz
    install -m644 boot/vmlinuz-4.9.0-rc8-amd64 /boot/vmlinuz-4.9.0-rc8-amd64
    cp -Rav lib/modules/4.9.0-rc8-amd64 /lib/modules/
    depmod -a 4.9.0-rc8-amd64
    #centos >= 6
    dracut -f -v --hostonly -k '/lib/modules/4.9.0-rc8-amd64'  /boot/initramfs-4.9.0-rc8-a
md64.img 4.9.0-rc8-amd64
    grub2-mkconfig -o /boot/grub2/grub.cfg

修改/boot/grub2/grub.cfg 把4.9.0的内核启动放到第一位。
然后reboot
开启BBR

echo "net.core.default_qdisc=fq" >> /etc/sysctl.conf
echo "net.ipv4.tcp_congestion_control=bbr" >> /etc/sysctl.conf
sysctl -p
sysctl net.ipv4.tcp_available_congestion_control

查看下是否有BBR：lsmod | grep bbr

CentOS7安装bbr的正确姿势：更新到7.3，安装elrepo官方4.9正式版

1：首先yum update -y更新到最新CentOS 7.3 1611
cat /etc/redhat-release
CentOS Linux release 7.3.1611 (Core)

2: 安装elrepo内核
rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org
rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpm
修改让elrepo yum update时可用
vim /etc/yum.repos.d/elrepo.repo
[elrepo-kernel]
name=ELRepo.org Community Enterprise Linux Kernel Repository - el7
baseurl=http://elrepo.org/linux/kernel/el7/$basearch/

    http://mirrors.coreix.net/elrepo/kernel/el7/$basearch/
    http://jur-linux.org/download/elrepo/kernel/el7/$basearch/
    http://repos.lax-noc.com/elrepo/kernel/el7/$basearch/
    http://mirror.ventraip.net.au/elrepo/kernel/el7/$basearch/

mirrorlist=http://mirrors.elrepo.org/mirrors-elrepo-kernel.el7
enabled=0
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-elrepo.org

把enabled=0改成enabled=1
然后保存之后yum update -y，就会更新到elrepo正式版4.9内核

3：跟着vim /etc/sysctl.conf
加两行：
net.core.default_qdisc = fq
net.ipv4.tcp_congestion_control = bbr

sysctl -p生效，就ok了。

这样是肯定不会挂的。

CentOS6一键BBR脚本----更新4.9正式版内核

原帖：http://www.hostloc.com/thread-342622-1-1.html
更新支持4.9正式版内核

wget --no-check-certificate https://github.com/52fancy/GooGle-BBR/raw/master/BBR.sh && sh BBR.sh

暂时只支持centos6 32位和64位
详细说明请移步
https://github.com/52fancy/GooGle-BBR

比锐速还强的 TCP拥塞控制技术 —— TCP-BBR 测试及开启教程
 Linode CentOS7开启Google TCP-BBR优化算法 && 评论区

一键安装脚本

一键安装最新内核并开启 BBR 脚本
 TCP-BBR 一键安装脚本

关于百度定位的简易解决方案

作者: M69W
时间: 2016/12/07
分类: reprint
评论

如何以最暴力的方式防止百度定位泄露真实位置

其实我很早就知道这玩意，并以以下的方式屏蔽，最近又有很多人关心，我就把我的方案公布一下

阅读剩余部分

Python学习

作者: M69W
时间: 2016/12/06
分类: Python
评论

先去 https://www.liaoxuefeng.com/ 过一遍。
然后官方文档细看一边 https://docs.python.org/zh-cn/3.6/tutorial/index.html
最后去找实战视频或者教程

Python3 教程

Python3入门笔记（1） —— windows安装与运行
 一行代码结果叹为观止，能做到这么极致的也只有Python了

https://www.tutorialdocs.com/tutorial/python3/home.html

https://zhuanlan.zhihu.com/p/39812581
3小时Python入门

https://learnpythonthehardway.org/
https://github.com/CodementorIO/Python-Learning-Resources
https://github.com/xjr7670/QQzone_crawler

python -m SimpleHTTPServer
python -m SimpleHTTPServer 8080 # python2
python3 -m http.server 8080 # python3

Django

Django 2.0 中文官方文档地址：
https://docs.djangoproject.com/zh-hans/2.0/

Django Girls 教程
https://tutorial.djangogirls.org/zh/

https://pythonclock.org/

Crossin编程教室

一个jquery需求

作者: M69W
时间: 2016/12/06
分类: front-end
评论

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
            <input name="button" type="button" class="list-button" value="more" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
    </ul>
</body>
<!-- 动态获取 -->
<script>
    var ww=[];
    console.log('wo');
    var showCZ=$('.czbtn');
    for (i=0;i<showCZ.length;i++) {
        console.log($('.czbtn').eq(i).children("input").length);
        var total=$('.czbtn').eq(i).children("input").length;
        ww.push(total);
    }
    console.log(ww);
    console.log("Max:"+Math.max.apply(null, ww));//最大值
    console.log("Min:"+Math.min.apply(null, ww));//最小值
    
</script>
</html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
    var arr   = ["a","x","b","d","m","a","k","m","p","j","a"];
    var count = {};
    var pos   = {};
    //遍历arr，统计每个字母出现次数且记录位置
    arr.forEach(function(value, index){
        if(count[value]){
            count[value] ++;
            pos[value] += ","+index; 
        } else {
            count[value] = 1;
            pos[value]   = ""+index;
        }
    });
    console.log(count);
    console.log(pos);
    
    //获取出现最多的字母
    var max = 0;
    var letter;
    for(i in count){
        if(count[i] > max ){
            max    = count[i];
            letter = i; 
        }
    }
    
    console.log("最多的是：" + letter);
    console.log("位置分布：" + pos[letter]);
</script>
</body>
</html>

临时

作者: M69W
时间: 2016/12/01
分类: default
评论