董叔叔

分类： 默认分类

  • https://videobydss.oss-cn-beijing.aliyuncs.com/enreaderapk%20%282%29.apk

  • draftjs快捷键绑定

    快捷键绑定

    编辑器组件可灵活地为您的编辑器定义自定义键绑定，通过keyBindingFn prop, 这样允许你的编辑器组件匹配快捷键命令

    默认设置

    默认快捷键绑定函数是getDefaultKeyBinding

    因为draft对DOM渲染和行为保持严格控制，基础编辑命令必须被捕获，并且通过键绑定系统进行路由

    getDefaultKeyBinding 将已知的OS级编辑器命令映射到DraftEditorCommand字符串，然后这些字符串与组件处理程序中的行为相对应

    例如，CTRL+Z(win)和Cmd+z(OSX)映射到‘undo’命令，该命令随后路由我们的处理程序以执行EditorState.undo()

    自定义

    你可以提供自己快捷键绑定函数，供给自定义命令字符串

    推荐你的函数用getDefaultKeyBinding作为替代方案，以便你的编辑器可以从默认命令中受益

    用你的自定义命令字符串，你可以实现handleKeyCommand prop 函数 ，命令字符串映射到你想要的行为，如果 handleKeyCommand 返回 ‘handled’则该命令视为已处理，如果返回‘not-handled’该命令将失败

    例子

  • 今天开始学习vuejs

    今天开始学习vuejs

    知识点1，vue修改数据

    app.$data.content = 'bye world';

    知识点2，绑定事件 v-on:click

    #3，双向绑定v-model=”inputValue”

    #4 , 组件的写法 

    Vue.component("TodoItem",{
  template:"<li>Todo Item</li>"
})

    #5，组件引用

    <todo-item v-for="item in list"><todo-item>

    #6, 组件数据引用，定义全局组件

    <todo-item v-bind:content="item" v-for="item in list"><todo-item>
    Vue.component("TodoItem",{
  props:['content'],
  template:"<li>{{content}}</li>"
})

    #7，局部组件定义和注册

    var TodoItem = {
  props:['content'],
  template:"<li>{{content}}</li>"
}
    var app = new Vue({
  el:'#root',
  components:{
   //组件的注册
   TodoItem:TodoItem
  },
  data:{
    inputValue:'',
    list:[]
  },
  methods:{
  }
})

    #，子组件向父组件传值

    <div id="root">
  <input type="text" v-model="inputValue">
  <button @click="add"></button>
  <ul>
    <todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleDelete"></todo-item>
  </ul>
</div>
    var TodoItem = {
  props:['content', 'index'],
  template:"<li @click="handleDelete">{{content}}</li>",
  methods:{
    handleDelete:function(){
      this.$emit("delete", this.index)
    }
  }
}
    var app = new Vue({
  el:'#root',
  components:{
   TodoItem:TodoItem
  },
  data:{
    inputValue:'',
    list:[]
  },
  methods:{
    add: function(){
      this.list.push(this.inputValue)
    }
    handleDelete: function(index){
      this.list.splice(index, 1)
    }
  }
})

  • nodemon自动重启服务器

     // package.json 
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --watch app.js --exec node \"app\""
  },

  • react中dangerouslySetInnerHTML渲染HTML文本

    小心地渲染HTML

    <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />
    <div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

  • react路由react-router-dom

    一、安装react路由

    npm install react-router-dom

    二、如何使用

    import { BrowserRouter, Route } from 'react-router-dom'
    <BrowserRouter>
  <div>
    <Route path="/" exact render={()=>(<div>home</div>)} />
    <Route path="/detail" exact  render={()=><div>detail</div>} />
  </div>
</BrowserRouter>

    exact 表示精确匹配，render后面跟一个箭头函数，返回要显示的内容

    三、改进成组件形式

    1、在src目录下创建pages文件夹，在里面创建home和detail文件夹，分别存放对应的组件，例如home下创建组件，新建index.js

    import React, { Component } from 'react';
class Home extends Component{
  render(){
    return <div>home~</div>;
  }
}
export default Home;

    2、引用pages下的组件

    import Home from './pages/home';
import Detail from './pages/detail';

...

<BrowserRouter>
  <div>
    <Route path="/" exact component={ Home } />
    <Route path="/detail" exact  component={ Detail }  />
  </div>
</BrowserRouter>

...

  • react

    一，配置react环境

    $npm install -g create-react-app
$create-react-app 你的项目名

  • php随机32位的字符串

    <?php 

function random($num){
	$str = 'abcdefghijklmnopqrstuvwxyz0123456789';
	$code = '';

	for ($i=0; $i < $num ; $i++) {
		// 随机位置
		$j = rand(0,strlen($str)-1);
		// 拼接字符串
		$code .= substr($str, $j, 1);
	}

	return $code;
}


echo random(32);

  • koa2服务器部署

    一，在服务器上安装 pm2 

    npm install -g pm2

    二，添加nginx.conf

    在服务器目录创建/ect/nginx/conf.d/xxxx.conf

    server {
        listen 80;
        server_name koa.dongshushu.com(换成自己的域名);
        location / {
                proxy_pass http://localhost:3000(换端口);
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

    重启nginx

    nginx -s reload

    三，开启pm2

    pm2 start app

    常用的pm2命令

    $ pm2 list

$ pm2 stop     <app_name|id|'all'|json_conf>
$ pm2 restart  <app_name|id|'all'|json_conf>
$ pm2 delete   <app_name|id|'all'|json_conf>

    pm2升级

    pm2 update

  • requirejs

    • 官方：https://requirejs.org/
    • github：https://github.com/requirejs/requirejs