PenZ's Space

万物归一

0%

发表于 分类于 ， Disqus：

  1. 区块链是分布式数据储存，点对点传输，共识机制，加密算法等计算机的新型应用模式。所谓共识机制是指区块链系统中实现不同节点之间建立信任，获取权益的数学算法。
    区块链是比特币的一个重要概念，本质上是一个去中心化的数据库。它是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一次比特币网络交易信息，用于验证其信息的有效性(防伪)和生成下一个区块，数据存储的每一个节点都会同步复制整个账本，信息透明难以篡改。


  2. 凡事需要更加公平，公正，公开的企业行业，都可以用到区块链技术，都可以用使用区块链技术来改造和实现；凡事需要数据存储，保护，授权，交易的企业，都可以用到区块链技术；凡事需要社会化协作，尤其是跨境，基于计算机网络可以完成的社会化分工和协作，都可以用到区块链技术


    阅读全文 »

发表于 分类于 Disqus：

npmpkg-starter-vue

A Vue NPM package starter

项目代码地址

为了简化老哥们的生产 npm 包的复杂程度
提供了一个小框架(Vue 版) 打包工具使用bili
还有相应的代码规范规则以及代码提交规范

Installation

$ npm i
$ yarn

用法

  1. 修改package.json
    image.png
    name，author，main，description，keywords 改为你需要写入的信息
    main 为打包出来的文件路口


    阅读全文 »

发表于 分类于 ， Disqus：

今天完成了一个 react 组件的 vue 化--vue-lazyload-pic

顺手重新撸了一把 vue

vue 的模版语法写的我实在蛋疼所以直接上了 jsx 语法，也方便双向绑定
方法:
(1): 增加两个插件
yarn add @vue/babel-helper-vue-jsx-merge-props
yarn add @vue/babel-preset-jsx

(2): 在.babelrc文件内做如下修改:

{
  "presets": ["@vue/babel-preset-jsx"]
}

就可以快乐的使用 jsx 语法了

例子: vue-lazyload-pic

render() {
    const that = this;
    const { imgLoaded, imgClassName, img, alt, skeleton } = that;
    const onLoad = () => {
        that.$emit('onloads', true);
    };

    return (
        <div class="P-container">
            {imgLoaded ? (
            <img class={ClassNames('defaultImg', imgClassName)} src={img} alt={alt} />
            ) : (
            <div class={ClassNames('skeleton1', skeleton)}></div>
            )}
            <img class="noShow" src={img} alt={alt} onLoad={onLoad} />
        </div>
    );
},

上面代码 有个注意点就是

阅读全文 »

发表于 分类于 ， ， Disqus：

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

从零开始写一个 Telegram Bot

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

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

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

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

写入：

阅读全文 »

发表于 分类于 Disqus：

generator 函数运行结果释义

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

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

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

发表于 分类于 ， Disqus：

English | 中文

react-lazyload-pic

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

Installation

$ npm install react-lazyload-pic --save
or
$ yarn add react-lazyload-pic

Usage

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

lazyloadlist.gif

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;
  }
}
阅读全文 »

发表于 分类于 ， Disqus：

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

react-slot-machines

A slot machine component for React

Installation

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

Usage

阅读全文 »

发表于 分类于 ， Disqus：

这是一个水波按钮的react组件封装
基于https://codepen.io/jh3y/pen/EKGXEY

react-ripple-button

a ripple-button component for React that from Ripple buttons https://codepen.io/jh3y/pen/EKGXEY

Installation

$ npm install react-ripple-button --save
$ yarn add react-ripple-button

Usage

阅读全文 »

发表于 分类于 ， Disqus：

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

react-flop

A simple flop component for React

Installation

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

Usage

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

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