马优晨

原创 判断PDF与图片是否可以预览

在JavaScript中，可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载，那么load事件会被触发；如果图片无法访问，error事件会被触发。在这个例子中，checkImageAccessibility函数接收一个图片URL和一个回调函数。Image对象的src属性被设置为这个URL，然后监听load和error事件。当图片加载成功或失败时，相应的处理函数会被调用，并且回调函数会被执行，传递一个布尔值表示图片是否可以访问。

原创 图片和PDF展示预览、并支持下载

第三步：编写FilePreview实现图片和PDF预览组件。展示图片和PDF类型，并且点击图片或者PDF可以预览。第二步：编写downloadcard组件。第一步：遍历所有的图片和PDF列表。

原创 使用throttle防止按钮多次点击

如上图所示，点击按钮，防止按钮点击多次。

原创 Element UI上传图片和PDF，支持预览，并支持复制黏贴上传

这里主要需要再header中设置 'Content-Type': 'multipart/form-data' 还有依赖的Token等字段内容。如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；再次基础上，我们对上面代码进行改造，添加监听past事件。发现图片已经上传到组件中了。

原创 Element UI上传图片和PDF，支持预览

如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；

原创 一个简单的布局

【代码】一个简单的布局。

原创 前端通知组件封装

如果所示，实现如上图效果，点击小铃铛，从右侧展示通知，点击其中一条调到另一个页面；

原创 前端工程化，前端监控，工作流，部署，性能

创建项目的时候，配置下ESlintstylelintprettiercommitlint等;ESLint 是一个静态代码检查工具，用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。在前端开发过程中，ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方，从而提高代码质量。.eslintrcStylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具，可以帮助开发者遵循一致的代码风格和最佳实践。

原创 如何利用AI提高内容生产效率?

在业务开发中会遇到各种个样的问题，怎么才能快速的提高开发效率是每一个人将要面对的；那在现今的AI时代，如何可以使用AI提高内容生成效率这个就是我们现在要讨论的话题；AI在内容生成方面已经展现出了巨大的潜力，可以帮助我们显著提高内容生产的效率。以下是一些具体的方法：AI文章生成器：基于用户输入的关键词或主题，AI文章生成器可以快速生成符合要求的文章。这些生成器通常基于大量的语料库进行训练，能够模仿人类写作风格，生成通顺、连贯的文章。

原创 前端双语实现方案（VUE版）

结构如下en.jszh-CN.jsindex.js。

原创 element UI 设置type=“textarea“ 禁止输入框缩放

时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。注意上图，第一张是可以缩放的，第二章不能缩放的。

原创 制作一个评价卡片

原创 多张固定宽度元素，随着屏幕尺寸变化自动换行

多张固定宽度元素，随着屏幕尺寸变化自动换行。

原创 饿了么实现一行四张卡片

如图实现上面的卡片展示。

原创 轮播卡片切换实现

如上图，实现一个轮播卡片能力，支持手动滑动，手动拖动，已经点击两端切换按钮。

原创 使用jscpd对比重复代码

检查项目中重复的代码，或者代码片段。

原创 使用VS Code Counter统计代码量

项目需要统计每个文件有多少行，有多少行注释，多少行空白；1、在应用中心搜索 VS Code Counter 安装。3、输入Counter。选择对应项目开始计算。

原创 MAC iterm 显示git分支名

要在Mac上的iTerm中显示Git分支名，您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架，它提供了许多有用的功能和插件，包括在终端中显示Git分支名。4、更新iTerm设置：打开iTerm的设置，并确保在“Text”选项卡下选择了“Use system font”选项。2、启用Oh My Zsh插件：在Oh My Zsh插件列表中找到“git”插件，并将其启用。现在，您应该能够在iTerm终端中看到当前活跃的Git分支名。如果您尚未安装这些工具，请先进行安装。

原创 mac下配置git自定义快捷命令

编辑文件 vim .zshrc 按i进入编辑模式，加入 source ~/.bash_profile 后，esc，再输入 :wq 保存退出。在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效。需要重新执行 : source ~/.bash_profile后，才会生效。1、自己是在bash中配置的环境变量，而当前系统使用的是shell。最后输入命令 source ~/.zshrc 刷新刚刚的配置。输出是/bin/zsh，说明使用的是zsh。终端输入：echo $SHELL。

原创 网格布局(大练习)

最近对网格布局研究了一下，写了一个简单的demo。

原创 github鉴权失败

如上图所示 git push 时发生了报错，鉴权失败；

原创 SVELTE调研

SVELTE使用，调用，数据对比，维护，社区等等。

原创 2022年工作架构分析

最常见的表单通过类XML语法定义。一些库支持通过一些特定结构的 JSON (Schema)来生成类XML标签。表单设计器通过可视化编排产出 Schema 数据。所以可以粗略的认为 表单设计器就是Schema设计器。Schema 本身是一个JSON ，Schema 通过一些特定字段描述和定义 JSON的数据结构。schema动态数据。

原创 CLI的使用

抽离自己业务定制的业务（比如：axios,http,图片处理）yoman的generator必须使用名称先初始化一下 tnpm init 然后安装 yeoman-generator 里面包含很多可以使用的方法链接到全局，变成全局模块升级yoman解法降低版本：结果。

原创 Node 使用 MySQL

使用进行安装。

原创 Node RESTful API说明

REST即；表述性状态转移是。满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。

原创 node配置Web 服务器

Web服务器一般指，是指驻留于因特网上某种类型计算机的程序，Web服务器的基本功能就是。大多数都支持服务端的脚本语言（）等，并通过脚本语言从数据库获取数据，将结果返回给客户端浏览器。目前最主流的三个是。

原创 网站构建说明

HTML 4.01CSS 的使用 （样式表）XHTMLXML 和 XSLT客户端脚本服务器端脚本通过 SQL 管理数据Web 的未来HTML 4.01通过 HTML 4.01，所有的格式化信息可以被移出 HTML 文档，转而放入一个独立的样式表中。层叠样式表（Cascading Style Sheets - CSS）样式通常被保存在 HTML 文档之外的文件中。外部样式表使有能力仅仅通过编辑一个简单的 CSS 文档来改变网站内所有页面的外观和布局。XHTML - HTML 的未来。

原创 Font Awesome 5使用

Font Awesome 5 的专业版有7842个图标。要使用免费的Font Awesome 5 图标，您可以选择下载Font Awesome库，或者在Font Awesome注册一个帐户，并获得一个代码（称为KIT CODE），以便在将Font Awesome添加到网页时使用。

原创 TCP/IP 介绍

TCP /IP 是（注释：通信协议是对的规则的描述，只有遵守这些规则，计算机之间才能进行通信。因特网浏览器和因特网服务器均使用 TCP/IP 来连接因特网。浏览器使用 TCP/IP 来访问因特网服务器，服务器使用 TCP/IP 向浏览器传回 HTML。因特网的地址也是 TCP/IP，比如：你的因特网地址 250.250.149.19 也是标准的 TCP/IP 协议的一部分TCP/IP 指传输控制协议网际协议TControlProtocolInternetProtocol。

原创 正则表达式测试（二）

匹配所有的字符，返回一个数组,包含匹配的所有内容，按顺序展开；注意：空格也会被匹配到匹配所有符合的字符，返回一个数组。匹配空白字符匹配非空白字符匹配 空白字符 + 非空白字符如上所示，除了空格其他的字母和数字都匹配到了如上所示，中划线没有匹配到，下划线匹配到了。

原创 正则表达式测试（一）

第三行代码 str.match(patt1) 返回一个数组，实例中的数组包含 5 个元素，索引 0 对应的是整个字符串，索引 1 对应第一个匹配符（括号内），以此类推。最后，第四个括号子表达式捕获 Web 地址指定的路径和 / 或页信息。该子表达式能匹配不包括 # 或空格字符的任何字符序列。只能重复一次该子表达式。默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符，加上 s 之后, . 中包含换行符 \n。第二个括号子表达式捕获地址的域地址部分。子表达式匹配非 : 和 / 之后的一个或多个字符。

原创 什么是 Hooks，React Hooks简单使用

Hooks 译为钩子，Hooks 就是在函数组件内，负责钩进外部功能的函数。React 提供了一些常用钩子，React 也支持自定义钩子，这些钩子都是用于为函数引入外部功能。当我们在组件中，需要引入外部功能时，就可以使用 React 提供的钩子，或者自定义钩子。比如在组件内引入可管理 state 的功能，就可以使用 useState 函数，下文会详细介绍 useState 的用法。通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。名称以 “use” 开头；函数内部调用其他的 Hook。

原创 前端函数式编程基础

函数式编程，是一种编程范式，它将电脑运算视为函数运算，并且避免使用程序状态以及易变对象。比起命令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

转载 掘金上收集的面试题

我觉得这里他给挖坑了，B登录了之后就会返回B用户的token，然后请求头带着的就是B的token，验证到的用户也就是B，我认为没有问题啊。我不太清楚他说的可能会有什么问题值啥情况，可能是我考虑不周全，如果有网友知道可以提醒一下我他想问的答案，让我学习一下。2、你们这项项目中有微信公众号、后台管理端、医生app端和小程序端，有没有提炼出一些公共的工具js，怎么提炼的？5、你做完一个项目之后写一些什么内容，让接手你的人能够看懂你的项目架构，并且迅速上手？1.2、常用的选择器有哪些，优先级怎么样？

原创 函数柯力化模拟

一个函数可以接收多个参数，反复被调用；（返回的始终是函数）

原创 实现ajax重连

实现一个模拟ajax请求，在失败后自动重连。可以传递重试次数和延迟时间！

原创 每日自救学习计划

8：00~9：30 雅思【B站】+china daily。9：30~22：30 技术【博客、学习、阅读】7:00~8:00 早起锻炼 + 新闻财经。22：40~ 23：00锻炼【每日听力】10：30~12：00 工作。19：00~20：00 工作。23：00~23：20洗漱。

原创 h5唤起小程序

自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。在本次规则调整生效前已经生成的URL Scheme，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算。

原创 背景图占满手机全屏

在工作开发中，需要一个背景图占满全屏，这个时候需要怎么处理呢？