Ant Design of React
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
特性
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。
官网 GitHub
安装与使用
12npm install antdyarn add antd
Demo
123456789101112131415161718192021222324import React, { Component } from 'react'import { Button, DatePicker } from 'antd'import { QqOutlined } from '@ant-design/icons'import 'antd/dist/ant ...
React路由（React Router 5）
相关理解
SPA
单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。
路由
什么是路由?
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
路由分类
后端路由：
理解： value是function, 用来处理客户端提交的请求
注册路由： router.get(path, function(req, res))
工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
浏览器端路由，value是component，用于展示页面内容
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
...
Javascript自定义工具函数
函数相关
call()
call()函数的作用与函数原型对象上的call方法是一样的：改变函数运行时的this值，并得到函数运行的执行结果
1234567891011121314function call(Fn, obj, ...args) { // 判断obj if(obj === undefined || obj === null) { obj = globalThis // globalThis: ES11新特性，用来指向全局对象 } // 为obj添加临时的方法 obj.temp = Fn // 调用temp方法 let result = obj.temp(...args) // 删除temp方法 delete obj.temp // 返回执行结果 return result}
测试：
123456789101112131415161718192021222324252627<!DOCTYPE html><html><head& ...
Numpy 初步
安装numpy：pip install numpy --user
引入numpy：import numpy as np
1 Numpy基本操作
1.1 列表转为矩阵
123456array = np.array([ [1, 4, 7], [2, 5, 8]])print(array)
1.2 查看维度
1print('Number of dim: ', array.ndim)
1.3 查看行数和列数
1print('rows and columns: ', array.shape)
1.4 查看元素个数
1print('Number of elements: ', array.size)
2 Numpy创建Array
2.1 维度
一维
12345# 一维arraya = np.array([2, 43, 29], dtype=np.int32) # np.int报warningprint(a)print(a.dtype)
多维
12345678# 多维arraya = np.array([[1 ...
仿购物网站商品图片放大镜
我们在浏览购物网站的商品详情页时，通常都会有一个展示商品图片的放大镜，如下所示：
下面我们就来仿一下这个功能。
首先是结构的搭建：
123456789<div id="container"> <div id="left"> <img src="img.jpg" alt="" style="width: 100%;"> <span></span> </div> <div id="right"> <img style="position: absolute;" src="bigimg.jpg" alt=""> </div></div>
然后做亿点样式：
12345678910111213141516171819202122232 ...
Promise学习
Promise介绍与基本使用
理解
抽象表达
Promise 是一门新的技术(ES6 规范)
Promise 是 JS 中进行异步编程的新解决方案（旧方案是单纯使用回调函数）
异步编程：
fs文件操作：require('fs').readFile('./index.html', (err,data)=>{})
数据库操作
Ajax网络请求：$.get('/server', (data)=>{})
定时器：setTimeout(()=>{}, 2000)
具体表达
从语法上来说: Promise 是一个构造函数
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功或失败的结果值
使用Promise的原因
指定回调函数的方式更加灵活
旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
支持链式调用, 可以解决回调地狱问题
回调地狱：回调函数嵌套调 ...
Ajax学习
原生Ajax
简介
Ajax
Ajax 全称为 Asynchronous JavaScript And XML ，就是异步的 JS 和 XML。
通过 Ajax 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
XML
XML 是可扩展标记语言，被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
12345<student> <name>Tom</name> <age>20</age> <gender>男</gender></student>
JSON
JavaScript Object Notation（JavaScript 对象表示法）
JSON 是存储和交换文本信息的语法，类似 XML，比 XML 更小、更快，更易解析。
1{"student" ...
React Ajax
写在前面
React本身只关注于界面，并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互（json数据）
React应用中需要集成第三方ajax库（或自己封装）
常用的ajax请求库
jQuery：比较重，如果需要另外引入不建议使用
axios：轻量级，建议使用
npm i axios
封装XmlHttpRequest对象的ajax
promise风格
可以用在浏览器端和node服务器端
启动server.js服务
server1.js
12345678910111213141516171819202122const express = require('express')const app = express()app.use((request,response,next)=>{ console.log('有人请求服务器1了'); console.log('请求来自于',request.get('Host')); console.log('请 ...
LeetCode 653 - 两数之和 IV - 输入 BST
给定一个二叉搜索树 root 和一个目标结果 k，如果 BST 中存在两个元素且它们的和等于给定的目标结果，则返回 true。
示例 1：
12输入: root = [5,3,6,2,4,null,7], k = 9输出: true
示例 2：
12输入: root = [5,3,6,2,4,null,7], k = 28输出: false
解法一：中序遍历+双指针
二叉搜索树中序遍历后序列有序，可在序列中使用双指针查找
123456789101112131415161718192021222324252627282930313233343536373839/** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * TreeNode right; * TreeNode() {} * TreeNode(int val) { this.val = val; } * ...
基于脚手架的React应用
初始化脚手架
使用 npx 创建
1npx create-react-app 项目名
使用 npm install 创建
全局安装create-react-app包：
1npm install -g create-react-app
创建脚手架：
1create-react-app 项目名
npm 镜像
执行 create-react-app时，还会自动安装一些包，这个时候，默认使用的是npm，速度较慢，可以替换为国内源。
1234# 换源npm config set registry https://registry.npm.taobao.org# 查看修改的结果npm config get registry
若已经安装cpm，则全局安装 create-react-app 时可以使用 cnpm ，但需要注意的是，在执行 create-react-app my-app时，还会自动安装一些包，这个时候，默认使用的还是npm。
脚手架文件结构
public
favicon.ico
偏爱图标，设置默认图标
index.html
详见注释（英文注释为react自动生成）
1234 ...