开平方

Apr 3, 2020

使用二分法或牛顿迭代法计算开平方

MySQL的常用操作

Apr 2, 2020

安装MySQL

sudo apt-get –y install mysql-server mysql-client
sudo apt-get install mysql-server mysql-client

服务器环境为腾讯云Ubuntu 16.04.1 LTS，使用上面的命令安装mysql服务端与客户端。安装完成后会出现一个设置密码的界面，输入两次密码即完成了安装，然后使用 netstat -anp 命令，会发现 3306 端口正在被监听，即说明安装成功且已运行。

检查MySQL是否启动

ps -ef | grep mysqld 会看到类似结果说明正在运行：

mysql      519     1  0 17:44 ?        00:00:00 /usr/sbin/mysqld

开关MySQL

# 开启
sudo /etc/init.d/mysql start
# 关闭命令:
sudo /etc/init.d/mysql stop
# 重启
sudo /etc/init.d/mysql restart

命令行中连接数据库：

mysql -u root -p

退出数据库：

exit

建库/删库

CREATE DATABASE yys DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; DROP DATABASE yys;

建表

CREATE TABLE IF NOT EXISTS `yuhun`(
`id` INT,
`position` VARCHAR(400),
`type` VARCHAR(400),
`v` VARCHAR(400) COMMENT '表注释',
`bs` VARCHAR(400) COMMENT '爆伤',
`bj` VARCHAR(400) COMMENT '表注释',
 PRIMARY KEY ( `id` )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

增删改查

where

SELECT * FROM Customers
WHERE CustomerID=1;

update

UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;

delete

DELETE FROM table_name
WHERE condition;

insert

INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);

use demo select zhuanye from runoob_tbl where id=1; insert into pe (id,name) values (1,‘前’);

…

Read more ⟶

拆分代码封装组件

Apr 2, 2020

背景

这个项目有点老旧

"dva": "2.1.0",
"react": "^16.2.0",

我打算用最新的 react 和 @reduxjs/toolkit 开始重构，旧的依赖只能使用 connect 方式来获取 store ，使用 useSelector 和 useDispatch 很方便也很易读。@reduxjs/toolkit提供的immer和actionCreater也很好用。

新版本的 react-redux 才提供了 useSelector 和 useDispatch ，但是新版本会导致 dva 出错。无奈放弃了新版本，还是用旧版本的 connect 。还好这不影响对代码进行组件化。

首先重构的是一个643行的组件，它的render方法有580行。

重复代码

很容易的发现了一大段重复代码

<div className={styles.numbers_wrapper}>
  <span className={styles.number_item}>
      <span className={styles.number}>{detail.properties.member_count}</span>
      <span className={styles.text}>班级总人数</span>
  </span>
  <span className={styles.number_item}>
      <span className={styles.number}>{detail.properties.male_count}</span>
      <span className={styles.text}>男生人数</span>
  </span>
  <span className={styles.number_item}>
      <span className={styles.number}>{detail.properties.female_count}</span>
      <span className={styles.text}>女生人数</span>
  </span>
  <span className={styles.number_item}>
      <span className={styles.number}>{detail.properties.group_count &&( detail.properties.group_count[userDetail.detail.id] || 0)}</span>
      <span className={styles.text}>分组数</span>
  </span>
  <span className={styles.number_item}>
      <span className={styles.number}>{(detail.properties.user_lecture_count ? (detail.properties.user_lecture_count[userDetail.detail.id] || 0) : 0)}</span>
      <span className={styles.text}>授课次数</span>
  </span>
</div>

可以将他们组织成2个组件

…

Read more ⟶

vim

Apr 1, 2020

替换

abbnbnbn

:[range]s/search/replace/optioins 1
:%s/aa/bb/g 2
:%s/aa/bb/gc 3

1 range表示搜索的范围， :8,10 s/ 表示第8-10行，:%s/ 表示全文。
2 g 是一个option(global)，表示要替换所有匹配项，不加它的话只会替换第一个匹配项。
3 c 是一个option(confirm)，表示替换前需要确认。

confirm

加了confirm选项后，替换时会出现这样的提示，需要你回复。

replace with foo (y/n/a/q/l/^E/^Y)?

回复	作用
y	yes
n	no
a	go ahead，替换所有
q	quit 取消、退出操作
l	替换当前这个，然后退出操作
^E/^Y	scroll the text using Ctrl-e and Ctrl-y

配置

set nocompatible 
set number
set relativenumber
set cursorline
set wrap
set laststatus=2
set ruler

syntax on
set showmode
set showcmd

set shiftwidth=4
set tabstop=2
set expandtab
set softtabstop=2

依次：不兼容vi，显示行号，行号是相对当前行的，光标所在的当前行高亮，换行，显示状态栏，状态栏中显示光标的位置，语法高亮开启，模式，指令，>><<== 操作的空格数，tab键的空格数，缩紧使用空格，tab等于几个空格

…

Read more ⟶

渐变色

Mar 31, 2020

先说草图布局

现在工作的公司设计的页面似乎从来不考虑体验。比如说加载数据的loading界面，目前我发现B站、知乎等很多的APP、网页都在用下面图片这种效果。就是在没有拿到数据前，页面用条条框框的图形来代表内容和数据。

草图布局

这个效果其实好像还没有一个正式的名字，“草图布局”这个名字是从[阮一峰的微博][http://weibo.ws/lJAtrc]看来的，我认为挺恰当的就这么叫吧。下图来自他的微博，微博里还有demo可以参考。

这个demo的实现原始是，在background-image中使用各种gradient来画圆形、矩形，使用background-size控制各个图形的尺寸，主要是宽度。再使用background-position控制各个图形的位置来布局。这里就用到的渐变色，只不过用来画了非渐变的图形。

demo中有一个高亮的动画效果，是使用一个有旋转了100度的linear-gradient加一个位置动画的效果实现的。草图布局

我在我的项目中实现这个效果时遇到了问题——怎么确定这个渐变色的起始位置。比如下图这一条红线。草图布局

它的效果由这段代码实现的：

background-image: linear-gradient(
	120deg, 
	transparent 308px, 
	red 323px ,
	transparent 338px
);

linear-gradient的第一个参数是角度，其他3个参数表示某个位置及颜色，位置之间就是渐变色。想要一个图中这样从右上角开始的斜线，其中的308、323、338是怎么算的呢？下面研究一下计算方式。

渐变色的方向与位置

计算方法是不大直观的，而且需要先了解几个概念：渐变线、起始点和终点。

[摘抄MDZ文档][https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient]

渐变色

渐变线: 由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）
起始点: 是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）
终点: 是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

由这些概念可以知道渐变色是从起始点开始沿着渐变线的方向绘制，渐变色的交界会垂直与渐变线。也就是说我们想做的红线是垂直于渐变线的。那么我们看下图
已知红线与上边成60度角（自己定义的），所以渐变线应该是120deg，过点B做120deg渐变线的垂直线，相交于点C，点A点C的线段A的长度就是红色的起始位置，如果上边长度为375，由勾股定理可知线段A长度为309，所以红线的起始位置就是309px，（我的代码里取了308px没什么区别）
由此可以写出上面的代码来实现红线。（其实就是顶点到红线的距离）
所以当我们想实现一个有角度的渐变色的时候，就可以用类似的方法来计算颜色的起始位置。

如果渐变方向是平行与上下边或者左右边，可以这样写：

background-image: linear-gradient(to bottom,red 25px ,blue 0);
background-image: linear-gradient(to right, red 25px ,blue 0);

另外下面代码的效果是一样的。

background-image: linear-gradient(red 25px ,blue 0);
background-image: linear-gradient(180deg, red 25px ,blue 0);

另外，第二个颜色后面的数值便是渐变结束的位置，如果小雨前面颜色的位置就不会有渐变效果，利用这点可以用来实现草图布局。

例子：

body,html{
	height: 100%;
}
.empty:empty {
	margin: auto;
	width: 702px;
	height: 100%;
	
	background-image:
		linear-gradient(100deg, 
			transparent 600px, rgba(255, 255, 255, 0.5) 630px ,transparent 660px),
		linear-gradient( lightgray 150px, transparent 0 ),
		linear-gradient( lightgray 150px, transparent 0 ),
		linear-gradient( lightgray 30px, transparent 0 ),
		linear-gradient( lightgray 88px, transparent 0 );

	background-size:
		100% 100%, /* highlight */
		336px 150px,
		336px 150px,
		570px 30px,
		720px 88px;

	background-position:
		-700px 0,
		0 24px,
		387px 24px,
		0 230px,
		0 284px;
	
	background-repeat: no-repeat;

	animation: shine 2s infinite;
}

@keyframes shine {
	to {
		background-position:
			160px 0,
			0 24px,
			387px 24px,
			0 230px,
			0 284px;
	}
}

…

Read more ⟶

ReactRouter的哲学

Mar 31, 2020

机翻文档，新版的react-router是动态路由，它与传统的静态路由在使用上有很大的不同…

Read more ⟶

SSH

Mar 31, 2020

在自己的电脑上生成公钥、密钥。公钥放在远程服务器上，密钥在自己电脑里不用管。连接远程服务器时就不用输入密码了。

安装

新装的系统可能没有ssh服务，需要自己安装

sudo apt-get install openssh-server

配置

新安装的 ssh server 需要一点配置：开启密码登录，开启公钥登录。

编辑配置文件
```
sudo vim /etc/ssh/sshd_config
```

开启密码登录、公钥登录

PasswordAuthentication yes
PubkeyAuthentication yes

重启 ssh server
```
service ssh reload 退出vim重启ssh
```

生成key

ssh-keygen -t rsa

复制公钥

将本机的公钥copy到远程机器

ssh-copy-id username@remote_host_B

然后输入密码。

该命令会把本机的公钥复制到远程机器的 .ssh/authorized_keys 文件中。

登陆服务器

配置好公钥以后就可以使用如下命令登录了。

ssh username@hostname

配置别名

每次都使用 ssh username@hostname 登录会有点麻烦，可以通过配置将命令简化。比如下面的配置，可以将登录的命令简化为 ssh azu 。配置文件为 ~/.ssh/config 。

Host azu
   HostName 192.168.1.5
   User azu
   IdentityFile /homt/xx/.ssh/id_rsa

alias命令

在终端中定义缩写的命令，比如：

alias totx='ssh username@hostname'

这样就可以使用totx命令直接登陆远程服务器了，但是alias命令会在重启终端时

…

Read more ⟶

AJAX

Mar 31, 2020

介绍AJAX的基本API和作用…

Read more ⟶

React

Mar 30, 2020

生命周期

用于初始化 state constructor() {}

用于替换 componentWillReceiveProps ，该函数会在初始化和 update 时被调用，

如果需要对比 prevProps 需要单独在 state 中维护 static getDerivedStateFromProps(nextProps, prevState) {} ，因为该函数是静态函数，所以取不到 this 。

判断是否需要更新组件，多用于组件性能优化 shouldComponentUpdate(nextProps, nextState) {}

用于获得最新的 DOM 数据 getSnapshotBeforeUpdate() {}

以下函数不建议使用 UNSAFE_componentWillMount() {}，UNSAFE_componentWillUpdate(nextProps, nextState) {}，UNSAFE_componentWillReceiveProps(nextProps) {}

props中没有history,location,match？withRouter可以解决

如果A组件的父组件是Route（react-router-dom）,A的props参数会含有history,location,match，但是A组件的子组件B的props参数就不包含history,location,match。
如果想在B组件中使用history的API，但是没有history对象该怎么办呢。这时就用到withRouter了文档。

import { withRouter } from 'react-router';
class ShowTheLocation extends React.Component {
  // this.props中会包含history,location,match
}
export default withRouter(ShowTheLocation)

…

Read more ⟶

CSS使用笔记

Mar 29, 2020

居中

  top:50%;
  left:50%;
  transform: translate(-50%, -50%);

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#centred {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Flex

.class{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

flex布局时使子元素不被缩放

  flex-grow: 0;
  flex-shrink:0;

简易镂空效果

outline:  9999px solid rgba(0,0,0,.76);

多行文字（英文、数字换行、限制行数）

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  word-wrap:break-word;
  word-break:break-all;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-wrap:break-word;
  word-break:break-all;

IOS滚动不流畅

-webkit-overflow-scrolling : touch;

IOS 阴影 input textarea

input,textarea{
	-webkit-appearance: none;
}

placeholder的样式

.className::-webkit-input-placeholder {
  color: #B7B7B7;
}

渐变色

各个参数的含义：linear-gradient(方向, 开始颜色大小, 结束颜色大小);

.node {
    background-image: linear-gradient(to right, #000 1px, transparent 0px);
}

不规则边框

.node {
    background-image: linear-gradient(to right, #000 1px, transparent 0px);
    background-size: 1px 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
}

这段样式可以画半个左边框。其中用到了渐变色属性。

…

Read more ⟶