<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Sandy_zhi的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Sandy_zhi</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Sandy_zhi]]></copyright><item><title><![CDATA[yntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/126522645</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/126522645</guid><author>Sandy_zhi</author><pubDate>Thu, 25 Aug 2022 14:08:02 +0800</pubDate><description><![CDATA[node node-sass sass sass-loader]]></description><category></category></item><item><title><![CDATA[node express 静态资源托管]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125855196</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125855196</guid><author>Sandy_zhi</author><pubDate>Mon, 18 Jul 2022 17:03:52 +0800</pubDate><description><![CDATA[通过服务器的部署我们是怎么访问到页面的那.nodeexpress的静态资源托管。]]></description><category></category></item><item><title><![CDATA[Node.js 内置模块 fs 实现文件读写操作]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125847395</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125847395</guid><author>Sandy_zhi</author><pubDate>Mon, 18 Jul 2022 14:51:42 +0800</pubDate><description><![CDATA[上篇文章已经可以搭建一个简单的node服务器了,那么在实际应用中那面会用到文件读写,特别是在前端没有数据库支持进行接口模拟的情况下,读写文件响应数据便非常有用.]]></description><category></category></item><item><title><![CDATA[Node 简单搭建服务器]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125783359</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/125783359</guid><author>Sandy_zhi</author><pubDate>Mon, 18 Jul 2022 11:40:15 +0800</pubDate><description><![CDATA[作为前端开发能自己动手搭建一个本地服务器真的太有必要了。使用 node  内置模块 和 express 框架 来动手搭建一个简单的服务吧。]]></description><category></category></item><item><title><![CDATA[el-tree 数据懒加载实现异步搜索]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/124970222</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/124970222</guid><author>Sandy_zhi</author><pubDate>Wed, 25 May 2022 17:53:09 +0800</pubDate><description><![CDATA[天气晴 有风 温度适宜


背景

Element UI el-tree 官方对于数据量大希望异步加载的数据 支持懒加载, 懒加载会依赖 load 方法,自动触发加载,
]]></description><category></category></item><item><title><![CDATA[CSS 实现地图点位Marker]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/122967442</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/122967442</guid><author>Sandy_zhi</author><pubDate>Wed, 16 Feb 2022 17:10:05 +0800</pubDate><description><![CDATA[对我来说写静态页面是相对于逻辑比较弱一点的，分析来说还是平时写的不够多，毕竟CSS 是练出来的。


不是特别复杂的内容，只是自己这方便比较薄弱，简单记录一下，保存一个demo。


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0".]]></description><category></category></item><item><title><![CDATA[解决el-table 树形结构expand 操作后 stripe 显示失效问题]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/121944821</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/121944821</guid><author>Sandy_zhi</author><pubDate>Wed, 15 Dec 2021 10:14:08 +0800</pubDate><description><![CDATA[昨天是挫败感较大的一天，因为好久没有真正的精进技术了，事件循环机制 、nextTick 之前条件反射都会想到的问题，昨天竟然被困住了。


问题背景

项目中用到了el-table的树形结构，table 设置了 stripe 栅格属性，但是由于有展开行，展开后table 按照展开后的所有数据进行了栅格设置，但当展开收起时，栅格的设置是没变的，会导致看上去有写地方栅格失效。如下图：



在ElementUI 文档看了el-table 的方法，没有什么可以设置的，项目中用的懒加载，数据也不在tableDa..]]></description><category></category></item><item><title><![CDATA[前端原生拖拽（drag & drop）的一点小总结]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/121922229</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/121922229</guid><author>Sandy_zhi</author><pubDate>Tue, 14 Dec 2021 14:02:22 +0800</pubDate><description><![CDATA[新工作中，第一个手生的功能，遇到了很多诡异的问题，今天终于解惑了。最终原因还是对代码没有透彻的了解，jquery的运用也不熟练导致的。小心的记录一下。


原始功能

    对项目列表中的元素进行拖拽，拖拽到一定的位置，根据放置位置做一些相应的处理（具体不分析）。实际使用时根据自己需求作相应处理就可以了。

官方参考及常用API

HTML 拖放 API - Web API 接口参考 | MDN

项目中用到的事件方法

dragstart : 开始拖拽一个元素，被拖拽元素监听事件

drag...]]></description><category></category></item><item><title><![CDATA[Vue 项目打包时提取代码 git commit 信息]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/118608280</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/118608280</guid><author>Sandy_zhi</author><pubDate>Fri, 09 Jul 2021 15:56:25 +0800</pubDate><description><![CDATA[业精于勤 荒于嬉


需求描述

前端项目经常打包，发包部署，有可能存在不确定发包的版本是哪一个，于是想要将代码打包时的代码信息也就是commit 信息 提取出来作为参考。

具体实现

1、获取git commit 信息

git 信息的获取指令 参考 官方文档是一切

https://git-scm.com/docs/git

https://git-scm.com/docs/git-show



git show format选项：

%H 提交对象（commit）的完整哈希字串
	%h 提交对象.]]></description><category></category></item><item><title><![CDATA[JavaScript 知识碎片[四] async / await]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/118541359</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/118541359</guid><author>Sandy_zhi</author><pubDate>Wed, 07 Jul 2021 11:31:10 +0800</pubDate><description><![CDATA[业精于勤 荒于嬉


async await 是什么？

async 函数是对Generator 函数的改进，也就是generator 函数的语法糖，它建立在Promise 上，并且与所有现有的基于Promise 的 API 兼容。

1、async 声明一个异步函数（async function someName(){....}）

2、自动将常规函数转换为Promise,返回值也是一个Promise对象

3、只有 async 函数 内部的异步操作执行完，才执行 then 方法制定的回调函数

4、异.]]></description><category></category></item><item><title><![CDATA[Echarts 雷达图 极坐标 及 折线图的完美结合]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116753244</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116753244</guid><author>Sandy_zhi</author><pubDate>Thu, 13 May 2021 16:11:33 +0800</pubDate><description><![CDATA[实践出真知


效果图



心路历程

大多数时候，使用echarts 就是参考示例图，根据需求进行改造，更多的研究就是在配置项的配置，看到没有的示例还真的是有一点点慌，但是怎么看需求的样式都是那么的合理，实用，所以我想一定是可以实现的，因为它并非不常见。怎么办呢，研究，找到方法之后，最终的实现还是轻松的。

需求分析

Q:是雷达图吗？

A:第一眼看上去，是雷达图，因为他有指示器，分割线都是雷达图的效果

Q:发现一个问题，效果图是有断点没有完全连接在一起的，但是雷达图是没有断点连接，而且没有值或者.]]></description><category></category></item><item><title><![CDATA[＞ webpack-dev-server  internal/modules/cjs/loader.js:960   throw err；   ^  Error: Cannot find module]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116492886</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116492886</guid><author>Sandy_zhi</author><pubDate>Fri, 07 May 2021 14:59:17 +0800</pubDate><description><![CDATA[&gt; 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 版...]]></description><category></category></item><item><title><![CDATA[webpack 基础理解[二]之常用loader  & plugin]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116307421</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116307421</guid><author>Sandy_zhi</author><pubDate>Fri, 30 Apr 2021 17:46:00 +0800</pubDate><description><![CDATA[业精于勤 荒于嬉


webpack 中 常用的 loader

css 模块化：关键 modules:true


 rules: [{
                test: /\.css$/,
                //     loader: 'css-loader'
                //     // loader 的执行顺序是从后向前面
                //     //  webpack 遇到自己不认识的文件时 ，先去module找 ，定义的规..]]></description><category></category></item><item><title><![CDATA[webpack 基础理解[一]]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116306758</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/116306758</guid><author>Sandy_zhi</author><pubDate>Fri, 30 Apr 2021 17:34:04 +0800</pubDate><description><![CDATA[好久好久好久 没有更新优快云 了 ，四月两次奔波回家，转项目组，加班，整个时间被工作和紧张情绪充斥，现在现在，终于可以喘口气，整理记录webpack 系列。


webpack 是什么？干什么？

webpack 是构造工具，怎么构造？就是 把浏览器不认识的一些文件 或者支持不好的文件 ，编程成浏览器认识的文件或者代码。

webpack 里的基础配置

webpack 默认打包配置

：webpack 在打包的时候会去找webpack.config.js 文件，如果没有，走自己默认的配置。


// .]]></description><category></category></item><item><title><![CDATA[自定义穿梭框实现详解  table 穿梭框]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114304269</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114304269</guid><author>Sandy_zhi</author><pubDate>Wed, 03 Mar 2021 13:47:50 +0800</pubDate><description><![CDATA[业精于勤 荒于嬉


需求：

element 的 穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了

思路：

封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式

A：什么样式？

Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了

A：展示的数据格式？

Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据，

A : 其他逻辑功能分析？

Q：你需求的穿梭框需..]]></description><category></category></item><item><title><![CDATA[什么是BFC？看这一篇就够了]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114286869</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114286869</guid><author>Sandy_zhi</author><pubDate>Tue, 02 Mar 2021 15:51:57 +0800</pubDate><description><![CDATA[BFC 定义


BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。


在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

Box：css布局的基本单位


Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display ]]></description><category></category></item><item><title><![CDATA[从一个数组中根据条件过滤得到一个新的数组]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114283782</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114283782</guid><author>Sandy_zhi</author><pubDate>Tue, 02 Mar 2021 14:15:27 +0800</pubDate><description><![CDATA[积跬步 至千里


Array.prototype.filter()

filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。



需求：自定义table穿梭框，数据左右切换时，左侧的数据顺序保持不变

思路：左侧数据+右侧数据 = 所有数据 ，保持顺序不变 准备一个所有数据的数组，每次右侧删除变动，可以右侧删除后，

左侧数据 = 所有数据.filter（右侧数据）,这样会保持原来的数据顺序不变



代码示例 关键代码

let tableData = allDat...]]></description><category></category></item><item><title><![CDATA[如何从一个数组中提取某些属性或者做某些操作得到一个新的数组？]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114283254</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114283254</guid><author>Sandy_zhi</author><pubDate>Tue, 02 Mar 2021 13:57:14 +0800</pubDate><description><![CDATA[业精于勤 荒于嬉


Array.prototype.map()

数组的 map 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。



需求：从当前数组中提取出由id/no 组成的新数组并拼接成字符串

很多时候在向服务端提交数据时，为了防止异步操作，服务端只接受提交数据的 id ,其他信息服务端通过id 自己查取获得 因此只需要通过 id 拼接的字符串

示例代码


 let array = [{
            name: 'aaa',
         ..]]></description><category></category></item><item><title><![CDATA[CSS 设置元素 不可点击]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114137783</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114137783</guid><author>Sandy_zhi</author><pubDate>Fri, 26 Feb 2021 16:11:35 +0800</pubDate><description><![CDATA[问题来源

此问题的来源，在于使用element ui 的穿梭框时 默认穿梭框的header 部分 点击后会默认全部选中，在隐藏了checkbox 选中元素后 点击header 部分 仍然会全部选中

问题解决

css 中找到 对应的类名 header 或者 checkbox 都可以

设置：pointer-events: none;
...]]></description><category></category></item><item><title><![CDATA[JavaScript 中 get 请求 query 参数含 ‘&’ 怎么办    encode]]></title><link>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114021007</link><guid>https://blog.youkuaiyun.com/Sandy_zhi/article/details/114021007</guid><author>Sandy_zhi</author><pubDate>Wed, 24 Feb 2021 14:28:59 +0800</pubDate><description><![CDATA[积跬步 至千里


目录

今日问题

解决办法 转义 使用 URL 编码

其他字符含义



今日问题

   项目中医院名称导入不标准，包含了 ‘&amp;’ 符号，想通过搜索接口查询看看，发现 likeName = '&amp;',拼接好的 URL 在请求时被吃掉了，导致没有达到搜索目的。


const likeName = "&amp;"

let url = "xxxx?likeName="+likeName+'&amp;flag='+xxx


  以上我们希望的是li...]]></description><category></category></item></channel></rss>