小智大愚-CSDN博客

原创 yntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

node node-sass sass sass-loader

2022-08-25 14:08:02 2535 1

原创 node express 静态资源托管

通过服务器的部署我们是怎么访问到页面的那.nodeexpress的静态资源托管。

2022-07-18 17:03:52 457

原创 Node.js 内置模块 fs 实现文件读写操作

上篇文章已经可以搭建一个简单的node服务器了,那么在实际应用中那面会用到文件读写,特别是在前端没有数据库支持进行接口模拟的情况下,读写文件响应数据便非常有用.

2022-07-18 14:51:42 977

原创 Node 简单搭建服务器

作为前端开发能自己动手搭建一个本地服务器真的太有必要了。使用 node 内置模块和 express 框架来动手搭建一个简单的服务吧。

2022-07-18 11:40:15 5752

原创 el-tree 数据懒加载实现异步搜索

天气晴有风温度适宜背景Element UI el-tree 官方对于数据量大希望异步加载的数据支持懒加载, 懒加载会依赖 load 方法,自动触发加载,

2022-05-25 17:53:09 1297

对我来说写静态页面是相对于逻辑比较弱一点的，分析来说还是平时写的不够多，毕竟CSS 是练出来的。不是特别复杂的内容，只是自己这方便比较薄弱，简单记录一下，保存一个demo。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0".

2022-02-16 17:10:05 800

原创解决el-table 树形结构expand 操作后 stripe 显示失效问题

昨天是挫败感较大的一天，因为好久没有真正的精进技术了，事件循环机制、nextTick 之前条件反射都会想到的问题，昨天竟然被困住了。问题背景项目中用到了el-table的树形结构，table 设置了 stripe 栅格属性，但是由于有展开行，展开后table 按照展开后的所有数据进行了栅格设置，但当展开收起时，栅格的设置是没变的，会导致看上去有写地方栅格失效。如下图：在ElementUI 文档看了el-table 的方法，没有什么可以设置的，项目中用的懒加载，数据也不在tableDa..

2021-12-15 10:14:08 3005 2

原创前端原生拖拽（drag & drop）的一点小总结

新工作中，第一个手生的功能，遇到了很多诡异的问题，今天终于解惑了。最终原因还是对代码没有透彻的了解，jquery的运用也不熟练导致的。小心的记录一下。原始功能对项目列表中的元素进行拖拽，拖拽到一定的位置，根据放置位置做一些相应的处理（具体不分析）。实际使用时根据自己需求作相应处理就可以了。官方参考及常用APIHTML 拖放 API - Web API 接口参考 | MDN项目中用到的事件方法dragstart : 开始拖拽一个元素，被拖拽元素监听事件drag...

2021-12-14 14:02:22 2514

原创 Vue 项目打包时提取代码 git commit 信息

业精于勤荒于嬉需求描述前端项目经常打包，发包部署，有可能存在不确定发包的版本是哪一个，于是想要将代码打包时的代码信息也就是commit 信息提取出来作为参考。具体实现1、获取git commit 信息git 信息的获取指令参考官方文档是一切https://git-scm.com/docs/githttps://git-scm.com/docs/git-showgit show format选项：%H 提交对象（commit）的完整哈希字串 %h 提交对象.

2021-07-09 15:56:25 2273

原创 JavaScript 知识碎片[四] async / await

业精于勤荒于嬉async await 是什么？async 函数是对Generator 函数的改进，也就是generator 函数的语法糖，它建立在Promise 上，并且与所有现有的基于Promise 的 API 兼容。1、async 声明一个异步函数（async function someName(){....}）2、自动将常规函数转换为Promise,返回值也是一个Promise对象3、只有 async 函数内部的异步操作执行完，才执行 then 方法制定的回调函数4、异.

2021-07-07 11:31:10 121 1

原创 Echarts 雷达图极坐标及折线图的完美结合

实践出真知效果图心路历程大多数时候，使用echarts 就是参考示例图，根据需求进行改造，更多的研究就是在配置项的配置，看到没有的示例还真的是有一点点慌，但是怎么看需求的样式都是那么的合理，实用，所以我想一定是可以实现的，因为它并非不常见。怎么办呢，研究，找到方法之后，最终的实现还是轻松的。需求分析Q:是雷达图吗？A:第一眼看上去，是雷达图，因为他有指示器，分割线都是雷达图的效果Q:发现一个问题，效果图是有断点没有完全连接在一起的，但是雷达图是没有断点连接，而且没有值或者.

2021-05-13 16:11:33 1740 6

原创＞ webpack-dev-server internal/modules/cjs/loader.js:960 throw err； ^ Error: Cannot find module

> webpack-dev-server internal/modules/cjs/loader.js:960 throw err; ^ Error: Cannot find module具体错误使用的版本 "webpack": "^5.36.2", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2"问题原因webpack-cli 版本和 webpack-dev-server 版...

2021-05-07 14:59:17 1044

原创 webpack 基础理解[二]之常用loader & plugin

业精于勤荒于嬉webpack 中常用的 loadercss 模块化：关键 modules:true rules: [{ test: /\.css$/, // loader: 'css-loader' // // loader 的执行顺序是从后向前面 // // webpack 遇到自己不认识的文件时，先去module找，定义的规..

2021-04-30 17:46:00 192 2

原创 webpack 基础理解[一]

好久好久好久没有更新CSDN 了，四月两次奔波回家，转项目组，加班，整个时间被工作和紧张情绪充斥，现在现在，终于可以喘口气，整理记录webpack 系列。webpack 是什么？干什么？webpack 是构造工具，怎么构造？就是把浏览器不认识的一些文件或者支持不好的文件，编程成浏览器认识的文件或者代码。webpack 里的基础配置webpack 默认打包配置：webpack 在打包的时候会去找webpack.config.js 文件，如果没有，走自己默认的配置。// .

2021-04-30 17:34:04 488 7

原创自定义穿梭框实现详解 table 穿梭框

业精于勤荒于嬉需求：element 的穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了思路：封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式A：什么样式？Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了A：展示的数据格式？Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据，A : 其他逻辑功能分析？Q：你需求的穿梭框需..

2021-03-03 13:47:50 4895

转载什么是BFC？看这一篇就够了

BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。Box：css布局的基本单位Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display

2021-03-02 15:51:57 162

原创从一个数组中根据条件过滤得到一个新的数组

积跬步至千里Array.prototype.filter()filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。需求：自定义table穿梭框，数据左右切换时，左侧的数据顺序保持不变思路：左侧数据+右侧数据 = 所有数据，保持顺序不变准备一个所有数据的数组，每次右侧删除变动，可以右侧删除后，左侧数据 = 所有数据.filter（右侧数据）,这样会保持原来的数据顺序不变代码示例关键代码let tableData = allDat...

2021-03-02 14:15:27 1616

原创如何从一个数组中提取某些属性或者做某些操作得到一个新的数组？

业精于勤荒于嬉Array.prototype.map()数组的 map 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。需求：从当前数组中提取出由id/no 组成的新数组并拼接成字符串很多时候在向服务端提交数据时，为了防止异步操作，服务端只接受提交数据的 id ,其他信息服务端通过id 自己查取获得因此只需要通过 id 拼接的字符串示例代码 let array = [{ name: 'aaa', ..

2021-03-02 13:57:14 956

原创 CSS 设置元素不可点击

问题来源此问题的来源，在于使用element ui 的穿梭框时默认穿梭框的header 部分点击后会默认全部选中，在隐藏了checkbox 选中元素后点击header 部分仍然会全部选中问题解决css 中找到对应的类名 header 或者 checkbox 都可以设置：pointer-events: none;...

2021-02-26 16:11:35 597

原创 JavaScript 中 get 请求 query 参数含 ‘&’ 怎么办 encode

积跬步至千里目录今日问题解决办法转义使用 URL 编码其他字符含义今日问题项目中医院名称导入不标准，包含了 ‘&’ 符号，想通过搜索接口查询看看，发现 likeName = '&',拼接好的 URL 在请求时被吃掉了，导致没有达到搜索目的。const likeName = "&"let url = "xxxx?likeName="+likeName+'&flag='+xxx 以上我们希望的是li...

2021-02-24 14:28:59 1025

原创开发中千万不要轻视空格

积跬步至千里简单例子开发中由于自己的格式代码方式有问题，可能一不小心加了空格，有些加空格可能不受影响，但有些时候加空格就会出现失效，导致错误。<template><div> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sync="dialogVisi.

2021-02-23 16:16:27 170

转载保存与获取cookie和session中的数据

一、cookie与session的区别1.Cookie通俗讲，是访问某些网站后在本地存储的一些网站相关信息，下次访问时减少一些步骤。更准确的说法是：Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一服务器，是在客户端保持状态的方案。2.Session存在服务器的一种用来存放用户数据的类HashTable结构。浏览器第一次发送请求时，服务器自动生成了一HashTable和一Session ID来唯一标识这个HashTable，并将其通过响应发送到浏览器。浏览器第二次发送请求会将

2021-02-22 19:43:09 1562

原创微信小程序开发指南

业精于勤荒于嬉微信小程序开发可以说是前端的必备技能，但我认为，技术这种东西真的是可遇不可求，工作中能够遇到那真的是幸运的事，很多技术自己私下扩展，无奈工作中不能展示，基本处于了解的状态了。在做Android的时候就了解了微信小程序，是时候整理整理更近一步了。什么是微信小程序额，微信小程序就是你所用的所了解的那样，依赖微信App的生态环境，类似嵌在微信App中的一种小的app mini program,基于微信的生态，微信提供了很好的支持，有功能强大的组件 API 可以用，微信小程序生态，达.

2021-02-20 14:15:34 556 2

转载前端安全系列之二：如何防止CSRF攻击？

背景随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。前端安全近几年，美团业务高速发展，前端随之面临很多安全挑战，因此积累了大

2021-01-18 15:26:14 425

转载前端安全系列（一）：如何防止XSS攻击？

前端安全随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。近几年，美团业务高速发展，前端随之面临很多安全挑战，因此积累了大量的实践

2021-01-18 15:15:49 935

原创 HTTPS 比 HTTP 更安全为什么不一直使用HTTPS呢

业精于勤荒于嬉既然HTTPS 那么安全可靠，那么为何所有的Web网站不一直使用HTTPS呢？其中一个原因是，因为与纯文本的通信相比，加密通信会消耗更多的CPU及内存资源。如果每次通信都加密，会消耗相当多的资源，平摊到一台计算机上时，能够处理的请求数量必定也会随之减少。因此，如果是非敏感信息则使用HTTP通信，只有在包含个人信息等敏感信息数据时，才利用HTTPS加密通信。特别是每当那些访问量较多的Web 网站进行加密处理时，他们所承担着的负载不容小觑。在进行加密处理时，并非对所有的内容都.

2021-01-14 10:18:39 407 1

原创 npm ERR! Cannot read property ‘match‘ of undefined

Vue项目 npm i 报错npm ERR! Cannot read property 'match' of undefined ，此时需要把package-lock.json文件删除，再次运行npm 命令就正常了。npm ERR! Unexpected end of JSON input while parsing near '...ght":"^2.1.0","clipbo' 接着就有了这个问题，不说话执行命令 npm cache clean --force ,再安装就可以了...

2021-01-13 10:32:28 1088

原创前端不能不知道的HTTP状态码

业精于勤荒于嬉概述HTTP 状态码负责表示客户端HTTP请求的返回结果，标记服务器端的处理是否正常、通知出现的错误等工作。借助状态码用户可以知道服务器端是正常处理了请求还是发生了错误。...

2021-01-11 14:36:27 169

原创是时候好好了解了解Web及网络基础了

业精于勤荒于嬉一、在网页浏览器（Web Brower）地址栏输入URL时，页面如何呈现客户端--------------》在地址栏输入URL之后信息会被送往某处 ---------------》然后从某处得到回复，内容就会被显示在web 页面上客户端-------------》通过制定的访问地址获取服务器资源------------------》通过HTTP 协议通的通信得到反馈那么问题来了客户端和服务端的通信总要有个规范，不然走丢了怎么办，信息传丢了怎么办呢？Web ...

2021-01-08 11:04:06 93

原创前端 BFC ，一些小例子帮助理解

想都是问题，做才有答案BFC 这个对我来说有点抽象的东西，看着MDN 上的解释以及小例子似乎明白了一点，把小例子代码贴出来接着体会。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BFC 测试</title> <!-- 为bo.

2020-12-25 16:30:23 111

转载前端知识，什么是BFC？

前端知识，什么是BFC？BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。视觉格式化模型视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未.

2020-12-25 16:17:12 1206

原创《被讨厌的勇气》阅读摘录&总结

Merry Christmas没有局限就没有故事，没有故事就没有存在任何合理的存在都是有局限性的，这或许是因为存在不仅是静态的，它还是一个“成为”的过程。“成为”意味着成长或者变化，而这只可能发生在有限的存在中。生活的压力不会因为你遭受了不幸就停止出现，每天要做的事情还是得做。每天留出一些时间来集中思考和讨论所有的危机和应对方式，其他时间就忘掉这些事情。如果你不限制危机事情对你的影响，最后就只会筋疲力尽。你需要保存实力，因为这是一场战争，而不是一次战斗。你需要.

2020-12-25 13:57:05 605

原创 export和export default的区别？

使用上的不同export default xxximport xxx from './'export xxximport {xxx} from './'

2020-12-25 13:38:04 110

原创前端禁止按钮多次点击连续提交的方法

积跬步至千里一般情况下，如果代码质量和网络环境都还不错的情况下，基本点击了一个按钮向后台提交数据后，就会有响应的提交提示，但是如果出现不稳定的情况，可能就会出现点一次后台还没响应完成，又点击提交了一次，会造成数据多次的提交，怎么防止双击或者连续点在后台没有响应之前多次提交呢？答案就是自己设置一个标识为，作为开关阀门，其实这就是JS 中的节流，没错就是节流。节流的时间段就是本次和后端交互没有得到相应之前拒绝再次访问小例子 <script> let flag.

2020-12-17 10:22:54 2589

转载浏览器是如何工作的：Chrome V8让你更懂JavaScript

关注前端开发博客，回复“加群” 加入我们一起学习，天天进步文章来源：https://segmentfault.com/a/1190000037435824 V8 是由 Google 开发的开源 JavaScript 引擎，也被称为虚拟机，模拟实际计算机各种功能来实现代码的编译和执行。上图清晰版记得那年花下，深夜，初识谢娘时为什么需要 JavaScript 引擎 ...

2020-12-16 11:23:36 584 2

原创《关键对话:如何高效能沟通（原书第2版）》摘录及总结

书中自有黄金屋读书给我带来的改变可以称之为蜕变，我是一个一遇到问题总是从自己身上找原因的人，因为不自信，很自卑，总觉着自己有问题，因此会经常分析自己的处事说话方式，但是在没有读更多书之前，我知道自己的某种接人待物的方式不对，但是却也不知道怎么不对，应该怎么改进，为什么会出现这种不对的方式。读的书越来越多，不仅了解到了一些方法，还明白了一些内部原因。因为之前读的书太少了，现在每读一本书，特别是这种精典的畅销书，都是实践加总结的结果，每一本都颇有收获，而《关键对话》这本书，都是与每个人的生活息息相关.

2020-12-10 17:16:53 1944

build-tools-26

关于facebook原生广告的集成