自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端江湖

记录前端开发知识,难题,好玩的事情

  • 博客(39)
  • 收藏
  • 关注

原创 js怎么加密密码进行发送?js使用RSA加密

前端接口安全方面,我们在注册登录时需要对密码等信息进行加密传输,下面是使用非对称加密算法RSA进行加密的方法使用。

2024-06-05 00:30:37 503

原创 js怎么获取浏览器url中的参数?

这个方法可以用在微信公众号开发中,获取url的code来换取token,传递回调地址自定义参数等。段,即问号后面的参数,那么我们在js中怎样才能根据参数名获取其值呢?进行传值,也就是在url中的。在网页开发中有时侯我们通过。

2024-06-05 00:02:19 290

原创 js怎么根据出生日期计算年龄?js计算日期间隔

为字符串类型的出生日期,主要是对两个日期的年月日一一分别进行比较计算,方法返回周岁年龄,如果传入的日期晚于当前日期则返回。在用户主页信息展示中,有一个需求是根据用户填写的出生日期,计算出年龄,现用Javascript写一个方法进行实现。,请自行进行错误提示处理。

2024-05-30 01:47:03 503

原创 js怎么根据邮箱跳转到邮箱登录页面?

在使用邮箱作为注册验证时,发送了注册邮箱验证码后,为了让用户能快捷地登录邮箱查看邮件,这时需要我们根据接收验证码的邮箱给出对应的邮箱登录页url。获取到邮箱登录页URL后,我们给出一个弹窗提示“立即前往邮箱查看验证码”,点击后跳转到该URL,用户不需要自己去搜邮箱登录页了。

2024-05-30 00:27:40 318

原创 js 对象内的方法this不指向对象?js对象中this指向的问题

在JavaScript中,方法内的this指向是动态的,它取决于函数的调用方式。在对象内的方法被调用时,this通常指向调用该方法的对象。但是,如果方法被其他方式调用(例如,作为回调函数或使用apply/call改变this的绑定),this可能会指向其他对象。如果在对象内的方法中this不指向该对象,常见的原因是因为使用了不正确的调用方式,例如使用了箭头函数或者方法被提升到了全局作用域。

2024-05-28 23:58:32 308

原创 js怎么判断是否为手机号?js格式校验方法

数据格式正确与否是表单填写不可避免的一个流程,现整理一些较为常用的信息格式校验方法。

2024-05-28 23:56:08 1263

原创 js怎么保存用户登录信息?js cookie操作封装

封装好cookie操作工具类,开箱即用。在web开发中,用户登录后需要保存登录信息进行身份识别,登录后的操作都需要带上身份信息请求接口。保存登录信息有多种方法,这里使用cookie进行操作。

2024-05-27 18:27:05 520

原创 js怎么生成验证码?js生成指定长度的随机字符串

在项目中经常有生成随机字符串的需求,比如验证接口签名、验证码(Node.js发送短信或邮箱验证码、生成图片验证码),我们可以使用Javascript生成随机字符。

2024-05-27 00:23:14 345 1

原创 js怎么隐藏手机号中间4位数字?js脱敏字符串脱敏去除敏感字符

除了上述几个信息外,在金融系统中还有对用于余额、账号、卡号、身份证号、住址信息等也有脱敏的需求,只需将以上方法稍加修改即可实现。用户信息模块相关的信息,出于信息安全的因素考虑,经常要求对信息进行脱敏后进行展示。以下是常用信息的脱敏方法。姓名脱敏、手机号脱敏、邮箱脱敏、敏感词脱敏在系统中较为常见,实现方法也较为简单,主要是对字符串进行匹配替换。

2024-05-26 23:23:19 354

原创 js计算字符串大小存储所占字节数

在JavaScript中,计算字符串所占的大小(占用的字节数)并不直接,但可以通过一些方法间接得到。我们需要知道一个前提,英文字母lenght和字节数是一样的:都是1,而中文lenght=1字节数=2。因此,需要把中文字符的字节数计算出来,方法如下。

2024-05-26 22:59:15 1156

原创 React useState基本类型变量的使用

在 React 中,useState 是一个 Hook,用于在函数组件中添加状态,它可以让函数组件拥有状态。

2024-05-25 14:21:50 279

原创 React useState数组新增和删除项

在React中,我们可以使用useState钩子来管理组件的状态,其中包括数组。如何在React函数组件中对数组进行增加和删除项的操作?新增项时:我们可以对原数组进行解构,并把新增项一起加入到新数组;删除项时:我们使用 Array.filter() 进行筛选删除指定项。

2024-05-25 13:48:55 1042

原创 React useState修改对象

在 React 中,useState 是一个 Hook,它可以让函数组件拥有状态。当想要改变一个对象类型的状态时,我们需要使用展开运算符(...)或者 Object.assign 来确保状态是正确地更新。

2024-05-25 12:52:21 584

原创 npm install报错: https://registry.npm.taobao.org/: certificate has expired

如果打印出来的是 https://registry.npmmirror.com,则说明已经设置成功。再次执行之前的安装依赖命令,就能成功拉取依赖包啦!#设置新的淘宝源npm镜像。#查看 npm 当前设置。

2024-03-19 23:50:01 1672

原创 苹果电脑MacOS连接使用移动硬盘

苹果电脑不是高配版本的情况下,随着使用越来越久存储会不太够用。这时候使用移动硬盘是一种比较常见的选择。移动硬盘买回来时默认是NTFS格式,也就是windows系统的文件格式,苹果电脑能读取硬盘文件,但不能写入。

2023-04-25 18:36:15 2589

原创 React项目引入使用Tailwindcss

在React项目中使用 Tailwind CSS,需要安装tailwind,配置tailwind,配置项目使用tailwind,样式文件引入tailwind,最后可以在组件中写tailwind样式类进行开发。在 tailwind.config.js 文件中,配置 purge 选项指定所有的 components 文件,使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

2023-04-15 00:44:04 2154 2

原创 还在使用eject命令配置React项目?快来试试craco

使用 Create-React-App 创建的项目,我们可以使用 eject 命令来弹出配置项,但eject命令是不可逆的,执行命令后需要自己管理配置项目。更新 package.json 文件中的 scripts,将 eject 以外的所有脚本都用 craco 代替 react-scripts。craco是一个用来重写覆盖使用 Create-React-App 配置的工具。在项目根目录新建 craco.config.js 文件,并在这个文件中进行配置。

2023-04-14 15:16:28 610

原创 CSS布局之网格布局-display: grid; display: inline-grid;

CSS布局有很多种类型,float浮动布局,flex弹性盒子布局,百分比布局,圣杯布局,双飞翼布局,表格布局。网格布局和table布局有相似之处,但又比之灵活。

2023-04-03 00:01:07 607

原创 .nvmrc文件是什么?.nvmrc文件怎么使用?

这就需要一个管理项目node.js版本的方法,自动切换node.js版本的方法,.nvmrc该上场了!在我们开发vue,或者react的时候,项目需要用到指定版本的node.js,这时我们可以使用nvm去管理多个版本的node.js。举个例子,在当前目录下,让nvm指定18.12的最新发布版本,最新发布的LTS版本,最新发布的node版本。在有.nvmrc文件项目,打开vscode的集成终端,会发现已经自动运行nvm use,命令行有相应的输出。文件的字符串告诉 nvm 使用哪个版本的node.js。

2023-03-25 12:24:54 8196 4

原创 怎么新建Vue项目?怎么打包发布Vue项目?

这一步就已经是正式进入vue项目的创建了,也十分简单,打开终端执行以下命令,回车后按提示输入项目名,再把接下来的选择全部直接回车就好了!以上命令已经把项目基本目录结构和文件准备好了,现在要做的就是根据你的需求,用组件去搭建实现应用了。非常简单,安装好之后打开终端进行验证,以下命令都能正常输出版本号就成功了!辛辛苦苦码的代码,不能只在自己的电脑上能看到,也要展示出去让其他人看吧!这一步是开始把项目跑起来,可以在浏览器打开进行浏览你的vue项目了!好,现在就打开你的 vscode 敲代码吧!

2023-03-24 20:05:09 161

原创 从0开始学react系列 - 第二节: 组件化搭建博客首页

https://react.dev/learn/react-developer-tools,按照你用的浏览器进行安装,如果是chrome浏览器点击就直接在扩展页面进行安装了。开始之前我们先安装好浏览器 react开发者工具,安装之前打开react项目时,控制台会有一段提示输出让我们安装开发者工具。sass语法教程:https://www.sass.hk/guide/,使用sass可以方便进行样式嵌套,定义变量等操作。由于兼容性的问题,我们安装4.14.1版本,注意需要检查对应符合的 node.js版本。

2023-03-22 01:01:28 130

原创 HTML5 canvas画布画直线

HTML5新元素之一 canvas,定义使用 JavaScript 的图像绘制,只需要简单几步就能用js在canvas中画图。为了让canvas元素更直观地显示出来,我们加上边框样式。在html页面声明canvas标签。

2023-03-20 23:59:11 427

原创 nginx日志管理 - 日志切割、自定义日志字段,清理日志

nginx默认配置中有一个名为 main log格式,里面包含了很多字段,有些可能不是我们想要了解的信息,可以删减,也可以增加其他字段。例如下面配置了一个 my_blog的日志规则。http{# nginx日志修改时间格式为年月日时分秒$time_iso8601 生成格式:2019-04-20T09:24:35+08:00$time_local 生成格式: 20/Apr/2019:09:24:13 +0800。

2023-03-19 20:07:56 869

原创 从0开始学react系列 - 第一节: 搭建环境+创建项目

终端提示 webpack 编译成功,浏览器也自动打开访问 localhost:3001了(我这里因为有另一个项目占用了3000,所以自动切换到3001端口了,全新启动的是3000端口的),项目脚手架初始化的页面成功展示出来了。如果提示 node.js版本过低,要求node.js14以上版本,重新安装达到要求的版本,或者使用nvm切换到高版本。因为上面我们已经执行 create-react-app,所以已经创建好项目,这时我们就不能重复create了,否则提示目录已经存在。安装了nvm的情况下,执行。

2023-03-18 14:53:46 174

原创 node.js版本管理工具nvm的安装和使用

当我们使用新的前端框架时,经常会提示我们某个工具需要更高版本的node.js,但是现有的一些旧项目又需要依赖旧版本的node.js。于是nvm应运而生,它是专门用来管理node.js版本的工具。有了它我们可以在不同的项目中使用不同的版本,也可以在终端很方便地切换版本来进行匹配不同的环境。有安装教程,在macOS上是一样的安装。这里只做macOS或者linux的安装介绍,windows的可以自行查找安装。会输出所有的 node.js 版本,此处只截图一小部分。在项目中一般以上命令就可以满足开发需求了。

2023-03-18 08:00:00 293

原创 阿里云服务器安装ftp服务,客户端FileZilla管理文件

vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点。我们经常需要在测试服务器上部署开发好的更新,安装一个ftp工具来管理文件比较方便,现在就来看看看怎么使用FileZilla连接centos管理文件。

2023-03-17 21:03:07 492

原创 阿里云centos从0开始部署node.js应用+mysql+pm2+yarn

1、购买阿里云主机后,登录阿里云管理控制台,在云服务器ECS实例中重置实例密码和远程登录密码。2、在云服务器ECS实例中打开网络和安全组,设置端口开放规则。回车,输入密码进行登录。3、安装node.js。

2023-03-17 18:42:48 718

原创 阿里云服务器CentOS安装redis

您只能从运行Redis的计算机127.0.0.1(localhost)连接到Redis服务器。恭喜,您已在CentOS 7服务器上成功安装了Redis。如果使用单个服务器设置,并且应用程序和Redis在同一台计算机上运行,则不应启用远程访问。恭喜,这时您已经在CentOS 7服务器上安装并运行了Redis。如果您的服务器上禁用了IPv6,则Redis服务将无法启动。仅当您要从远程主机连接到Redis服务器时,才执行以下步骤。此时,Redis服务器将接受TCP端口6379上的远程连接。用您的IP地址替换。

2023-03-16 07:30:00 308

原创 阿里云服务器centos安装nginx,配置vue项目,开启nginx反向代理

主要配置文件:/etc/nginx/nginx.conf 指向:/etc/nginx/conf.d/default.conf。1.查看文件目录是否做默认目录(/usr/share/nginx/html)下,一般出现这个问题,是因为文件不在默认文件夹下。模块所在目录:/usr/lib64/nginx/modules。访问日志:/var/log/nginx/access.log。错误日志:/var/log/nginx/error.log。默认站点目录:/usr/share/nginx/html。

2023-03-15 21:04:02 346

原创 npm更新版本失效, npm version patch, npm version minor, npm version major, npm update

首次发布自己的依赖到npm上,新增优化一些功能后想更新给使用者,但是遇到更新失效?在开发中遇到要更新依赖的时候,用npm update却怎么都安装不上?这篇文章或许能帮助你完成上传更新和下载更新。

2023-03-14 17:11:28 2347

原创 怎么发布npm包以及npm的使用

随着越来越多新技术的涌现,当我们项目中需要引用js库或框架的时候,打开一个个官网下载文件放进项目中需要耗费很大的时候和精力,效率十分低下。无论是开发vue,react还是小程序,现在都能通过 npm来进行库和框架的引用和管理,极大的提高开发效率和减少出错的风险。

2023-03-13 23:30:27 322

原创 MacOS环境配置 .zshrc .bashrc .bash_profile

每当学习一门新技术的时候,其中一个最大的拦路虎就是环境安装配置,比如java,安卓,比如php都需要安装和配置一大堆工具,安装不顺利的时候无疑会在我们的热情上浇一头冷水。这不,最近打算学习Flutter开发,光是安装配置就捣鼓了好几天,现在记录下来Mac环境变量的配置。在安装好 java sdk 之后,如果我们需要运行 javac 对 java文件进行编译,首先需要打开shell,然后通过执行 java 安装目录的bin目录下的命令工具。配置好环境变量,那我们就可以在任何目录下直接输入命令就可以执行。

2023-03-12 18:08:38 12068

原创 MacOS安装flutter开发环境

在任何屏幕构建apps。Flutter是一个谷歌开源框架,用一套代码就可以构建优美的,本地编译的,多平台应用。我们先来安装好开发环境,开启学习之旅。

2023-03-12 00:24:02 1274

原创 阿里云服务器CentOS上安装Node.js

在服务器CentOS 7上安装Node.js 的方法: 通过NVM(Node version manager)安装,源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和这四种方法,其中,源码安装,已编译版本安装两种方法基本上都是Linux通用的安装方式,特别是源码安装,其优点是可以安装最新的版本。

2023-03-11 00:16:18 917 3

原创 商城优惠券模块设计与实现

优惠券作为营销获客的常用手段,无论是什么平台基本上都有它的身影。接下来从优惠券是什么,有什么类型,该怎么设计等方面展开说明。

2023-03-10 16:33:16 401

原创 node.js爬虫获取新闻TOP10

随着各种APP和网页的使用的增多,我们查看资讯就需要打开各个APP进行查看,耗时且耗费我们很多精力。很多时候我们想要把数据收集起来,放在自己的系统中进行统一展示输出。数据收集的方法由手工记录,剪贴报,截图,手工复制粘贴等传统方法,这里我们尝试使用 node.js 来对信息进行采集处理成我们需要的格式供我们使用。

2023-03-09 17:05:35 275

原创 webpack入门学习与配置说明

从零开始一步步使用配置webpack,首先安装webpack,然后在terminal终端或者cmd通过命令传入参数使用,再通过配置文件来对复杂项目进行打包。一步步循序渐进熟悉webpack的这个工具。

2023-03-09 14:31:09 117 1

原创 js性能优化之DocumentFragment文档片段

在javascript中每当对DOM进行一次操作如插入删除元素,会触发浏览器重新解析和渲染。对DOM反复操作会导致页面重绘、回流,效率非常低,并且页面可能会被卡死。当你需要一次性进行多次DOM插入操作时,使用DocumentFragment可以减少浏览器重新解析。向DOM添加元素有逐项插入法,innerHTML属性赋值替换法,DocumentFragment文档片段一次性添加法,setTimeout分段添加法。

2023-03-09 14:03:26 299

原创 Element-ui之ElScrollBar组件滚动条的使用

在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致,于是产生了灵感:能否使用element使用的滚动条组件呢?带着这个问题我们看这篇文章。

2018-04-25 15:18:27 86589 8

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除