- 博客(60)
- 收藏
- 关注
RSS订阅原创 CSS实现全屏“品”字布局
1.grid布局实现这种方式不容易想到，但是现在主流浏览器已经支持grid布局了，所以以后可以考虑考虑。实现思路：给容器设置等宽两列，根据grid默认布局“先行后列”特点，此时会展示成这样：接下来只要让第一个项目/元素（item）占满一列就可以了，设置垂直网格线的起始位置就可以了（两列在垂直方向上有3条网格线）。完整代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset
2021-09-13 21:51:04
590
原创 Linux用户管理与权限那些事
1. 前言嗨咯，大家好我是小火柴。今天主要是想和大家分享一篇我学习Linux用户管理与权限的故事，文章难度不是很深（Linux老手或大佬求放过????），主要是记录一下我使用Linux过程中遇到的一些问题并且总结下来，文章若有纰漏，望诸君海涵与指正。最早开始上手Linux时，是在学习CI/CD的时候，在Linux系统中使用Docker部署Jenkins服务来实现自动化的过程（有兴趣的朋友可以看看我这篇Jenkins+Docker实现部署你的Vue应用文章哦），我经常会看到类似“permissions d
2021-02-28 16:40:36
409
原创 在Vue项目中对Axios进行二次封装
1.前言Web开发中，我们最常用的HTTP库就是Axios了，它的底层基于Ajax进行封装，在浏览器端和服务端都可以使用。如果大家对一些API不是很熟悉可以参考官方地址，或者中文社区。虽然现在网上已经有很多基于Axios封装的文章了，但是不妨碍我来接受社区大佬的“棒打”。2.涉及到的业务场景多环境：开发、测试、生产环境。统一错误处理：401、404、500等错误。断网、请求超时处理。请求取消/请求拦截：防止重复请求发送到服务端，造成服务端压力。请求权限：某些接口必须要有登录状态才可以访问。.
2020-11-01 21:50:46
7279
6
原创 Jenkins+Docker实现部署你的Vue应用
什么是自动化在没有工具的时代，有很多重复性的工作都是人手工完成的，比如在田地里收割果实、在流水线上加工等。而有了工具后，我们解放了双手，从而把精力放在更重要的事情上，让工具帮我们去完成那些重复性的工作，来提高效率，这就是我理解的自动化。在软件开发中更是如此，大家为了“变懒”，使自动化测试、自动化部署、自动化构建等类型的工具层出不穷。而这篇文章主要是记录一下我学习使用CI/CD工具jenkins来...
2020-09-12 16:26:03
2361
1
原创 Object.defineProperty实现数据双向绑定
1 前言作为一名前端开发人员，我们或许都听说过Vue 2.0中实现双向数据绑定采用了Object.defineProperty，我相信有很多小伙伴们和我一样有疑问，这个神奇的东西是怎么做到的呢？在介绍Object.defineProperty之前，我们先来认识一下什么是属性类型。2 属性类型ECMA-262描述道：ECMA-262 第5 版在定义只有内部才用的特性（attribute）时...
2020-05-06 12:11:49
1127
原创 apply、call、bind方法的区别和模拟实现
1 区别这三个方法都是Function原型对象里面的方法（Function.prototype），都可以指定方法的第一个参数来改变某个函数或方法运行时的上下文（指向当前this的指向）的作用。bind与apply、call方法不同的是，它返回一个新函数，等执行新函数时才会去改变上下文，常用于回调函数，而后两者是直接运行的，只是传参的方式不一样：apply的第2个参数是一个数组或类数组，call是...
2020-05-04 20:45:44
1136
原创 git多密钥管理
1. 前言之前我本地使用ssh生成的密钥默认是给github用的，也不需要繁琐的配置。但是如果密钥需要提供给多个平台使用呢？比如gitlab、gitee、github等平台，或者我们需要免密登陆云服务器如阿里云、腾讯云。这时候，我们就需要自己做一些配置了。下面是今天碰到的坑，记录一下。2. 准备在此之前，我们需要准备一些环境和平台，下面以我今天测试的为例：git bashwindow ...
2020-03-18 00:03:00
950
原创 Docker本地部署showdoc
1. 什么是showdocshowdoc是一个非常适合IT团队的在线API文档、技术文档工具。接口文档是我们开发中一个很重要的工具，它是团队协作必不可少的一部分。市面上有很多这种工具，我推荐的这款优点是它能够在线协作，而且可以本地部署。这样我们团队可以在内部网络使用它，大大提高了安全性。2. Docker本地部署showdoc服务2.1 环境准备在部署之前，我们需要准备以下环境：...
2020-03-16 21:20:55
2815
原创 使用Docker本地搭建Mock服务
一、前言接口测试是开发中必不可少的一个环节，我所了解可以进行接口测试的有Swagger、Postman、DOClever等平台，不过我们为了安全最好还是在内网来搭建一个Mock服务，下面我们将在Linux云服务器上使用Docker搭建DOClever服务。二、环境准备CentOS7操作系统（云服务器更好）Docker，➡ 安装方法Docker Compose，➡ 安装方法如果在终端...
2020-02-19 17:44:08
2166
原创 Linux（Centos7）学习笔记
一、基本命令1.1 文档型：创建/删除/目录或文件，编辑1.1.1 创建目录mkdir <categoryName>1.1.2 创建文件touch <fileName>1.1.3 查看文件内容cat <fileName>1.1.4 编辑文件vi <fileName>1.1.5 向文件末尾追加内容# 一个`>`代表覆...
2020-02-15 22:04:24
190
原创 Vue 实现仿美团外卖APP的总结
一、前言这个项目源自一个网上的一个Vue项目。但是他们那个项目是基于Vue Cli 2 并且采用了UI组件库。为了练手，我采用原生CSS写样式，然后自己封装了一套响应式方案。后台应用我是直接拿来用的，后期我也会自己用其他框架重构一下。做这个项目最重要的目的是把学过的理论知识实践一下，下面把我遇到的问题总结一下。前端项目地址：vue-shop后端项目地址：vue-shop-server完成的...
2019-12-21 11:01:54
5924
2
原创 详谈CommonJS模块规范
一、前言模块化其实很早就在很多高级语言中如Java、Ruby、Python出现了，甚至在C语言都有类似的模块化，比如include语句引入头文件，各种库等等。而在前端中，JavaScript作为主要语言，它设计之初并没有实现模块化。随着Web的发展，JavaScript地位越来越高，同时也出现了以下主要问题：代码难以维护作用域污染无法唯一标识变量…这可谓是一大痛点呐！但是广大的软件...
2019-12-03 12:05:00
382
1
原创 JavaScript中的浅拷贝和深拷贝
一、前言我第一次接触浅拷贝和深拷贝的概念是在学C和C++的时候,虽然现在已经差不多忘得干干净净了,但我记得一点的是它们和内存是有关系的。之后再看到这个概念在面试中提到，我天真的以为，浅拷贝就是这样子的：var a = { name: '老曹' }；var b = a;后来大致搞懂后，才知道我是多么的无知…在讲解之前我相信大家对堆和栈的概念已经有所了解了，至少应该知道：栈中存储基本类...
2019-11-26 12:32:26
217
原创 MongoDB 4.2基本用法以及Mongoose的使用（长文）
一、前言本来在前言里面写了一堆数据库类型介绍、为什么要学习Mongodb数据库等等，后来我又全删了，这种概念的东西看了也只能混个脸熟，即使明白了也过一阵子忘记了，只有真正用起来了才逐渐明白这些概念，如果刚一开始接触太多概念容易让人迷惑（因为我就这样…），实践出真知嘛。二、准备MongoDB 数据库，点我下载Studio 3T 可视化工具，点我下载Node.js 环境，点我下载说一点...
2019-11-25 19:08:37
1602
原创 数据结构与算法之队列（JavaScript）
什么是队列队列是一种先进先出的有序结构，生活中我们最常见的就是排队了，谁在前就先服务谁。在程序中也可以经常看到它的身影，比如JS的事件队列。学习队列，对我们理解生活和计算机十分有帮助。用JS实现队列我们根据队列先进先出的特征，在JS中来模拟实现这个结构。我会创建一个Queue类，里面会包含以下方法：enqueue：进入队列dequeue：从队列移除，返回这个被移除的元素peek：返回...
2019-11-06 17:04:37
241
转载 Unicode 和 UTF-8 有什么区别？
很久很久以前，有一群人，他们决定用8个可以开合的晶体管来组合成不同的状态，以表示世界上的万物。他们看到8个开关状态是好的，于是他们把这称为”字节“。再后来，他们又做了一些可以处理这些字节的机器，机器开动了，可以用字节来组合出很多状态，状态开始变来变去。他们看到这样是好的，于是它们就这机器称为”计算机“。开始计算机只在美国用。八位的字节一共可以组合出256(2的8次方)种不同的状态。 他们把其中的编...
2019-11-03 11:46:47
143
原创 如何计算一个html页面有多少种标签
分析这道题看似简单，但是是一个很有价值的一道题目。它包含了很多重要的知识：如何获取所有DOM节点伪数组如何转为数组去重那么针对这道题目我们来解答一下，就拿当前页面为例吧。解答获取所有的DOM节点。document.querySelectorAll('*')此时得到的是一个NodeList集合，我们需要将其转化为数组，然后对其筛选。转化为数组[...documen...
2019-11-01 09:55:24
1294
原创 简单实现防抖和节流函数
产生原因防抖和节流的这两个词汇相信大部分人都听过，尤其是在面试中经常会被问到。但真的只限于面试吗？任何事物的产生必定有它的原因。我们先看看一个业务场景：在一个输入框连续输入文字，并且键盘抬起就发AJAX请求。<input type="text" placeholder="pleaser enter keyword..." /> let txt = document.que...
2019-10-20 10:48:59
1412
原创 WebSocket协议概述（原生）
产生背景在Web开发中，我们最常用的就是HTTP协议了，但它是基于“请求-响应”的一个方式，服务器端是无法主动发送消息的，它是一个单向数据通信的方式。当然在HTTP 2.0版本中，服务器可以主动推送消息，但目前为止还没有完成推广。如果要去模拟实现这样的双向通信，比如聊天室，需要不停的发送AJAX请求去更新数据，这种方式称为“轮询”。这样做，造成了很多资源消耗，而且性能也不是很高。于是WebSoc...
2019-10-07 20:29:28
722
原创 数据结构与算法之栈（JavaScript）
栈的概念栈是一种后进先出（LIFO）的数据结构，比如生活中桌子上堆放的一叠书，餐厅里面堆放的盘子，这都可以看做是栈结构，它是一种有序集合。新添加的元素或者待删除的元素都保存在栈顶，而另一端就是栈底了。栈有很多用处，比如在内存中保存变量（在JavaScript中保存引用类型的变量）、执行环境栈、浏览器前进后退等。下面我将讲述在JavaScript中如何表示栈。数组实现根据栈的特性，我们要实现...
2019-09-28 17:37:49
293
原创 在VSCode中将默认的终端改成Git-Bash
用cmd命令一段时间了，VSCode虽然将终端放到了里面，的确方便许多，但是还是有局限性，有些命令我们是无法使用的尤其是windows系统，它默认为cmd，也可以改成powershell，但没有git-bash这种更好的终端命令控制台，下面将告诉你如何解决这个问题。打开vscode，上方点击文件，然后找到首选项，点开设置。搜索设置输入以下命令：terminal.integrated.s...
2019-09-20 11:54:36
3081
原创 CSS声明的优先级
前言看到网上大部分文章讲的是CSS选择器优先级，其实并不准确。应该称之为CSS声明的优先级，请听我道来。在此之前先题个问题：CSS是又什么组成的？很多人会觉得这个问题很简单经常被忽略，包括我自己。大部分人应该知道它的引入方法和写法，不就是写样式吗？基本概念其实CSS是由一系列的规则组成，规则又由选择器和声明块来组成，再细化就是，声明块就是我们平时所写的属性和值所构成的声明组成的。总结如下...
2019-09-16 17:39:25
157
原创 纯CSS实现选项卡
这款选项卡是没有任何JS的，而是通过锚点以及伪类来实现。HTML： <div class="news-btn"> <a href="#news1">news1</a> <a href="#news2">news2</a> <a href="#news3">news3</a&g...
2019-09-14 17:45:02
236
原创 Vue入门篇（四）：模板语法
Vue中的模板语法可谓是这个框架最方便的一个语法了，因为只需要在标签中写上{{}}（双括号）或者使用指令绑定属性就能绑定Vue中的数据了，而且它的性能很高。官网这么说的：在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。我们来看看几种用法：可以绑定文本可以绑定属性可以在模板中使...
2019-09-14 11:17:49
305
原创 JS中常用实现继承的方法（Object.create的原理）
（讲之前假定各位看官已经对原型相关了如指掌啦，否则阅读起来有一点困难哦）组合继承（最常用的继承）这种继承方式组合了原型链和借用构造函数的方式，实现了一个最为常用继承的方式。主要有几个很关键的步骤：在子类构造函数调用父类构造函数，使用call或apply来指定父类中的this为子类。这相当于子类有了父类构造函数中属性以及方法，此时便传入参数即可。注意的是原型中的属性和方法还是访问不到的。...
2019-09-12 20:16:03
1381
1
原创 Vue入门篇（三）：vue的生命周期
任何应用都会有一个生命周期，从创建到销毁，Vue实例也不例外，它还有一个特别的名字叫生命周期钩子，表示的Vue实例在创建到销毁所经历的阶段，是Vue实例在某个时间点会自动执行的函数。而平时的开发中巧妙地运用这些钩子函数会大大提高开发的效率。下面我来介绍这些生命周期钩子吧。文章通篇使用该例子：<!DOCTYPE html><html lang="en"> <h...
2019-09-12 09:56:06
202
原创 JavaScript中创建对象的几种方式
字面量 / Object构造函数这种方式相信大家都会，其实它们原理都是一样的，都是JS内置的对象Object，但是它们都是暴露在外面，代码冗余度高，也不清晰，而且无法复用，所以就有了之后的工厂模式。工厂模式工厂模式其实是设计模式中的一种，可以“批量生产”对象，我们先看看是怎么创建对象的：function createObject(name, age) { const obj = new ...
2019-09-11 17:51:18
810
1
原创 思考一下 [] == ![] 的结果
看到这个题的第一眼，我想都没写直接就是false，不就是一个取反吗，还比较啥…OK，这个时候已经掉到坑里去了，我太小瞧它了！这道题有两个点：运算符优先级强制类型转换下面我们看看分析：首先，!的优先级大于==，所以会先计算![]，而[]其实是一个引用类型，这里又涉及到了对引用类型转化为布尔值。[]转化为布尔值为true然后取反后为false，目前为止右边已经变成了布尔值false，...
2019-08-28 19:54:27
189
原创 如何让一个元素水平/垂直居中
（1）行内元素（文字、图片、行内标签（span）、行内块标签（display：inline-block））：text-align: center，下面以span为例：<div class="father"> <!-- 行内元素 --> <span class="son">hello</span> </div>.father...
2019-08-28 19:53:32
2566
原创 简单说说HTML的语义化
主要是以下几点：正确的标签做正确的事情（精辟）页面内容结构化无CSS样子时也容易阅读，便于阅读维护和理解便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO常见标签使用请参考=====>这篇文章后续有补充。...
2019-08-28 19:52:04
139
原创 实现一个 new 操作符
首先，在写之前，我们要明白new操作符发生了那几件事情，这样我们才能模拟它的作用写出用其他代码模拟。在平时开发或学习中new一般是在创建一个对象的时候使用，也就是说它肯定会和对象的创建，构造函数的执行有关系。先看看平时怎么使用吧：function Person(name, age) { this.name = name; this.age = age;}const p = new Pe...
2019-08-28 19:50:29
335
原创 Node.js入门（一）：常见的内置模块
前言在学Node.js之前需要掌握以下技能的基础知识：ES6常用语法http协议基础JavaSacript的运行机制线程和进程假定你已经掌握了相关的基础知识了，那么我们今天开始正式来学习Node.js吧！配置Node.js上 Node.js官网 下载安装包，下稳定版本即可，初学时期稳定版足矣傻瓜式安装，下一步下一步即可，默认是在C盘新版本不需要在手动配置环境变量了，而且会...
2019-08-18 20:36:20
224
原创 ES6中的模块化简单使用
文章目录什么是模块化ES6中的模块化和Common.js模块化的区别importexport参考什么是模块化ES6中的模块化和Common.js模块化的区别importexport直接输出一个变量输出一组变量输出函数或class参考...
2019-08-13 19:36:41
1012
原创 使用ES6模块化出现“Uncaught SyntaxError: Unexpected token {”这种错误的解决方案
起因之前使用ES6模块化场景要么就是在vue-cli，要么就是webpack或者babel中编译好使用的，如今很多浏览器已经支持这个语法了，比如：Safari 10.1.Chrome 61.Firefox 60.Edge 16.心血来潮的我立马弄了个demo。我在main.js中引入了一个hello模块，下面是目录结构和代码：hello.jsconst sayHi = nam...
2019-08-13 17:12:16
8308
原创 浅谈ES6中的Promise对象
文章目录前言前言ES6中绝大部分其实都是语法糖，为我们平常开发与学习提供了极大的便利。所以学习ES6是每一个前端工程师必备的技能，而我，作为前端的小“辣鸡”，居然还没有吃透ES6+，所以不能再懒惰下去，必须多写文章来总结自己所学，所以我建立了一个专栏，专门来学习ES6+。今天主要是来讲讲ES6超级超级重要的一个东西：Promise 对象，这东西简直不要太好用啊！...
2019-08-11 13:19:35
389
原创 JS中鲜为人知的属性类型
文章目录前言属性类型介绍数据属性访问器属性定义多个属性总结前言我们都听说过数据类型，引用类型，那你肯定很少听过属性类型。我也是看了JS高程才知道的，虽然平时见的真的挺少，那对于理解这门语言真的有很大的帮助，其实属性这个概念一般都是讲对象的时候才用到，而且也有没特别关注属性还有类型这门事，好了闲话不多，我们一起来玩玩这个神奇的东西。属性类型介绍属性类型在ECMA-262描述道：ECMA-...
2019-08-05 22:42:52
197
原创 vue实现数据同步以及数据双向绑定的简单原理
前言vue框架使用起来十分的方便，因为不用过多地去关注DOM的操作，大部分只需要关注视图层以及数据的变化，但是它是怎么实现数据同步以及双向绑定的呢，以下是我简单的概述，因为我也刚入门没有多久，所以写下这篇文章加深自己对vue的理解，文章若有错误，可以随时指正。数据同步首先看看vue是怎么实现数据同步的：1.创建一个vue实例2.给el属性设置一个接管范围，也就是vue实例在这个区域才有作...
2019-07-21 21:50:21
2560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人