- 博客(97)
- 收藏
- 关注
RSS订阅原创 React Hooks的使用
一、React Hooks的使用1、React的组件React的组件创建方式，一种是类组件，一种是纯函数组件（1）类组件：class 类名 extends React.Component{}（2）函数组件：function 函数名([参数]){}2、函数组件和类组件的区别（1）函数组件没有状态(state)，类组件有（2）函数组件没有生命周期,类组件有(挂载、更新、销毁)（3）函数组件没有this，类组件有注意：函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件
2022-03-28 22:01:28
972
原创 antd的基本应用
一、antd的基本应用1、ant design库主要是用于开发企业级的中后台产品。来自于'蚂蚁金服'2、使用过程（1）安装安装组件库：npm install antd --save或yarn add antd 安装图标库：npm install @ant-design/icons -s（2）引用引用css文件：根据需要,例如在App.css文件中引入@import "~antd/dist/antd.css"; 组件的引用：根据需要在自定义组件中按需引入import { B...
2022-03-27 22:33:49
1694
原创 Vue内置指令（v-if和v-show的区别）
一、v-if、v-else-if、v-else（条件渲染指令）1、v-if后接的是等号：等号后的内容必须是布尔值2、v-if的基本用法 <div id="app"> <p v-if="6<3">{{name1}}</p> <p v-else-if="6>3">{{name2}}</p> <p v-else>{{name3}}</p>
2022-03-18 22:11:40
1308
原创 软件的模式(MVC、MVVM、MVP)
一、MVC框架1、MVC概念MVC全名是Model View Controller，是模型(Model)－视图(View)－控制器(Controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。2、角色说明类型 定义 作用 使用方式 M（Model）
2022-03-18 21:18:02
970
原创 React路由示例
1、创建Home.jsimport React,{Component} from 'react';import About from "./About";class Home extends Component{ render() { return ( <div> <h2>Home页面</h2> </div> ) }}
2022-03-10 14:24:25
1118
原创 React页面路由
一、页面路由1、页面路由的方式（1）hash模式：在url后面带#这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。缺点：传递参数的方式是在url后拼接,会有体积的限制使用到的api： window.location.hash = 'qq' //.
2022-03-10 13:48:34
2289
原创 react组件的三大属性之三refs
目录一、react组件的三大属性之三refs1、react组件的三大属性2、使用方法3、模块化管理4、回调Refs一、react组件的三大属性之三refs1、react组件的三大属性（1）props属性：封装传递给组件的参数（2）state属性：组件的状态,当值发生改变后,重新渲染组件（3）refs属性通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) --- DOM元素或render函数中的react元素的代理(句柄)
2022-03-10 09:38:40
640
原创 fetch与axios的区别
总结：fetch与axios的区别axios("http://xxx/xxx.json？a=123'").then((res)=>{ console.log(res)//这里的res是响应结果})fetch("http://www.baidu.com").then((res)=>{ console.log(res);//是一个综合各种方法的对象，并不是请求的数据}).then(data=>{ //data是请求数据})fetch返回的是一个未
2022-03-10 08:13:56
1777
原创 react中内置的fetch模块
一、react中内置的fetch模块的使用1、fetch是react内置的XMLHttpRequest对象的替代方案,使用时不需要安装2、使用方法fetch(url).then(res => { return res.json() //res不是需要的请求数据 }).then(data => { console.log(data) //data是请求数据 }).catch(e =>{
2022-03-09 23:01:28
1337
原创 react中axios模块的使用（案例）
1、跨域的问题，需要安装跨域模块npm install cors2、app.js导入跨域模块var cors = require('cors');app.use(cors());3、对数据库进行链接配置新建dbconfig.js文件const Sequelize = require('sequelize');const MysqlDB = new Sequelize('dbms','root','178945688',{ host: 'localhost',
2022-03-09 22:39:02
554
原创 react中axios模块
array.map(function(currentValue, index, arr), thisIndex)currentValue：必须。当前元素的的值。index：可选。当前元素的索引。arr：可选。当前元素属于的数组对象let array = [1,2,3];let newArray = array.map((item) => { return item * item;})console.log(newArray) // [1, 4, 9].
2022-03-09 21:34:43
510
原创 React脚手架
一、React的脚手架：create-react-app1、全局安装：npm install -g create-react-app2、创建项目（1）create-react-app 项目名称（2）npx create-react-app 项目名称3、启动项目（1）第一步：进入项目所在的目录cd 项目名称（2）第二步：运行项目npm start4、示例：在React中使用bootstrap库（1）安装bootstrapnpm inst...
2022-03-08 09:23:57
572
原创 React的事件处理
一、React的事件处理1、与DOM事件处理的不同之处（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写例如：DOM的命名：onclickReact的命名：onClick（2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值...
2022-03-07 22:46:43
1459
原创 React中的render()
一、React中的render()1、render()：是 class 组件中唯一必须实现的方法 2、当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：（1）React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /&g
2022-03-07 11:23:45
11315
原创 React中state属性和生命周期
一、React组件的state属性和生命周期当组件与用户交互时,数据会发生变化，就要用到组件内的state属性；当state值发生改变时 react会重新渲染(刷新)组件，从而保证UI界面和数据的一致1、state的定义this.state = { 属性名：值}2、更新状态(state):不能直接给状态机中的属性赋值,必须通过该方法来更新状态机中的属性值this.setState({ 属性名：新的属性值})3、组件的生命周期（1）挂载(mount)当组件创建成功,
2022-03-07 11:10:49
1132
原创 React Props
目录一、Props属性1、props的用处2、通过Props初始化表单3、案例（明信片）一、Props属性1、props的用处既然React组件可以通过JavaScript函数方式实现， 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。<!DOCTYPE html><html lang="en"><head> <meta char.
2022-03-07 08:59:08
112
原创 JSX语法和React组件
目录一、JSX语法1、JSX的算术表达式2、条件表达式3、嵌入表达式4、对象表达式5、函数表达式6、数组表达式7、样式表达式8、注释表达式二、React组件1、函数组件2、类组件3、组件的组合一、JSX语法JavaScript XML，jsx是JavaScript的语法的扩展,支持自定义属性；是react的内置的语法，其基本语法格式为const 元素名 = ( <根标签名> <子标签></子标签>
2022-03-06 15:19:52
342
原创 React简介
一、React概述1、是一个JavaScript库，旨在简化可视化界面的开发2、基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写3、React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装二、ReactDOM.render()方法的语法格式1、ReactDOM.render(element,container[,callback])2、element参数：必须，表示渲染的源
2022-03-06 14:36:58
1425
原创 在项目中上传文件
一、在项目中上传文件(图片)1、将图片上传后保存到数据库中（1）数据库中保存图片的什么信息：将图片在服务器中的存储路径保存到数据库中（2）修改数据模型：（3）图片上传到服务器,再从服务器保存到数据库(图片的保存信息+其他的表单数据)A、先上传图片,将图片在服务器上存储地址返回客户端B、将服务器返回的图片的存储地址和其他的表单信息一起发送的服务器端,由服务器存储到数据库中（4）上传接口：接收上传的图片保存到指定的路径下,将存储路径和服务器地址拼接成字符串返回给客户端（5）将图片
2022-03-05 13:00:46
1031
原创 文件（图像）的上传
一、使用FormData和formidable实现二进制文件(图片)的上传1、FormData对象能够处理页面中的表单数据，使用new关键字实例化FormData()构造函数来创建FormData对象。var formData = new FormData(form);FormData()构造函数接受form表单对象作为参数。它表示将普通的form表单对象转换为FormData对象。FormData对象提供了处理表单数据的方法，不需要拼接表单数据字符串的繁琐工作，使用起来非常方便。（
2022-03-05 12:34:40
578
原创 图书管理系统（案例）
//html页面<!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"> <t.
2022-03-03 21:28:45
707
3
原创 回调函数和回调地狱
目录一、Promise对象1、回调函数2、同步任务3、异步任务4、回调地狱：在回调函数中再嵌套回调函数的情况称为回调地狱(是实现代码顺序执行的一种操作方式)5、回调地狱的解决方法6、关于Promise对象二、async和await函数1、async用来修饰函数：表示函数是一个异步函数2、await用来修饰函数3、使用async/await基本规则4、promise和async/await区别一、Promise对象1、回调函数当一个函数作为参数传
2022-03-03 21:03:54
774
原创 ORM(Object Relational Mapping，对象关系映射)
目录一、ORM(Object Relational Mapping，对象关系映射)1、持久化：将内存中的数据永久的保存到存储设备中(文件、数据库)2、对象与关系(表)的映射3、特点二、通过ORM实现CRUD(增、删、改、查)1、Node中通过Sequelize模块来实现ORM映射2、Sequelize模块的使用方法（1）安装：mysql2、Sequelize（2）创建数据库的配置文件（3）创建模型：实现orm的映射，一张表对应一个模型文件（4）进行CRUD操作
2022-03-03 17:05:43
740
原创 Node操作MySQL数据库
目录一、Node操作MySQL数据库1、基本过程2、数据库连接池技术（1）导入mysql模块（2）创建数据库连接池（3）获取数据库连接对象：pool.getConnection(function(err,conn){})（4）释放数据库连接对象：conn.release()（5）示例：CRUD一、Node操作MySQL数据库1、基本过程（1）导入mysql模块（2）创建连接配置：数据库服务器地址、端口号、用户名、密码、数据库名（3）创建数据库连接对象
2022-03-03 16:38:37
1667
原创 Ajax技术
一、Ajax技术1、传统网站的缺陷（1）无法局部刷新页面（2）只能通过刷新页面来获取服务器端的数据,若数据量大、网速慢用户等待的时间会很长（3）表单提交问题2、传统网站从浏览器端向服务器端发送请求的工作原理3、Ajax网站从浏览器端向服务器端发送请求的工作原理4、Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)（1）同步：客户端向服务器端发送请求,然后等待服务器端响应后再进行后续的操作（...
2022-03-03 16:07:31
470
原创 Express框架
目录一、Express框架1、Express简介2、Express的优势3、安装Express4、创建Web服务器的步骤（1）引入express模块（2）调用express()方法创建服务器对象（3）调用get()方法定义GET路由（4）启动监听：调用listen()方法5、Express的中间件(Middleware)（1）中间件机制可以实现的用（2）中间件主要由中间件方法和请求处理函数这两个部分构成。（3）常用的中间件方法有app.get()、app.
2022-02-25 17:12:16
1783
原创 Node服务器开发
目录一、Node服务器开发1、为什么学习服务器开发2、服务器开发可以做那些事情3、Node.js开发服务器的优势4、Node.js网站服务器必须满足一下3个条件5、IP地址6、域名7、端口8、URL9、本地机作为服务器10、http协议：超文本传输协议.是一个无状态协议11、根据客户端的地址访问不同的内容：12、获取请求头信息13、响应消息（1）状态码：用来表示请求-响应的过程是成功还是失败（2）响应类型(content-type属性)14
2022-02-25 14:34:31
1587
原创 Node的全局对象
目录一、Node的全局对象1、全局的，在任何Node模块中都可以使用而不需要引入2、__filename3、__dirname4、setTimeout(fn,ms)5、clearTimeout(t)6、setInterval(cb, ms)7、clearInterval(t)8、process9、exit事件一、Node的全局对象1、全局的，在任何Node模块中都可以使用而不需要引入2、__filename代表的是当前正在执行的代码的文件名(绝
2022-02-23 11:11:00
769
原创 Node的事件处理、readline模块
一、Node的事件处理1、采用事件驱动模型2、Node是单线程的,采用事件轮询方式来处理事件3、事件机制中的三个角色：事件(Event)、事件发生器(EventEmitter)、事件监听器(EventListener)
2022-02-23 09:53:18
294
原创 Node的数据流(stream)
目录一、Node的数据流(stream)1、处理缓存的方式2、四种类型的流3、zlib模块：用于文件的压缩与解压缩一、Node的数据流(stream)1、处理缓存的方式（1）一次性全部读取,然后再进行处理。缺点是大文件处理非常耗时,优点是过程直观（2）读取一块处理一块.优点是提高程序的性能2、四种类型的流Readable - 其是用于读操作Writable - 用在写操作Duplex - 其可以用于读取和写入操作Transform - 输出基于输入的地
2022-02-22 19:58:50
526
原创 Node的文件系统
一、Node的文件系统1、FS(FileSystem)：实现对文件的IO操作。fs是Node的模块,需要导入var fs = require('fs');2、同步和异步（1）同步：程序在涉及到文件IO时，必须等到文件IO操作结束后再执行后续的操作。（2）异步：程序在涉及到文件IO时,不等待文件IO操作结束,继续执行后续的操作，当文件IO操作结束后系统会通知程序处理文件 IO的结果。3、回调函数"回调"即"回头调用"；"回调函数"是指函数定义后并不立即调用,而是等到某个事件被触发时
2022-02-22 19:40:59
537
原创 Node.js的模块化机制、Buffer对象
目录一、Node.js的模块化机制1、什么是CommonJS模块规范2、CommonJS模块规范化的内容3、每个导出的模块都有一个moudle对象，该对象包含的属性有：4、使用require导入模块二、Buffer对象1、用来弥补JavaScript在二进制数据处理上不足。2、Buffer是一个构造函数3、Buffer的基本操作：4、Buffer类：Buffer类是基于Uint8Array的，因此其值为0~255的整数数组一、Node.js的模块化机制No
2022-02-22 16:57:47
408
原创 Node.js基本应用
目录一、Node.js是什么1、浏览器的内核2、为什么要用node.js二、Node.js中的npm三、yarn包管理器四、REPL环境一、Node.js是什么1、浏览器的内核（1）传统意义上的javascript运行在浏览器上，这是因为浏览器内核实际上分为两个部分，渲染引擎和javaScript引擎。前者主要负责渲染HTML+CSS，后者主要负责运行javaScript。渲染引擎：用于渲染HTML、CSSjs引擎：用于执行JavaScript代码（2）.
2022-02-22 16:11:30
455
原创 MySQL（多表链接查询、实体之间的关系）
目录一、多链表查询1、并(union)：将具有相同字段数目和字段类型的两张表关联到一起进行查询2、笛卡尔积：将两张表的所有字段进行合并，两张表中的记录进行组合3、连接查询(join)：基础是笛卡尔积一、多链表查询多表连接查询：表连接分为内连接和外连接。 他们之间最主要的区别：内连接仅选出两张表中互相匹配的记录，外连接会选出其他不匹配的记录。1、并(union)：将具有相同字段数目和字段类型的两张表关联到一起进行查询(1)union：去掉重复记录select 列 fr
2022-02-22 15:26:18
744
原创 MySql(DCL:数据控制语言，DQL:数据查询语言)
目录一、DCL（Data Control Language）：数据控制语言1、创建用户2、给用户授权3、撤销授权4、查看用户权限5、删除用户6、修改用户密码二、DQL（Data Query Language）：数据查询语言1、基本语法2、条件查询3、模糊查询4、字段查询控制5、排序：6、聚合函数：7、分组查询：8、分页查询：一、DCL（Data Control Language）：数据控制语言1、创建用户语法：CREATE US
2022-02-21 11:26:12
785
原创 LeetCode（383.赎金信）
给你两个字符串：ransomNote 和 magazine ，判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以，返回 true ；否则返回 false 。magazine 中的每个字符只能在 ransomNote 中使用一次。示例：输入：ransomNote = "a", magazine = "b"输出：false示例 2：输入：ransomNote = "aa", magazine = "ab"输出：false示例 3：输入：ran
2022-01-11 14:13:37
228
原创 SQL语言（概论、分类、DDL）
目录一、SQL概述1、什么是SQL2、语法要求二、SQL的分类三、DDL（MySQLQ）：数据定义语言1、基本操作（1）显示所有数据库：show databases;（2）切换数据库：use 数据库名；（3）创建数据库：create database [if not exists] 数据库名；（4）删除数据库：drop database [if exists] 数据库名（5）修改数据库的编码格式；2、常用的数据类型3、操作表（1）创建表格（2）显.
2022-01-10 16:46:22
1494
原创 LeetCode（139.单词拆分）
给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。注意：不要求字典中出现的单词全部都使用，并且字典中的单词可以重复使用。示例1：输入: s = "leetcode", wordDict = ["leet", "code"]输出: true解释: 返回 true 因为 "leetcode" 可以由 "leet" 和 "code" 拼接成。示例2：输入: s = "applepenapple", wordDict = ["
2022-01-08 20:41:04
487
原创 jQuery实现简单的动画
目录一、显示/隐藏二、向上收缩/向下展开三、淡入/淡出一、显示/隐藏1、显示：show(speed,[callback])2、隐藏：high(speed,[callback])3、交替：toggle(speed,[callback]),若'显示'则'隐藏';若'隐藏'则显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
2022-01-08 20:26:13
384
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人