阿伦gh-CSDN博客

原创 60 个 CSS 选择器，一网打尽！

CSS 选择器用于选择 HTML 元素并将样式应用于它们。使用这些选择器，可以定义特定条件下应用哪些样式。除了普通的选择器外，还有伪类和伪元素，用于选择具有特定状态或特定部分的元素，并将样式应用于它们。本文将通过图文并茂的方式展示这些选择器的使用方法！

2024-03-02 10:00:45 1137

转载从第一代 iPhone 细数到 iPhone 12，iPhone 屏幕尺寸进化历程背后的 app 设计哲学

相关概念：1、像素（px）：是画面中最小的点（单位色块）。2、分辨率：画面水平方向的像素值 * 画面垂直方向的像素值。3、位色：色彩位数以二进制的位(bit)为单位，用位的多少表示色彩数的多少。在颜色中的三原色RGB各自分为256级灰度，组合出来的256×256×256=16700万色，也就是通常说的24位或24bit色(2的24次方)。256种颜色要用8位二进制数表示，即2的8次方，因此我们把256色图形叫做8位图。同理，能显示65536种颜色的话，就是16位图，也就是2的16次方。总之色彩位数越.

2020-09-23 20:01:40 3406

原创讲讲JS中的类、继承和单例

本篇分别通过 ES5 和 ES6 讲述JS中的类、静态方法、继承和单例ES5 类和静态方法1、构造函数里面的方法和属性与原型链上的方法和属性都叫做：实例方法。要调用必须通过实例化构造函数（Person类），静态方法直接通过构造函数（类名）进行调用2、原型链上的属性和方法可以被多个实例共享，而构造函数里面的方法和属性不会被多个实例共享 // 通过构造函数来定义类 function Person(name, age) { // 构造函数里面的方法和属性 this.name = .

2020-09-23 20:00:09 348

原创 Nodejs 操作 MongoDb 数据库

在 Nodejs 中使用 MongoDB需要引包：npm install mongodb --save-devNodejs 连接 MongoDB 数据库var express = require("express");//数据库引用var MongoClient = require('mongodb').MongoClient;var app = express();//数据库连接的地址，最后的斜杠表示数据库名字var shujukuURL = 'mongodb://localhost:

2020-09-23 19:59:38 196

原创 MongoDB数据库的基本应用

数据库使用1、开启 mongodb 服务：要管理数据库，必须先开启服务，开启服务使用 mongod --dbpath c:\mongodb2、管理 mongodb 数据库：mongo (一定要在新的 cmd 中输入)3、其他命令清屏：cls查看所有数据库列表：show dbs创建数据库1、使用数据库、创建数据库：use student如果真的想把这个数据库创建成功，那么必须插入一个数据。数据库中不能直接插入数据，只能往集合(collections)中插入数据。不需要专门创建集合，只需要

2020-09-20 20:52:13 232

原创算法

算法基本概念算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有效序列，并且每条指令表示一个或多个操作。算法具有五个基本特性：输入、输出、有穷性、确定性和可行性。算法设计的要求：正确性、可读性、健壮性、时间效率高和存储量低。算法效率的度量方法：事后统计方法：这种方法主要是通过设计好的测试程序和数据，利用计算机计时器对不同算法编制的程序的运行时间进行比较，从而确定算法效率的高低。但是这种方法显然有很大缺陷，例如比较依赖计算机硬件和软件等环境因素。事前分析估算方法算法事前分

2020-09-20 20:51:35 101

原创数据结构绪论

基本概念和术语数据数据是描述客观事物的符号，是计算机中可以操作的对象，是能被计算机识别，并输入给计算机处理的符号集合。数据不仅仅包括整型、实型等数值类型，还包括字符及声音、图像、视频等非数值类型。数据元素数据元素是组成数据的、有一定意义的基本单位，在计算机中通常作为整体处理。也被称为记录。比如，在人类中，人就是数据元素。数据项数据项一个数据元素可以由若干个数据项组成。数据项是数据不可分割的最小单位。比如人这样的数据元素，可以有眼、耳、鼻这些数据项，也可以有姓名、年龄、性别等数据项。数据对

2020-09-20 20:51:13 65

原创 Nodejs实战之三（使用 async 控制并发）

目标建立一个 lesson4 项目，在其中编写代码。代码的入口是 app.js，当调用 node app.js 时，它会输出 CNode(https://cnodejs.org/ ) 社区首页的所有主题的标题，链接和第一条评论，以 json 的格式。注意：与上节课不同，并发连接数需要控制在 5 个。输出示例：[ { "title": "【公告】发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24

2020-09-20 20:50:34 944

原创 Nodejs实战之二（使用 eventproxy 控制并发）

目标建立一个 lesson3 项目，在其中编写代码。代码的入口是 app.js，当调用 node app.js 时，它会输出 CNode(https://cnodejs.org/ ) 社区首页的所有主题的标题，链接和第一条评论，以 json 的格式。输出示例：[ { "title": "【公告】发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24676a12", "comment1": "

2020-09-20 20:50:01 224

原创 Nodejs实战之二（使用 superagent 与 cheerio 完成简单爬虫）

目标建立一个 lesson2 项目，在其中编写代码。当在浏览器中访问 http://localhost:3000/ 时，输出 CNode(https://cnodejs.org/ ) 社区首页的所有帖子标题和链接，以 json 的形式。输出示例：[ { "title": "【公告】发招聘帖的同学留意一下这里", "href": "http://cnodejs.org/topic/541ed2d05e28155f24676a12" }, { "title": "发布

2020-09-20 20:49:10 501

原创 Nodejs实战之（一个最简单的 express 应用）

目标建立一个 lesson1 项目，在其中编写代码。当在浏览器中访问 http://localhost:3000/ 时，输出 Hello World。知识点1、安装nvm工具以用其安装指定版本的node安装nvm（ https://github.com/creationix/nvm）安装Node// 安装v0.12版本的node$ nvm install 0.12// 安装完成后查看一下$ nvm ls// 这时候可以看到自己安装的所有Node版本，前面有绿色小箭头的表示当前正在使用

2020-09-20 20:48:29 340

原创系统认识正则表达式

本文旨在用最通俗的语言讲述最枯燥的基本知识。文章提纲：1、元字符2、重复限定符3、分组4、转义5、条件或6、区间7、零宽断言8、捕获和非捕获9、反向引用10、贪婪和非贪婪11、反义正则表达式在几乎所有语言中都可以使用，无论是前端的 JavaScript、还是后端的 Java、c#。他们都提供相应的接口 / 函数支持正则表达式。但很神奇的是：无论你大学选择哪一门计算机语言，都没有关于正则表达式的课程给你修，在你学会正则之前，你只能看着那些正则大师们，写了一串外星文似的字符串，替

2020-09-20 20:47:21 301

原创理解和使用ES6中的Symbol

ES6中引入了一种新的基础数据类型：Symbol，不过很多开发者可能都不怎么了解它，或者觉得在实际的开发工作中并没有什么场景应用到它，那么今天我们来讲讲这个数据类型，并看看我们怎么来利用它来改进一下我们的代码。这是一种新的基础数据类型（primitive type）Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID。通常情况下，我们可以通过调用Symbol()函数来创建一个Symbol实例：let s1 = Symbol()或者，你也可以在调用Symbol()函数时.

2020-09-20 20:46:48 130

原创通过JS将图片File转为base64并压缩

后端为了方便需要直接将图片存储为base64，但图片过大时转出的base64过长，因此前端需要对转后的base64进行压缩话不多说，直接上代码/** * * @param {需要转换的图片file} file * @param {是否返回压缩后的base64} isCompression * @param {转换成功后通过回调函数将结果返回} callback */export function imageToBase64(file, isCompression, callbac.

2020-09-20 20:46:11 1408

原创谈谈Webpack

// 一个常见的`webpack`配置文件const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = ...

2020-06-13 22:48:03 129

原创前端代码规范

Google JS 代码规范1、使用空格代替tab2、杜绝var，如果变量不需要被重新赋值，默认应该使用const3、优先使用箭头函数，可以避免一些this的指向问题4、使用模板字符串取代连结字符串：// 连接字符串：function sayHi(name) { return 'How are you, ' + name + '?';}// 模板字符串：function sa...

2020-06-13 22:47:42 749

原创利用jsDelivr白嫖全球超高速静态资源访问服务！

缘起不希望将大量的图片等静态资源放在自己部署了项目的云服务器上，放在其他服务器上又希望能做到CDN加速。于是找到了jsDelivr来解决这个需求。以下文章转载自利用jsDelivr白嫖全球超高速静态资源访问服务！自己有稍微的修改。因为服务器在国外&服务器带宽小，导致静态资源请求速度慢，最终导致全站访问速度被拖慢，是站长们要面对的问题。最常用的解决方案是使用国内IDC厂商提供的对象存储(镜像回源)+CDN来提升静态资源访问速度，但这难免会产生费用。jsDelivr是什么jsDelivr由Pro

2020-06-13 22:43:44 1887

原创 Vue项目中两种文件下载方式

以下载（导出）Excel文件为例不需要携带token直接调用后台接口，携带需要传递的参数，具体实现代码如下：1、在main.js中封装指令let baseDownloadUrl = 'http://xxxxxxx:8080' // 域名const PATH = { userList：'vue/export/userList' // 后台接口地址}// 封装v-out指令Vue.directive('out', { inserted: (el, binding) = &gt.

2020-06-13 22:42:56 2501 1

原创 HTTP协议的 Request Payload 和 Form Data 的区别

前言在一个前后端分离的新项目中，前端执行post请求，后端springMVC的 @RequestMapping 接收不到对应的请求参数。开始以为是前端webpack的proxy（将请求跨域代理到后台服务）配置问题。然而，并不是这样…proxy配置如下："proxy": { "api": { "target": "http://localhost:7000/", "changeOrigin": true, "pathRewrite": { "^/api/v1": "" } }}前端

2020-06-13 22:42:23 698

原创关于前端请求的那些事

引言前端是一个快速发展的领域，而在前端的技术栈当中，前端请求又是最见的一个领域，通过请求接口数据，才能将一个静态的页面动态化。本文将以前端发展的时间轴来逐一分析前端请求的技术演变及其优劣，针对这一课题，作者查阅了相关资料加以自己的理解，如有错误，烦请指出。XMLHttpRequestAJAX：Asynchronous JavaScript and XML，意思是用JavaScript执行异步网络请求。现代浏览器上，ajax的实现主要依靠 XMLHttpRequest 对象，该对象用于和服务器交换数据

2020-06-13 22:41:42 293

原创前端神器：BrowserSync & live-server

本文介绍博主使用过的两种web小型开发服务器，可以用来热加载HTML / JavaScript / CSS文件。browserSyncbrowsersync：浏览器同步测试工具，简单来说就是当你保存文件的同时浏览器会自动刷新网页。省去了手动刷新网页的环节，大大的节省了开发时间，这个工具是基于nodejs的，可以通过npm安装。安装在开始菜单找到node.js command prompt打开，输入安装命令：npm install -g browser-sync使用通过命令行工具，进入到项目.

2020-06-13 22:41:07 399

原创国际化插件i18n和vuex的混合使用

缘起前段时间测试对于项目切换中英文后页面会闪一下标为bug，想了想肯定是前任开发者在切换中英文后对页面进行了强制刷新。查看源码发现果不其然，并且前任仅将中英文状态存储在cookie中，然后在需要的组件中通过cookie获取中英文状态。发现接口都是同时有返回中英文，这样完全可以通过vuex全局状态管理中英文状态，达到在一处修改了中英文后全局自动修改。本文以 vue+ElementUI 并且以和vue组合的 vue-i18n 为例准备阶段1、安装相关插件// 安装 vue-i18nnpm ins

2020-06-13 22:39:58 2458

原创 Promise 从入门到自定义系列一（准备阶段）

区别实例对象和函数对象函数对象：将函数作为对象使用时，简称为函数对象实例对象：new 函数产生的对象，简称为对象function Fn() { // Fn函数}const fn = new Fn() // Fn是构造函数，fn是实例对象（简称对象）console.log(Fn.prototype) // Fn是函数对象Fn.bind({}) // 调用Fn函数对象的bind方法$('#test') // jquery函数$.get('/test') // 调用jquery函数对象的g

2020-06-13 22:39:01 93

原创 Promise 从入门到自定义系列二（promise的理解和使用）

Promise是什么？理解抽象表达：Promise是JS中进行异步编程的新的解决方案（旧的是谁？纯回调）具体表达：从语法上讲，Promise是一个构造函数（通过创建实例来使用）；从功能上说，Promise对象用来封装一个异步操作并可以获取其结果。promise的状态改变pending变为resolvedpending变为rejected说明：只有这两种，且一个promise对象只能改变一次；无论变为成功还是失败，都会有一个结果数据；成功的结果数据一般称为value，失败的结果数据一

2020-06-13 22:38:25 181

原创拦截Element-UI中el-tabs组件的切换

需求在切换tabs时，如果当前页面内容没有保存，则拦截切换并提示：“离开将不保存本页修改”的弹框解决1、tabs组件代码<el-tabs v-model="activeTab" type="card" :before-leave="beforeLeave"> <el-tab-pane label="用户信息" name="basicInfo"> 用户信息表单 </el-tab-pane> <el-tab-pane v-if="code"

2020-06-13 22:36:22 2373

转载 Laravel的Warning: require..../vendor/autoload.php错误的解决办法

Laravel 作为PHP学习入门是一种苦逼过程！Git或者Composer拖下laravel代码后报错 Warning: require(…\laravel\bootstrap/…/vendor/autoload.php…有什么解决办法呢？Laravel 作为PHP学习入门确实有点苦逼！但是为了所谓的艺术框架，我们只好忍了……Git或者Composer拖下laravel示例程序代码后一般会报...

2020-01-27 13:08:40 7437

原创黑苹果安装教程

1、准备工作（1）下载工具、资料（利用IDM工具异步下载工具下载）（2）安装mac系统的分区要进行还原默认值格式化2、安装安装工具compressed -> paragon Hard Disk Manage 12 -> setup.msi3、安装安装工具 -> Paragon HFS For Windows 10.2 -> Install…msi4、重启5、...

2019-11-05 17:35:36 1127

转载使用spacedesk实现两台笔记本的低延迟屏幕扩展

需求：有两台笔记本电脑，想要将其中一台作为扩展屏幕使用准备：两台有网线接口的笔记本电脑、一根双绞线、spacedesk软件软件下载地址：官网：https://www.spacedesk.net/#downloads网盘下载：链接：https://pan.baidu.com/s/1e2Y0BT1KKvMQF5RPIe2BQQ提取码：agdh详细操作步骤：1、安装完软件后主机端 ...

2019-07-13 12:34:11 70424 12

原创 Visual Studio Code 使用

一、vsc插件插件精选1插件精选2二、vsc快捷键1. 查找替换查找：Ctrl + F查找替换： Ctrl + H整个文件夹中查找：Ctrl + Shift + F2. 代码格式化：Shift + Alt + F3. 其他向上(下)复制行 shift + alt + top(down)向上(下)移动行 alt + top(down)新建一个窗口 ctrl + shif...

2019-03-22 14:39:15 196

原创 vue-cli 3.x 搭建项目

一、安装vue-cli 3安装vuecli3之前需要卸载旧版本vuecli2npm uninstall vue-cli -g安装vuecli3npm install -g @vue/cli查看当前vuecli版本vue --version通过vuecli3脚手架创建vue项目vue create my-project二、项目初始配置运行vue creat...

2019-03-20 10:17:35 242

转载使用Canvas绘制图形

html文件<!DOCTYPE html><head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="script.js" charset="gb2312&

2019-03-12 17:28:00 222

转载使用Web Workers处理线程

Web Workers 是在HTML 5中新增的。通过Web Workers可以将耗时较长的处理交给后台线程去运行。1、HTML 4中关于求和运算的示例代码：<!DOCTYPE <!DOCTYPE html><html><head> <meta charset="utf-8"> <script type="text/jav.

2019-03-12 15:21:32 111

原创 H5中利用canvas绘制video

问题：直接通过video播放视频时，iOS会自动全屏。Android上浏览器正常，但Android中QQ、weichat内嵌浏览器自动全屏。需求：video播放视频时能够自动播放且不全屏，需适配大部分机型探索过程：1、使用内联播放属性：webkit-playsinline、playsinline解决了iOS上视频自动全屏问题，但是这个属性在Android中的qq和wechat上无效原...

2019-02-28 13:36:30 5177

原创本地存储

HTML 本地存储HTML5 本地存储提供了两个在客户端存储数据的对象window.localStorage - 存储没有截至日期的数据（永久性本地存储）window.sessionStorage - 针对一个session来存储数据（会话级别本地存储）在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：if (typeof(Stora...

2019-01-31 14:02:10 145

原创自定义表单验证

背景：登录页面验证用户名和密码是否合法：vue + ElementUIlogin.vue<template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules"

2019-01-31 11:24:33 614

原创 GMT时间、UTC时间、CST时间

1.UTC时间(世界标准时间) 与 GMT时间(格林威治时间我们可以认为格林威治时间就是世界协调时间（GMT=UTC），格林威治时间和UTC时间均用秒数来计算的。世界标准时间 (UTC, Coordinated Universal Time) 是当今民用时间的基础。它使用一天 24 小时时间制，并结合了地球的自转时间与原子钟的高精度度量。UTC是一个标准，而不是一个时区。UTC 是一个全球通...

2019-01-31 09:47:15 12611

原创关于this

this指向：this 永远指向最后调用它的那个对象示例1 var name = 'hello' function a() { var name = 'world' console.log(this.name) // hello console.log('inner:' + this) } a() console.log(...

2019-01-28 15:40:51 93

转载实现在vue中element-ui的el-dialog弹框拖拽

1、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialo...

2019-01-18 19:40:20 20924 34

原创使用git中的问题汇总

一、解决本地项目绑定远程库时报错：fatal: repository ‘https://github.com/HelloAllenW/’ not found问题分析：远程库绑定错误1、查看远程库：git remote -v2、删除远程库：git remote remove origin3、添加远程库：git remote add origin [远程地址]其他：1、查看当前用户：g...

2018-12-31 16:54:06 172

转载判断设备

2018-12-26 09:26:48 435

空空如也

空空如也