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 ...