发表于 | 更新于 | 分类于 ， ，

关于如何创建机器人以及机器人部署至线上服务器请看这篇博文

从零开始写一个 Telegram Bot

以下的是我根据博文部署以及写机器人产生的一些问题

  1. 线上部署时，用的是 centos 6.8 的系统所以安装 nginx 时产生了一些和教程博客不一样的地方
    如图: 这是教程截图 image.png

因为 centos 系统版本不一样 所以 yum 源设置也不一样 我的解决办法

1
vim /etc/yum.repos.d/nginx.repo

写入：

阅读全文 »

发表于 | 更新于 | 分类于

generator 函数运行结果释义

遇到yield 表达式，就暂停执行后面的操作， 并将紧跟在yield 后面的那个表达式的值，作为返回的对象的 value 属性值。 下一次调用 next 方法时，再继续往下执行，直到遇到下一个 yield 表达式。
next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。

1
2
3
4
5
6
function* generator(x) {
  let y = 1 * (yield x + 2);
  let z = yield y / 2;

  return x + y + z;
}
1
const fun1 = generator(2);
阅读全文 »

发表于 | 更新于 | 分类于 ，

English | 中文

react-lazyload-pic

图片以及图片列表懒加载的react组件

Installation

1
2
3
$ npm install react-lazyload-pic --save
or
$ yarn add react-lazyload-pic

Usage

方法1 仅针对当前所要展示的大图做完全加载后展示，未完全加载时图片用占位图替代

lazyloadlist.gif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { LazyLoadPic } from "react-lazyload-pic";
import Sevn from '@/assets/sevn.jpg'

class App extends React.Component {
  state = {
    loaded : false
  }

  render() {
    const that = this;
    const { loaded } = that.state;
    const onLoad = () => {
      that.setState({
        loaded:true
      })
    }
   
    return <div className="container"> 
              <PicLazyLoad
                img={Sevn}             // 图片
                skeleton="newSkeleton" // 占位图css样式(className)
                imgClassName="sevn"    // 图片的样式(className)
                alt="sevn"
                loaded={loaded}
                onLoad={onLoad}
              /> 
            </div>
  }
}

export default App;


//css 
{
  .container {
    display: flex;
    width: 100%;
    height: 100vh;
    font-size: 30px;
  }

  .newSkeleton,
  .sevn {
    width: 200px;
    height: 100px;
  }
}
阅读全文 »

发表于 | 更新于 | 分类于 ，

这是一个简单的老虎机组件
效果截图
slotMachines.gif

react-slot-machines

A slot machine component for React

Installation

1
2
$ npm install react-slot-machines --save
$ yarn add react-slot-machines

Usage

阅读全文 »

发表于 | 更新于 | 分类于 ，

react-flop组件
提供一个小功能翻转卡片功能可作为开奖翻转使用

react-flop

A simple flop component for React

Installation

1
2
$ npm install react-flop --save
$ yarn add react-flop

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class App extends React.Component {
  constructor(props) {
    super(props);
    const that = this;

    that.state = {
      haveGift: false,
      isFlop: false
    };
  }

  render() {
    const that = this;
    const { haveGift, isFlop } = that.state;
    const slot = () => {
      if (!isFlop) {
        return null;
      }

      if (haveGift) {
        return <div>获奖了</div>;
      } else {
        return <div>GG</div>;
      }
    };

    const onClick = () => {
      that.setState({
        isFlop: true,
        haveGift: true
      });
    };

    return (
      <Flop
        imgFLop={require("./images/WechatIMG3.png")}
        imgFLoped={require("./images/WechatIMG2.png")}
        slot={slot()}
        onClick={onClick}
        haveGift={haveGift}
        isFlop={isFlop}
        imgFLopWidth={686}
        imgFLopHeight={272}
      />
    );
  }
}

export default App;

Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
static propTypes = {
  imgFLop: PropTypes.string.isRequired,      //Preflip picture
  imgFLoped: PropTypes.string.isRequired,    //Flipped picture
  cardName: PropTypes.string,                //Custom Components classname
  slot: PropTypes.node,                      //Reserved Node Slot
  onClick: PropTypes.func.isRequired,        //onclick
  haveGift: PropTypes.bool,                  //awarded or not
  isFlop: PropTypes.bool,                    //Flop or not
  imgFLopWidth: PropTypes.number.isRequired, //Picture width
  imgFLopHeight: PropTypes.number.isRequired,//Picture height


};

static defaultProps = {
  cardName: '',
  slot: null,
  isFlop: false,
  haveGift: false,
};

License

MIT

发表于 | 更新于 | 分类于 ，

react websocket组件容器
提供 onOpen，onMessage,onError,onClose等方法,
是一个轻便的websocket组件
支持重连功能

react-simple-websocket

A simple websocket component for React

Installation

1
2
$ npm install react-simple-websocket --save
$ yarn add react-simple-websocket

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React from 'react';
import SimpleWS from 'react-simple-websocket';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    const that = this;

    that.state = {
      wsData: "",
    };

    that.sender = null;
  }

  onMessage = data => {
    const that = this;

    //get the data from ws
    that.setState({
      wsData: data
    });
  };

  onOpen = sender => {
    const that = this;
    that.sender = sender;

    //use sender to send your data
    sender("xxxxx");
  };

   onClick = () => {
    const that = this;

    that.sender('halo,it's me!');
  };

  render() {
    return (
      <div>
        <SimpleWS
          url="ws://localhost:8080"
          onOpen={that.onOpen}
          onMessage={that.onMessage}
          onClose={that.onClose}
        />
        <button onClick={that.onClick}>send</button>
      </div>
    );
  }
};

Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
static propTypes = {
  url: PropTypes.string.isRequired,
  onOpen: PropTypes.func,
  onMessage: PropTypes.func.isRequired,
  onError: PropTypes.func,
  onClose: PropTypes.func,
  debug: PropTypes.bool,
  reconnect: PropTypes.bool
};

static defaultProps = {
  debug: false,
  reconnect: true
};

License

MIT

发表于 | 更新于 | 分类于

自我纠结了很久，在一瞬之间做出了决定。
斥巨资购买了一把练习琴，同时寻觅一位老师求学解惑。
总觉得这个决定可能会对人生路带来不同的可能。
源于喜爱，始于迷茫。
重新开始，忘掉之前。
也希望各位在有生之年，如有一瞬的激动或者梦想就去尝试下。
也许不一定非要成功，也许不一定可以成功。
但是，短暂的人生需要那么一闪而过的光芒。
cookbook.png

发表于 | 更新于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//invoke 为一个promise 函数
export function get_account_auth(authKey) {
  const arg = { authKey };

  return invoke("account_auth", arg)
    .then(resp => resp.data.token)
    .catch(onError);
}
 ======
effects: {
    *getAuthKey({ payload }, { call, put, race, select, take }) {
      const resp = yield call(IndexApi.getAuthKey, {});
      
      //call(fn,...arg)
      const token = yield call(Get_account_auth, resp.data.authKey);

      yield put(StateAt.index({ authKey: resp.data.authKey, token }));
    },
},

下面 dva 的典型 model 例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
app.model({
  namespace: "todo",
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      // 保存数据到 state
      return [...state, todo];
    }
  },
  effects: {
    *save({ payload: todo }, { put, call }) {
      // 调用 saveTodoToServer，成功后触发 `add` action 保存到 state
      yield call(saveTodoToServer, todo);
      yield put({ type: "add", payload: todo });
    }
  },
  subscriptions: {
    setup({ history, dispatch }) {
      // 监听 history 变化，当进入 `/` 时触发 `load` action
      return history.listen(({ pathname }) => {
        if (pathname === "/") {
          dispatch({ type: "load" });
        }
      });
    }
  }
});