大前端工程师-CSDN博客

引言拖拽排序是我们经常遇到的应用场景，那大家知道如何去实现它嘛。其实HTML5标准为每个元素添加了draggable属性，当这个属性为true时，此元素就是课拖拽状态。为了响应HTML5标准，JS也提供了相应的拖拽/释放监听事件：ondragstart、ondragover、ondrop效果展示拖拽排序线上演示示例源代码下载代码展示<!DOCTYPE html><html> <head> <meta charset="utf-8" />

2022-05-19 21:09:05 1327 1

原创 JS实现汉字根据字母分组

算法// arr是传入的数组function groupByDesc(arr) { const [...zhCN] = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫杂' const [...EN] = 'abcdefghijklmnopqrstuvwxyz' // 中文在i、u、v下没有对应的汉字 const [...desc] = 'abcdefghjklmnopqrstwxyz' const isChinese = /[\u4e00-\u9fa5]+/ const isSpecial

2022-04-28 15:04:03 982 2

原创 JavaScript原型和原型链（详细解读）

原型和原型链一、原型概述1.概念原型在JavaScript是一个很重要的概念，它是面向对象可以继承的基础。知道吗，JavaScript的设计模式就是原型模式（二十三个经典设计模式之一），正是因为它有这个模式，所以它才十分的灵活。可以基于原型模式实现更多的面向对象设计模式。二、原型链1.什么是原型链？原型链是原型的查找机制，是一条寻址链。其实原型上的方法或属性查找，都是按照一定的顺序沿着原型链进行查找的。如果查找到最后仍然没有找到这个原型和方法，那么JS就会抛出没有这个属性或方法的异常。2.什么

2022-04-09 13:05:09 8214 5

原创 .gitignore文件不生效

解决方案# 清除缓存文件git rm -r --cached .git add .git commit -m ".gitignore重写缓存成功"git push重新提交后发现.gitignore文件生效了原理解读.gitignore文件只会在第一次提交项目的时候写入缓存，也就是说如果你第一次提交项目时候忘记写.gitignore文件，后来再补上是没有用的，.gitignore文件是不生效的。因为在缓存中已经标记该项目不存在ignore文件了（boolean）所以我们使用git rm

2022-03-27 10:13:45 17835 4

原创 node.js学习笔记（不断更新）

有想学习node.js可以看下我最近总结的笔记，适合新手入门讲解详细node学习笔记

2022-03-08 20:23:42 1239 1

原创 JavaScript正则表达式学习笔记

RegExp正则笔记地址

2022-03-04 09:47:36 1052

原创 axios中文文档

axios中文文档，详细，注释透彻，颜值高

2022-02-21 17:13:53 1995

原创 axios标准封装

// src/utils/request.jsimport axios from 'axios'// 自定义axiosconst ins = axios.create({ baseURL: 'http://121.89.205.189/admin', timeout: 6000})// 自定义拦截器// 请求拦截器ins.interceptors.request.use((config) => { config.headers.token = localStorage.ge

2022-02-10 16:17:44 132

原创什么是npx（官方文档权威解读）

npxWhat is NPX?NPX is an NPM package executor. Initially, NPX was launched in July 2017. NPX was just an NPM package that could be installed like other NPM packages. Currently, NPX is bundled with NPM when you install the NPM version 5.2.0 or higher.Usi

2022-02-01 23:44:47 2850

原创 CSS技巧系列--使用视频作为背景

有一些官方网站为了弘扬他们的企业文化，往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上，既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受

2022-01-22 23:34:47 22897 13

原创 windows10根据背景颜色自动调节屏幕亮度/色彩对比度

遇到的问题买了一个新的笔记本，是原装的win10系统，当我打开颜色比较暗的图片或者背景时候，屏幕亮度会慢慢变暗。当我打开比较明亮的图片的时候，屏幕亮度慢慢会变亮。这是一个非常令人恼火的事情。解决方案1.win+s输入服务2.找到服务Service for Intel® HD Graphics Control Panel3,禁用这个服务4.重启电脑（完美解决）顺便一提其实windows这个功能有个官话叫做动态色彩对比度，是微软开发的一款可以根据当前显示色调的不同，通过自动调节色彩对比度来达到最

2022-01-15 00:30:31 4869

原创 Mockjs全面解读

简介前后端分离架构是现在比较常用的架构，它的主要思想是由前端工程师负责用户的交互逻辑。后端工程师负责代码接口的编写，使用swagger生成api文档提供给前端工程师调用使用。但是在实际开发过程中，后端写接口往往很慢，可是前端代码的编写却不能因此而耽搁。所以前端需要模拟一些数据，来填补项目的空洞。Mock.js是一种模拟数据的办法，它可以使我们前端在后端没有写好接口的前提下，也可以进行独立开发安装npm i mockjs -S安装完mockjs之后，我们可以在node_modules文件夹内找到

2021-11-26 11:46:57 475

原创 export {default as} from 【深入解读】

前情引入今天在公司实习，看到老程序员写代码的时候，无意间发现了这种写法export {default as Home} from './Home.js'export {default as Side} from './Side.js'export {default as Nav} from './Nav.js'然后我就感觉很奇怪，JS中还支持这种语法嘛？先导入然后再导出的写法？于是我回到我的机子前仔细研究了起来拆分代码既然这种写法是集导入导出为一体的，那么它应该可以拆分成两行代码去写拆分

2021-11-09 10:22:07 8719 8

原创 axios实现文件上传功能（前后端完整演示+含gitee地址）

文件上传文件上传几乎我们天天都在使用，在工作中也会遇到这样的需求。那么我们如何前端和后端配合上传文件呢？完整案例下载我们在开始讲解之前，我已经提前为大家准备了一个前后端完整的案例gitee地址：上传文件，前后端完整流程演示直接下载zip压缩包：代码压缩包【1MB】如果你不太会使用git去拉取代码，可以点击这里下载我的代码包然后打开README.md，它会告诉你怎么去做fileReader我们可以使用fileReader进行文件上传，这是HTML5新增的一个对象，使用它上传文件非常方

2021-11-01 22:21:11 5299

原创 Vue3对组合式API的理解

组合式API这个概念是在Vue3.0引出的，在Vue2.0中以及更早的版本我们都使用选项式API.但是你知道嘛，它有很多不足和令人烦恼的地方。对于在大学写了2年vue代码的人，我总结出vue2的以下不足：业务代码分散在选项中，不方便维护和管理选项代码冗长，不方便查看等针对第一个，你可以想一下，我们一个vue组件可能涉及多个业务逻辑，比如收藏、点赞、关注等。那这些你平时写的时候一般都是data中定义一些初始化数据，method里在写一些方法，在watch监听一下数据变化。那这样的话是不是说我

2021-10-28 10:07:47 933 1

原创 nginx常见bug汇总

1. 前端路由和后端路由冲突初识问题假设在nginx项目目录下有个/vue的文件夹，同时我也配置了一个/vue的vue项目路由服务。那么此时此刻，我浏览器输入localhost:8080/vue浏览器会显示vue文件夹下的静态网页呢，还是显示配置好的vue项目呢？nginx配置如下location / { # 在html目录下有vue文件夹，vue文件夹下有index.html root D:\nginx\nginx-1.20.0\html; index index.

2021-10-19 08:57:58 757

原创 Vue项目打包部署(hash模式)

Vue项目部署上线(hash)前提准备我们需要准备一个vue项目、一个nginx服务器本教程讲解的是vue-router中hash模式的部署部署流程配置vue.config.js中的publicPath配置vue-router的模式为hashs【非常关键】使用npm run build生成dist文件夹配置nginx代理配置nginx路由vue.config.js1.配置publicPath这里我们配置publicPth为路由/vue/module.exports = {

2021-10-19 08:52:15 5111 1

原创 Vue项目打包部署（history模式）

Vue项目部署上线(history)前提准备我们需要准备一个vue项目、一个nginx服务器本教程讲解的是vue-router中history模式的部署部署流程配置vue.config.js中的publicPath配置vue-router的模式为history配置vue-router中的base（基态路由【与服务端配合】）使用npm run build生成dist文件夹配置nginx代理（进行生产环境下的反向代理，注意生产环境下devServer无效【或者你可以配置devserver

2021-10-19 08:51:15 7188 1

原创 CSS颜色搭配（超级赞的几个网站）

ColorSpacehttps://mycolor.space/如果你喜欢渐变风格的创作，那么一定要试试这个网站。你只需要选择一个颜色，就可以快速生成20多种不同风格的配色方案。比如选择了如图所示的RGB值，就会出现下面25种配色方案。WebGradientshttps://webgradients.comWebGradients有100多种线性渐变配色方案，网站任何部分的内容背景都可以使用这些配色方案。使用时，只需要轻松复制色值，而且每个渐变色方案都准备了PNG格式的图片可供下载。GR

2021-09-17 16:14:07 10986

原创 JavaScript变量提升详解

变量提升在js中我们用var声明的变量是存在变量提升的。换句话说，我们js的解释器在解释js代码的时候，会优先把所有的变量声明提到前面。示例代码var的变量提升下面我演示的就是一个简单的变量提升的问题。js源代码console.log(a)var a=1console.log(a)js解释器编译的顺序：//js编译时会把所有的变量声明提前var a;console.log(a)//显示undefiend，因为此时a没有赋值不知道数据类型a=1//赋值操作不提前，只是var a的声

2021-08-16 21:06:03 871 1

原创 JavaScript中sort方法排序不正确

问题发现今天有同事问了我一段代码，他说这挺奇怪呀。js的sort函数既然不起作用了？这是为什么呢？我们来看看他写的代码：var arr=[12,45,7,5,23,5,54]arr.sort()console.log(arr)输出结果：这个结果看起来不是特别对哦，这是为什么呢？问题解决道理很简单，就是你省略了sort的回调函数。如果要确保sort输出结果正确，就务必要传这个参数。上面的代码我们这样修改：var arr=[12,45,7,5,23,5,54]arr.sort(f

2021-08-03 21:03:15 1548 3

原创资源分享篇 -- web前端代码规范

代码规范在前端开发中，代码规范是必不可少的一部分。今天，我就向大家介绍一下，一些知名互联网企业的前端代码规范，包括京东、腾讯、字节跳动京东凹凸实验室京东前端代码规范腾讯（TGideas）腾讯前端工程师必读手册百度（baidu）百度前端代码规范JavaScript Standard Style业内权威代码规范Express、MongDB、Github的前端程序员都在使用阮一峰ES6编程风格阮一峰ES6代码规范Vue.js代码规范Vue.js框架代码书写规范如果使用Vue作为

2021-08-03 08:47:14 388

原创 npm常用指令&&开发环境生产环境详解

npm指令参数参数名含义i安装模块，install的缩写uni卸载模块，uninstall的缩写-g全局安装/卸载模块，默认安装到node安装目录；或者从安装目录卸载-S生产环境（dependencies）-D开发环境 (devDependencies)--save本地安装-S是 --save的缩写；-D是 --save --dev的缩写。本文的结尾我会谈对开发环境和生产环境的理解npm常用指令1.修改本次下载地址为淘宝镜像n

2021-07-30 22:25:35 1683

原创 CSS实现图片层闪光效果

闪光效果当鼠标光标移动到图片上的时候，有一道流星般的闪光划过点击查看效果图片抓拍截图：我们可以看到，有一道白光正在扫过这张图片代码实现css代码#wrapper{ position: relative; width: 240px; cursor: pointer;}#flash{ position: absolute; width: 100px; height: 100%; left: -145px; top: 0; background:-web

2021-07-28 21:18:07 3471

原创 JavaScript实现按钮波纹点击效果

按钮波纹我们经常使用安卓手机知道，当我点击这个按钮的时候，这个按钮周围就会有波纹，这个效果用户体验是比较好的，那么我们如何使用JavaScript来实现呢实现思路我们代码实现的思路是，我们首先使用css做一个一次性播放的动画。然后我们用js动态的添加带有动画的元素，每次添加它的时候都移除上一个添加的，确保每次只有一个动画元素。代码实现css代码button { position: relative; overflow: hidden; margin: auto; p

2021-07-28 19:34:34 1241

原创 CSS波纹效果实现

CSS按钮波纹我们在使用安卓手机的时候，我们点击按钮，上面都会有渐渐隐去的波纹效果，那么这种效果是如何实现的呢？我们今天一起来探讨一下代码实现css.ripple { position: relative;}.ripple:after { content: ""; display: block; position: absolute; width: 30px; height: 30px; top: 50%; left: 50%;

2021-07-27 22:20:11 1937

原创 Vue.js获取data-*的值

data-*这个属性熟悉JS的小伙伴都知道，data-*是一个自定义属性，它的功能是视图层往js传递我们想要传的数据。我们的JS可以控制视图层，但是我们往往需要用户操作视图层，逻辑层也能够获取用户的交互值，这个时候我们就需要data-*属性了获取普通数据我们的js数据类型大体上可分为，数字类型，字符类型，布尔值类型，对象类型。其实还有undefined和null我把数字类型，字符类型，布尔值类型成为普通数据类型，我们接下来分别演示静态获取静态获取指的是我们的data-*是写死的，不是动态的ht

2021-07-27 18:00:51 8910 5