- 博客(127)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue条件渲染（v-if和v-show的区别）
Vue条件渲染（v-if和v-show的区别）v-ifv-showv-if和v-show的区别v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht
2022-03-20 20:22:52
832
原创 软件的模式
软件模式MVVM的简介MVVM模式图MVC 简介MVC模式图MVVM的简介MVVM 由 Model,View,ViewModel 三部分构成Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双
2022-03-20 18:34:47
503
原创 React-redux
三分钟看完React-reduxReact-redux概述React与redux的关系React-reduxReact-redux中两个重要成员Provider组件connect方法React-redux的基本使用安装redux、react-redux创建两个组件ComA为一个button按钮创建组件ComB是一个显示区在App.js中引入组件A和组件B创建reducer创建storeProvider的使用connect的使用组件A发送Action组件B实现接收reducer接收Action，然后进行逻辑处
2022-03-15 17:07:11
1905
5
原创 redux
三分钟看完react-reduxRedux设计思想三大原则Redus组成State状态Action事件ReducerStore案例展示准备工作创建Action构建Reducer构建store使用ReduxRedux 是一款著名 JavaScript 状态管理容器,提供与可预测的状态管理。Redux 除了跟 React 配合使用，还可以配置 JS 、Vue 使用。设计思想❶Redux 是将整个应用状态存储到一个叫做 store 的地方，里面存在一个状态树 state tree❷组件可通过 sto
2022-03-11 20:17:07
1205
5
原创 react-hooks
三分钟看完react-hooks 背景useState类组件函数组件多状态声明useEffect类组件中componentDidMount和componentDidUpdateuseEffect模拟类组件中componentDidMount和componentDidUpdateuseEffect实现componmentWillUnment父子组件传值useContextuseReducer背景介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望
2022-03-10 08:58:02
794
2
原创 react生命周期
三分钟看完react生命周期react生命周期React组件的生命周期可以分为三个过程挂载过程constructorrendercomponentDidMount更新过程rendercomponentDidUpdate卸载过程componentWillUnmount过程模拟react生命周期组件的生命周期就是React的工作过程，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样。React组件的生命周期可以分为三个过程装载(挂载)过程（mount）：就是组件第一次在DOM树中渲染的过
2022-03-09 11:19:39
404
原创 React组件实例的三大核心属性
三分钟看完React组件实例的三大核心属性props直接传参批量传参参数类型限制state创建方式事件绑定类组件自定义方法的this绑定在构造器中绑定this在回调函数中绑定使用箭头函数refsrefs的使用使用 React.createRef() 创建 refs回调形式创建refspropsReact框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。直接传参将要传递的参数放在需要被传递的组件中<body> <div id="root"&
2022-03-09 10:03:04
672
原创 TypeScript-（泛型）
TypeScript-学不会的ts-5（泛型）问题引入解决办法什么是泛型泛型定义使用方法泛型类泛型接口：问题引入定义identity函数。 这个函数会返回任何传入它的值不用泛型的话，这个函数可能是下面这样：function identity(arg: number): number { return arg; }或者，使用any类型来定义函数：function identity(arg: any): any { return arg; }使用any类型会导致这个函数可以接收任何
2022-02-27 21:00:00
142
原创 TypeScript-（接口）
TypeScript-学不会的ts-4（接口）TypeScript接口接口类别属性接口可选接口函数类型接口可索引接口类类型接口接口继承单接口继承多接口继承TypeScript接口接口是一种规范的定义，它定义了行为和动作的规范;在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。接口类别属性接口对传入对象的约束interface I
2022-02-26 20:30:00
107
原创 TypeScript-（类与对象）
TypeScript-学不会的ts-3（类与对象）面向对象的七大原则TypeScript 类类的定义创建实例化对象类的继承继承类的方法重写(overwrite)static 关键字instanceof 运算符类属性权限修饰符存取器TypeScript对象对象字面量表示法TypeScript 类型模板对象作为函数参数匿名对象抽象类和抽象方法面向对象的七大原则(1)单一原则：一个类只负责一个职责。(2)里氏替换原则：子类可以在任何地方替换它的父类。(3)依赖倒置原则：代码要依赖于抽象的类，而不要依赖于
2022-02-24 14:04:38
1142
原创 TypeScript-（函数）
TypeScript-学不会的ts-2（函数）函数的定义声明式匿名函数函数中的参数默认参数可选参数剩余参数函数的返回值没有返回值的函数推断类型函数的调用函数的重载函数的定义声明式ts在传参时都会规定参数的类型，还有它返回值的类型也会在函数执行之前都已经规定好，如果传参的类型和返回值的类型不符合，ts编译会报错。function getInfo(name: string, age: number) : string { return `I am ${name} and I am ${age
2022-02-24 13:52:41
1292
原创 TypeScript-（基础语法）
TypeScript-学不会的ts-1TypeScript 是什么?如何安装TS编译TS变量声明TypeScript 变量的命名规则：变量的声明数据类型Boolean类型Number类型String类型Array类型Enum枚举类型Any 类型Map对象创建Mapmap.clear()map.set()map.get()map.has()map.delete()map.sizemap.keys()map.values()TypeScript 是什么?TypeScript 是一种由微软开发的自由和开源的编
2022-02-23 14:58:47
1238
原创 Node.js ORM框架-sequelize
Node.js ORM框架-sequelize什么是ORM什么是“持久化”什么是持久层ORM技术特点什么是SequelizeSequelize特点使用方式安装库配置sequelize定义模型对象具体使用1、查询所有findAll2、查询满足条件的（Id=2）3、增加信息create4、删除单条信息destroy5、批量删除6、修改信息update将上述方法封装实现接口完成上述操作测试结果什么是ORMORM（Object Relational Mapping，对象关系映射），是一种为了解决面向对象与关系数
2022-02-18 14:28:53
6180
原创 promise与async/await解析
promise与async/await解析问题引入什么是回调地狱实例回调地狱产生的问题Promise什么是promisepromise实现Promise--all的用法Promise--race的用法async/await使用async/await基本规则捕捉错误问题引入什么是回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作。实例setTimeout(()=>{ console.log('这是第一步') setTimeout
2022-02-17 20:59:14
4670
原创 Express连接MySQL及数据库连接池技术
Express连接MySQLExpress连接MySQL准备工作创建配置文件创建操作数据库的接口文件数据库连接池技术什么是数据库连接池数据库连接池的作用是什么？数据库连接池技术实例1、导入mysql模块2、创建数据库连接池3、获取数据库链接对象4、释放数据库连接对象完整实例Express连接MySQL准备工作打开webstorm新建项目选择express创建一个express项目。创建成功后其页面如下：为了连接mysql数据库还需要导入mysql模块。创建配置文件在项目中创建config文件
2022-02-16 20:21:11
1880
原创 Ajax封装
Ajax封装ajax()封装服务器部分JQuery中的Ajax$.get()不带参数的get请求带参数的get请求$.post()不带参数的post请求带参数的post请求$.ajax()ajax()封装封装ajax()函数的参数对象，包括type请求方式、url请求地址、date请求数据、async异步or同步、success请求成功后处理请求结果的函数。<!DOCTYPE html><html lang="en"><head> <meta c
2022-02-15 18:28:19
1109
原创 Ajax请求参数
Ajax请求参数GET请求参数的传递创建服务器通过表单访问服务器POST请求参数的传递GET请求参数的传递设置open()方法中的第1个参数为“get”，表示设置get请求方式。xhr.open('get', 'http://localhost:3000/demo.html?username=zhangsan &age=20');xhr.send();“?”后面的“username=zhangsan&age=20”表示GET请求参数,多个参数时需要使用“&”符号连接。
2022-02-14 19:08:50
6207
原创 Ajax实现
Ajax实现1、创建服务器获取服务器端的响应onload事件onreadystatechange事件2、配置Ajax对象3、发送请求1、创建服务器在server目录中下载Express框架，并新建app.js，编写JavaScript代码。const express = require('express');const path = require('path');const app = express();app.all('*', function(req, res, next) {//处理跨
2022-02-13 20:48:50
472
原创 Ajax入门
这里写目录标题什么是Ajax?XMLHttpRequest对象获得XMLHttpRequest对象XMLHttpRequest属性XMLHttpRequest方法什么是Ajax?全称为Asynchronous JavaScript And XML，异步JavaScript和XML技术。是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。用于实现与服务器进行异步交互的功能。相较于传统网页，使用Ajax技术的优势具体有以下几个方面。XMLHttpRequest对象
2022-02-11 18:53:45
2647
原创 node.js-数据流
node.js-数据流概述Node.js中Stream流从流中读取数据写入流管道流链式流概述“数据流”（stream）是处理系统缓存的一种方式。操作系统采用数据块（chunk）的方式读取数据，每收到一次数据，就存入缓存。Node应用程序有两种缓存的处理方式:第一种是等到所有数据接收完毕，一次性从缓存读取，这就是传统的读取文件的方式；这种方式先将数据全部读入内存，然后处理，优点是符合直觉，流程非常自然，缺点是如果遇到大文件，要花很长时间，才能进入数据处理的步骤。第二种是采用“数据流”的方式，收到一块数
2022-02-10 11:44:54
2474
原创 node.js-readline模块（终端输入）
node.js-readline模块（终端输入）什么是readline如何使用readline1、引入readline模块2、创建readline实例3、调用相关的接口方4、监听与处理readline事件实例1：输入输出实例2：模拟命令行的输入输出什么是readlinereadline是Node.js里实现标准输入输出的封装好的模块，通过这个模块我们可以以逐行的方式读取数据流。使用require(“readline”)可以引用模块。如何使用readline1、引入readline模块var rea
2022-02-08 20:53:49
4503
1
原创 node.js-express模块化路由及请求参数
node.js-express模块化路由及请求参数前言二级路由的创建方法1、导入express模块2、创建路由对象3、注册二级路由4、导出路由模块5、注册模块化路由express接收请求参数Express接收GET请求参数演示如何接收get请求参数Express接收POST请求参数演示如何接收post请求参数Express接收路由参数演示如何接收路由参数前言项目开发中，不推荐将不同功能的路由都混在一起存放在一个文件中，因为随着路由的种类越来越多，管理起来会非常麻烦。为了方便路由的管理，通过express
2022-01-27 13:25:43
3911
原创 node.js-express的基本使用方法
node.js-express的基本使用方法如何在vscode中创建一个express项目使用express框架创建服务器express中间件什么是中间件中间件机制可以实现哪些应用定义中间件常用的中间件方法的使用如何使用中间件处理静态资源静态资源访问如何在vscode中创建一个express项目1、在项目目录下打开命令窗口使用npm init命令生成配置文件。安装express模块：命令为npm install express --save检验是否安装成功：npm list express安
2022-01-24 20:29:31
3353
原创 node.js-http模块
node.js-http模块服务器相关概念什么是 http 模块http模块的作用创建最基本的web服务器创建web 服务器的步骤req请求对象res 响应对象中文乱码问题服务器相关概念IP地址IP地址：是互联网设备的唯一标识。只有在知道对方 IP 地址的前提下，才能与对应的电脑之间进行数据通信。 IPV4：点分十进制表示(32位) 192.168.101.15 IPV6：采用冒号十六进制表示(128位) 4A::5B::...注意在开发期间，自己的电脑既是一台服务器，也
2022-01-23 20:37:59
3242
原创 dp解题二（LeetCode-62,63不同路径）
dp解题二（LeetCode-62,63不同路径）62. 不同路径63. 不同路径 II62. 不同路径来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/unique-paths-ii/submissions/题目描述：一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。问总共有多少条不同的路径？示例
2022-01-15 20:10:11
2073
原创 node.js-path 路径
node.js-path 路径前言如何解决路径动态拼接错误的问题1、提供一个完整的路径前言在fs文件系统中我们读文件和写文件时如果使用的是相对路径，那么就容易出现路径动态拼接错误的问题。原因：在运行代码时，会以node命令所处的命令，动态拼接出被操作文件的完整路径。实例我们读取file目录下test.txt文件。我在E:\deyun\node\path路径下执行这段代码，它可以读取出来，因为它此时拼接出来的路径为E:\deyun\node\path\file。//1.导入文件系统模块const
2022-01-13 19:41:04
2051
4
原创 node.js-fs文件系统
node.js-fs文件系统异步和同步什么是回调?fs文件系统模块fs.readfile()方法判断文件是否读取成功fs.writeFile()方法判断文件是否写入成功打开文件fs.open()方法获取文件信息fs.stat()方法读取文件fs.read()方法（按字节读取）关闭文件fs.close()方法截取文件fs.ftruncate()方法文件复制fs.copyFile()函数向文件末尾添加内容fs.appendFile()方法删除文件fs.unlink()方法重命名fs.rename()方法创建目录
2022-01-12 19:09:59
3209
4
原创 dp解题一（LeetCode120.三角形最小路径和）
LeetCode120.三角形最小路径和题目描述给定一个三角形 triangle ，找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 + 1 的两个结点。也就是说，如果正位于当前行的下标 i ，那么下一步可以移动到下一行的下标 i 或 i + 1 。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/triangle示例 1：输入：triangle
2022-01-11 15:24:56
2214
原创 LeetCode49.字母异位分组
LeetCode49.字母异位分组题目描述给你一个字符串数组，请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。字母异位词 是由重新排列源单词的字母得到的一个新单词，所有源单词中的字母通常恰好只用一次。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/group-anagrams示例 1:输入: strs = ["eat", "tea", "tan", "ate", "nat", "bat"]输出: [["bat"],["nat
2022-01-10 18:09:11
2499
原创 Node.js-Buffer对象
Node.js-Buffer对象什么是Buffer？注意Buffer中存储的都是二进制数据，但是在显示时以16进制显示Buffer.length表示占用内存的大小Buffer打印数字时会以十进制方式显示Buffer的创建方法通过Buffer的构造函数，但不推荐使用通过allocUnsafe方法通过alloc方法通过Buffer.from()方法写入缓冲区从缓冲区读取数据将 Buffer 转换为 JSON 对象拷贝缓冲区缓冲区与迭代器总结什么是Buffer？js语言自身只有字符串数据类型，没有二进制数据类
2022-01-10 13:10:36
2782
原创 Node.js简介和安装
Node.js简介和安装及简单使用什么是node.jsnode.js的特点node.js的安装使用方法什么是node.js简洁来说node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。它可以使原本在浏览器运行的js代码有能力处理后端的事务，如操作数据库，进行文件读写等。node.js的特点1、轻量高效2、非阻塞IO模型（异步）3、事件驱动node.js的安装进入中文下载网站进行下载http://nodejs.cn/download/；根据自己电脑的系统下载不
2022-01-08 17:51:56
2314
原创 jQuery效果（隐藏和显示）
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法隐藏和显示hide()和show()hi
2022-01-05 18:53:43
7185
原创 Data Query Language（DQL）：数据查询语言
Data Query Language（DQL）：数据查询语言基础查询查询所有列查询指定列条件查询条件查询介绍查询示例如下模糊查询模糊查询介绍查询示例如下字段控制查询排序聚合函数分组查询分页查询建立三张表用于查询，表中数据如下。stu表如下：emp表如下：dept表如下：基础查询查询所有列语法：SELECT * FROM 表名;，* 通配符，表示所有列如查询stu表中所有记录：SELECT * FROM stu;结果如下：查询指定列语法： SELECT 列名1, 列名2, …列名
2022-01-04 17:56:36
3095
3
原创 Data Control Language（DCL）：数据控制语言
Data Control Language（DCL）：数据控制语言创建用户给用户授权撤销授权查看用户权限删除用户修改用户密码(以root身份)创建用户语法：CREATE USER ‘用户名’@地址 IDENTIFIED BY '密码';创建一个user1用户：CREATE USER 'user1'@localhost IDENTIFIED BY '12345';通过命令窗口登录：表示我们创建的用户已经成功了，并且能成功登录。此时这个用户没有任何权限，因此我们还需要给它权限。给用户授权1、语法
2022-01-04 11:16:56
4003
3
原创 Data Manipulation Language（DML）数据操作语言
Data Manipulation Language（DML）数据操作语言插入数据修改数据删除数据插入数据1、向表中特定列插入数据：INSERT INTO 表名(列名1,列名2, …) VALUES(值1, 值2,...);。打开student表：向表中插入一条记录：INSERT INTO student(sid, sname,age,sex) VALUES('1001', '小萱', 21, '女');插入后打开表刷新会发现多了一条记录。插入部分信息：INSERT INTO studen
2021-12-31 19:29:49
3491
5
原创 Data Definition Language（DDL）基本操作
Data Definition Language（DDL）基本操作什么是DDLDDL 操作基本操作操作数据库常见数据类型操作表我在此使用的是MySQL8.0版本和Navicat Premium 12。什么是DDLDDL（Data Definition Language）：数据定义语言，用来定义数据库对象：库、表、列等；DDL 操作首先我们先登录，可以通过命令mysql -u root -p，再输入密码登录，登录成功页面如下：也可以打开Navicat，点击连接，然后输入密码，连接名自取之后打
2021-12-31 16:58:19
3831
原创 数据库基础知识和常见术语学习
数据库常见术语学习什么是数据库数据库系统什么是数据库系统数据库系统（DBS）的组成数据库系统的特点数据库管理系统(DBMS)今天开始学习数据库相关的知识，那么在学习之前我们应该了解数据库的一些理论知识。接下来将会介绍一些常见的术语。什么是数据库标准解释为：数据库(Database，DB)是长期存储在计算机内的、有组织的、可共享的、统一管理的相关数据的集合。按照字面的理解：数据库就是存放数据的仓库。数据库系统什么是数据库系统数据库系统是为适应数据处理的需要而发展起来的一种较为理想的数据处理系统，
2021-12-30 20:12:28
2965
1
原创 ES6类解析
ES6类解析class的基本语法class的基本语法在ES6标准中提供class关键字来定义类,在写法上更简洁、语义化更强。class People{ constructor(name,age){ this.name = name; this.age = age; } Instring(){ console.log('我喜欢羽毛球'); }}ES6 的class与ES5写法的几个核心注意点：1、ES5 的构造函数P
2021-12-28 19:32:55
1673
原创 Symbol解析
Symbol解析什么是Symbol作用什么是SymbolES5中提供了6种数据类型分别是：undefined、null、boolean、string、number、object。ES6中新增了一种数据类型Symbol来表示唯一的值,每个创建的Symbol都是唯一的,这样在实际运用中可以创建一些唯一的属性及定义私有变量。如何创建Symbol值：let a = Symbol();let b = Symbol();console.log(a);//Symbol()console.log(b);//S
2021-12-28 10:29:58
2798
原创 模板字符串
模板字符串ES5标准中一般输出模板是通过字符串拼接的方式进行的。在ES6中可以通过模板字符串简化字符串的拼接,模板字符串通过反引号来表示"``",如果要嵌入变量通过"${ 变量名 }"来实现。let name = '小萱';let age = 21;console.log("姓名:"+name+','+"年龄:"+age);//姓名:小萱,年龄:21console.log(`姓名:${name},年龄:${age}`);//姓名:小萱,年龄:21模板字符串真正意义上实现了多行字符串。而且他能做
2021-12-28 10:29:11
2843
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人