react开发遇到的一些坑

发表于 2020-01-03 | 分类于 js |

一行文本，超出显示省略号

.demo {
  display: -webkit-box;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

在 webpack 打包处理后，发现多上显示样式不生效是因为 autoprefix 插件默认会移除-webkit-box-orient,添加上述忽略注释即可解决。

css 添加 animation 因为 css module 导致 animation name 不合法而不生效

/* 定义 */
@keyframes :global(slideInFromRight) {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* 使用 */
.active {
  position: relative;
  transform: translateX(0);
  :global {
    animation: slideInFromRight 0.35s ease-in-out;
  }
}

因为 css module 原因，keyframes 也会像类名一样被改名，生成的 name 不合法就会导致 animation 不生效,参考

css代码片段

发表于 2019-07-27 | 分类于 css |

单行文本，超出显示省略号

.demo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

一行文本，超出显示省略号

.demo {
  display: -webkit-box;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

在 webpack 打包处理后，发现多上显示样式不生效是因为 autoprefix 插件默认会移除-webkit-box-orient,添加上述忽略注释即可解决。

css实现环形进度条

发表于 2019-07-27 | 分类于 css |

原理

需要一个圆，和两个半圆(左右，挡住底色)，通过旋转左右半圆漏出底色,再在顶层加一个原型覆盖层就可以实现环形，具体细节可参考CSS3+JS 实现静态圆形进度条【清晰、易懂】

实现

思路:两个元素实现环形进度条，第一个通过背景色加背景图片渐变实现遮罩，第二个元素实现顶层遮罩形成环形；第一个背景图通过两次线性渐变配合渐变角度，实现两个半圆及旋转,当进度<50%,固定左侧半圆，旋转右侧半圆，当进度>50%这相反并改变渐变色实现遮罩效果，代码如下。

class Demo extends React.Component {
  generateBgImgCss = percent =>
    percent < 0.5
      ? `linear-gradient(90deg, #fff 50%, transparent 50%, transparent), linear-gradient(${percent *
          360 +
          90}deg,  transparent 50%, #fff 50%, #fff)`
      : `linear-gradient(${percent * 360 +
          90}deg, #0084FF 50%, transparent 50%, transparent),linear-gradient(90deg, #fff 50%, transparent 50%, transparent)`;

  render() {
    return (
      <div
        className="circle"
        style={{
          backgroundImage: this.generateBgImgCss(this.props.curProgress / 100)
        }}
      >
        <div className="top-cover" />
      </div>
    );
  }
}

密码强度校验

发表于 2019-04-02 | 分类于 js |

一般 web 项目少不了登录，为了防止密码被暴力破解，常用的一种方式是通过限制登录次数配合强密码来增加破解难度，对于安全系数比较高的系统，密码强度验证规则还是比较复杂的，今天让我们先看看简版的密码强度校验，基本能满足一般系统需求。

/**
 * 验证密码强度 满分5分，业务可以暂定3+为ok
 * @param password 待验证密码
 */

function pwdLevel(password) {
  var score = 0;

  var upperCase = new RegExp("[A-Z]");
  var lowerCase = new RegExp("[a-z]");
  var numbers = new RegExp("[0-9]");
  var specialchars = new RegExp("([!,%,&,@,#,$,^,*,?,_,~])");
  var specialchars = /(`|\-|=|\[|\]|;|’|,|\.|\/|~|\!|@|#|\$|%|\^|&|\*|\(|\)|_|\+|\{|\}|:|”|<|>|\?|\|)/;
  // 特殊字符 `-=[];’,./~!@#$%^&*()_+{}:”<>?|

  if (password.length > 8) {
    score++;
  }

  if (password.match(upperCase)) {
    score++;
  }
  if (password.match(lowerCase)) {
    score++;
  }
  if (password.match(numbers)) {
    score++;
  }
  if (specialchars.test(password)) {
    score++;
  }

  if (!password.length) {
    score = 0;
  }

  return score;
}

Node服务端代码编译

发表于 2019-03-06 | 分类于 python |

使用 webpack 打包 node 服务端项目

背景

通常我们开发 node web 项目时也期望类似 java web(线上只需要一个混淆后的 jar 包)需要线上分发一个最小的部署包，通过 webpack 可以轻松实现这一点。

源码目录结构

build
src
├── app.js
├── config
│   ├── app.js
│   ├── filter.js
│   ├── log.js
│   └── static.js
├── controllers
│   └── index.js
├── models
│   └── index.js
├── routers
│   └── index.js
├── test
│   └── test.js
├── utils
│   ├── debug.js
│   ├── env.js
│   ├── index.js
│   ├── log.js
└── views
    ├── 403.html
    ├── 404.html
    ├── 500.html
    ├── index.html
    └── layout

安装依赖

1	npm install -D @babel/core webpack webpack-cli webpack-node-externals babel-cli babel-loader babel-preset-env clean-webpack-plugin copy-webpack-plugin

webpack 配置

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  target: "node",
  entry: {
    app: "./src/app.js"
  },
  externals: [nodeExternals()],
  // mode: process.env.NODE_ENV,
  mode: "development",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./build"),
    libraryTarget: "commonjs"
  },
  node: {
    __dirname: true // 需要处理代码里的变量，不然会被转掉
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: __dirname + "node_modules",
        include: __dirname + "src",
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, "src/views"),
        to: path.join(__dirname, "build/views")
      }
    ])
  ]
};

编译代码

{
  "name":"node-web-demo",
  "version:"0.1.0",
  "scripts": {
    "compile": "webpack"
  }
}

运行服务

1 2	# 打包生成的文件都在build目录下，执行如下命令开启服务 node build/app.js

移动端滚动穿透

发表于 2018-12-02 | 分类于 js |

背景

滚动穿透问题：移动端当有fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。

解决方案

一设置body,html样式overflow hidden

body {
  overflow: hidden;
  height: 100%;
}

禁用 html 和 body 的滚动条,有时还需设置html同样样式控制页面滚动，此方案使用绝大部分PC使用场景(长页面弹窗时需要记录滚动位置，窗口关闭还原到原来位置)，但移动端效果无效。

二 modal设置touchmove事件preventDefault

modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {
  passive:false, // 是否永远不会调用 preventDefault()
  capture:true, // 是否捕获冒泡
});

此方案可阻止页面滚动，但弹窗如果有滚动内容，就会被阻止，无法滚动。

三设置body样式position: fixed

body.noscroll {
  position: fixed;
  width: 100%;
}

js控制body样式，弹窗设置position:fixed，关闭弹窗还原

const bodyEl = document.body;
let scrollTop = 0;
if (showModal) {
  scrollTop = window.scrollY || 0; // 记录滚动位置
  bodyEl.style.position = 'fixed';
  bodyEl.style.top = -scrollTop + 'px';
} else {
  bodyEl.style.position = '';
  bodyEl.style.top = '';
  window.scrollTo(0, scrollTop); // 回到原先的top
}

此方案完美解决滚动穿透问题，推荐使用此方案。

macOS Mojave字体变细

发表于 2018-10-23 | 分类于随记 |

升级新版 macOS Mojave后字体变细发虚的解决办法：

# 解决字体变虚
defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

# 默认为0 ,可设置1,2,3
defaults -currentHost write -globalDomain AppleFontSmoothing -int 1

ssh常见用法

发表于 2018-08-29 | 分类于 linux |

ssh 公钥认证是ssh认证的方式之一,通过公钥认证可实现ssh免密码登陆,使用场景较多,如github代码提交校验，免密登录远程服务器等。

生成公钥和私钥

默认情况下，~/.ssh目录下会存放当前用户ssh配置认证相关的文件

使用 ssh-keygen命令生成ssh公钥认证所需的公钥和私钥文件

ssh-keygen

# 指定加密类型
ssh-keygen -t rsa

# 添加备注信息
ssh-keygen -t rsa  -C "comment"

# 指定文件名
ssh-keygen -t rsa  -C "comment" -f "test"

# 查看私钥对应的公钥信息
ssh-keygen -y -f private_key

免密登录秘钥配置

将公钥发送至服务器

# 将公钥加至服务器的authorized_keys文件中(确保该文件权限为600)
ssh-copy-id -i ~/.ssh/id_rsa.pub username@192.168.1.11

# 或者使用scp命令将文件传到服务器上,在服务器上操作
cat id_rsa.pub >> authorized_keys

远程登录服务器

# SSH 常用连接参数
#   -i 指定密钥路径  #默认在家路劲的.ssh/下
#   -p 指定SSH端口
#   -l 指定用户
#   -F 指定配置文件
#   -t 指定为终端迫使SSH客户端以交互模式工作，常配合expect使用

# 登录1.11服务器
ssh root@192.168.1.11

# 指定ssh端口
ssh -p 8888 root@192.168.1.11

# 登录远程服务器执行命令并退出(要执行的命令放在ssh命令后边)
ssh root@192.168.1.11 ls -hl

# 开启调试模式
ssh -v root@192.168.1.11

# 使用指定秘钥登录服务器
ssh -i ~/.ssh/id_rsa_11  root@192.168.1.11

# SSH构建跳板隧道(本机无登录0.10权限，但1.10有权限，通过1.10登录0.10服务器)
ssh –t 192.168.1.10 ssh 10.0.0.10

# 绑定ip 如果你的SSH客户端有多于两个以上的IP地址，你就不可能分得清楚到底是哪一个IP地址连接到了SSH服务。
ssh –b 192.168.1.10 root@10.0.0.10

# ssh远程端口映射，将外网端口映射到本地
ssh -R 8080:127.0.0.1:8080 username@12.34.56.78

ssh 登录方式

账号密码登录

+-----------+   1.send ssh request     +-----------+
|           |                          |           |
|           +------------------------> |           |
|           |                          |           |
|           |   2.send public key      |           |
|           |                          |           |
|  client   | <------------------------+  server   |
|           |                          |           |
|           |   3.encode send data     |           |
|           |                          |           |
|           +------------------------> |           |
|           |                          |           |
+-----------+                          +-----------+

当客户端发起ssh请求，服务器会把自己的公钥发送给用户；
用户会根据服务器发来的公钥对密码进行加密；
加密后的信息回传给服务器，服务器用自己的私钥解密，如果密码正确，则用户登录成功

秘钥登录

+------------------+                                 +------------------+
|                  |                                 |                  |
| 1.gen key pairs  |                                 |4.verify from auth|
|                  |                                 |orized_keys and   |
| 2.add server auth|   3.request with ip,name        |gen a random str  |
| orized_keys      | +-----------------------------> |                  |
|                  |                                 |                  |
|                  |                                 |                  |
|                  |                                 |                  |
|                  |                                 |                  |
|     client       |                                 |      server      |
|                  |                                 |                  |
|                  |                                 |                  |
| 6.use pubkey     |    5.send encode str            |                  |
| decode str       |  <----------------------------+ |                  |
|                  |                                 |                  |
|                  |                                 |8.use self key    |
|                  | 7.use server pubkey encode str  |decode str compare|
|                  | +-----------------------------> |with  origin str  |
|                  |                                 |                  |
+------------------+                                 +------------------+

首先在客户端生成一对密钥（ssh-keygen）；
并将客户端的公钥ssh-copy-id 拷贝到服务端；
当客户端再次发送一个连接请求，包括ip、用户名；
服务端得到客户端的请求后，会到authorized_keys中查找，如果有响应的IP和用户，就会随机生成一个字符串
服务端将使用客户端拷贝过来的公钥进行加密，然后发送给客户端；
得到服务端发来的消息后，客户端会使用私钥进行解密，然后将解密后的字符串发送给服务端；
服务端接受到客户端发来的字符串后，跟之前的字符串进行对比，如果一致，就允许免密码登录。

如何在博客中添加看板娘

发表于 2018-08-25 | 分类于 js |

在浏览博客的时候发现不少站点的Live2D看板娘很有意思，搜了下，针对hexo有个hexo-helper-live2d插件能快速添加，非常方便。

安装

# 安装hexo插件
npm install  hexo-helper-live2d

# 安装模型
npm install live2d-widget-model-haruto

更多模型

配置

在 _config.yml 配置文件中添加如下配置

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2d_models/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-haruto
    # use: tia
    scale: 1
   
  display:
    width: 60
    height: 120
    position: left
    hOffset: 0
    vOffset: -30
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.8
    opacityOnHover: 0.6

启动服务就可以在最下角看到自己的看板娘了~~~

参考：
hexo-helper-live2d
模型
 提取模型

js检测开发者工具Devtools是否打开

发表于 2018-08-24 | 分类于 js |

js检测开发者工具Devtools是否打开

var re = /x/;
console.log(re);

re.toString = function () {
  return '您打开了控制台，想查找什么呢';
};

toString() is not called on logged objects unless the console is open

参考： https://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open/30638226#30638226

一行文本，超出显示省略号

css 添加 animation 因为 css module 导致 animation name 不合法而不生效

单行文本，超出显示省略号

一行文本，超出显示省略号

原理

实现

背景

安装依赖

webpack 配置

编译代码

运行服务

背景

解决方案

一 设置body,html样式overflow hidden

二 modal设置touchmove事件preventDefault

三 设置body样式position: fixed

生成公钥和私钥

免密登录秘钥配置

远程登录服务器

ssh 登录方式

账号密码登录

秘钥登录

安装

配置

一设置body,html样式overflow hidden

三设置body样式position: fixed