运行Jest

1. 安装jest

• yarn安装

  1	yarn add --dev jest

• npm 安装

  1	npm install --save-dev jest

2. 添加运行脚本

一、用到的npm包

react-markdown ：用来解析markdown。
react-syntax-highlighter ：用来让markdown中代码语法高亮。

二、安装

1

cnpm i react-markdown  react-syntax-highlighter --save 

一、先下载依赖包

安装两个包 react-transition-group 和 @types/react-transition-group

1

npm install react-transition-group  @types/react-transition-group --save

二、使用步骤

例子
APP.js文件中定义CSSTransition中的一些属性，和通过classNames自定义动画名字

使用的是最新版svg的，之前版本使用的的font icon

一、安装依赖

1
2
3
4
5

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/react-fontawesome

npm i --save  @fortawesome/free-solid-svg-icons

方法

1

pointer-events:none;

当pointer-events属性值为none时，元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

例子

1
2
3
4
5
6

<a href="www.baidu.com">链接</a>

// css
a{
    pointer-events:none
}

语法

padStart(len, str)

• 根据给定长度自动在字符串的前面补充想补充的字符串（只返回修改后的字符串，不修改原字符串）
• len 给定的长度，转换后
• str 想补充的字符串

padStart() 用于头部补全；
padEnd() 用于尾部补全。

1
2
3
4

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

用法

问题描述

如果是要写入object数据的话，会出现[object,object]的情况
例如:

1
2

fs.writeFile("./data.json", {a:1,b:2}, 
 err => console.log(err))

运行之后的data.json文件的内容为 [object,object]

前提说明

本文章采用了svg-captcha方法去实现验证码功能，后端是express，前端是vue。
实现方式：

1. 通过后端生成验证码，把验证码的值存到session中;
2. 再把验证码发到前端，前端去接收并把验证码在界面中显示出来;
3. 前端输入验证码后提交到后端，和后端session中保存的验证码做对比，看是否一致。

svg-captcha使用步骤

1. 安装svg-captcha

说明

该封装库只是对localStorage和sessionStorage进行的简易封装。
优点：

• 对localStorage和sessionStorage的操作更能加便捷。

缺点：

• 因为使用的JSON.parse和JSON.stringify，所以存取数据如果为对象并且对象中的值为undefined、function等会照成数据丢失。

封装的代码

接口

接口是由interface去定义的，知识点分为

• 属性接口
• 函数类型接口
• 可索引接口
• 类类型接口
• 接口扩展

属性接口

每个属性用分号结尾，而不是逗号

1
2
3
4
5
6
7
8
9

interface UserInfo {
  name: string;
  age: number;
}

function person(obj: UserInfo) {
  console.log(obj.name, obj.age);  // www 18
}
person({ name: "www", age: 18 });