自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(106)
  • 收藏
  • 关注

原创 Vue内置指令:v-if和v-show的区别

一、概念        v-if:v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。        v-show:v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。二、区别1、主要区别(1)“v-show”

2022-03-20 18:44:12 3034

原创 软件的模式(MVC、MVVM、MVP)

软件的模式一、MVC框架二、MVP框架三、MVVM框架在 MV 系列框架中,M 和 V 指 Model 层和 View 层,但是其功能会因为框架的不同而变化:◾ Model 层很好理解,就是存储数据;◾ View 层则是展示数据,读者能看见这个例子,完全就是因为存在 View 层。虽然在不同的框架中, View 层和 Model 层的内容可能会有所差别,但是其基础功能不变,变的只是数据的传输方式。一、MVC框架MVC 框架是 MVC、MVP、MVVM 这3个框架中历史最悠久的。20 世纪 70

2022-03-20 18:43:13 536

原创 React组件之评论列表案例

评论列表案例1. 渲染评论列表2. 渲染暂无评论3. 获取评论信息4. 发表评论根据前期所介绍的组件基础,实现一个评论列表的案例,要实现的功能分为四个部分:渲染评论列表(列表渲染)没有评论数据时渲染:暂无评论(条件渲染)获取评论信息,包括评论人和评论内容(受控组件)发表评论,更新评论列表(setState())初始搭建的页面结构为:<style> .app{ margin:20px auto; border:1px

2022-02-22 09:22:54 1042

原创 React---组件基础

react组件

2022-02-22 09:22:03 341

原创 React----JSX

JSX一、JSX 的基本使用1、使用步骤2、为什么脚手架中可以使用 JSX 语法?二、JSX 中使用 JavaScript 表达式三、JSX 的条件渲染四、JSX 的列表渲染五、JSX 的样式处理1、行内样式 —— style2、类名 —— className一、JSX 的基本使用React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。不需要一定使用 JSX,但它有以下优点:JSX 执行更快,因为它在编译为 JavaScr

2022-02-22 09:21:30 267

原创 React基础

React的基本使用一、什么是React?二、React的特点三、React的安装四、react的使用五、React的脚手架一、什么是React?React 是一个用于构建用户界面的 JavaScript 库。如果从 MVC 的角度来看,React 仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的 M 和 C 的功能。React 起源于 Facebook 的内部项目,后又用来架设 Instagram 的网站,并于 2013 年 5 月开源二、React的特点(1)声明式(2)基于

2022-02-22 09:20:30 97

原创 HTTPS协议详述

https协议详述https协议的工作原理https协议的优点https协议的缺点https协议的工作原理客户端在使用HTTPS方式与web服务器通信时有以下几个步骤:客户端使用HTT 的url访问服务器,则要求web服务器建立SSL链接Web服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),返回或者传输给客户端客户端和web服务器开始协商ssl链接的安全等级,也就是加密等级客户端浏览器通过双方协商一致的安全等级,建立会话秘钥,然后通过网站的公钥来加密会话秘钥,并

2022-01-29 17:44:49 2144

原创 Node.js---process对象

process对象是 Node 的一个全局对象,提供当前 Node 进程的信息。(进程:程序的一次动态运行)它可以在脚本的任意位置使用,不必通过require命令加载。该对象部署了EventEmitter接口。一、属性process常用的属性有:属性作用process.argv返回一个数组,成员是当前进程的所有命令行参数process.env返回一个对象,成员为当前Shell的环境变量process.installPrefix返回一个字符串,表示Node安装路径的

2022-01-29 17:38:08 1926

原创 TCP的三次握手、四次挥手

TCP的三次握手、四次挥手TCP报文首部1、序号seq2、确认号ack3、SYN4、ACK5、FIN三次握手具体过程1、第一次握手2、第二次握手3、第三次握手四次挥手1、第一次挥手2、第二次挥手3、第三次挥手4、第四次挥手TCP报文首部        先了解TCP报文的首部,报文首部可以理解为报文的元数据,里面存放着与这次报文相关的其他信息,图我就不摆了,介绍一下跟三次握手相关的报文首部字段。1、序号seq &

2022-01-29 17:33:24 3747 1

原创 Ajax基本实现

Ajax一、Ajax的工作原理二、Ajax基本实现步骤1、创建服务器2、配置Ajax对象3、获取服务器的响应三、请求参数1、GET请求参数的传递2、POST请求参数的传递四、Ajax异步编程五、Ajax错误处理六、FormData对象七、浏览器端art-template模板引擎八、Ajax同源策略九、jQuery中的Ajax一、Ajax的工作原理传统网站从浏览器端向服务器端发送请求的工作原理:Ajax网站从浏览器端向服务器端发送请求的工作原理:二、Ajax基本实现步骤1、创建服务器如下所示:

2022-01-25 16:44:01 1380

原创 Node.js---用readline模块实现输入

用readline模块实现输入一、什么是readline二、readline的使用三、实例1、示例1:输入输出2、示例2:模拟命令行的输入输出一、什么是readline        readline是Node.js里实现标准输入输出的封装好的模块,通过这个模块我们可以以逐行的方式读取数据流。使用require("readline")可以引用模块。二、readline的使用(1)第一步:createInterface创建

2022-01-25 10:47:30 845

原创 Node.js---在项目中操作 MySQL

在项目中操作 MySQL1、在项目中操作 MySQL的步骤2、安装与配置 mysql 模块1、安装 mysql 模块2、配置 mysql 模块3、测试 mysql 模块能否正常工作3、使用 mysql 模块操作 MySQL 数据库1、查询数据2、插入数据3、插入数据的便捷方式4、更新数据5、更新数据的便捷方式6、删除数据7、标记删除1、在项目中操作 MySQL的步骤(1)安装操作 MySQL 数据库的第三方模块(mysql)(2)通过 mysql 模块连接到 MySQL 数据库(3)通过 mysql

2022-01-12 22:38:01 1410 3

原创 Node.js---使用Express写接口

使用Express写接口一、创建基本的服务器二、创建API路由模块三、编写 GET 接口四、编写POST接口五、CORS 跨域资源共享1、接口的跨域问题2、使用 cors 中间件解决跨域问题3、什么是 CORS4、CORS 的注意事项六、JSONP接口一、创建基本的服务器二、创建API路由模块三、编写 GET 接口四、编写POST接口五、CORS 跨域资源共享1、接口的跨域问题2、使用 cors 中间件解决跨域问题3、什么是 CORS4、CORS 的注意事项六、JSONP接口...

2022-01-12 17:54:18 2297

原创 Node.js---中间件

中间件一、中间件概念1、Express 中间件的调用流程2、Express 中间件的格式3、next 函数的作用二、Express 中间件的使用1、定义中间件函数2、全局生效的中间件3、定义全局中间件的简化形式4、中间件的作用5、定义多个全局中间件6、局部生效的中间件7、定义多个局部中间件三、中间件的分类1、应用级别的中间件2、路由级别的中间件3、错误级别的中间件4、Express内置的中间件5、第三方的中间件四、自定义中间件1、需求描述与实现步骤2、定义中间件3、 监听 req 的 data 事件4、监听

2022-01-11 21:54:22 4357 9

原创 Node.js---Express路由

路由1、路由的概念2、路由的匹配过程3、路由的使用1、最简单的用法2、模块化路由3、注册路由模块4、为路由模块添加前缀1、路由的概念广义上来讲,路由就是映射关系。在 Express 中,路由指的是客户端的请求与服务器处理函数之间的映射关系。Express 中的路由分 3 部分组成,分别是请求的类型、请求的 URL 地址、处理函数,格式如下:app.method(path,handler)例如://匹配get请求,且请求URL为/app.get('/',(req,res)=>{

2022-01-09 16:12:21 731 2

原创 Node.js---Express基本使用和静态资源托管

Express一、Express简介二、Express 的基本使用1、安装2、创建基本的 Web 服务器3、监听 GET 请求4、监听 POST 请求5、 把内容响应给客户端6、获取 URL 中携带的查询参数7、获取 URL 中的动态参数三、托管静态资源1、express.static()2、托管多个静态资源目录3、挂载路径前缀四、nodemon1、安装nodemon2、使用nodemon一、Express简介       &nbsp

2022-01-08 20:27:57 2557 3

原创 node.js---开发自己的包

开发自己的包1、 需要实现的功能2、初始化包的基本结构3、初始化 package.json4、在 index.js 中定义格式化时间的方法5、在 index.js 中定义转义 HTML 的方法6、在 index.js 中定义还原 HTML 的方法7、将不同的功能进行模块化拆分8、编写包的说明文档9、发布包1、注册 npm 账号2、登录 npm 账号3、把包发布到 npm 上10、删除已发布的包        在这里需要给大家

2022-01-08 12:59:31 840 1

原创 Node.js---模块化

模块化一、Node.js 中的模块化1、Node.js 中模块的分类2、加载模块3、 Node.js 中的模块作用域4、向外共享模块作用域中的成员1、 module 对象2、module.exports 对象3、exports 对象4、exports 和 module.exports 的使用误区5、Node.js 中的模块化规范二、npm与包1、包2、格式化时间1、格式化时间的传统做法3、包管理配置文件4、解决下包速度慢的问题5、包的分类6、开发属于自己的包7、发布包三、模块的加载机制1、 优先从缓存中加载

2022-01-08 12:59:00 147

原创 Node.js---内置模块

内置模块一、fs 文件系统模块1、什么是 fs 文件系统模块1、读取指定文件中的内容1、 fs.readFile() 的语法格式2、判断文件是否读取成功2、向指定的文件中写入内容1、fs.writeFile() 的语法格式2、 判断文件是否写入成功2、案例 - 考试成绩整理3、fs 模块 - 路径动态拼接的问题二、path 路径模块1、什么是 path 路径模块2、路径拼接1、 path.join() 的语法格式2、获取路径中的文件名1、path.basename() 的语法格式2、path.basenam

2022-01-08 12:58:39 894

原创 jQuery选择器

常用API一、jQuery选择器1、jQuery基础选择器2、jQuery层级选择器3、隐式迭代4、jQuery 筛选选择器5、jQuery筛选方法6、下拉菜单案例7、jQuery 里面的排他思想二、jQuery样式操作1、操作 css 方法2、设置类样式方法3、类操作与className区别三、jQuery效果1、 显示隐藏效果2、滑动效果3、事件切换4、动画队列及其停止排队方法5、淡入淡出效果6、自定义动画 animate四、jQuery属性操作1、设置或获取元素固有属性值 prop()2、设置或获取元

2022-01-08 12:05:25 598

原创 ES6新语法(Set集合、Map集合)

set集合一、Set集合1、操作方法1、add()2、delete()3、has()4、clear()5、for...of ()2、set案例1、数组去重2、交集A∩B3、并集A∪B4、差集A-B二、Map集合1、操作方法1、set()2、get()3、has()4、delete()5、clear()6、for...of遍历7、转为数组8、forEach()遍历一、Set集合Set集合:是一种数据结构,结构类似于数组,且没有重复的值。主要用于数组去重,字符串去重。1、操作方法1、add()用于添加

2022-01-07 15:42:47 1721 1

原创 ES6新语法(解构赋值、模板字符串)

解构赋值、模板字符串一、解构赋值1、解构数组1、变量声明并赋值时的解构2、变量先声明后赋值的解构3、默认值4、交换变量5、解析一个从函数返回的数组6、忽略某些返回值7、将剩余数组赋值给一个变量2、解构对象1、基本赋值2、无申明赋值3、给新的变量名赋值4、默认值5、给新的变量命名并提供默认值二、模板字符串一、解构赋值        解构赋值语法是一种JavaScript表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋

2022-01-06 16:31:14 730 2

原创 ES6新语法(let和const)

let一、let二、const三、临时死区四、循环中let和const的使用五、let、const、var 的区别        在ES5中,我们通常用var声明变量,但是在JavaScript中用’var'来声明变量会出现变量提升的情况,即通过"var"声明的变量,系统都会把声明隐式的升至顶部,这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应,导致程序出现问题。所以ES6就给我们新增了两种新的声明格

2021-12-31 17:14:05 1482 1

原创 MySQL的多表操作

MySQL的多表操作一、多表关系1、一对一关系2、一对多/多对一关系3、多对多关系二、外键约束1、外键约束特点2、一对多关系中的外键约束1、创建外键约束1、创建表时设置外键约束2、修改表时设置外键约束2、外键约束下的数据操作1、数据插入2、数据删除3、删除外键约束3、多对多关系中的外键约束1、创建外键约束2、外键约束下的数据操作1、数据插入4、数据删除三、多表联合查询1、数据准备2、交叉连接查询3、内连接查询1、 隐式内连接2、显示内连接4、外连接查询1、 左外连接2、 右外连接3、 满外连接四、子查询1、

2021-12-30 00:26:08 1881 3

原创 MySQL数据库基本操作-DQL

DQL一、基本查询1、数据准备2、简单查询1、查询所有的商品。2、查询商品名和商品价格3、别名查询1、表取别名2、列取别名4、去掉重复值5、查询结果是表达式(运算查询)3、运算符操作1、算术运算符2、比较运算符3、逻辑运算符4、位运算符4、排序查询5、聚合查询6、聚合查询--NULL值的处理1、count函数对null值的处理2、sum和avg函数对null值的处理3、max和min函数对null值的处理7、分组查询1、对查询信息进行分组2、分组之后的条件筛选8、分页查询1、显示前n条2、分页显示9、INS

2021-12-28 16:28:17 1497 1

原创 MySQL约束

MySQL约束1.主键约束(primary key) PK1.添加单列主键1、定义字段的同时指定主键2、定义字段之后再指定主键2.添加多列联合主键3.通过修改表结构添加主键4.删除主键2.自增长约束(auto_increment)1、自增长约束的特点2、默认自增长方式3、指定自增字段初始值1、创建表时指定2、创建表之后指定3、delete删除后自增列的变化4、truncate删除后自增列的变化3. 非空约束(not null)1、创建表时指定2、创建表之后指定3、删除非空约束4.唯一性约束(unique)1

2021-12-27 17:52:29 674 1

原创 MySQL数据库基本操作---DML

DML数据插入1、向表中插入特定列2、向表中插入所有列数据修改1、修改对应所有行的数据2、修改某特定行的数据数据删除1、delete删除2、truncate删除DML是指数据操作语言,英文全称是Data Manipulation Language,用来对数据库中表的数据记录进行更新。数据插入1、向表中插入特定列语法格式:insert into 表 (列名1,列名2,列名3...) values (值1,值2,值3...); 例如,我们前面创建了一个名为student的表,如下所示:现在我们

2021-12-27 17:52:12 208

原创 MySQL数据库基本操作---DDL

DDL对数据库的常用操作1、查看所有数据库2、创建数据库3、切换数据库4、删除数据库5、修改数据库编码对表结构的常用操作1、数据类型2、创建表3、查看当前数据库的所有表名称4、查看指定某个表的创建语句5、查看表结构6、删除表修改表结构1、修改表添加列2、修改列名和类型3、修改表删除列4、修改表名DDL(Data Definition Language),数据定义语言,主要用于建库,建表。对数据库的常用操作常用操作如下表所示:功能SQL查看所有的数据库show databases

2021-12-27 17:50:31 452

原创 MySQL及Navicat的安装和使用

MySQL的安装和使用1、MySQL的安装和使用1、安装包下载解压版安装版2、解压方式安装1、设置配件文件2、配置系统环境3、服务操作3、安装包方式安装2、MySQL常用图形管理工具安装1、Navicat安装MySQL数据库管理系统由瑞典的DataKonsultAB公司研发,该公司被Sun公司收购,现在Sun公司又被Oracle公司收购,因此MySQL目前属于 Oracle 旗下产品。MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策,分为社区版和商业版,

2021-12-27 17:49:46 5824

原创 网页轮播图(详细版)

        在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片。功能需求:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。图片播放的同时,下面小圆圈模块跟随一起变化。点击小圆圈,可以播放相应图片。鼠标不经过轮播图, 轮播图也会自动播放图片。鼠标经过,轮

2021-12-24 20:37:07 58431 61

原创 JavaScript之动画函数封装

动画函数一、动画函数原理一、动画函数原理核心原理:通过定时器 setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left如下所示:...

2021-12-24 11:53:32 2690 1

原创 PC端网页特效(offset、client、scroll系列)

PC端网页特效一、元素偏移量 offset 系列二、元素可视区 client 系列三、元素滚动 scroll 系列一、元素偏移量 offset 系列offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意: 返回的数值都不带单位offset常用的属性有:二、元素可视区 client 系列三、元素滚动 scroll 系列...

2021-12-21 18:53:37 499

原创 JavaScript之立即执行函数

我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用,function fn(){ console.log(1); } fn();打印结果为:如果不调用的话,我们打印的结果永远不会显示。所以这里就会提到我们的立即执行函数,所谓立即执行函数,就是不需要调用,立马就能执行的函数。立即执行函数有两种最常见的写法:(function(){})()(function(){}())举个例子: (function fn(){

2021-12-21 17:17:03 1174

原创 动态生成表格案例(HTML+CSS+JS)

在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。实现代码为:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;

2021-12-21 16:07:06 5338

原创 模态框拖拽效果实战(HTML+CSS+JS)

在这里做一个模态框拖曳的案例,在这里要实现的功能有:点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。鼠标松开,可以停止拖动模态框移动。实现思路为:点击弹出层, 模态框和遮挡层就会显示出来 display:block;点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标。触发事件是鼠标按

2021-12-21 15:41:37 851

原创 放大镜效果实战(HTML+CSS+JS)

在浏览网页时,我们经常会看到各种各样放大镜效果,那么小熊今天就来模拟一下该效果。我们要实现的功能为:当鼠标经过小图片时, 会在小图片上显示一个小的遮挡层并将遮挡层里面的内容放大显示,当鼠标离开时,让遮挡层和放大显示的图片消失掉。实现思路为:先让小的遮挡层跟随鼠标移动。因为遮挡层坐标以父盒子为准,所以把鼠标坐标给遮挡层不合适。首先是获得鼠标在盒子的坐标,之后把数值给遮挡层做为left 和top值。但是为了美观,在这里可以将遮挡层中间的坐标给鼠标,即让遮挡层位置再减去盒子自身高度和宽度的一半。然后用到

2021-12-21 15:41:13 1858

原创 哈希表(JavaScript实现)

哈希表一、什么是哈希表一、什么是哈希表哈希表是一种非常重要的数据结构,几乎所有的编程语言都有直接或者间接的应用这种数据结构,它通常是基于数组实现的,当时相对于数组,它有更多的优势:它可以提供非常快速的插入-删除-查找操作。哈希表的速度比数还要快,基本可以瞬间查找到想要的元素哈希表相对于数来说编码要容易的多。但是哈希表相对于数组也有一些不足:哈希表中的数组是没有顺序的,所以不能以一种固定的方式(比如从小到大)来遍历其中的元素。通常情况下,哈希表中的key是不允许重复的,不能放置相同的ke

2021-12-19 17:47:02 2543 2

原创 JavaScript正则表达式

正则表达式:

2021-12-14 14:38:13 626

原创 GET请求和POST请求详述

GET请求和post请求一、GET请求1、什么是GET请求2、使用GET方法的具体情况3、GET方式提交数据特点二、POST请求1、什么是POST请求2、使用POST方法的具体情况3、POST方式提交数据特点:三、GET请求和POST请求的区别        我们知道,HTTP是超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议。举个简单的例子:客户端(浏览器)向服务器 提交HTTP请求,服务器收集到请求后向客户

2021-12-10 17:54:37 15326 3

原创 HTTP和HTTPS的区别

目录什么是HTTP?HTTP特点什么是HTTPS?HTTPS特点HTTPS原理对称加密与非对称加密对称加密非对称加密非对称加密用法准备工作公钥加密私钥签名HTTPS认证原理和加密流程生成服务器证书浏览器拿证书浏览器发送自己的 加密后的会话密钥 给服务器浏览器和服务器使用会话密钥进行对称加密方式沟通什么是HTTP?超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提

2021-12-10 10:36:57 104

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除