Node.js

const testServer = ()=>{
    const http = require('http');
    const url = require('url');

    const server = http.createServer()
    server.on('request',(req,res)=>{
        //获取请求数据
        // console.log(req.method,req.headers,req.url);
        //获取请求数据
        var arg = url.parse(req.url,true);	
        console.log(arg);
        //返回一个数组
        let data = [{}];
        res.end(JSON.stringify(data));
    })

    server.listen('8080',()=>{
        console.log("启动");
    })
}

const fsTest = ()=>{
    const fs = require('fs');
    fs.readFile(path,'utf-8',(err,data)=>{
        if (error) throw error;
        console.log(data);
    })
    fs.writeFile(path, text, (err) => {
        if (err) throw err;
        console.log("写入成功！");
    });
    //追加
    fs.writeFile(path, text, { flag: "a", encoding: "utf-8" },(err) => {
        if (err) throw err;
        console.log("写入成功！");
    });
    //删除
    fs.unlink(path, (err) => {
        if (err) throw err;
        console.log("删除成功！");
    });
}

const osTest = ()=>{
    const os = require("os");
    console.log(os.platform())
}

const pathTest  = ()=>{
    //路径拼接
    const path = require('path');
    const dir = 'myDir';
    const file = 'myFile.txt';
    const fullPath = path.join(dir, file);
    //获取文件名
    const filename = path.basename(fullPath);
    //去除后缀的文件名
    const filename2 = path.basename(fullPath, '.txt');
    //获取目录路径
    const dirPath = path.dirname(fullPath);
    //获取扩展名
    const ext = path.extname(fullPath);

    //标准化路径，即去除.和..
    const nonNormalizedPath = '/home/user/myDir/../../myOtherDir/myFile.txt';
    const normalizedPath = path.normalize(nonNormalizedPath);
    console.log(normalizedPath);
}

正则匹配

const testFun = ()=>{
    let pattern = /hello/;
    let result = pattern.test("hello world");

    console.log(result); // 输出: true
}

const matchTest = () =>{
    let pattern = /world/g;
    let result = "hello world world".matchAll(pattern);
    for(let item of result){
        console.log(item)
    }
}

//只能找第一个
const searchTest = () =>{
    let pattern = /world/;
    let result = "hello world world".search(pattern);
    console.log(result); // 输出: 6
}

//加g可以匹配所有的
const replaceTest = ()=>{
    let pattern = /world/g;
    let result = "hello world world".replace(pattern, "Universe");
    console.log(result); // 输出: "hello Universe Universe"
}

let res = this.data.map(item=>{
    // 将匹配到的子字符串替换为带有高亮样式的HTML标签
    return text.replaceAll(regex,`<span style="background-color: yellow;">${regex}</span>`;
);

echarts

xaxis
- data
yaxis
- data
series[0]
- data

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <title>Document</title>
</head>
<body>
  <style>
    div{
      width: 500px;
      height: 500px;
    }
  </style>
<div id="main"></div>
<script>
  const chartDom = document.getElementById("main");
  const myChart = echarts.init(chartDom);
  let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
  myChart.setOption(option);
</script>
</body>
</html>

Promise

let flag = true;

const p1 = ()=>{
    return new Promise((resolve,reject)=>{
        if(!flag){
            resolve("success");
        }else{
            reject("sb");
        }
    })
}

const p2 = ()=>{
    return new Promise((resolve,reject)=>{
        if(flag){
            setTimeout(() => {
                resolve("success");
            }, 5000);
        }else{
            reject("sb");
        }
    })
}

p1()
.then((res)=>{
    console.log(res);
})
.catch(err=>{
    console.log(err);
})

Promise.all([p1(),p2()])
.then(res=>{
    //有一个失败就不会进来
    //否则是全部的成功结果
    console.log(res);
})
.catch(err=>{
    //只打印第一个错误
    console.log("错误是",err);
})

//race只等一个，无论对错都输出

正则表达式

表达式	描述
[a-z]	查找任何从小写 a 到小写 z 的字符
[A-Z]	查找任何从大写 A 到大写 Z 的字符
[0-9]	查找任何从 0 至 9 的数字
[abc]	查找括号内的任意一个字符
[^abc]	查找除了括号内的任意字符

常用的元字符（特殊字符）

字符	描述
\w	匹配数字、字母、下划线
\W	匹配非数字、字母、下划线
\d	匹配数字
\D	匹配非数字
\s	匹配空白字符（空格、换行）
\S	匹配非空白字符
\n	匹配换行符

常用的限定符

字符	描述
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
?	匹配前面的子表达式零次或一次
{n}	匹配确定的 n 次
{n,}	至少匹配 n 次
{n,m}	最少匹配 n 次且最多匹配 m 次

常用的修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

其他

修饰符	描述
^	以…开始
$	以…结束

CSS

选择器
div[id !=’item2’]
body[class ^=’c’]
body[class $=’c’]

:first 选取指定元素的第一个该元素。
:last 选取指定元素的最后一个该元素。
:odd 选取指定元素序号为奇数的所有该元素。
:even 选取指定元素序号为偶数的所有该元素。
:eq(n) 选取指定元素的第 n 个该元素。
:lt(n) 选择指定元素中小于 n 的所有该元素。
:gt(n) 选取指定元素中大于 n 的所有该元素。

:visible 选取所有可见元素。
:hidden 选取所有不可见元素。

:contains(text) 对包含指定 text 文本的元素进行操作。
:has(selector) 对包含指定选择器的元素进行操作。
:parent 对含有文本或者子元素的元素进行操作。
:empty 对空元素进行操作。

:input 选取所有 input 元素。
:button 选取所有 input 类型为 button 的元素。
:submit 选取所有 input 类型为 submit 的元素。
:reset 选取所有 input 类型为 reset 的元素。
:text 选取所有 input 类型为 text 的元素。
:textarea 选取所有多行文本框。
:password 选取所有 input 类型为 password 的元素。
:radio 选取所有 input 类型为 radio 的元素。
:checkbox 选取所有 input 类型为 checkbox 的元素。
:image 选取所有图片域。
:file 选取所有 input 类型为 file 的元素。

:checked 选取所有被选中的表单元素。
:selected 选取被选中的表单元素项。
:enabled 选取所有可用的表单元素。
:disabled 选取所有不可用的表单元素。
:read-only 选取只读权限的表单元素。
:focus 选取所有获得焦点的表单元素。

:focus 给获取焦点的元素设置样式。
::selection 给页面中被选中的文本内容设置样式。
:checked 给被选中的单选框或者复选框设置样式。
:enabled 给可用的表单设置样式。
:disabled 给不可用的表单设置样式。
:read-only 给只读表单设置样式。
:read-write 给可读写的表单元素设置样式。
:valid 验证有效。
:invalid 验证无效。

text-shadow: x-offset y-offset blur color;
text-shadow: 4px 4px 3px rgb(0, 255, 179);

text-overflow: clip|ellipsis;
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 5px #26ad8c;

transform
transform: rotate(60deg);
transform: translateX(20px);
transform: scaleX(2);

transition: transform 1s ease-in-out;

transition: 指定属性持续时间速度曲线开始时间;
transition-property: 属性值; /指定属性名/
transition-duration: 属性值; /完成过渡这一过程的时间/
transition-timing-function: 属性值; /速度曲线/
transition-delay: 属性值; /过渡的开始时间/

@keyframes 动画名
{
0% {样式属性：属性值;}
25% {样式属性：属性值;}
50% {样式属性：属性值;}
100% {样式属性：属性值;}
}

animation: 动画名完成动画的周期是否重复;
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。

infinite

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

@media screen and (min-width: 800px) {
body {
background-color: green;
}
}

all 适用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 用于屏幕阅读器等发声设备

max-width 定义输出设备中的页面最大可见区域宽度
max-height 定义输出设备中的页面最大可见区域高度
min-width 定义输出设备中的页面最小可见区域宽度
min-height 定义输出设备中的页面最小可见区域高度
orientation 视口（viewport）的旋转方向。portrait ：表示 viewport 处于纵向，即高度大于等于宽度； landscape ：表示 viewport 处于横向，即宽度大于高度

.son{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.father{
display:relative;
}

.nav{
display:flex;
justify-content:space-between;
}
.nav > .left{}
.nav > .right{}

Jquery

子级插入方法，包括 prepend()、prependTo()、append()、appendTo()。
同级插入方法，包括 before()、insertBefore()、after()、insertAfter()。

remove()
empty()

$(A).replaceWith(B);
// 将 A 替换为 B
$(B).replaceAll(A);

$().each(function (index, element) {});

$().ery对象.attr(“属性名”); // 获取属性
jQuery对象.attr(“属性名”, “属性值”); // 修改属性

$().removeAttr(“属性名”);

$().css(“属性名”, “属性值”);

$().addClass(“类名”);

$().html(“内容”);

$().text(“内容”);
$().val(“内容”);

$().show();
$().show();

$().fadeIn(speed, easing, callback);
$().fadeOut(speed, easing, callback);

$(“li”).parent()
$().prev();
$().preAll();

$().next();
$().nextAll();

$().siblings();
$().children();

$().find(selector);

$().hasClass(“类名”);

$().eq(n);

$().is(selector);
$().not(selector|function)

//已知某个li，获取他在li中的下标，并对他的下一个进行操作
let target_li = …
let idx = $(‘li’).index(target_li);
$(‘li’).eq(idx+1).do();

JS

//字符串api
includes(s)
startsWith(s)
endsWith(s)
replaceAll(old,new)

let arr = Array.of(7, 8, 9);
var arr = Array.from(arrLike);

//数组api
arr.find(function (value, index) {
console.log(value > 2);
console.log(index);
return value > 2;
});
let result = arr.findIndex(function (value, index) {
return value == “兔子”;
});
fill()
arr.entries()
arr.keys()
arr.values()

//Object
Object.is(a,b)

//Promise
return new Promise(function (resolve, reject) {
if(){resolve(a)}
else reject(b)
});

Promise.all([p1(5), p1(6), p1(7)]).then(
function (v) {
console.log(v);
},
function (e) {
console.log(e);
}
);

Promise.race([loadData(), timeOut()]).then(
function (d) {
console.log(d);
},
function (e) {
console.log(e);
}
);

//所有的Promise结束之后打印
function p(v) {
return new Promise(function (resolve) {
setTimeout(function () {
// 在 p 函数执行时，将函数的实参值 v ，作为执行成功回调函数的返回值。
resolve(v);
}, 2000);
});
}
async function fn() {
await Promise.all([p(“a”), p(“b”), p(“c”)]);
console.log(“隐藏加载动画！”);
}
fn();

//proxy
var proxy = new Proxy(dog, {
get(target, propKey) {
// 遍历目标对象的属性键值
if (propKey in target) {
return target[propKey]; // 返回相应的属性值
} else {
throw new ReferenceError(propKey + “ 属性不存在”);
}
},
});

js获取日期
let now = new Data();
now.setTime(now.getTime()+1000606024i);
getDate() 返回一个月的某一天。
getDay() 返回一周中的某一天。
getFullYear() 返回年份。
getHours() 返回小时。
getMonth() 返回月份。
getTime() 返回毫秒数。
setFullYear() 设置年份。
setDate() 设置一个月中的某一天。
setMonth() 设置月份。

Math.abs(x) 返回一个数的绝对值。
Math.pow(x, y) 返回一个数的 y 次幂。
Math.random() 返回一个 0 到 1 之间的伪随机数。
Math.sqrt(x) 返回一个数的平方根。
Math.round() 返回四舍五入后的整数。
Math.exp(x) 返回欧拉常数的参数次方。

arr.slice(s,e)和splice
shift push
arr1.concat(arr2)

.toLowerCase();
.toUpperCase();

s.charAt(下标值);
s.substring();

s.replace(old,new

var arr = str.split(“,”);

parent.appendChild(child);

//判断对象为空
function isEmptyObject(obj) {
for (let o in obj) {
return false;
}
return true;
}

//从idx开始删除1个元素
arr.splice(idx,1)

技巧

box-sizing

1	box-sizing: content-box \|\| border-box;

这里推荐使用的是border-box

如下图content-box(默认是这个)，可以发现内容的宽高是按着给定的100来的，但是实际盒子的长宽还要加上$2padding+2border+2*margin$，可能和需求就不一致了

width: 100px;
border: 5px solid black;
padding:11px;
margin: 1px;
background-color: blue;
height: 100px;

重点是这个！如下图border-box(只加了那一行)，可以发现整个盒子的宽高是$100+margin$，内容的宽高是按照$100-2padding-2border$来的，会好一点

width: 100px;
border: 5px solid black;
padding:11px;
margin: 1px;
background-color: red;
height: 100px;
box-sizing: border-box;

明显用了border-box的小一些

水平居中

.demo1{
	width:1024px;
	margin:0 auto;
}

.demo2-father{
	display:flex;
	justify-content:center;
}
.demo2{}

导航栏一边居左一边居右

.nav{
	display:flex;
	justify-content:space-between;
}
.nav > .left{}
.nav > .right{}

垂直居中

.demo1-father{
	display:flex;
	align-items:center;
}
.demo1{}


.demo2{
	height:100px;
	line-height:100px;
}

水平垂直居中

.son{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.father{
	display:relative;
}

获取数据类型

def getType(){
	return Object.prototype.toString
	  .call(target)
	  .slice(8, -1) // 这种写法也可以。
	  .toLocaleLowerCase();
}

判断对象是否为空

function isEmptyObject(obj) {
  for (let o in obj) {
    return false;
  }
  return true;
}

位置伪类的使用

伪类选择器

Jquery

item.next()
item.prev()

//已知某个li，获取他在li中的下标，并对他的下一个进行操作
let target_li = ...
let idx = $('li').index(target_li);
$('li').eq(idx+1).do();

JS获取表单元素

let myForm = document.querySelector('#myForm');
let form = new FormData(myForm);
//获取input、单选框的值
let name = form.get('name');
let sex = form.get('sex');
//获取多选框的值
//habbits是选中的元素的下标
let habbits = form.getAll('habbit');
habbits = habbits.map(idx=>{...})

JS设置属性

1 2	let item = ... item.innerText = ''

JS的map()和filter()

map和filter都是基于原数组，产生新数组
map趋向于改造数组，重新处理每一个item，可以认为是一个foreach，返回每个新的数组元素
filter趋向于筛选数组元素，返回布尔值表示是否要将该元素放入新数组\

字符串查找

1	arr.includes(var) //数组中是否有某值(python的in)

补全搜索

1
2
3

return this.data.filter(item=>{
  return item.name.toUpperCase().includes(this.searchQuery.toUpperCase());
})

悬停父元素，改变子元素

1	#box:hover #item

Axios

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
})
.finally(function () {
  // always executed
});

get是param，post是data

读取本地json

axios.get("/data.json")
.then((res) => {
  console.log(res);
})
.catch((error) => {
  console.log(res);
});

axios({
  method:"get",
  url:"./goodsList.json"
}).then(res=>{
  console.log(res);
})

Node服务端

添加链接描述

const http = require('http');
const url = require('url');
const querystring = require("querystring");

const server = http.createServer()
server.on('request',(req,res)=>{
    //获取请求数据
    // console.log(req.method,req.headers,req.url);
    //获取请求数据
    var arg = url.parse(req.url).query;
	//将arg参数字符串反序列化为一个对象
	var params = querystring.parse(arg);
    console.log(params);
    //返回一个数组
    let data = [{name:params['name']}];
    res.end(JSON.stringify(data));
})

server.listen('8080',()=>{
    console.log("启动");
})

Vue2

可用的CDN

1	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

var app = new Vue({
	el:"#app",
	data:{
	  msg:"qwer"
	},
	computed: {
	  reverseName: function () {
	    return this.msg.split("").reverse().join("");
	  },
	},
	watch: {
	  msg: function (newVal, oldVal) {
	    alert("新值" + newVal + "----" + "旧值" + oldVal);
	  },
	},
	 created() {
        alert(
          "在实例创建完成后被立即调用,挂载阶段还没开始，$el 属性目前不可见"
        );
      },
      mounted() {
        alert("el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子");
      },
})

变异方法，直接改变数组内容，并自动更新，注意unshift

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

Vue2少用watch方法

1	@dragstart="ds($event,good)"

CSS变量

//取色器的change事件，修改css变量
document.getElementById('color1').addEventListener('change',(e)=>{
    let newValue = e.target.value;
    document.querySelector(':root').style.setProperty("--color1",newValue);
});

:root {
  --color1: #00dbde;
  --color2: #fc00ff;
}

正则表达式

1 2	var regexp_1 = /a/; regexp_1.test(str)

Radio

radio必须有不同的label才能被单选中

Vue修改数组

1	this.$set(this.obj.list, 1, { name: '小红',age: 18})

字符串查找

1 2	s.indexOf(s); -1

vuex

用了namespace时，namespaced: true,则store.state.user.username，注意user是子模块，或者store.getters[‘user/username’]

JSON

JSON.stringfy()
JSON.parse()

Array的sort

全部自定义，同时返回值要是正负而不是布尔，用a-b

Grid学习

Grid教程

Flex学习

eval

字符串转表达式

const sum = (a,b)=>{ return a+b; }
let res;
try{
    res = eval('sum(10,20)');
}catch(e){
    res = 0;
}
console.log(res);

蓝桥国赛复健

Node.js

正则匹配

echarts

Promise

正则表达式

常用的元字符（特殊字符）

常用的限定符

常用的修饰符

其他

CSS

Jquery

JS

技巧

box-sizing

水平居中

导航栏一边居左一边居右

垂直居中

水平垂直居中

获取数据类型

判断对象是否为空

位置伪类的使用

Jquery

JS获取表单元素

JS设置属性

JS的map()和filter()

字符串查找

补全搜索

悬停父元素，改变子元素

Axios

Node服务端

Vue2

CSS变量

正则表达式

Radio

Vue修改数组

字符串查找

vuex

JSON

Array的sort

Grid学习

Flex学习

eval