- 博客(51)
- 收藏
- 关注
原创 React04 - react ajax、axios、路由和antd UI
Router包含BrowserRouter和HashRouter,BrowserRouter适用于请求服务器的情况,路径中没有#,HashRouter适用于不请求服务器的情况,路径中带有#。导航区写路由组件链接,展示区注册路由。路由跳转有replace和push两种方式,默认是push,push方式可以返回,在浏览器路径可以看到,replace是替换之前的路径,不可返回前面的路径。这样当3000端口发送请求时,先查看当前端口是否有请求资源,若有,直接返回数据,若没有,会向5000端口请求资源,然后返回。
2024-10-20 22:58:27 969
原创 React学习03-react脚手架
脚手架用来帮助快速创建基于xxx库的模板项目,包含了所有需要的配置,下载好了所有相关依赖,可以直接运行一个简单的效果。使用脚手架的项目特点有:模块化、组件化、工程化。react脚手架:create-react-app项目的整体技术架构为react+webpack+es6+eslint。
2024-10-16 21:22:37 612
原创 React学习02 -事件处理、生命周期和diffing算法
一、初始化阶段:由ReactDOM.render()触发,初次渲染3.render()4.componentDidMount() ===>常用,一般做初始化,比如开定时器、发送网络请求、订阅消息二、更新阶段:由组件内部this.setState()或父组件render触发3.render() ===> 必须用三、卸载组件:由ReactDOM.unmountComponentAtNode()触发。
2024-10-10 22:01:41 731
原创 React学习01 jsx、组件与组件的三大属性
<div id="h1">真实DOM</div>-- ....省略引入react有关js文件,示范虚拟DOM渲染过程-->// 虚拟DOM// 将虚拟DOM渲染到页面</script>
2024-10-07 23:01:54 1150
原创 Node.js学习04-Node.js异步编程
只有当前API执行完成后,才能继续执行下一个API异步API当前API的执行不会阻塞后续代码的执行区别同步API可以从返回值拿到API执行的结果,异步API不可以。同步异步同步API从上到下依次执行,前面代码会阻塞后面代码执行,异步API不会等待API执行完再执行后面的代码。同步回调函数定义的函数作为参数传递给另一个函数调用。Node.js的异步API异步API后面的代码依赖异步API的结果异步API后面的代码依赖异步API的执行结果,实际上执行的时候异步API还没有返回结
2022-06-16 21:34:19 256 1
原创 Node.js学习03-Express
Express是基于Node.js平台的快速开发极简的web开发框架。作用类似node内置模块http。本质是npm上的第三方包,基于内置模块http封装出来的,提供快速创建web服务器的方法。使用Express可以方便快速创建web网站服务器或API接口的服务器。在项目目录下运行以下命令创建基本的web服务器监听GET请求监听POST请求响应内容到客户端获取URL携带的查询参数获取URL中的动态参数托管静态资源存放静态文件的目录名不会出现在url中挂载路径前缀
2022-06-16 19:25:36 299
原创 Node.js学习02-模块化
自顶向下把系统划分为若干个模块的过程叫模块化。对系统来说,模块是可以组合、分解、和更换的单元。提高了代码的复用性,代码的可维护性,可以实现按需加载。按模块的来源分为三类:1、内置模块:fs,path,http2、自定义模块:用户创建的js文件3、第三方模块:第三方开发,使用需要下载使用require加载模块,加载模块时会执行模块中的代码模块作用域只能在当前模块访问,这种限制叫做作用域。防止了全局变量污染的问题。向外共享模块作用域成员module对象每个.js自定义模块中都有一个modul
2022-06-15 22:56:32 285
原创 Node.js学习01-初识Node.js与内置模块
Node.js是基于Chrome V8引擎的JavaScript运行环境,无法调用DOM和BOM等浏览器内置API。使用Node.js可以:基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restify框架构建API接口项目操作数据库,创建实用的命令行工具打开终端,输入命令快捷键:↑:上一次执行的命令tab:快速补全路径esc:快速清空已经输入的命令cls:清空终端操作文件的模块使用fs模块需要先导入模块初试读取文件判断文件是否读取成功 ,根
2022-06-15 15:29:25 299
原创 Ajax学习03-Ajax加强
XMLHttpRequest简称xhr,是浏览器提供的JavaScript对象,可以通过它可以请求服务器上的数据资源。Jquery里的Ajax函数就是通过xhr封装出来的。URL末尾加上的用于向服务器发送信息的字符串。格式:英文的?放在URL末尾,再加上 参数=值,多个参数用&连接。URL编码和解码URL编码的原则:使用安全的字符去表示不安全的字符,用英文字符表示非英文字符。使用xhr发起get请求1、创建xhr对象2、调用xhr.open()3、调用xhr.send()4、监听xhr.
2022-06-07 19:46:29 175
原创 Ajax学习02-form表单与模板引擎
表单在网页中主要负责数据采集功能,通过< form >标签的提交操作把采集到的信息提交到服务器处理。表单的三个基本组成部分:1、表单标签。2、表单域:包含了文本框,密码框,隐藏域,多行文本框,复选框,单选框,下拉选择框和文件上传框等。3、表单按钮。用来规定当提交表单时,向何处发表表单数据。action的值为后端提供的一个URL地址,这个URL地址专门负责接受表单提交过来的数据。当form表单在未指定action属性值的情况下,action属性默认值为当前页面的URL地址。提交表单后,页面会立即
2022-06-07 10:44:41 249
原创 Ajax学习01-服务器基本概念和初始Ajax
上网的本质目的:通过互联网的形式获取和消费资源。服务器:负责存放和对外提供资源的电脑。客户端:负责获取和消费资源的电脑。文本、图片、视频、音频、数据…数据是网页的灵魂。URL:UniformResourceLocator,统一资源定位符,用于标识互联网上每个资源的唯一存放位置。例:htpp://www.baidu.comhttp://www.taobao.com1、客户端和服务器之间的通信协议;2、存有资源的服务器名称;3、资源在服务器具体存放位置;通信协议+域名+端口号+路径+询问项+锚
2022-06-06 15:31:36 117
原创 JavaScript学习14-ES6
ES的全称:ECMAScript,由ECMA国际标准化组织制定的一项脚本语言的标准化规范。ES6泛指ES2015及以后的版本ES6新增的关键字,用于声明变量的关键字。let声明的变量只在所处的块级有效。let可以防止循环变量变成全局变量。let不存在变量提升。let声明的变量具有暂时性死区特性经典面试题var声明i是全局变量,循环过后就变成了10,函数执行时输出的是全局变量的值let每次循环都会生成一个块级作用域,每个块级作用域的变量都是不同的。const声明变量,声明时必须赋值,常值就
2022-06-02 16:04:41 312
原创 JavaScript学习13-正则表达式
用于匹配字符串中字符组合的模式,JavaScript中正则表达式也是对象。正则表达式通常用来检索、替换文本,比如验证表单、搜索。利用RegExp对象的构造函数创建字面量创建test方法用来检测字符串是否符合正则表达式特殊字符比如^, $, + …^ 表示以谁开始$ 表示以谁结束字符类[ ][ ] 里的^表示取反范围 -字符组合量词符设置某个模式出现的次数预定义类预定类说明\d0-9的任一字符相当于[0-9]\D0-9以外的字符,相
2022-06-02 13:27:19 102
原创 JavaScript学习12-函数进阶
1、函数声明:function关键字;2、函数表达式(匿名函数);3、new Function();所有函数都是Function的实例,函数也属于对象,所以函数也有原型对象,实例化函数对象也有对象原型。1、普通函数2、对象的方法3、构造函数4、绑定事件函数5、定时器函数6、立即执行函数apply()应用:apply的参数必须是数组(伪数组),可以用来求一组数的最大值,比如Math.max(数1,数2,数3…)bind()严格模式IE10以上支持,可以应用到在整个脚本或者个
2022-06-02 11:26:11 126
原创 JavaScript学习11-面向对象和原型
以对象功能划分问题。特性:封装性、继承性、多态性。易维护、易复用、易扩展,性能比面向过程低。思维特点:1、抽取对象共用的属性和行为组织成一个类2、对类进行实例化、获取类的对象class关键字声明一个类。类名首字母大写。创建实例构造函数constructorconstructor()方法是类的构造函数,用于传递参数、返回实例化对象,通过new命令生成对象实例时自动调用该方法,如果没有显示定义,类内部会自动创建一个constructor()。类里的所有函数不需要写function,多个函数之
2022-06-02 00:20:49 185
原创 JavaScript学习10-移动端网页特效和本地存储
触屏事件对象toucheventtouchstart, touchmove, touchend都有自己的触屏事件对象touchstart, touchmove, touchend都可以拖动元素。拖动元素需要获取手指的坐标值,使用tartgetTouches[0]里的pageX和pageY.。手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置。拖动元素监听事件步骤:1、touchstart: 获取手指初始坐标,获取盒子原来的位置2、touchmove: 计算手指的滑动距离,并且移动盒子3、
2022-06-01 11:49:43 130
原创 JavaScript学习09-PC端网页特效
案例:获取鼠标在盒子内的坐标元素可视区client系列属性作用element.clientTop元素上边框的大小element.clientLeft元素左边框的大小element.clientWidth返回元素包括内边距、内容宽度,返回值不带单位element.clientHeight返回元素包括内边距、内容高度,返回值不带单位立即执行函数不需要调用,立马执行的函数,独立创建了一个作用域,里面所有的变量都是局部变量,不会有命名冲突的问题。元素滚动
2022-06-01 10:51:23 110
原创 JavaScript学习08-BOM浏览器对象模型
目录BOM概述DOM和BOM的对比window对象的常见事件定时器JS执行机制location对象navigator对象history对象BOM概述BOM:浏览器对象模型,提供了独立于内容与窗口进行交互的对象,核心对象是window由一系列相关对象构成,每个对象都有很多属性和方法DOM和BOM的对比DOMBOM文档对象模型浏览器对象模型把文档当对象把浏览器当对象顶级对象document顶级对象window主要操作页面主要是浏览器窗口交互的对象W3
2022-05-31 20:32:43 182
原创 HTML+CSS学习12-移动web开发和四种布局
目录移动端基础视口二倍图移动端调试移动端常见布局流式布局移动端基础视口二倍图移动端调试移动端常见布局流式布局
2022-05-27 20:01:32 233
原创 JavaScript学习07-DOM事件高级
目录注册事件传统方式方法监听方式删除事件传统方式方法监听方式删除事件兼容性解决DOM事件流事件对象阻止事件冒泡事件委托常用鼠标事件常用键盘事件注册事件给元素添加事件,称为注册事件或绑定事件传统方式以on开头的事件,比如onclick、onmouseover…同一个元素同一个事件只能设置一个处理函数,重复设置取最后注册的处理函数方法监听方式W3C推荐addEventListener()IE9之前不支持,可用attachEvent()代替同一个元素同一个事件可以注册多个监听器,按注册顺序执行
2022-05-15 20:56:37 258
原创 JavaScript学习05-对象、简单类型与复杂类型
目录对象创建对象三种方式字面量创建对象new Object创建对象构造函数创建对象new关键字遍历对象属性对象一组无序的属性和方法的集合,所有事物都是对象对象由属性和方法组成属性:对象里的变量,事物的特征,名词,大小、颜色、重量…方法:对象里的函数,事物的行为,动词,跑、跳、吃…创建对象三种方式字面量创建对象var obj1={}vaar obj2={ name: '张三', age: 18, sex: '男', sayHi: function(){ console.log('
2022-05-09 21:11:25 265
原创 JavaScript学习04-函数、作用域、预解析
目录函数函数的使用函数声明两种方式函数的参数函数的返回值arguments的使用函数的互相调用作用域全局作用域局部作用域全局变量和局部变量的执行效率作用域链预解析预解析案例函数函数的使用先声明函数,再调用函数//声明函数function 函数名(){ 函数体}//调用函数函数名();函数不调用不执行函数声明两种方式//1. 利用关键字定义function func(){ 函数体}func();function func(val){ 函数体}func(1);/
2022-05-09 16:38:10 346
原创 JavaScript学习03-循环和数组
目录循环for循环单层for循环双层for循环while循环do while循环数组循环for循环单层for循环双层for循环while循环do while循环数组
2022-05-07 23:08:43 110
原创 JavaScript学习01-初识JavaScript
目录初识JavaScriptJavaScript是什么JavaScript的作用HTML/CSS/JS的关系浏览器如何执行JSJS的组成ECMAScript JavaScript语法DOM 页面文档对象模型BOM 浏览器对象模型JS的3种书写位置行内式内嵌式外部文件JavaScript输入输出语句变量变量的使用变量声明的特殊情况变量命名规范数据类型数据类型分类Number 数字型String 字符串型Boolean 布尔型UndefinedNull获取数据类型字面量数据类型转换解释型语言和编译型语言标
2022-05-05 12:17:19 542
原创 HTML+CSS学习10-品优购案例
目录HTML首页商品列表页登录注册页CSS初始化样式公共样式首页样式商品列表页样式登录注册页样式HTML首页<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>品优购首页</title> <!-- 网页说明 --> <meta name="description" content="品优购.COM-专业的综合网上购物商城,销
2022-05-04 19:34:16 583
原创 HTML+CSS学习09-CSS3新特性
目录新增选择器属性选择器结构伪类选择器伪元素选择器伪元素的应用--字体图标伪元素的应用--遮罩层伪元素的应用--清除浮动盒子模型其他特性新增选择器类选择器、属性选择器、伪类选择器,权重为10属性选择器根据元素的特定属性选择元素E[att] //具有att属性的E元素E[att="val"] //具有att属性且属性值=val的E元素E[att^="val"] //具有att属性且属性值以val开头的E元素E[att$="val"] //具有att属性且属性值以val结尾的E元素E[
2022-05-04 19:24:14 128
原创 HTML+CSS学习08-HTML5新增标签和属性
目录CSS初始化HTML5新特性新增语义化标签新增多媒体标签audio标签video标签CSS初始化重设浏览器的样式,* { margin: 0; padding: 0; box-sizing: border-box;}em,i { font-style: normal}li { list-style: none}img { border: 0; vertical-align: middle}button { cursor: pointer}a { c
2022-05-04 16:11:07 135
原创 HTML+CSS学习07-精灵图和字体图标
目录元素的显示与隐藏displayvisibilityoverflow精灵图(雪碧图)字体图标iconfont字体图标的下载字体图标的引用CSS三角应用:对话框样式元素的显示与隐藏displaydisplay:none; //隐藏对象,不再占有原位置display:block; //转换元素为块级对象,显示元素visibilityvisibility:visible; //元素可视visibility:hidden; //元素隐藏,继续占有原位置overflowoverflow:hid
2022-05-04 15:07:13 396
原创 HTML+CSS学习06-浮动和定位
目录CSS传统布局方式标准流(普通流/文档流)浮动浮动页面布局规则清除浮动清除浮动方法(四个)定位定位模式position边偏移top/bottom/left/right子绝父相使用固定定位fixed将元素水平居中于页面使用绝对定位absolute将子元素水平居中于父元素定位叠放次序z-index拓展CSS传统布局方式标准流、浮动、定位标准流(普通流/文档流)标签按默认方式排列块级元素占一行,上下排列行内元素按顺序从左到右排列,碰到父元素右边缘自动换行浮动让多个块级元素在一行排列显示flo
2022-04-22 20:41:52 698
原创 HTML+CSS学习05-CSS盒子模型
目录盒子模型边框border内边距padding外边距margin外边距合并问题圆角边框(CSS3新增)盒子阴影(CSS3新增)文字阴影(CSS3新增)盒子模型网页元素基本都是盒子CSS盒子模型:封装的html元素,包括外边距、边框、内边距、内容边框border边框会影响盒子的大小border: border-width border-style border-color// 边框粗细 边框样式 边框颜色border:1px solid red;//无固定顺序 bo
2022-04-22 18:58:23 373
原创 HTML+CSS学习04-CSS文本属性和背景属性
目录CSS文本属性颜色color对齐文本text-align装饰文本text-decoration文本缩进text-indent行间距line-heightCSS背景背景颜色background-color背景图片background-image背景平铺background-repeat背景图片位置background-position背景附着(背景图像固定)background-attachment背景复合写法background背景半透明rgbaCSS文本属性颜色colordiv{ color:
2022-04-18 17:12:22 159
原创 HTML+CSS学习03-CSS简介
目录CSS简介CSS代码风格CSS选择器作用选择器分类(基础选择器、复合选择器)CSS引入方式CS三种样式表基础选择器复合选择器CSS元素显示模式块元素行内元素行内块元素行内元素与块级元素的转换CSS三大特性层叠性继承性优先级CSS简介CSS规则:选择器和一条或多条声明CSS代码风格//紧凑型h1{color:blue;fontesize:18px;}//展开型h1{ color:blue; fontesize:18px;}CSS选择器作用根据需求选择标签,添加样式选择器分类(
2022-04-18 16:33:56 95
原创 HTML+CSS学习02-基本标签
目录标题标签< h1>~< h6>段落标签< p>< /p>换行标签< br>文本格式化标签div span标签图像标签< img/>链接标签< a>< /a>特殊字符(带分号,分号前无空格)表格标签表头单元格标签< th>< /th>表格属性< thead>< /thead>和< tbody>< /tbody>合并单元格列表标签有序列表&l
2022-04-17 16:45:05 156
原创 HTML+CSS学习01-HTML基本概念
网页由图片、链接、文字、声音、视频等元素组成,是以html为后缀名的文件HTML超文本标记语言超文本:可以加入图片、声音、视频等常用浏览器浏览器内核IE(猎豹安全、360急速浏览器、百度浏览器)TridentfirefoxGeckoSafariWebkitchrome/OperaBlink(Webkit的分支)web标准的构成结构(HTML)、表现(CSS)、行为(JavaScript)标签语义标签的含义,用来干什么的标签关系包含关系
2022-04-17 14:35:48 468
原创 Java周记14
本周学习1.输入流:数据源到程序(InputStream、Reader读进来)输出流:程序到目的地(OutputStream、Writer写进去)节点流:可以直接从数据源或目的地读写数据处理流(包装流):不直接连接到数据源或目的地,是其他流进行封装,目的主要是简化操作和提高性能节点流处于io操作的第一线,所有操作必须通过他们进行处理流可以对其他流进行处理,提高效率或操作灵活性字节流:按照字节读取数据(InputStream、OutputStream)字符流:按照字符读取数据(Reader、W
2020-12-13 17:34:21 131
原创 Java周记13
本周学习容器,持有对象复习1.ArrayList/Vector 数组,ArrayList默认长度为0LinkedList 链表需要线程安全的时候用Vector不存在线程安全问题的时,且查找较多用ArrayList不存在线程安全问题时,增加或删除元素较多用LinkedList2.ArrayList可以存放任意数量的对象,长度不受限制,因为有自动扩容器Collection<String> c=new ArrayList<>();c.add("aaa");c.add
2020-12-05 22:10:39 86
原创 Java周记12
本周学习容器,泛型复习1.泛型的本质就是“数据类型的参数化”,可以把泛型理解为数据类型的一个占位符(形参),在调用泛型时必须传入实际数据类型2.Set里的对象没有顺序,不可重复List里的对象有顺序,可以重复3.class MyArrayList{ Object[] obj=new Object[10]; public void set(Object o,int index){ obj[index]=o; } public Object get(int i
2020-11-29 19:03:19 81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人