- 博客(34)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 前端：打开你的摄像头
前端调用摄像头本篇文章将会通过一个demo来介绍前端如何通过浏览器打开用户摄像头并实现抓拍获取图片getUserMedia APIgetUserMedia API早期版本是navigator.getUserMedia，不过目前已被废弃，如果想要兼容ie或者低版本浏览器，可以使用。目前最新标准getUserMedia API为navigator.MediaDevices.getUserMedia。基本用法navigator.mediaDevices.getUserMedia(constra
2020-08-27 14:23:03
4153
3
原创 前端实现图片或视频预览的3种方法
前端实现图片或视频预览的3种方法1. 通过上传服务器实现预览上传服务器是早期经常使用的方法，主要思想就是先把图片视频资源，通过ajax请求上传到服务端，然后服务端返回一个视频路径，前端使用这个路径即可加载出资源并实现预览。因为H5之前，前端是没办法操作文件的，此方法也是唯一可靠的资源预览方法。但确实有很多弊端：预览前必须先将资源上传至服务端，如果资源过大，导致上传时间过长，资源预览加载时间也过长，影响用户体验。如果用户只是想预览，并不上传，然而资源已经上传，这就造成内存空间以及网络资源的浪费。
2020-08-05 14:38:23
13550
原创 你真的会用console吗—前端开发
你真的会使用console吗1. console.table表格形式打印console.log是我们最常用的打印方法，但是在打印一些比较复杂的数据时候，我们浏览起来就会显得很费力。比如：而使用console.table打印就会自动生成表格，使打印结果看起来更加清晰易懂：2. console.dir打印对象console.dir与console.log不同之处在于，前者可以递归打印对象的所有属性，而后者侧重于字符串化的打印。比如要打印一个DOM节点。console.log只是把html节点打
2020-06-22 17:40:48
606
原创 原生js实现简单的svg编辑器
原生js实现简单的svg编辑器简单的实现了rect、circle、ellipse、line四个简单的基础图形的创建和编辑，这篇文章对于JavaScript中Dom操作和svg基础学习有很大帮助。项目在线预览：http://coolxiang.top/svgeditor编辑器预览图（做了只丑兔子花了我好长时间）：接下来说一下实现原理和代码讲解。页面样式和布局HTML和CSS相对来说比较简单，这里我不多介绍了。只是说一下这个页面使用rem和flexible自适应布局。另外通过flex实现左边工
2020-06-03 18:15:53
2792
原创 vue—递归组件（vue组件name的作用之一）
vue—递归组件（vue组件name的作用之一）相信我们对递归不陌生，因为它是算法中很常见解决问题的思想。而在这里我先强调一点，递归最重要的是什么？终止条件，一个递归不能没有终止条件。有时候我们在项目中，可能会遇一种需求，它要求我们把很深层嵌套的json数据渲染到页面中，比如文件目录结构。现在我们就把一个文件夹下的所有文件模拟渲染到页面中。文件目录的树形结构：为什么要使用递归？可能...
2020-04-13 18:12:12
1809
原创 JavaScript手写call、apply、bind方法
JavaScript手写call、apply、bind方法实现call()方法将函数设为对象的属性执行并删除这个函数指定this到函数并传入给定参数执行函数如果不传⼊参数，默认指向为 window// 在Function原型中定义myCall()方法Function.prototype.myCall = function(target){ // 判断target是否为obje...
2020-03-15 22:12:32
429
原创 浏览器的重绘和回流及优化
浏览器的重绘和回流重绘和回流是浏览器对页面渲染中的一些行为，也是前端性能优化非常重要的方向，首先我们先了解以下重绘和回流的概念。1. 重绘当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的, 比如background-color。则就叫称为重绘。2. 回流当render tree中的一部分(或全部)因为元素的规模尺寸,布局，隐藏等改...
2020-03-09 16:19:51
3833
1
原创 域名解析过程
域名解析过程具体步骤浏览器DNS缓存本地主机缓存本地主机域名解析记录 host文件本地DNS服务器根域名服务器顶级域名服务器权限域名服务器本地DNS服务器得到IP地址，返回给主机浏览器向该IP地址服务器发送请求根域名服务器根域名服务器是最高层次的域名服务器。每个根域名服务器都知道所有的顶级域名服务器的域名及其IP地址。当本地域名服务器向根域名服务器发出查询请...
2020-03-08 23:39:54
3652
原创 手写Promise——自己封装Promise对象
自己封装一个Promise代码：https://github.com/fu-x/promise首先我们需要对Promise进行分析声明一个MyPromise类class MyPromise {} // 声明MyPromise类Promise的三种状态：pending、fulfilled、rejected我们要在类里定义三个静态常量static PENDING = 'pendin...
2020-03-08 18:00:45
4484
4
原创 你不知道的JavaScript数组扁平化五种方法
JavaScript数组扁平化对于下边这个深层嵌套数组，我们在某些环境可能需要将它进行扁平化（转换为一维数组），比如评论系统种，评论数据可能就会深层嵌套。所以我给大家带来了下边几种方法。let arr = [1, [2, 3, 4], [3, 5, [1, [4]]]];1. ES6中Array.prototype.flat()函数对兼容性要求较高，不兼容ie，且要求node版本11以...
2020-03-05 03:51:54
1887
原创 JavaScript——Symbol类型
SymbolSymbol是ES2015中新增的一种类型， 其含义是符号、标志，它的作用是每调用一次都会返回一个独一无二的返回值。我们可以将此返回值作为对象的属性，这样就不会与原有的属性重名了。即使传人相同的参数，Symbol 方法也会返回不同的值。先看一个例子：var obj = {};var abc1 = Symbol ("abc");var abc2 = Symbol ("ab...
2020-03-03 03:19:30
1895
转载 JavaScript中tostring()和valueof()的用法及两者的区别
转载：https://www.jb51.net/article/74888.htm本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别，对js tostring valueof相关知识感兴趣的朋友一起学习吧基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决JavaScript值运算与显示的问题。1....
2020-03-03 02:37:39
2046
原创 计算机基础—TCP和UDP详解
计算机基础—TCP和UDP详解前几天面试别问到TCP和UDP，所以今天对这个知识点做一个总结UDP1. 面向报文UDP 是⼀个⾯向报⽂（报⽂可以理解为⼀段段的数据）的协议。意思就是UDP 只是报⽂的搬运⼯，不会对报⽂进⾏任何拆分和拼接操作具体来说在发送端，应⽤层将数据传递给传输层的 UDP 协议， UDP 只会给数据增加⼀个 UDP头标识下是 UDP 协议，然后就传递给⽹络层...
2020-03-02 03:06:53
4302
原创 JavaScript中的进制转换的两种方法
JavaScript中的进制转换—toString()和parseInt()很多时候，在我们写代码中需要用到二进制、八进制或者十六进制。所以我们要对十进制数字进行转换，可能我们会花一些时间写一个进制转换函数，但却很少有人知道，JavaScript已经给我们提供了进制转换的方法。toString()和parseInt()首先我们先介绍以下toString()方法。toString()方法是...
2020-03-01 03:43:53
4815
原创 localStorage、sessionStorage和cookie的区别
localStorage、sessionStorage和cookie的区别Web Storage和cookie作为web开发最常用和最常见的两种数据存储方式，我们有必要去详细的了解它。localStoragelocalStorage是HTML5的一种本地缓存方案，目前主要用于浏览器端保存体积较大的数据(如AJAX返回结果等)。我们可以在浏览器开发者模式下Application中查看loca...
2020-02-29 02:44:25
1653
原创 JS对象方法——Object.defineProperty()
JS对象方法——Object.defineProperty()我们都知道Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新实现双向数据绑定。可我们真的了解Object.defineProperty()吗。Object.defineProperty() 方法会直接在一个对象上定义一个...
2020-02-27 02:16:41
3803
1
原创 HTTP缓存过程详解
HTTP缓存过程详解http缓存作为面试常考题目，我们必须理解他的详细过程，接下来请大家务必理解并牢记这篇博客的所有内容，大家也不要闲内容多，因为http不管是在面试还是在工作中，真的很重要。而且在面试中，我们可以通过详细描述http缓存，不仅让面试官对我们有好感，还能拖延时间，让面试官少问其他比较难的问题。HTTP文件缓存是基于HTTP协议的浏览器端文件缓存机制。在文件重复请求的情况下，...
2020-02-25 11:37:00
2383
1
原创 web安全—CSRF和XSS详解
CSRF和XSSCSRFCSRF (Cross Site Request Forgery)攻击，中文名：跨站请求伪造。攻击原理：攻击者构造网站后台某个功能接口的请求地址，诱导用户去点击或者用特殊方法让该请求地址自动加载。用户在登录状态下这个请求被服务端接收后会被误以为是用户合法的操作。对于 GET 形式的接口地址可轻易被攻击，对于 POST 形式的接口地址也不是百分百安全，攻击者可诱导用户...
2020-02-22 21:18:34
1969
原创 详解JavaScript中的类
详解JavaScript类类和对象认识类前，首先我们先了解一下对象。所谓对象，实质上就是一个具体的事物在Javascript语言中的表现形式。比如对象可以是一只猫，猫具有它的特征：颜色、种类、体重等，也能做一些事情：奔跑、喵喵叫、爬树等。它的这些特征就叫做猫对象的属性，行为就是猫对象的方法。对象往往用名词来表示，如：Bood, Person属性一般用形容词表示方法一般用动词表示，如...
2020-02-21 21:15:30
2737
原创 JavaScript中的对象和原型链
JavaScript中的对象和原型链原型对象概念：无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor（构造函数）属性，这个属性包含一个指向prototype 属性所在函数的指针。创建对象的几种方法通过字面量方式创建var person={...
2020-02-20 18:18:55
2493
原创 web前端必须掌握的HTTP协议知识
web前端必会的HTTP协议知识HTTP协议HTTP<超文本传输协议>的缩写。是用于从WWW服务器传输超文本到本地浏览器的传输协议.HTTP是一个应用层协议，由请求和响应构成，是一个标准的个客户端和服务器模型。HTTP协议的特点支持客户/服务器模式简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器...
2020-02-19 18:49:41
5843
3
原创 input限制只能输入数字的三种方法
input限制只能输入数字在前端开发过程中，我们经常需要对input输入内容进行限制，比如验证码，购物车数量等等。下面我总结一下限制input只能输入数字的几种方法。H5 number类型```html<form action=""> 请输入数字：<input type="number"><br> <input type="submit" ...
2020-02-18 11:26:59
37453
原创 Web全栈开发—移动端商城项目开发 Vue.js+express+MySQL
全栈开发—移动端商城项目开发 Vue.js+express+MySQL本项目是基于Vue.js+express+MySql的移动端全栈项目前端项目Github地址：https://github.com/fu-x/pdd后端服务器项目Github地址: https://github.com/fu-x/pdd-server项目演示地址:项目演示地址本项目为移动端项目，pc端演示请在开发...
2020-02-17 23:21:11
3959
原创 学习JavaScript的面向对象编程——JavaScript贪吃蛇小游戏
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程预览支持移动端和pc端哦。Github源码地址：https://github.com/fu-x/snake游戏预览：http://coolxiang.top/snake编程思想：面向对象分析首先对贪吃蛇游戏进行逻辑分析。1. 小蛇需要移动，需要一个参数表示移动方向。2. 小蛇可以吃食物，蛇头和食物坐标相等让...
2020-02-14 22:08:42
1568
原创 vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
移动端轮播图——Vue喜欢的小伙伴可以和我互相关注哦有任何疑问都可以私聊我互相学习，共同进步pc端轮播图主页里也有哦还是老样子，先看效果图具体实现代码解析HTML结构<div class="swiper"> <div class="container"> <ul ref="imgBox" @transitionen...
2020-02-11 18:58:02
7844
9
原创 窗口拖拽效果
窗口拖拽效果 基于vue.js喜欢的小伙伴可以和我互相关注哦有任何疑问都可以私聊我互相学习，共同进步先看效果图????这个效果主要使用了mousedown、mousemove和mouseup事件，做到限制窗口不能脱离页面可视区详细代码及注释如下：startMove(e){ // 鼠标按下 if(e.button === 0){ // 鼠标左键按下 ...
2020-02-10 17:27:05
756
原创 vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚，暂停滚动等效果）
vue实现轮播图喜欢的小伙伴可以和我互相关注哦有任何疑问都可以私聊我互相学习，共同进步话不多说，先看效果滚动切换、无缝切换、循环滚动鼠标进入暂停自动滚动和离开继续自动滚动主要代码：HTML结构 <div class="swiper"> <div class="moveL" @click="switchImg(-1)"><&...
2020-02-10 16:52:52
23878
6
原创 纯css实现炫酷侧边栏
纯css实现炫酷侧边栏效果展示网页展示（pc端更佳）：http://www.coolxiang.top/siderbar/GIF动图效果：html结构<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="UTF-8"> <title>侧边栏<...
2020-02-07 00:45:00
5088
4
原创 node.js中session存储的数据为undefined问题（已解决）
node.js中session存储的数据为undefined问题（已解决）— 两种解决方案问题：当客户端通过一个接口在服务器session中存储数据后，通过另一个接口再次访问session，打印出来的结果是undefined分析：在保证服务器代码没问题的情况下，访问不到session中的数据，原因一定是：服务器把客户端的两次访问当成两个不同的客户端。解决方案1：前端一定要解决跨域问题！...
2020-01-24 15:34:09
5358
原创 vue中v-for绑定数组，当数组变化时页面数据不更新（已解决）
vue中v-for绑定数组，当数组变化时页面数据不更新（已解决）问题描述：原因解决问题描述：vue中v-for通过{{}}或者v-model在页面里绑定一些数组时，数组里的值发生变化，页面并没有更新。举个最简单的例子：这里定义一个数组，设置一个元素为1，分别使用{{}}和v-model绑定数组元素arr[0]，设置一个button，绑定一个点击事件，让数组中的值+1。这里不使用v-for了，...
2020-01-24 15:10:51
23277
1
原创 全栈-最简单的列表管理(vue+express+mysql)
全栈-最简单的列表管理(vue+express+mysql)这是一个最简单的列表管理源码下载链接：**github网址: ** brands贴图：数据库有一个brands表，结构如下，id要设置为自动递增：名类型长度小数点允许空值主键idint100主键namevarchar1000newDatevarchar2000...
2019-11-23 16:05:16
405
原创 vue文件使用lang="scss"报错问题
vue文件使用lang="scss"报错问题新建项目.vue文件中使用scss写样式。按照网上教程安装集中依赖模块并且配置后出现以下报错：github网址: 个人博客这是因为我们安装的sass-loader版本过高，只要我们安装7.3.1版本的sass-loader问题就解决了。如果其他插件已安装：只需要再把7.3.1版本的安装一下就行了。具体方法为：输入以下命令：npm ins...
2019-11-05 18:36:29
3389
原创 基于Vue的todolist———最简单的代办事件列表
基于Vue的tuDoList———最简单的代办事件列表github网址: toDoList-VueVue-toDolist分析：做到刷新页面不会丢失数据，因此我们的数据需要保存至本地localstorage里。每次加载页面都要先从本地获取一次数据保存至data数据中，通过vue数据绑定自动更新页面数据。修改数据后再把最新的数据保存至localstorage，这样保证本地存储的...
2019-11-05 18:31:17
791
原创 基于jquery的toDoList——最简单的代办事件列表
基于JQuery的tuDoList——最简单的代办事件列表基于jquery的tuDoList——最简单的代办事件列表toDoList分析：主要函数：基于jquery的tuDoList——最简单的代办事件列表github网址: toDoList-JQuerytoDoList分析：做到刷新页面不会丢失数据，因此我们的数据需要保存至本地localstorage里。每次修改数据都要先从本...
2019-11-05 18:27:26
816
vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
2020-02-11
vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）
2020-02-10
vue+node.js+express+mysql最简单的列表管理
2019-11-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人