- 博客(99)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 JavaScript中的几种常用循环方式对比
综合上述13.1 遍历数组，for 循环功能最完善13.2 遍历对象，使用 for-in 循环（不建议遍历数组）13.3 遍历对象数组，需要break或者continue时，可使用 for-of 循环13.4 遍历对象数组，不需要break或者continue时，使用 array.forEach 循环13.5 筛选元素，使用array.filter 循环13.6 修改元素生成新数组，使用 array.map 循环13.7 累加数值，或者处理元素个数和内容时，使用 array.reduce 循环
2023-08-07 09:53:43
565
原创 mac中使用Sourcetree的git flow
因为Sourcetree的mac版本和window版本界面和操作方式有所差异，一直在网上找不到合适的教程或者指导说明，就干脆自己写一个。如果已经了解什么是git flow工作流及其代码操作方式的同学，可以直接跳到3.mac中使用Sourcetree实现git flow这一步进行学习。
2022-10-17 15:12:35
1268
1
原创 Vue原理篇——侦听器的实现
我们在上一篇文章中说了Vue的响应式原理，使用Object.defineProperty，但是有一个问题，就是每次只能一个一个设置。而这篇文章就是为了说明如何使用侦听器让对象里的每个值都变成可观测的。
2022-09-20 21:29:47
511
原创 Vue原理篇——响应式实现（双向数据绑定）
相信大家都经常听说Vue2的双向数据绑定是通过发布订阅者模式结合数据劫持实现的。要理解这句话，需要3步，一是了解什么是发布订阅者模式，二是了解什么数据劫持，三是如何将二者结合实现响应式。
2022-09-20 20:55:11
1152
原创 Vue3实战教程（快速入门）
本教程通过搭建一个简单项目，帮助读者快速入门Vue3项目实战，掌握Vue3、TS、Element Plus、axios等技术栈。
2022-07-28 15:35:05
59669
34
原创 http协议详解01——http协议概念及工作流程
http协议按照一定规则，向服务器索要，或者发送数据，而服务器要按照一定的规则，回应数据。接下来我们看看当我们打开页面时的场景（1）当我们刚刚打开页面的时候，0，原始状态，客户端和服务器之间没有关系。（2）客户端和服务器建立连接（网络上的虚拟电路），发送请求。（3）服务器沿着连接，返回响应信息，客户端收到响应信息。（4）断开连接。.........
2022-07-20 10:14:02
611
原创 教你从零写vue穿梭框
教你从零写vue穿梭框1. 前言2. 制作选择组件（select-input）2. 制作vue穿梭框组件（table-transfer）4. 将选择组件和穿梭框组件结合使用4.1 点击选择组件按钮，弹出穿梭框4.2 将select-input组件中的数据显示在弹框中的已选表格中4.2.1 全局引入lodash4.2.2 初始化input-select组件list数据和穿梭框的selectList（已选中的人员）4.3 将重新选择后的表格数据显示在select-input组件中4.3 单选模式5. 完整代码：
2022-04-02 00:40:41
5119
1
原创 教你从零写vue日历组件
自制vue日历组件前言前言最近做项目遇到一个需求，需要制作一个定制化的日历组件，如下图所示，需求大致如下：（2）日历可以按照月份进行上下月的切换。（2）按照月份展示周一到周日的排班信息。（3）排版信息分为早班和晚班。（4）按照日期对排班进行颜色区分：当前月份排班信息正常颜色，今天显示深色，其他月份显示浅色。（5）点击编辑按钮，日历进入编辑模式。简单点说就是，今天和今天之后的排班右侧都显示一个选择按钮，点击后可弹框编辑当日的排班人员。.........
2022-02-28 17:23:11
11168
30
原创 nodejs项目实战教程15—Express
nodejs项目实战教程13—Expres1. Express操作路由（get、post、put、delete、多级目录、动态路由、get传值）1.1 安装Express1.2 get用于显示数据1.3 post用于增加数据1.4 put主要用于修改数据1.5 delete主要用于删除数据1.6 路由配置多级目录1.7 动态路由1.8 获取get传值2. Express 使用ejs2.1 安装ejs2.2 使用ejs2.3 在ejs中使用javascript2.4 在ejs中引用其他ejs文件作为公共模块2
2022-02-22 11:43:20
1981
原创 nodejs项目实战教程14——nodejs连接MongoDB，实现增删改查
nodejs项目实战教程14——nodejs连接MongoDB，实现增删改查1.nodejs连接mongodb2.1.nodejs连接mongodb1）新建demo17文件夹，npm init -y生成package.json2) cnpm install mongodb --save，下载mongdb依赖3）创建app.js，在代码中引用mongdb，建立数据库连接：// 1.cnpm install mongodb --save// 2.引入mongodbconst { MongoClie
2022-01-27 09:46:19
2815
原创 nodejs项目实战教程13——MongoDB
nodejs项目实战教程13——MongoDB基础1. NoSql简介2. MongoDB简介3. MongoDB安装4. MongoDB基础操作——增删改查4.1 数据库的增删改查4.1.1 查看数据库4.1.2 使用和创建数据库4.1.3 显示当前数据库的集合（mysql中也叫做表）4.1.4 查看当前数据库某个集合的数据4.1.5 删除当前数据库的某个集合4.1.6 删除数据库4.2 插入数据4.3 查找数据1. NoSql简介建议直接看NoSql的百度百科，介绍的很详细。这里简单概括下：NoS
2021-12-28 17:02:37
2143
2
原创 nodejs项目实战教程12——Nodejs封装Express
nodejs项目实战教程12——Nodejs封装Express1. Express简介2. 封装get请求2.1 模拟express的get方法2.2 封装get方法2.3 在web服务器中使用封装的get方法3. 封装post请求3.1 使用闭包，避免注册方法变量暴露3.2 封装post方法3.3 在web服务器中使用封装的post方法3.4 扩展res.send方法4. 封装web静态服务4.1 封装静态web服务4.2 在web服务中使用封装的静态服务1. Express简介查看express的n
2021-12-16 15:36:23
1634
原创 nodejs项目实战教程10——EJS模板引擎、get、post
nodejs项目实战教程10——EJS模板引擎、get、post前言EJS使用实例getpost前言静态网站：里面的数据都是写死的网站动态网站：里面的数据是从数据库中读取的网站。之前我们写的都是静态网站，接下来我们将实现动态网站。动态网站的动态数据目前主要有两种实现方式，一种是后台直接渲染，另一种则是前后端分离，后端只提供接口，相对简单。EJS是后台模板，可以把数据库和文件中读取的数据显示到html上，它是一个第三方模块，通过npm i ejs --save下载。属于第一种实现方式。使用方法请参考
2021-12-09 17:02:16
1340
原创 nodejs项目实战教程09——封装静态Web服务器并进行路由管理
nodejs项目实战教程09——封装静态Web服务器并读取路由1. 封装静态Web服务器2. 路由管理1. 封装静态Web服务器（1）复制上一章节《nodejs项目实战教程08——创建静态Web服务器》中的demo10中的文件到一个新创建的demo11文件夹中（2）修改module/common.js为module/routes.js（3）在routes.js中创建读取默认路径资源的方法static，并将app.js中http.createServer里的代码复制到其中进行封装：const fs
2021-12-09 10:17:00
1063
2
原创 nodejs项目实战教程08——创建静态Web服务器
nodejs项目实战教程08——创建静态Web服务器什么是Web服务器使用Nodejs创建一个Web服务器什么是Web服务器Web服务器一般是指网站服务器，即网上的某种计算机程序，可以向浏览器等客户端提供文档，也可以放置网站文件让全世界浏览，还可以放置数据文件提供下载。目前最主流的Web服务器有Apache、Nginx、IIS等。使用Nodejs创建一个Web服务器...
2021-12-08 16:55:26
1723
原创 vue-color-picker-sheldon使用说明（一款基于Vue的取色器/颜色选择器）
这是一个基于 vue 的取色器组件，功能强大，支持拖拽、取色等功能。
2021-12-07 16:56:07
2812
原创 el-color-picker-sheldon使用说明（一款基于Vue和ElementUI的取色器）
一款基于element-ui的可拖动，包含所有颜色跨度，可调节透明度和颜色取值的取色器。
2021-12-05 16:34:09
2245
原创 如何写一个vue组件发布到npm，包教包会，保姆级教学
如何写一个简单的组件发布到npm前言1.前期准备——创建一个vue项目前言因为本章内容主要是说明如何将组件发布到npm的步骤，所以创建的组件相当简单，并不会涉及到其他的诸如ElementUI或者Ant Design Vue之类的UI组件库。如果是涉及到如何创建一个自己的组件库或者基于其他的组件库创建的组件发布，这一部分的内容，我会放到该专题内容接下来的几篇文章进行详细说明。1.前期准备——创建一个vue项目使用vue create 项目名称命令创建一个基础的vue项目，因为是比较简单的演示，所以选择
2021-12-04 21:32:17
6141
3
原创 nodejs项目实战教程07——fs模块中的流以及管道流
nodejs项目实战教程07——流1. 文件可写流2. 文件可读流3. 文件管道流1. 文件可写流在demo08文件夹中，创建以下文件，往input.txt文件中写入字符app.js：const fs = require('fs')let str = ''for(let i = 0;i < 5000;i++){ str = str + '这是数据库的数据，需要保存起来hhhhhhhhhhhh\n'}// 创建写入流let writeStream = fs.createWri
2021-11-22 22:28:02
708
原创 nodejs项目实战教程06——Nodejs的新特性 async await
nodejs项目实战教程06——Nodejs的新特性 async await前言使用async await解决上一章的练习前言我在另外一篇文章《万字肝完nodejs入门教程，详解入口，建议收藏（更新中）》写过关于Nodejs的新特性async await的相关知识解说，建议大家进入文章后从 2.12 看到 2.14，基本就能够明白地狱回调是什么、Promise以及async await的使用方式。在此我就不重新赘述了。使用async await解决上一章的练习app.js：// 读取wwwroot
2021-11-08 15:50:00
673
原创 nodejs项目实战教程04——npm相关概念及其使用
nodejs项目实战教程04——npm相关概念及其使用1. 包2. npm3. npm常用命令4. package.json4.1 安装依赖生成的package.json文件4.2 使用 `npm init --yes` 生成的package.json文件：4.3 安装依赖后再执行npm init4.3.1 使用 `npm init`4.3.2 使用npm init --yes5.安装淘宝镜像1. 包之前的文章提到Nodejs可以使用核心模块和自定义模块，还可以使用第三方模块，所谓第三方模块，就是其他人
2021-11-03 14:47:40
403
原创 nodejs项目实战教程03——CommonJs、Nodejs模块和自定义模块
nodejs项目实战教程03——CommonJs、Nodejs模块和自定义模块1.什么是CommonJs2.Nodejs中的模块化2.1 核心模块2.2 文件模块3.自定义模块3.1 CommonJs（Nodejs）中自定义模块的定义3.2 自定义模块的使用3.2.1 定义和暴露单个函数：3.2.2 定义和暴露多个函数：3.3 node_modules文件夹和其他文件夹的区别3.3.1 一般使用情况3.3.2 node_modules的省略写法3.3.3 如何自定义默认模块入口1.什么是CommonJs
2021-11-02 14:29:11
776
原创 nodejs项目实战教程02——nodejs应用自动更新
nodejs项目实战教程02——nodejs应用自动更新方法一：使用nodemon方法二：使用supervisor推荐使用nodemon方法一：使用nodemon1、全局下载软件包nodemon：npm i -g nodemon2、使用nodemon命令取代node命令：nodemon app.js方法二：使用supervisor1、全局下载软件包supervisor：npm i -g supervisor2、使用supervisor命令取代node命令：supervisor ap
2021-10-29 16:26:37
1420
原创 nodejs项目实战教程01——http服务和URL类
nodejs项目实战教程01——http服务和URL类1.开发准备2.如何创建一个简单的nodejs应用3.如何创建一个http服务4.如何获取url中的参数4.1 URL类基础4.2 动态监测URL的变化1.开发准备去官网下载和安装nodejs和vscode，希望先了解nodejs基础的同学可以先看看我的《万字肝完nodejs入门教程，详解入口，建议收藏（更新中）》这篇文章2.如何创建一个简单的nodejs应用创建一个js文件，命名为app.js（名字无所谓，习惯上通常命名为app.js）作为no
2021-10-29 16:07:43
730
1
原创 React.js三连棋完整版
React.js三连棋完整版前言三连棋完整功能代码前言最近学习微前端，正好接触到了React.js，索性就系统完整地学习一遍。和当初学习Vue.js相同，先将官网的教程看一遍，在结合项目完整地做一个系统出来，从而达到融会贯通地目的。三连棋完整功能代码大家看了React.js的官网教程的话，就会发现和其他教程不同，React.js第一节课就是教会我们如何写一个游戏——三连棋，目的是让我接触和感受React.js中的组件、状态等一些概念，同时不失趣味性。官网已经有了绝大部分的游戏代码，但是也留下了几个小
2021-10-24 23:40:30
4451
原创 21.番外篇——Ant Design Vue可展开table的实现
21.番外篇——Ant Design Vue可展开table的实现目标实现代码实现目标实现本章内容是使用Ant Design Vue实现与之前使用Element UI实现的类似角色表格，因为内容太多，所以采用点击展开的方式。代码实现...
2021-10-18 09:59:28
3146
原创 20.番外篇——Vue如何自定义组件并且进行全局配置
20.番外篇——如何自定义组件并且进行全局配置前言1.创建自定义组件2.导出自定义组件3.main.js中引入自定义的公共组件并挂在到Vue4.使用自定义的公共组件前言通过之前的系列文章我们基本掌握了vue项目开发的流程和方式，但是对vue的一些功能用法仍然存在缺失。最近公司刚好转型技术栈，使用Ant Design Vue配合Vue进行前端项目的开发，虽然和之前的UI框架不同，但是用法大同小异。借此机会，正好利用番外篇说明下Ant Design Vue和Element UI的异同，并且补全之前没有进行说
2021-10-15 17:29:55
920
原创 万字肝完nodejs入门教程，详解入口，建议收藏（更新中）
nodejs入门教程1.前言2.入门教程2.1 命令行运行node.js脚本2.2 退出node.js程序2.3 如何使用 Node.js REPL2.3.1 使用方式2.3.2 点命令.help.editor.break.save.load.exit.clear2.4 从命令行接收参数（参数可以是独立的，也可以具有键和值。）2.5 使用node.js输出到命令行2.5.1 基础输出2.5.2 清空控制台1.前言首先说明，本篇文章是对nodejs官网入门教程的一份总结。同学们学习时强烈建议先前往node
2021-10-07 20:01:34
32606
16
原创 JavaScript实现浏览器特定区域截屏和下载功能
JavaScript实现浏览器特定区域截屏功能需求介绍尝试一：使用Jtopo.js自带的保存图片方法（不能对资源进行下载）尝试二：对saveImageInfo进行改写（功能能用，但是会因为跨域问题污染canvas）：尝试三：对浏览器进行区域截屏并下载（可用）需求介绍最近使用Jtopo进行一个简单版拓扑图编辑器的开发。其中有一个需求就是将编辑器canvas部分进行截图并进行下载。尝试一：使用Jtopo.js自带的保存图片方法（不能对资源进行下载）使用Jtopo的stage.saveImageInfo
2021-07-22 14:48:22
4950
1
原创 uni-app官方教程补充，新手必备，建议收藏
uni-app开发什么是uni-app学习路径《uni-app官方教程》的缺失部分1.如何在HBuilderX开发工具中实现自定义生成代码块的功能2.配置微信小程序appID什么是uni-appuni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。学习路径强烈建议各位学习uni-app的同学去官网先看一遍uni-app的官方介绍https:
2021-06-10 10:06:03
1404
3
原创 前端开发购买Macbook Pro的建议
Macbook Pro和前端开发为什么使用Macbook Pro推荐的Macbook Pro型号Macbook Pro的设置为什么使用Macbook Pro最近电脑坏了，问了很多朋友，看了知乎以及各种资料，大家都普遍推荐购买Macbook Pro进行前端开发。原因大体有以下几点：1）快。在我使用Macbook Pro的这几天就被它惊人的读写速度所深深折服了。2）专业。配置开发环境更友好，homebrew 用起来贼舒适，省去了很多抓耳挠腮的时间。3）体验感。无论写代码、听音乐，每当你看到底下那一行显
2021-05-27 15:39:02
13000
11
原创 第八章 适配器模式
第八章 适配器模式什么是适配器模式适配器的用法1）框架适配器2）参数适配器3）数据适配器总结什么是适配器模式适配器模式（Adapter）：将一个类（对象）的接口（方法或者属性）转化为另一个接口，以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。比如我们生活中的排插就是一种适配器，无论是三孔还是两孔的充电器都能够使用，还有小米8的转接头也是一种适配器，使得圆孔耳机对于type-c孔的手机能够适配使用。适配器的用法1）框架适配器如果有两个框架，比如A和jQuery，它们极度相似。我们
2021-05-05 01:40:44
159
2
原创 第七章 外观模式
第七章 外观模式什么是外观模式外观模式的作用作用1：兼容方式作用2：简化底层操作练习：使用外观模式获取不同浏览器下的css样式什么是外观模式外观模式（Facade）：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更加容易。在JavaScript中又是也会用于对底层结构兼容性做统一封装来简化用户使用。外观模式的作用作用1：兼容方式我们在进行JavaScript编程时，经常会出现兼容问题，比如时间字符串转Date类型时就会出现以下问题： function g
2021-05-04 21:54:31
265
原创 第六章 单例模式
第六章 单例模式什么是单例模式单例模式的作用作用1：定义命名空间作用2：区分模块小型代码库无法修改的静态变量惰性单例总结什么是单例模式单例模式（Singleton）：又称单体模式，是只允许实例化一次的对象类。有时我们也用一个对象类规划一个命名空间，井井有条地管理对象上的属性和方法。单例模式的作用作用1：定义命名空间// 根据id获取元素 function get(id){ return document.getElementById(id) } // 简单样式
2021-05-04 02:56:14
400
2
原创 第五章 原型模式——JavaScript的灵魂
第五章 原型模式——JavaScript的灵魂语言中的原型原型继承实例不使用原型实现继承原型继承原型模式什么时候用原型继承谈谈“原型继承的实现不需要了解创建的过程”的理解语言中的原型JavaScript中的继承是靠原型链实现的，而原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性，而不是对属性和方法的复制。原型继承实例不使用原型实现继承首先我们来假设一个场景：车的类型有很多，比如卡车、公交车、轿车、火车等。每种车都有不同的价格和速度以及功能。那现在就以交通工具为父类，轿车和卡
2021-05-03 22:40:50
235
2
伸缩盒模型网页（HTML+CSS）.zip
2020-06-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人