前端模块开发
文章平均质量分 69
个人实战等内容分享
三知之灵
这个作者很懒,什么都没留下…
展开
-
[node] Node.js 中Stream流
Stream 是一个抽象接口,Node 中有很多对象实现了这个接口。例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出)Readable - 可读操作Writable - 可写操作Duplex - 可读可写操作Transform - 操作被写入数据,然后读出结果所有的Stream 对象都是 EventEmitter的实例。data - 当有数据可读时触发end - 没有更多的数据可读时触发。原创 2023-11-29 23:24:25 · 467 阅读 · 0 评论 -
[node] Node.js的Web 模块
Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。大多数 web 服务器都支持服务端的脚本语言(php、python、ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器。目前最主流的三个Web服务器是Apache、Nginx、IIS。原创 2023-11-29 23:23:59 · 1319 阅读 · 0 评论 -
[node]Node.js事件
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。所有这些产生事件的对象都是 events.EventEmitter 的实例。原创 2023-11-29 23:22:40 · 906 阅读 · 0 评论 -
[node]Node.js多线程
每个子进程总是带有三个流对象:child.stdin, child.stdout 和child.stderr。以上发现多次执行main发现执行输出内容的顺序有时不同,结果不仅仅是上述两种结果,与子进程退出的速度有关。返回的对象拥有ChildProcess实例的所有方法,还有一个内建的通信信道。child_process.exec 使用子进程执行命令,缓存子进程的输出,多次执行发现同spawn的示例一样,也有多种执行结果,与子进程的退出程序有关。以下对上述方法详细说明。原创 2023-11-29 23:21:16 · 1321 阅读 · 0 评论 -
[vue-router]vue3.x Hash路由前缀问题
最先想到是路由本身的问题,然后考虑到路由线上也是使用的,如果路由存在问题,则线上线下都应该有问题。本地时,以上两种情况均可正常查看页面,然后担心线上产品有同样问题,赶紧查看,发现添加后报错。因为该问题仅存在于本地,还没有找到合理的解释与解决方案,因此仅仅先做个记录。是在本地开发时,使用的HASH路由,然后在偶然的情况下在。该问题只存在于本地,不影响线上!前添加了前缀,发现不影响本地的路由的使用?那么就是本地开发设置的脚手架问题?最大的不同是脚手架不同。原创 2023-11-08 20:37:31 · 450 阅读 · 0 评论 -
[模块]ES6与cjs的混合开发
因为最早使用的CJS(CommonJS)规范开发,后来随着ES6规范的开始,大部分的库陆续转化成ES6的规范,但是部分仍旧是使用的CJS的规范,在一个ESM的项目中使用了CJS的模块,就导致了项目的混合开发。CJS 与 ESM规范在使用上有非常多的不同之处,下面是本人一个CJS的项目升级到ESM规范的过程中遇到的各种问题。ESM可以直接 importCJS 模块,越来越多的库使用ESM,建议新项目优先使用ESM规范。,但是如上所说ESM 是下一代的标准,所以逐渐的nodejs使用ES6的方式越来越方便。原创 2023-11-08 20:32:02 · 432 阅读 · 1 评论 -
[前端]动态加载问题-按条件加载
而ES通过import方式加载mock文件,当通过三目表达式或if判断是否加载mock文件时flag失效,不论 flag 是什么都会加载mock文件的,思考并测试了一下,发现只要。可以根据条件判断是否需要加载某些文件,例如当开发环境的时候我们需要加载 MOCK 文件或者不需要加载 MOCK 文件的情况,可以根据设置的 MOCK 的开关来决定是否需要加载。内部判断都会导致flag失效,都会编译import语句实现文件的加载,但是flag判断是发生在。以上是wepack方式。原创 2023-11-08 20:31:09 · 157 阅读 · 0 评论 -
jekins发布时报错
环境说明主要是jekins发布前端项目,但是暂时不支持node环境,因此使用了java套壳的方式,引用一些maven插件,进行对前端项目进行打包错误信息Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) on proje...原创 2023-09-16 23:50:38 · 212 阅读 · 0 评论 -
[npm]Unable to authenticate need BASIC realm=Sonatype Nexus Repository Manager
然后.npmrc 文件中出现//nexus.xxx.xx/repository/npm-group/:_authToken NpmToken.73ba43bd-dd91-3746-90bf-6d1f583385d2。设置 npm 的 token。原创 2023-09-16 23:46:47 · 619 阅读 · 0 评论 -
[prettier]代码格式化
主要是实现代码格式化,最好在不同的编辑器中遵守相同的格式化规则。原创 2023-09-16 23:43:37 · 1058 阅读 · 1 评论 -
[工具包]Commander.js 使用说明 & 问题总结
这是在使用过程中发现的一个问题,在网上没有找到解决方案,经过反复实验,终于定位到了问题所在,记录一下定义的删除命令program.command('del <name>').description('delete command')//描述.alias('d <name>')//缩写.action((name) => { require('../comm...原创 2023-09-16 23:38:48 · 193 阅读 · 1 评论 -
[mockjs]-mockjs的使用
Mock主要是用于前后端分离时,模拟交互时的返回数据接下来介绍一下其它几种Mock的方式。原创 2023-09-16 23:26:42 · 249 阅读 · 0 评论 -
[mockjs]Mock使用过程中的坑
该方式是直接对mockjs中/src/mock/xhr/xhr.js文件进行修改,但是该方式只有原作者修改并上传才不会影响下次的使用,否则更改的是本地的,对于每次初始化时重新下载了mockjs无法从根本上解决。mockjs源码导致了文件流被responseType:'json’解析了,因此无法正确识别,因此,我们只需在将转换为json的response.data重新转换为需要的类型。在使用了 mockjs 的情况下,接收到的response.data不是文件流,而是string类型。原创 2023-09-16 23:26:13 · 532 阅读 · 0 评论 -
[npm]npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.
打开nodejs的安装位置,打开npm.cmd、npx.cmd文件,并将每个文件中的 prefix -g 替换成 prefix --location=global。虽然只是警告,但是每次使用npm命令,都输出警告提示也是非常麻烦的。在通过node版本升级的过程中出现以上警告,是node升级问题。原创 2023-09-16 23:24:14 · 55 阅读 · 0 评论 -
[npm] npx 介绍与使用说明
比如,我临时需要使用 create-react-app 这个模块,但是仅仅使用一次,之后都用不到了,那么如果全局安装,会造成存储资源的浪费,虽然事后可以删除但是我需要多操作一步,并且不能忘记,而 npx 可以使用该工具包,并且使用完成后自动删除。我们知道当我们想要使用一个工具包的命令的时候,我们需要全局安装工具包,然后再执行该工具包的命令,但是如果我们只是当前项目需要使用,那么工具包都全局安装,久了会导致全局目录越来越庞大,npx 可以解决该问题。-c 参数的另一个作用,是将环境变量带入所要执行的命令。原创 2023-09-16 23:23:40 · 904 阅读 · 1 评论 -
npm常用命令系统介绍
之前介绍过一些常用的,如果是初始的使用上文已经够用这里是第二次整理常用的 npm 的命令,一个是对 npm 的理解更加深入,同时也是一些不常用命令的学习,更加是一些内容的融会贯通。原创 2023-09-15 22:58:21 · 1335 阅读 · 0 评论 -
[交互]接口与路由问题
这是在实战开发过程中遇到的一个问题,所以导致产生了服务端如何区分浏览器请求的是前端路由还是 api 接口的问题??原创 2023-09-15 22:57:44 · 438 阅读 · 0 评论 -
[交互]前端展示服务端获取的图片
表示响应的数据以blob对象的形式返回。在响应成功的回调函数中,将响应的二进制数据转换为Blob对象,并根据Blob对象生成图片URL,最后将图片URL赋值给图片元素的。在响应成功的回调函数中,将响应的二进制数据转换为Blob对象,并根据Blob对象生成图片URL,最后将图片URL赋值给图片元素的。以上虽然设置了blob但是根本上还是图片以二进制的形式传输的,因为所有非json格式,均可以以blob接收在转换成对应格式的图片或文件。发送请求:使用axios发送HTTP请求,获取图片文件的二进制数据。原创 2023-09-15 22:51:12 · 1163 阅读 · 1 评论 -
[工具包]jscodeshift-代码批量修改的工具
关于这个代码集或者库官网解释是一个可以大批量自动修改代码,但是仍需要人工检测与干预的工具。那么 jscodeshift 又与Codemod有什么关系?jscodeshift 是一个 Javascript 的Codemod工具,因为可能存在修改java等其它语言的Codemod工具;原创 2023-09-15 22:47:44 · 249 阅读 · 1 评论 -
[npm]脚手架本地全局安装1
该文章是你的脚手架已经开发完成的前提下,你想要本地全局安装该脚手架,便于本地使用脚手架的命令的情况。原创 2023-09-15 22:45:26 · 597 阅读 · 0 评论 -
[npm]npm包的分类
node 与 npm 是一体的,只要安装了 node 的环境,那么你就可以使用 npm 命令,npm 是一个包管理工具;自从可以使用 npm 后,npm 库中增加了各种包,我们可以从中找到各种已经实现的实用的包,而不必自己去开发实现了。npm 库中的包分为工具包与功能包:工具包:是可执行的命令,可以在终端运行,实现某些功能,主要是开发阶段被使用例如,初始化一个项目,编译文件等等,我们通常使用的脚手架就是工具包的一种功能包:主要是在项目业务中被引用,实现某个功能,是任何环境(开发或生产)都需要的。原创 2023-09-15 22:44:05 · 247 阅读 · 0 评论 -
[npm]package.json文件
因此,需要一种机制,在模板安装的时候提醒用户,如果 A 和 B 一起安装,那么 B 必须是 2.0 模块。如果某个版本的改动较大,并且不稳定,可能如法满足预期的兼容性需求,就需要发布先行版本,先行版本通过添加内容在版本号的后面,通过 “-” 号连接分隔的标识符和版本编译信息:内部版本(alpha)、公测版本(beta)和候选版本(rc,即 release candiate)。当 npm 包发布时,files 指定的文件会被推送到 npm 服务器中,如果指定的是文件夹,那么该文件夹下面所有的文件都会被提交。原创 2023-09-15 22:43:15 · 1835 阅读 · 0 评论 -
[DB]数据库--lowdb
早期版本,由于是基于lodash的,与 lodash 是一体的,所以可以直接调用lodash的方法。在ES6的写法中,由于引入的方式不同,所以已经不能直接使用lodash的方法,需要先对数据的链式化。在js服务端使用 lowdb 存储数据,例如express创建的服务中,通过lowdb处理数据。上可以查看所有可以使用的方法,可以对文件中获取到的数据使用lodash方法操作。可用于在json中存储数据,大小一般为0~200M的json文件。方便简单的数据存储,快速的实现数据的增删改查。原创 2023-09-15 22:42:01 · 804 阅读 · 1 评论 -
[DB]数据库简介
DBMS,Database Manager System,数据库管理系统本文主要是对数据的存储做一个概念性的讲解。Node.js 应用一般有三种方式保存数据。原创 2023-09-15 22:39:40 · 389 阅读 · 0 评论 -
nginx设置转发未生效问题
经过反复测试发现,转发的地址不能以。原创 2023-08-05 12:35:45 · 1812 阅读 · 1 评论 -
[nginx]-项目部署与实战3
一定要注意,server 中的location /的根目录一定要与部署项目的文件夹名称对应上, root html/folderName,如果你是直接将要部署的项目内容直接拷到了 html 文件夹下,那么配置依然是 root html,不需要修改。对于vue等开发的项目,打包后的文件夹为dist,整个文件夹主要是html+css+js组成的静态资源,我们直接使用整个文件夹,如果之前部署过相同名称的文件夹,可以将文件夹的名称修改了,只要和之后配置文件中的根路径配置正确即可。或者根据性能选择不同的服务器?原创 2023-03-21 20:55:30 · 166 阅读 · 0 评论 -
[nginx]-配置文件2
如果你是直接将要部署的项目内容直接拷到了 html 文件夹下,那么配置依然是。默认的 nginx 的配置文件 default.conf。的根目录一定要与部署项目的文件夹名称对应上,一定要注意,server 中的。原创 2023-03-21 20:52:52 · 53 阅读 · 0 评论 -
[nginx]-安装与使用1
当我们修改了nginx的配置文件nginx.conf 时,不需要关闭nginx后重新启动nginx,只需要执行命令 nginx -s reload 即可让改动生效。nginx的配置文件是conf目录下的nginx.conf,默认配置的nginx监听的端口为80,如果80端口被占用则无法启动,可以修改为未被占用的端口即可。(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可。有很多种方法启动nginx。下载后解压,解压后如下。原创 2023-03-21 20:53:57 · 152 阅读 · 0 评论 -
[实战]上传文件的实战问题
对于第一种场景一般没有什么问题,但是第二种情况就可能有一些无法预测的操作–例如已经选择了文件后,此时用户并没有直接点击上传按钮,而是编辑了源文件,之后才点击上传按钮,这种场景下是否可以正常上传?本人使用的是 nginx 部署的网站服务,而 nginx 默认是有文件大小限制的,nginx 拒绝上传大于默认大小的图片,导致了错误,所以设置了。该问题是在图片上传的时候遇到的,服务端一直没有接受到上传的文件,检查了方法发现没有问题,服务端也没有打印上传图片的日志?上传编辑文件:以上版本上传的是编辑前的文件。原创 2023-03-21 20:49:55 · 226 阅读 · 0 评论 -
[前端].browserslistrc文件解析
.browserslistrc文件使用说明.browserslistrc文件文件解析> 1%last 2 versionsnot dead该文加并不是vue文件独有的,因为该文件相当于一个通用文件.browserslistrc文件> 1%last 2 versionsnot deadnot ie 11文件解析package.json 文件里的 browserslist 字段 (或单独的 .browserslistrc 文件),指定项目的目标浏览器的范围。这个值会被 @babel原创 2023-02-22 21:38:20 · 811 阅读 · 0 评论 -
[qiankun]-多页签缓存
[qiankun]-多页签缓存环境功能需求多页签缓存方案方案1.主服务进行html替换方案2.微服务vnode 替换方案3.每个微服务都不卸载微服务加载方式的选择微服务的路由路径选择微服务的缓存工具微服务的容器使用tab作为微服务的挂载容器使用微服务路由作为微服务的挂载容器场景描述微服务的缓存缓存微服务删除微服务不同路由同一微服务情况管理系统比较常用的一个功能就时多页签的缓存,我们通过缓存已经打开的页签,并在切换页签的时候看到之前的查询结果,在关闭页签的重新点击菜单那时,看到的是新的没有查询记录界面环境原创 2023-02-22 21:21:56 · 2258 阅读 · 1 评论 -
[qiankun]-图片加载问题
[qiankun]-图片加载问题开发版本图片加载报错现象描述分析解决方案base64的展示格式静态资源的展示方式取消hash的取值方式,并在主应用中添加图片设置图片的绝对路径根据环境动态设置图片的绝对路径nginx转发方式开发版本"vue": "^3.2.45","qiankun": "^2.8.4"图片加载报错现象描述主服务加载子服务的时候,子服务的图片有些可以正常展示,有些无法正常展示分析使用浏览器的开发者工具,发现可以展示的图片是打包后使用base64的格式展示的,不能展示的图片是因原创 2023-02-22 21:20:44 · 1723 阅读 · 1 评论 -
[qiankun]-部署后线上问题
[qiankun]-部署后线上问题微服务加载问题-现象1现象描述问题分析解决方案微服务加载问题-现象2现象描述问题分析微服务加载问题-现象3现象描述分析解决方案属于项目打包后,部署到服务器上,所遇到的部分问题微服务加载问题-现象1现象描述项目部署实践中遇到了,登录系统后,初次点击路由进行微服务加载,页面无法加载的问题,但是刷新后正常微服务正常加载路由状态:所有微服务在一个微服务的路由页面统一展示其它公共页面在其它路由中展示问题分析首先确定是否是因为,在注册微服务时,展示微服务的路由容器ID原创 2023-02-22 21:19:47 · 656 阅读 · 0 评论 -
[qiankun]实战问题汇总
[qiankun]实战问题汇总ERROR SyntaxError: Cannot use import statement outside a module问题分析解决方案子应用命名问题问题分析解决方案'jsonpFunction'详细错误信息问题分析解决方案微应用的注册问题`Uncaught Error: application 'cli5-beta6-test-name' died in status LOADING_SOURCE_CODE: [qiankun]: Target container w原创 2023-02-22 21:16:48 · 5482 阅读 · 7 评论 -
[apidoc]Apidoc-文档生成工具
Apidoc主要是用于生成API文档的工具,可以用于多种语言,包括java、javascript、php等这里主要是为了写前端的APIDOC,方便交互是双方的使用;工具的安装工具包的安装npm i apidoc [-g|-D]可以-g全局安装,或者-D局部安装,因为只有开发环境需要apidoc包,因此项目依赖只需要放置在devDependencies中即可VSCODE编辑器的支持,可以在扩展中搜索ApiDoc,最上面的ApiDoc Snippets是最受欢迎的支持工具,可以点击安装APIDO原创 2023-01-15 11:10:25 · 3445 阅读 · 0 评论 -
[qiankun]跨域
问题Access to fetch at ‘https://xxx.xxx.xx.com/’ from origin ‘http://0.0.0.0:8080’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.但是线上却没有该问题,考虑线上的资源的开放性是相同的,那么本地调试时如何解决该原创 2023-01-15 10:56:09 · 6777 阅读 · 0 评论 -
[微前端]微前端的简单介绍
微前端的一个概念性的理解原创 2022-09-09 16:41:10 · 1296 阅读 · 1 评论 -
moment与dayjs的类型判断
moment与dayjs的类型判断dayjs是moment的轻量版本,但是使用的过程中有时需要判断当前数据的类型打印moment()打印dayjs()target=moment()||target=dayjs()typeof dayjs()==‘object’发现dayjs对象,没有一个可以用于判断该值类型的方法,moment可以通过target._isAMomentObject === true判定类型,但是dayjs没有有效的可以表明类型的属性,目前可以通过target.$L==‘en’原创 2022-04-15 02:44:40 · 1728 阅读 · 0 评论 -
[交互问题]axios交互的数值精度丢失问题
axios是用于前后端交互的插件,但是当传递的数值长度过长时会导致数值的精度丢失问题描述axios获取的数据中有超过16位的数字 ,精度会丢失,后面的数据会变为0,确切的说17位的时候,有时数据出现问题,有时没有类型值Number.MAX_SAFE_INTEGERMath.power(2,53)-1=9007199254740991,Number.MAX_VALUE1.7976931348623157 x 10308Number.MIN_SAFE_INTEGER-原创 2022-04-15 02:43:02 · 2034 阅读 · 2 评论 -
[交互问题]XML 解析错误:格式不佳
在数据交互的时候,firefox浏览器发生以上问题,该问题在谷歌浏览器里没有,但是在firefox浏览器中存在,该问题的根本原因时请求的数据类型与响应的数据类型对不上或者格式存在问题,chrome浏览器的兼容性比较强,有时可以自动处理一些问题,例如不小心多了个空格什么的,但是其它浏览器就没有那么强的兼容性,因此会存在报错信息无报错情况1.请求未设置类型,响应也不设置类型,则不会引起该问题,这中没有设置类型的一般都是OPTION,不适用于真正的请求与响应,真正的一般会设置响应类型2.请求与响应类型一.原创 2022-03-29 10:06:58 · 4543 阅读 · 0 评论