![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 50
wang_9909
每天进步一点点,成长足迹看得见。
展开
-
axios配置:错误重试以及设置拦截器,以Csdn为例
前端开发项目是,必不可少的就是要能发送数据请求,而常用安装请求的js库就非Axios莫属了。接下来,就开始进行配置。下面以对csdn请求为例。原创 2023-02-27 23:34:57 · 1114 阅读 · 1 评论 -
react: input 输入框 中文onChange事件异常问题& 对input输入进行防抖处理
当我们使用Input时,我们可能会遇到一个问题,比如需要对用户输入的内容进行搜索时,当用户处于中文输入时,明明没有对内容进行确认,为什么会触发了onChange事件呢?input的防抖操作如何解决呢?原创 2023-02-25 22:21:45 · 3862 阅读 · 0 评论 -
whistle 一个神奇的前端调试工具(抓包\代理工具)
神奇的whistle,免费的调试工具。原创 2023-02-10 17:46:57 · 2403 阅读 · 0 评论 -
加密图片本地解密后使用blod文件打开
加密图片本地解密后使用blod文件打开原创 2023-01-20 16:59:56 · 630 阅读 · 0 评论 -
React的父传子、子传父通信与状态提升
react的状态管理用顺手了,今天有个小业务可以通过简单的父子组件之前通信完成,但是,当我想用这个知识点时,竟然“摸键盘忘记语法了”。真的好尴尬啊。原创 2021-12-23 21:49:36 · 552 阅读 · 0 评论 -
原生微信小程序实现的UI效果:tab导航栏与内容联动
原生微信小程序可以实现一些UI效果,例如:tab导航栏与内容联动原创 2021-12-20 21:37:22 · 649 阅读 · 0 评论 -
获取浏览器的所在经纬度、联网状态、充电状态,一个Navigator全部都可以实现
获取浏览器的所在经纬度、联网状态、充电状态,一个Navigator全部都可以实现原创 2021-12-14 15:05:04 · 713 阅读 · 3 评论 -
React与Redux Toolkit的简单使用、ts环境中一些常见问题的解决方案
安装创建react+redux的TS环境(最佳实践) 无须再安装redux、redux-thunk、react-redux、immer等,默认就已经集成了@reduxjs/toolkit的Redux架构create-react-app react-admin --template redux-typescript参考链接:https://github.com/reduxjs/cra-template-redux-typescript代理库...原创 2021-12-10 20:20:39 · 2641 阅读 · 3 评论 -
安装create-react-app教程及简单配置
create-react-app,是一个很好的脚手架。react入门的最佳选择。原创 2021-12-03 10:16:32 · 3819 阅读 · 0 评论 -
Redux使用中间件radux-thunk与redux-logger
redux默认不支持异步调接口, redux的store如果接收到了一个非action={type,payload}的信号时,会报错. 那该怎么办呢? 使用redux-thunk来解决问题. redux-thunk这个中间件作用是在store收到信号时对"信号"的数据类型进行判断,如果function类型,redux-thunk就调用这个funciton并把dispatch传递这个function,还会拦截掉这个function, 所以这个function就不会抵达reducer.原创 2021-12-01 19:55:00 · 621 阅读 · 0 评论 -
react使用Redux进行状态管理
Reduxredux是React技术栈使用最为广泛的状态管理怎么学习Redux记住“三个三”第一个“三”(3个api):createStore、combineReducers、applyMiddleware第二个“三”(3个特点):单一数据源、store只读、使用reducer纯函数修改store第三个“三”(3个概念):State、Action、Reducer安装Redux npm i redux react-redux -SRedux的简单案例redux的状态管理配置原创 2021-11-30 21:57:03 · 1045 阅读 · 0 评论 -
React 路由以及状态管理的用法
React 路由(react-router-dom)以及状态管理(mobx)的用法原创 2021-11-29 20:59:27 · 586 阅读 · 0 评论 -
对axios请求进行封装,设置请求拦截和响应拦截
开发时需要前后端联调,必不可少的就是前后端的数据通信,其中axios使用最为频繁。虽然,axios原生就能调用接口。但是,在传递参数和接受数据时,原生的那些简单配置就不太能胜任了。譬如,有些接口需要进行鉴权或者其他操作,返回的数据也需要我们来进行处理。于是,对axios进行一些定制的封装就显得尤为重要了。原创 2021-11-27 10:57:35 · 1457 阅读 · 0 评论 -
React 高级技巧用法笔记
学一门框架,首先要熟悉官方文档,不然框架总会学得有所欠缺。尤其当使用过React一段时候后,对此深有体会。于是便依据官方文档做了以下的学习笔记。原创 2021-11-25 19:50:04 · 1347 阅读 · 0 评论 -
使用node.js的koa框架上传图片等文件,文章末尾有下载地址
需要的依赖文件有一下四个使用npm安装即可。上传js函数upload.jsconst fs = require('fs');const path = require('path');class UpLoad { static async upLoadImg(ctx) { const file = ctx.request.files.file //前端传过来的文件img参数 const readStream = fs.createRead..原创 2021-11-08 17:49:44 · 1021 阅读 · 0 评论 -
使用nodejs的koa框架连接MongoDB数据库,并封装数据请求。 文章结尾有项目代码可供免费下载
1.安装koanpm init -y //初始化项目npm i koa //安装koa框架原创 2021-11-05 17:15:23 · 400 阅读 · 0 评论 -
error Expected indentation of 8 spaces but found 6 indent 报错解决方案
敲代码爆红是一件很烦的事,而因为一些代码缩进报错爆红则更令人心烦,如下图所示。为了解决这一问题,笔者选择了最为简单粗暴的方法 ,将首行缩进验证给注释掉。这里推荐大家搜索 indent 这个关键字,然后找到和我这个类似的地方,将其注释掉。重启项目看看是否解决,若没有则再找到下一处进行注释,直至没有报缩进错误时为止。注意:注释后必须重启服务,因为修改配置文件后需要重启才会生效。如下图所示。然后代码ctrl+s报存就不爆红了。如此就没有那令人烦恼的红色的。当然,...原创 2021-11-04 21:38:00 · 5013 阅读 · 0 评论 -
vue使用keep-alive切换页面,2种方法实现页面保持滚动位置 底部有代码可供下载
1.使用自定义指令一、在main.js中编写一个自定义指令import Vue from 'vue'import App from './App.vue'import router from '@/router'Vue.config.productionTip = falseVue.directive('scroll', function(el,bind,VNode){ el.style.overflow = 'scroll' el.addEventListener('scr原创 2021-11-03 18:28:23 · 794 阅读 · 0 评论 -
JavaScript中Map与every方法的奇妙使用:判断页面中协议是否全部被勾选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-19 17:54:36 · 318 阅读 · 0 评论 -
MongoDB简单实用的使用教程
简介参考文献,菜鸟教程:MongoDB 教程 | 菜鸟教程MongoDB 是由C++语言编写的非关系性数据库(也叫NoSQL),是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。NoSQL(NoSQL =Not Only SQL ),意即"不仅仅是SQL"。MongoDB 将数据存储为一个文档,数据结构由键值对(key=>value)集合组成。MongoDB 是介于关系数据库和非关系数据库之间的产品,是非关系数据库中功能最丰富,最像关系转载 2021-10-14 20:42:01 · 529 阅读 · 0 评论 -
使用Express 应用程序生成器,快速创建node.js的express项目
1.初始化npmnpm init -y2.快速创建express查看node.js的版本号node -vC:\Users\wangge\Desktop\express-generator>node -vv14.17.5Node.js 8.2.0 及更高版本使用这个。因为我的node版本号高于8.2.0,所有我使用下面的命令下载express。npx express-generator后面的直接按y就行了。对于较老的 Node 版本,请通过 npm 将 E..原创 2021-10-13 17:42:30 · 690 阅读 · 0 评论 -
node.js的Express框架使用教程
我们都知道,node.js可以做服务器开发页面。但是使用原生的node.js开发比较“繁琐”。所以,我们可以使用node.js的一个较为成熟的Express框架开发。首先,我们需要在安装node,相信大家都安装过了。怎么安装就不说了。这里就直接开始使用Express的。一、准备开发1.初始化npmnpm init -y2.下载Expressnpm i express -S二、创建一个简单的Express.js文件index.jsconst express = r原创 2021-10-11 21:19:19 · 814 阅读 · 0 评论 -
webpack打包安装(三)之解决css、js等的兼容性问题
我们都知道浏览器对一些css以及js语法有一些兼容性的问题,为了解决这些兼容性问题我们可以在webpack构建时安装工具去解决兼容性问题。我们可以使用browserslist1.browserslist和之前的依赖文件一样,我们需要对其进行配置,在webpack.config.js中,增加browserslist。其中:“>1%”表示市场占有大于1%的"last 2 version"表示最新的2个版本"not dead"表示依然还在运行并更新的浏览器2.postcs原创 2021-10-05 15:27:05 · 1029 阅读 · 0 评论 -
webpack打包安装(二)之Loader的配置(样式)
首先我们要明白webpack为什么需要使用Loader?因为webpack不能直接处理CSS、图片等资源,需要使用Loader进行处理。1.CSS-Loader我们需要对一些css文件进行处理,所以我们导入了css-loader包进行处理。首先我们安装一下开发环境依赖。npm i css-loader -D同样我们在webpack.config.js中进行配置,使其webpack能识别css文件类型。我们可以测试一下 css-loader导入css样式时是否出...原创 2021-10-03 14:23:18 · 429 阅读 · 0 评论 -
npm 更新命令失败的解决方法
我们可以看到错误提示为如下表示,这个信息表示我们可能是因为防病毒软件的保护而导致出现了npm安装出错的。npm错误!操作系统拒绝了该操作。npm错误!该文件可能已在使用中(由文本编辑器或防病毒软件),npm错误!或者您没有访问它的权限。npm错误!npm错误!如果您认为这可能是权限问题,请仔细检查npm错误!文件及其包含目录的权限,或尝试运行npm错误!以root/Administrator身份再次执行该命令。npm错误!此运行的完整日志可在以下位置找到:这时,我...原创 2021-09-29 20:08:59 · 3493 阅读 · 0 评论 -
实现代理跨域方法:通过uni云函数实现跨域
最近想用网上的一些野生接口获取一些数据,因此就准备使用一些方法实现跨域首先考虑的就是使uni云函数实现跨域。为什么第一个考虑的就是uni云函数,就是因为它有一个最吸引人的有点:“免费”。话不多说,我们直接开始uni代理操作,首先我们需要点击后面的链接下载uni云函数的支柱HBuilderX HBuilderX-高效极客技巧。HBuilderX 成功下载后我们就可以去 https://unicloud.dcloud.net.cn/login 注册一个账号。...原创 2021-09-28 19:41:13 · 2074 阅读 · 1 评论 -
JavaScript代码禁止H5页面的缩放
话不多说直接看代码//禁止页面缩放 window.addEventListener('mousewheel', function(event){ if (event.ctrlKey === true || event.metaKey) { event.preventDefault(); } },{ passive: false}); //firefox window.addEventListene.原创 2021-09-15 20:21:35 · 300 阅读 · 0 评论 -
Visual Studio Code 运行命令行,无法加载文件 C:\**.ps1,因为在此系统上禁止运行脚本的解决方法
突然发现了Visual Studio Code默认以Windows PowerShell运行命令行。于是,我将命令行修改为Command Prompt运行,nodemon就运行成功了。原创 2021-09-14 08:41:31 · 1493 阅读 · 0 评论 -
JavaScript正则表达式基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.原创 2021-08-31 21:32:43 · 178 阅读 · 0 评论 -
JavaScript:Es6中的解构赋值之一——对象
在ES6中对象也是可以解构赋值的。对象赋值:变量必须与属性同名,才能取到正确的值,当没有对应的属性时,则为undefined。let { aa , aaa }={ aaa:123132 , aa:555 }console.log( aa , aaa ) //555 123132let {foo} = {bar:"5121"}console.log(foo) //undefined1.对象方法简写对象方法可以使用解构赋值来简写。例如:JavaScript在调试时会使用到cons原创 2021-08-28 16:07:07 · 432 阅读 · 0 评论 -
JavaScript:Es6中解构赋值之一——数组
过去对值进行赋值时会使用var定义属性。var a = 1, b = 2, c = 0;Es6中新增了可以将属性/值从对象/数组中取出,赋值给其他变量的方法——解构赋值。1.按对应顺序的赋值[a, b, c] = [1, 2, 3]console.log(a, b, c) //1,2,3[a, b, c] = [[], 2, {f: 12}]console.log(a, b, c) //[] 2 {f: 12}[a, b, c] = [1, 2]consol原创 2021-08-28 14:56:18 · 315 阅读 · 0 评论 -
JavaScript使用数组的reduce方法计算购物车的金额
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2021-08-24 21:05:36 · 870 阅读 · 0 评论 -
利用ES6的生成器(Generator)创建迭代器
当我们对伪数组使用for...of循环时,会报错。例如:定义一个伪数组。因此,当我们需要对伪数组进行循环取值时,我们可以尝试给伪数组定义一个数组迭代方法。迭代器var arr = { 0: 'a', 1: 'b', 2: 'c', length: 3, *[Symbol.iterator]() { //*生成器 var index = 0; //初始化index while (index < this原创 2021-08-24 19:51:46 · 154 阅读 · 0 评论 -
JavaScript使用数组的every与forEach方法实现 全选以及取消全选功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.原创 2021-08-20 09:27:58 · 844 阅读 · 0 评论 -
使用JavaScript输出从0开始到500以内的一个随机数的回文数。
话不多说直接上代码与运行的结果//回文(例如:121、151、888等)var num = parseInt(Math.random() * 500);for (var i = 10; i <= num; i++) { let str = i + ''; if (str.split("").reverse().join() == str.split("")) { //这个地方为重点,看懂这里。回文对你来说就没任何难度了。 //解题思路:.原创 2021-08-17 21:44:17 · 1654 阅读 · 0 评论 -
使用FormData对表单(文本框、下拉框、密码框、单选框、多选框等)数据进行获取,简单高效
当我们需要对表单数据进行上送时,经常会使用一些dom操作获取每个input的内容,原创 2021-08-17 21:34:58 · 1644 阅读 · 0 评论 -
js获取地址栏中的“查询字符串”(URL参数)值
面试笔试题遇到了好多次这个,实际开发中也碰到过这个需求。因此,我简单的理了一下思路。下面就会一个简单的代码进行获取URL参数var prestr= location.search;//获取当前地址栏中的“查询字符串”值var str =prestr.slice(1);//截取?后面的字符串var json={}; //定义一个空的对象进行接收if(str.includes('&')){ //判断是否有多组参数 若有则进行split切割生成多个参数数组 var p...原创 2021-08-11 09:03:53 · 530 阅读 · 0 评论 -
js获取本地文件(图片、word文档等)并获取其Base64化的编码,可用于本地文件上传至服务器
在实际开发中,我们有时需要开发一些上传文件的功能,本地文件如何上传?这可能是困扰很多开发人员的一个小问题。现在,我们就用一个input file来解决这个小问题。我们在页面可能先用这个定义一个上传文件的按钮,后面怎么优化就看你们的业务要求了。 <input type="file" name="" id="files">接下来就是核心的JavaScript环节了,我们这里以图片举例。files.onchange = function () { //定义一个匿..原创 2021-08-10 19:04:42 · 47048 阅读 · 0 评论 -
数组的forEach方法的原理 ——回调函数, 从代码逻辑理解数组的forEach的使用
var arr = [1, 5, 2, 8, 6, 3, 4, 8]//forEach原方法arr.forEach((item,index)=>{ console.log(item,index)})console.log('***********')//自定义数组的forEach的方法arr.forEach1 = function (callback) { for (let n = 0; n < arr.length; n++) { // con.原创 2021-08-09 19:14:54 · 656 阅读 · 2 评论 -
监控鼠标与键盘事件 js
//鼠标点击document.addEventListener('click', function (e) { console.dir(e)})//鼠标右键菜单document.addEventListener('contextmenu', function (e) { e.preventDefault() //取消鼠标右键菜单})//禁止鼠标选中事件document.addEventListener('selectstart', function (e) { e.preventDe原创 2021-08-01 19:33:57 · 599 阅读 · 0 评论